import { useMemo, useState } from "react";

const events = [
  {
    id: "h-005",
    type: "next_due_updated",
    label: "Nächste Prüfung gesetzt",
    dateTime: "06.05.2026 14:22",
    user: "David",
    order: "TUV-2026-0007",
    provider: "SVTI / Dienstleister Beispiel",
    result: "passed",
    inspectionDate: "06.05.2026",
    nextDue: "06.05.2028",
    reference: "REF-2026-4451",
    note: "Systemvorschlag übernommen. Prüfung bestanden.",
    impact: "Freigabe möglich, nächste Prüfung aktualisiert",
  },
  {
    id: "h-004",
    type: "passed",
    label: "Prüfung bestanden",
    dateTime: "06.05.2026 14:18",
    user: "David",
    order: "TUV-2026-0007",
    provider: "SVTI / Dienstleister Beispiel",
    result: "passed",
    inspectionDate: "06.05.2026",
    nextDue: "06.05.2028",
    reference: "REF-2026-4451",
    note: "Externe Prüfung erfolgreich abgeschlossen.",
    impact: "Sperrwirkung kann aufgehoben werden",
  },
  {
    id: "h-003",
    type: "in_progress",
    label: "Prüfung läuft",
    dateTime: "06.05.2026 11:45",
    user: "David",
    order: "TUV-2026-0007",
    provider: "SVTI / Dienstleister Beispiel",
    result: "in_progress",
    inspectionDate: "—",
    nextDue: "30.04.2026",
    reference: "—",
    note: "Prüfung durch Dienstleister gestartet.",
    impact: "operative Nutzung gesperrt",
  },
  {
    id: "h-002",
    type: "submitted",
    label: "Zur Prüfung eingereicht",
    dateTime: "06.05.2026 10:02",
    user: "David",
    order: "TUV-2026-0007",
    provider: "SVTI / Dienstleister Beispiel",
    result: "submitted",
    inspectionDate: "—",
    nextDue: "30.04.2026",
    reference: "—",
    note: "Sammelabgabe mit drei Positionen.",
    impact: "operative Nutzung gesperrt",
  },
  {
    id: "h-001",
    type: "passed",
    label: "Frühere Prüfung bestanden",
    dateTime: "30.04.2024 09:10",
    user: "Mitarbeiter",
    order: "TUV-2024-0019",
    provider: "Prüfservice Muster",
    result: "passed",
    inspectionDate: "30.04.2024",
    nextDue: "30.04.2026",
    reference: "ALT-2024-883",
    note: "Vorherige Prüfung dokumentiert.",
    impact: "nächste Prüfung gesetzt",
  },
];

const eventStyles = {
  submitted: { bg: "#EEEDFE", color: "#534AB7", label: "submitted" },
  in_progress: { bg: "#E6F1FB", color: "#185FA5", label: "in_progress" },
  passed: { bg: "#EAF3DE", color: "#3B6D11", label: "passed" },
  failed: { bg: "#FCEBEB", color: "#A32D2D", label: "failed" },
  rework_required: { bg: "#FAEEDA", color: "#BA7517", label: "rework_required" },
  next_due_updated: { bg: "#EAF3DE", color: "#3B6D11", label: "next_due_updated" },
  status_changed: { bg: "#F1EFE8", color: "#5F5E5A", label: "status_changed" },
  note_added: { bg: "#F1EFE8", color: "#5F5E5A", label: "note_added" },
};

function Pill({ value, label }) {
  const style = eventStyles[value] || { bg: "#F1EFE8", color: "#5F5E5A", label: value };
  return <span style={{ background: style.bg, color: style.color, borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 }}>{label || style.label}</span>;
}

