import { useMemo, useState } from "react";

const entries = [
  { id: "IS-2026-004", type: "Atemregler-Service", date: "08.05.2026", result: "passed", status: "completed", cost: "CHF 120.00", note: "Service durchgeführt, Dichtheit geprüft, Funktion einwandfrei." },
  { id: "IS-2026-003", type: "Atemregler-Service", date: "12.04.2026", result: "rework_required", status: "corrected", cost: "CHF 35.00", note: "Abblasen an zweiter Stufe, Nacharbeit durchgeführt." },
  { id: "IS-2025-018", type: "Atemregler-Service", date: "14.05.2025", result: "passed", status: "completed", cost: "CHF 115.00", note: "Regulärer Jahresservice." },
  { id: "IS-2024-011", type: "Atemregler-Service", date: "10.05.2024", result: "cancelled", status: "cancelled", cost: "—", note: "Kunde hat Service extern durchführen lassen." },
];

const resultStyles = {
  passed: { label: "Bestanden", bg: "#EAF3DE", color: "#3B6D11" },
  rework_required: { label: "Nacharbeit", bg: "#FCEBEB", color: "#A32D2D" },
  cancelled: { label: "Abgebrochen", bg: "#F1EFE8", color: "#5F5E5A" },
};

const statusLabels = { completed: "Abgeschlossen", corrected: "Korrigiert", cancelled: "Abgebrochen" };
const chip = (style, label) => <span style={{ background: style.bg, color: style.color, fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>{label}</span>;

export default function IS07ServicehistorieJeEquipment() {
  const [resultFilter, setResultFilter] = useState("all");
  const [criticalOnly, setCriticalOnly] = useState(false);

  const filtered = useMemo(() => entries.filter((item) => {
    const resultOk = resultFilter === "all" || item.result === resultFilter;
    const criticalOk = !criticalOnly || item.result === "rework_required" || item.status === "corrected";
    return resultOk && criticalOk;
  }), [resultFilter, criticalOnly]);

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 740, borderRadius: 8, overflow: "hidden" }}>
      <div style={{ background: "#1a1a18", padding: "10px 20px", fontSize: 13, display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ fontWeight: 700, color: "#fff" }}>DiveLogix360</span>
        <span style={{ color: "#888780" }}>Tenant-Portal</span>
        <span style={{ marginLeft: "auto", color: "#fff", borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Inhouse-Service</span>
      </div>

      <div style={{ padding: "20px 24px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <button onClick={() => alert("→ IS-03")} style={backButtonStyle}>← Zurück</button>
            <h1 style={{ fontSize: 20, fontWeight: 500, margin: 0 }}>Servicehistorie je Equipment</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", fontSize: 11, fontWeight: 500, padding: "2px 8px", borderRadius: 20 }}>IS-07</span>
          </div>
          <button onClick={() => alert("→ UC09: Export später")} style={secondaryButtonStyle}>Export vorbereiten</button>
        </div>

        <div style={{ ...cardStyle, marginBottom: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 20 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 700 }}>Atemregler Set A1</div>
              <div style={{ fontSize: 13, color: "#5F5E5A", marginTop: 5 }}>Atemregler · Apeks XTX50 · SN APX-7712 · INV REG-001 · Kunde: Max Muster</div>
              <div style={{ display: "flex", gap: 6, marginTop: 10 }}>{chip({ bg: "#EAF3DE", color: "#3B6D11" }, "Aktiv")}{chip({ bg: "#EAF3DE", color: "#3B6D11" }, "Vollständig")}</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 130px)", gap: 12 }}>
              <Meta label="Letzter Service" value="08.05.2026" />
              <Meta label="Nächste Frist" value="08.05.2027" />
              <Meta label="Einträge" value={entries.length} />
            </div>
          </div>
        </div>

        <div style={{ ...cardStyle, marginBottom: 18 }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <select value={resultFilter} onChange={(e) => setResultFilter(e.target.value)} style={inputStyle}>
              <option value="all">Alle Ergebnisse</option>
              <option value="passed">Bestanden</option>
              <option value="rework_required">Nacharbeit</option>
              <option value="cancelled">Abgebrochen</option>
            </select>
            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "#5F5E5A" }}>
              <input type="checkbox" checked={criticalOnly} onChange={(e) => setCriticalOnly(e.target.checked)} /> Nur kritisch
            </label>
          </div>
        </div>

        <div style={cardStyle}>
          <h2 style={sectionTitleStyle}>Historie / Timeline</h2>
          <div style={{ position: "relative", paddingLeft: 24 }}>
            <div style={{ position: "absolute", left: 8, top: 10, bottom: 10, width: 2, background: "#D3D1C7" }} />
            {filtered.map((entry, index) => {
              const style = resultStyles[entry.result];
              return (
                <div key={entry.id} style={{ position: "relative", marginBottom: index < filtered.length - 1 ? 20 : 0 }}>
                  <div style={{ position: "absolute", left: -23, top: 5, width: 16, height: 16, borderRadius: "50%", background: style.color }} />
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 700 }}>{entry.id} · {entry.type}</div>
                      <div style={{ display: "flex", gap: 6, marginTop: 6 }}>{chip(style, style.label)}{chip({ bg: "#F1EFE8", color: "#5F5E5A" }, statusLabels[entry.status])}</div>
                      <div style={{ fontSize: 12, color: "#888780", marginTop: 6 }}>{entry.date} · {entry.cost}</div>
                      <div style={{ fontSize: 13, color: "#5F5E5A", marginTop: 5 }}>{entry.note}</div>
                    </div>
                    <button onClick={() => alert(`→ IS-03: ${entry.id}`)} style={secondaryButtonStyle}>Öffnen</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function Meta({ label, value }) { return <div><div style={{ fontSize: 10, fontWeight: 700, color: "#888780", textTransform: "uppercase" }}>{label}</div><div style={{ fontSize: 13, color: "#1a1a18", marginTop: 4 }}>{value}</div></div>; }
const cardStyle = { background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: 18 };
const sectionTitleStyle = { fontSize: 16, fontWeight: 600, color: "#1a1a18", margin: "0 0 14px 0" };
const inputStyle = { padding: "8px 12px", fontSize: 13, border: "1px solid #B4B2A9", borderRadius: 6, background: "#fff", outline: "none" };
const backButtonStyle = { padding: "6px 10px", fontSize: 12, background: "transparent", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" };
const secondaryButtonStyle = { padding: "8px 12px", fontSize: 13, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer", fontWeight: 500 };