import { useMemo, useState } from "react";

const rows = [
  {
    id: "r-001",
    order: "TUV-2026-0007",
    title: "TÜV Sammelprüfung Mai 2026",
    provider: "SVTI / Dienstleister Beispiel",
    equipment: "12l Stahlflasche gelb",
    serial: "123456",
    inventory: "INT-0047",
    assignment: "intern",
    customer: "",
    location: "Lager A",
    inspectionDate: "2026-05-06",
    result: "passed",
    nextDue: "2028-05-06",
    reference: "REF-2026-4451",
    status: "passed",
  },
  {
    id: "r-002",
    order: "TUV-2026-0007",
    title: "TÜV Sammelprüfung Mai 2026",
    provider: "SVTI / Dienstleister Beispiel",
    equipment: "10l Aluflasche silber",
    serial: "AL-9001",
    inventory: "INT-0052",
    assignment: "customer",
    customer: "Max Muster",
    location: "Lager B",
    inspectionDate: "2026-05-06",
    result: "rework_required",
    nextDue: "—",
    reference: "REF-2026-4451-B",
    status: "rework_required",
  },
  {
    id: "r-003",
    order: "TUV-2026-0011",
    title: "TÜV Einzelprüfung Stage",
    provider: "Prüfservice Muster",
    equipment: "7l Stage Stahl",
    serial: "STAGE-07",
    inventory: "INT-0074",
    assignment: "intern",
    customer: "",
    location: "Werkstatt",
    inspectionDate: "2026-05-12",
    result: "failed",
    nextDue: "—",
    reference: "FAIL-2026-12",
    status: "failed",
  },
  {
    id: "r-004",
    order: "TUV-2026-0013",
    title: "TÜV Sammelprüfung Juni 2026",
    provider: "SVTI / Dienstleister Beispiel",
    equipment: "15l Stahlflasche blau",
    serial: "15-ST-77",
    inventory: "INT-0063",
    assignment: "intern",
    customer: "",
    location: "Lager C",
    inspectionDate: "",
    result: "open",
    nextDue: "2026-06-15",
    reference: "—",
    status: "submitted",
  },
];

const resultStyles = {
  passed: { bg: "#EAF3DE", color: "#3B6D11", label: "passed" },
  failed: { bg: "#FCEBEB", color: "#A32D2D", label: "failed" },
  rework_required: { bg: "#FAEEDA", color: "#BA7517", label: "rework" },
  open: { bg: "#EEEDFE", color: "#534AB7", label: "offen" },
  submitted: { bg: "#EEEDFE", color: "#534AB7", label: "submitted" },
};