function Card({ title, children, action }) {
  return (
    <div style={{ background: "#fff", border: "1px solid #D3D1C7", borderRadius: 8, padding: "16px 18px", marginBottom: 14 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <div style={{ fontSize: 10, fontWeight: 600, color: "#888780", textTransform: "uppercase", letterSpacing: 0.5 }}>{title}</div>
        {action}
      </div>
      {children}
    </div>
  );
}

export default function TUEV07PruefhistorieJeEquipment() {
  const [filter, setFilter] = useState("all");
  const [selectedId, setSelectedId] = useState(events[0].id);
  const [message, setMessage] = useState("");

  const filteredEvents = useMemo(() => events.filter((event) => filter === "all" || event.type === filter || event.result === filter), [filter]);
  const selectedEvent = events.find((event) => event.id === selectedId) || filteredEvents[0] || events[0];

  function action(target) {
    setMessage(`Öffnet ${target}.`);
  }

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 860, 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: "#5F5E5A" }}>|</span>
        <span style={{ color: "#888780" }}>Tenant-Portal</span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 16, fontSize: 12 }}>
          <span style={{ color: "#888780" }}>Equipment</span>
          <span style={{ color: "#fff", fontWeight: 500, borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>TÜV-Inspektion</span>
          <span style={{ color: "#888780" }}>Fristen</span>
          <span style={{ color: "#D3D1C7", fontWeight: 500 }}>TSH · MA</span>
        </div>
      </div>

      <div style={{ padding: "18px 24px" }}>
        <div style={{ fontSize: 12, color: "#888780", marginBottom: 12 }}>
          <span style={{ color: "#185FA5" }}>TÜV-Inspektion</span><span style={{ margin: "0 6px" }}>›</span><span style={{ color: "#185FA5" }}>12l Stahlflasche gelb</span><span style={{ margin: "0 6px" }}>›</span><span>Prüfhistorie</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 500, color: "#1a1a18" }}>Prüfhistorie je Equipment</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>TÜV-07</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => action("TÜV-03 oder TÜV-01")} style={secondaryButton}>Zurück</button>
            <button onClick={() => action("EQ-03 Equipment-Detail")} style={outlineButton}>Equipment öffnen</button>
            <button onClick={() => action("TÜV-02 Neue Prüfung einreichen")} style={primaryButton}>Neue Prüfung</button>
          </div>
        </div>

        <Card title="1 · Equipment-Kopf">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14 }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "#1a1a18" }}>12l Stahlflasche gelb</div>
              <div style={{ fontSize: 12, color: "#888780", marginTop: 4 }}>SN 123456 · INV INT-0047 · Stahl · 232 bar · Intern</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
                <span style={equipmentPill}>active</span>
                <span style={qualityPill}>complete</span>
                <span style={okPill}>gültig</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
              <strong>Letzte Prüfung</strong><br />06.05.2026<br />
              <strong>Nächste Prüfung</strong><br />06.05.2028<br />
              <strong>Letzte Prüfstelle</strong><br />SVTI / Dienstleister Beispiel
            </div>
          </div>
        </Card>

        <Card title="2 · Aktuelle Prüfdaten" action={<select value={filter} onChange={(e) => setFilter(e.target.value)} style={fieldStyle}><option value="all">Alle Ereignisse</option><option value="passed">passed</option><option value="submitted">submitted</option><option value="in_progress">in_progress</option><option value="next_due_updated">next_due_updated</option><option value="failed">failed</option><option value="rework_required">rework_required</option></select>}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
            <Stat label="Historie" value={events.length} />
            <Stat label="Bestanden" value={events.filter((event) => event.result === "passed").length} />
            <Stat label="Offene Sperren" value="0" />
            <Stat label="Dokumente" value="UC13" />
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Card title="3 · Timeline / Prüfhistorie" action={<span style={{ fontSize: 11, color: "#888780" }}>{filteredEvents.length} Treffer</span>}>
            <div style={{ display: "grid", gap: 10 }}>
              {filteredEvents.map((event) => {
                const style = eventStyles[event.type] || eventStyles.status_changed;
                const selected = event.id === selectedEvent.id;
                return (
                  <button key={event.id} onClick={() => setSelectedId(event.id)} style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 10, textAlign: "left", padding: 10, borderRadius: 8, border: selected ? `1.5px solid ${style.color}` : "1px solid #F1EFE8", background: selected ? style.bg : "#fff", cursor: "pointer" }}>
                    <span style={{ width: 10, height: 10, borderRadius: 999, background: style.color, marginTop: 4 }} />
                    <span>
                      <span style={{ display: "block", fontSize: 12, fontWeight: 700, color: selected ? style.color : "#1a1a18" }}>{event.label}</span>
                      <span style={{ display: "block", fontSize: 11, color: "#888780", marginTop: 3 }}>{event.dateTime} · {event.user}</span>
                      <span style={{ display: "block", marginTop: 6 }}><Pill value={event.type} /></span>
                    </span>
                  </button>
                );
              })}
            </div>
          </Card>

          <Card title="4 · Ereignisdetails">
            <div style={{ display: "grid", gap: 10, fontSize: 12, color: "#5F5E5A" }}>
              <Detail label="Ereignis" value={selectedEvent.label} />
              <Detail label="Datum/Zeit" value={selectedEvent.dateTime} />
              <Detail label="Benutzer" value={selectedEvent.user} />
              <Detail label="Prüfauftrag" value={selectedEvent.order} />
              <Detail label="Prüfstelle" value={selectedEvent.provider} />
              <Detail label="Prüfdatum" value={selectedEvent.inspectionDate} />
              <Detail label="Nächste Prüfung" value={selectedEvent.nextDue} />
              <Detail label="Referenz" value={selectedEvent.reference} />
              <Detail label="Auswirkung" value={selectedEvent.impact} />
              <div style={{ padding: "8px 10px", background: "#F1EFE8", borderRadius: 8 }}><strong>Notiz:</strong><br />{selectedEvent.note}</div>
            </div>
          </Card>
        </div>

        <Card title="5 · Referenzen / Dokumenthinweise">
          <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
            V1 zeigt strukturierte Referenzen wie Prüfnummer, Prüfstelle und Bemerkung. Prüfberichte und Zertifikate werden für UC13 vorbereitet und hier später verlinkt.
          </div>
        </Card>

        <Card title="6 · Folgeaktionen">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <button onClick={() => action("TÜV-03 Prüfauftrag-Detail")} style={outlineButton}>TÜV-03 Prüfauftrag</button>
            <button onClick={() => action("TÜV-02 Neue Prüfung einreichen")} style={primaryButton}>Neue Prüfung</button>
            <button onClick={() => action("EQ-03 Equipment-Detail")} style={secondaryButton}>EQ-03 Equipment</button>
            {(selectedEvent.result === "failed" || selectedEvent.result === "rework_required") && <button onClick={() => action("TÜV-06 Nacharbeit / nicht bestanden")} style={dangerButton}>TÜV-06 Nacharbeit</button>}
          </div>
        </Card>

        {message && <div style={{ padding: "10px 14px", background: "#EAF3DE", border: "1px solid #A8D08D", borderRadius: 8, fontSize: 12, color: "#3B6D11", marginBottom: 12 }}>{message}</div>}

        <div style={{ padding: "10px 14px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
          <strong>Wireframe-Simulation:</strong> Die Historie ist nur lesend. Korrekturen erfolgen über Fachscreens mit Audit, nicht direkt in dieser Ansicht.
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ background: "#F1EFE8", borderRadius: 8, padding: "10px 8px", textAlign: "center", color: "#5F5E5A" }}>
      <div style={{ fontSize: 18, fontWeight: 700 }}>{value}</div>
      <div style={{ fontSize: 10 }}>{label}</div>
    </div>
  );
}

function Detail({ label, value }) {
  return <div style={{ display: "flex", justifyContent: "space-between", gap: 10, borderBottom: "1px solid #F1EFE8", paddingBottom: 6 }}><strong>{label}</strong><span style={{ textAlign: "right" }}>{value}</span></div>;
}

const fieldStyle = { width: 190, boxSizing: "border-box", padding: "7px 9px", fontSize: 12, border: "1px solid #B4B2A9", borderRadius: 6, background: "#fff" };
const primaryButton = { padding: "8px 14px", fontSize: 12, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 600 };
const outlineButton = { padding: "8px 14px", fontSize: 12, background: "#fff", border: "1px solid #185FA5", borderRadius: 6, color: "#185FA5", cursor: "pointer", fontWeight: 600 };
const secondaryButton = { padding: "8px 14px", fontSize: 12, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" };
const dangerButton = { padding: "8px 14px", fontSize: 12, background: "#A32D2D", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 600 };
const equipmentPill = { background: "#EAF3DE", color: "#3B6D11", borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 };
const qualityPill = { background: "#EAF3DE", color: "#3B6D11", borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 };
const okPill = { background: "#EAF3DE", color: "#3B6D11", borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 };