function Pill({ value, label }) {
  const style = resultStyles[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 TUEV08PruefberichtExport() {
  const [providerFilter, setProviderFilter] = useState("all");
  const [resultFilter, setResultFilter] = useState("all");
  const [assignmentFilter, setAssignmentFilter] = useState("all");
  const [query, setQuery] = useState("");
  const [message, setMessage] = useState("");

  const filteredRows = useMemo(() => rows.filter((row) => {
    const queryHit = !query.trim() || `${row.order} ${row.title} ${row.equipment} ${row.serial} ${row.inventory} ${row.customer}`.toLowerCase().includes(query.toLowerCase());
    return queryHit
      && (providerFilter === "all" || row.provider === providerFilter)
      && (resultFilter === "all" || row.result === resultFilter)
      && (assignmentFilter === "all" || row.assignment === assignmentFilter);
  }), [providerFilter, resultFilter, assignmentFilter, query]);

  const stats = {
    orders: new Set(filteredRows.map((row) => row.order)).size,
    positions: filteredRows.length,
    passed: filteredRows.filter((row) => row.result === "passed").length,
    failed: filteredRows.filter((row) => row.result === "failed").length,
    rework: filteredRows.filter((row) => row.result === "rework_required").length,
    open: filteredRows.filter((row) => row.result === "open").length,
  };

  function exportCsv() {
    setMessage(`CSV-Export vorbereitet: ${filteredRows.length} Position(en). Enthalten sind Standardfelder ohne Auditdaten und ohne Dokumentdateien.`);
  }

  function preparePdf() {
    setMessage("PDF-Bericht vorbereitet: optionaler V1.1-/UC09-Kandidat. In V1 bleibt CSV der bevorzugte einfache Export.");
  }

  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>Prüfbericht / Export</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üfbericht / Export</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>TÜV-08</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={exportCsv} style={primaryButton}>CSV exportieren</button>
            <button onClick={preparePdf} style={outlineButton}>PDF vorbereiten</button>
          </div>
        </div>

        <Card title="1 · Filter">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 10 }}>
            <input type="date" style={fieldStyle} />
            <input type="date" style={fieldStyle} />
            <select value={providerFilter} onChange={(e) => setProviderFilter(e.target.value)} style={fieldStyle}>
              <option value="all">Alle Prüfstellen</option>
              <option>SVTI / Dienstleister Beispiel</option>
              <option>Prüfservice Muster</option>
            </select>
            <select value={resultFilter} onChange={(e) => setResultFilter(e.target.value)} style={fieldStyle}>
              <option value="all">Alle Ergebnisse</option>
              <option value="passed">passed</option>
              <option value="failed">failed</option>
              <option value="rework_required">rework_required</option>
              <option value="open">offen</option>
            </select>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr auto auto", gap: 10 }}>
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Equipment, Seriennummer, Inventarnummer oder Auftrag suchen" style={fieldStyle} />
            <select value={assignmentFilter} onChange={(e) => setAssignmentFilter(e.target.value)} style={fieldStyle}>
              <option value="all">Alle Zuordnungen</option>
              <option value="intern">intern</option>
              <option value="customer">Kunde</option>
            </select>
            <button onClick={() => setMessage("Filter angewendet.")} style={primaryButton}>Anwenden</button>
            <button onClick={() => { setProviderFilter("all"); setResultFilter("all"); setAssignmentFilter("all"); setQuery(""); }} style={secondaryButton}>Zurücksetzen</button>
          </div>
        </Card>

        <Card title="2 · Kennzahlen">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
            <Stat label="Aufträge" value={stats.orders} color="#185FA5" bg="#E6F1FB" />
            <Stat label="Positionen" value={stats.positions} color="#5F5E5A" bg="#F1EFE8" />
            <Stat label="bestanden" value={stats.passed} color="#3B6D11" bg="#EAF3DE" />
            <Stat label="nicht best." value={stats.failed} color="#A32D2D" bg="#FCEBEB" />
            <Stat label="Nacharbeit" value={stats.rework} color="#BA7517" bg="#FAEEDA" />
            <Stat label="offen" value={stats.open} color="#534AB7" bg="#EEEDFE" />
          </div>
        </Card>

        <Card title="3 · Ergebnisliste / Exportvorschau" action={<span style={{ fontSize: 11, color: "#888780" }}>{filteredRows.length} Position(en)</span>}>
          <div style={{ display: "grid", gap: 8 }}>
            {filteredRows.map((row) => (
              <div key={row.id} style={{ display: "grid", gridTemplateColumns: "1.1fr 1.4fr 1fr 0.8fr 1fr", gap: 10, alignItems: "center", border: "1px solid #F1EFE8", borderRadius: 8, padding: "10px 12px" }}>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "#1a1a18" }}>{row.order}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>{row.provider}</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "#1a1a18" }}>{row.equipment}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>SN {row.serial} · INV {row.inventory}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>{row.assignment === "customer" ? `Kunde: ${row.customer}` : "intern"}</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: "#1a1a18" }}>{row.inspectionDate || "noch offen"}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>nächste: {row.nextDue}</div>
                </div>
                <div><Pill value={row.result} /></div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  <button onClick={() => action("TÜV-03 Prüfauftrag-Detail")} style={miniButton}>TÜV-03</button>
                  <button onClick={() => action("TÜV-07 Prüfhistorie")} style={miniButton}>TÜV-07</button>
                  <button onClick={() => action("EQ-03 Equipment-Detail")} style={miniButton}>EQ-03</button>
                </div>
              </div>
            ))}
            {filteredRows.length === 0 && <div style={{ padding: 12, background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, color: "#BA7517", fontSize: 12 }}>Keine Prüfpositionen für die gewählten Filter gefunden.</div>}
          </div>
        </Card>

        <Card title="4 · Exportumfang">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 10 }}>
            <ExportPill label="Kopfdaten" />
            <ExportPill label="Equipment" />
            <ExportPill label="Prüfdaten" />
            <ExportPill label="Referenzen" />
            <ExportPill label="Bemerkung optional" warning />
          </div>
          <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
            Standardexport enthält keine Auditdaten und keine Dokumentdateien. Frei konfigurierbare Spalten gehören zu UC09. Zertifikate und Prüfberichte als Dateien gehören zu UC13.
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Card title="UC09-Abgrenzung">
            <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
              TÜV-08 liefert eine einfache V1-Auswertung. Erweiterter Bericht, gespeicherte Filter, XLSX und frei konfigurierbare Spalten gehören zu UC09.
            </div>
          </Card>
          <Card title="UC13-Abgrenzung">
            <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
              Dokumentdateien werden nicht in TÜV-08 verwaltet. Prüfberichte und Zertifikate werden später über UC13 hochgeladen und verlinkt.
            </div>
          </Card>
        </div>

        {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> Filter verändern Kennzahlen und Ergebnisliste. CSV wird nur als einfacher Standardexport simuliert.
        </div>
      </div>
    </div>
  );
}

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

function ExportPill({ label, warning }) {
  return <span style={{ background: warning ? "#FAEEDA" : "#EAF3DE", color: warning ? "#BA7517" : "#3B6D11", borderRadius: 999, padding: "4px 10px", fontSize: 11, fontWeight: 600 }}>{label}</span>;
}

const fieldStyle = { width: "100%", boxSizing: "border-box", padding: "8px 10px", 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 miniButton = { padding: "4px 8px", fontSize: 10, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 4, color: "#5F5E5A", cursor: "pointer" };