import { useMemo, useState } from "react";

const initialPositions = [
  {
    id: "eq-001",
    name: "12l Stahlflasche gelb",
    serial: "123456",
    inventory: "INT-0047",
    material: "Stahl",
    pressure: "232 bar",
    due: "2026-04-30",
    dueState: "overdue",
    positionStatus: "submitted",
    result: "offen",
  },
  {
    id: "eq-002",
    name: "10l Aluflasche silber",
    serial: "AL-9001",
    inventory: "INT-0052",
    material: "Aluminium",
    pressure: "200 bar",
    due: "2026-05-20",
    dueState: "due",
    positionStatus: "submitted",
    result: "offen",
  },
  {
    id: "eq-004",
    name: "7l Stage Stahl",
    serial: "STAGE-07",
    inventory: "INT-0074",
    material: "Stahl",
    pressure: "200 bar",
    due: "2026-05-25",
    dueState: "due",
    positionStatus: "submitted",
    result: "offen",
  },
];

const styles = {
  draft: { bg: "#FAEEDA", color: "#BA7517", label: "draft" },
  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" },
  cancelled: { bg: "#F1EFE8", color: "#5F5E5A", label: "cancelled" },
  overdue: { bg: "#FCEBEB", color: "#A32D2D", label: "überfällig" },
  due: { bg: "#FAEEDA", color: "#BA7517", label: "fällig" },
  offen: { bg: "#F1EFE8", color: "#5F5E5A", label: "offen" },
  locked: { bg: "#FAEEDA", color: "#BA7517", label: "gesperrt" },
};

function Pill({ value, label }) {
  const s = styles[value] || { bg: "#F1EFE8", color: "#5F5E5A", label: value };
  return <span style={{ background: s.bg, color: s.color, borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 }}>{label || s.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 TUEV03PruefauftragDetail() {
  const [orderStatus, setOrderStatus] = useState("submitted");
  const [positions, setPositions] = useState(initialPositions);
  const [message, setMessage] = useState("");

  const locked = ["submitted", "in_progress"].includes(orderStatus);

  const statusHint = useMemo(() => {
    if (orderStatus === "draft") return "Auftrag ist vorbereitet, aber noch nicht eingereicht.";
    if (orderStatus === "submitted") return "Auftrag ist eingereicht. Die operative Nutzung der Positionen ist für relevante Workflows gesperrt.";
    if (orderStatus === "in_progress") return "Prüfung läuft oder Rückmeldung steht aus.";
    if (orderStatus === "passed") return "Prüfauftrag abgeschlossen. Ergebnisse und nächste Prüfungen wurden erfasst.";
    if (orderStatus === "failed") return "Mindestens eine Position ist nicht bestanden. Nacharbeit oder Sperre prüfen.";
    if (orderStatus === "rework_required") return "Nacharbeit erforderlich. Folgeaktion über TÜV-06 dokumentieren.";
    return "Auftrag storniert. Auswirkungen auf Positionen prüfen.";
  }, [orderStatus]);

  function updatePositionStatus(id, nextStatus) {
    setPositions((current) => current.map((position) => position.id === id ? { ...position, positionStatus: nextStatus, result: nextStatus === "passed" ? "bestanden" : nextStatus === "failed" ? "nicht bestanden" : nextStatus === "rework_required" ? "Nacharbeit" : "offen" } : position));
    setMessage(`Positionsstatus aktualisiert: ${nextStatus}. Änderung würde Workflow-Historie und Audit-Log schreiben.`);
  }

  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" }}>Prüfaufträge</span><span style={{ margin: "0 6px" }}>›</span><span>TÜV Sammelprüfung Mai 2026</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üfauftrag-Detail</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>TÜV-03</span>
            <Pill value={orderStatus} />
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => action("TÜV-01")} style={secondaryButton}>Zurück</button>
            <button onClick={() => action("TÜV-04 Status aktualisieren")} style={outlineButton}>Status aktualisieren</button>
            <button onClick={() => action("TÜV-05 Prüfergebnis erfassen")} style={primaryButton}>Ergebnis erfassen</button>
          </div>
        </div>

        <Card title="1 · Prüfauftrag-Kopf">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14 }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "#1a1a18" }}>TÜV Sammelprüfung Mai 2026</div>
              <div style={{ fontSize: 12, color: "#888780", marginTop: 4 }}>Auftrag: TUV-2026-0007 · erstellt von David · 06.05.2026 09:12</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
                <Pill value={orderStatus} />
                <Pill value="submitted" label={`${positions.length} Positionen`} />
                {locked && <Pill value="locked" label="Nutzung gesperrt" />}
              </div>
            </div>
            <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
              <strong>Prüfstelle</strong><br />SVTI / Dienstleister Beispiel<br />
              <strong>Einreichdatum</strong><br />06.05.2026 · Sammelabgabe
            </div>
          </div>
        </Card>

        <Card title="Statushinweis" action={<select value={orderStatus} onChange={(e) => setOrderStatus(e.target.value)} style={fieldStyle}><option value="draft">draft</option><option value="submitted">submitted</option><option value="in_progress">in_progress</option><option value="passed">passed</option><option value="failed">failed</option><option value="rework_required">rework_required</option><option value="cancelled">cancelled</option></select>}>
          <div style={{ fontSize: 12, color: ["failed", "rework_required"].includes(orderStatus) ? "#A32D2D" : "#185FA5", lineHeight: 1.6 }}>{statusHint}</div>
        </Card>

        <Card title="2 · Equipment-Positionen" action={<span style={{ fontSize: 11, color: "#888780" }}>{positions.length} Positionen</span>}>
          <div style={{ display: "grid", gap: 8 }}>
            {positions.map((position) => (
              <div key={position.id} style={{ display: "grid", gridTemplateColumns: "1.5fr 0.8fr 1fr 1.2fr", gap: 10, alignItems: "center", border: "1px solid #F1EFE8", borderRadius: 8, padding: "10px 12px" }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1a18" }}>{position.name}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>SN {position.serial} · INV {position.inventory}</div>
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 3 }}>{position.material} · {position.pressure}</div>
                </div>
                <div>
                  <Pill value={position.dueState} />
                  <div style={{ fontSize: 11, color: "#888780", marginTop: 6 }}>{position.due}</div>
                </div>
                <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>
                  <Pill value={position.positionStatus} />
                  <Pill value={position.result === "offen" ? "offen" : position.positionStatus} label={position.result} />
                  {locked && <Pill value="locked" />}
                </div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  <button onClick={() => action("TÜV-05 für " + position.name)} style={primaryMini}>TÜV-05</button>
                  <button onClick={() => updatePositionStatus(position.id, "passed")} style={miniButton}>bestanden</button>
                  <button onClick={() => updatePositionStatus(position.id, "failed")} style={dangerMini}>failed</button>
                  <button onClick={() => action("EQ-03 für " + position.name)} style={miniButton}>EQ-03</button>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Card title="3 · Verlauf">
            <Timeline />
          </Card>

          <Card title="4 · Hinweise / Referenzen">
            <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
              <strong>Übergabenotiz</strong><br />Flaschen gesammelt für externe Prüfung vorbereitet.<br /><br />
              <strong>Externe Referenz</strong><br />noch nicht vorhanden
            </div>
            <div style={{ marginTop: 12, padding: "8px 10px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
              Dokument-Upload kommt später mit UC13. V1 speichert strukturierte Referenzen.
            </div>
          </Card>
        </div>

        <Card title="5 · Folgeaktionen">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <button onClick={() => action("TÜV-04 Status aktualisieren")} style={outlineButton}>TÜV-04 Status</button>
            <button onClick={() => action("TÜV-05 Ergebnis erfassen")} style={primaryButton}>TÜV-05 Ergebnis</button>
            <button onClick={() => action("TÜV-06 Nacharbeit / nicht bestanden")} style={dangerButton}>TÜV-06 Nacharbeit</button>
            <button onClick={() => action("TÜV-07 Prüfhistorie")} style={secondaryButton}>TÜV-07 Historie</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> Statuswechsel, Positionsstatus und Folgeaktionen zeigen, wie TÜV-03 als zentrale Arbeitsansicht funktioniert.
        </div>
      </div>
    </div>
  );
}

function Timeline() {
  const items = [
    ["Auftrag erstellt", "06.05.2026 09:12 · David"],
    ["Eingereicht", "06.05.2026 10:02 · submitted"],
    ["Nächster Schritt offen", "Status aktualisieren oder Ergebnis erfassen"],
  ];
  return <div style={{ display: "grid", gap: 12 }}>{items.map(([title, sub], index) => <div key={title} style={{ display: "flex", gap: 10 }}><div style={{ width: 10, height: 10, borderRadius: 999, background: index === 0 ? "#185FA5" : index === 1 ? "#534AB7" : "#D3D1C7", marginTop: 3 }} /><div><div style={{ fontSize: 12, fontWeight: 600, color: index < 2 ? "#1a1a18" : "#888780" }}>{title}</div><div style={{ fontSize: 11, color: "#888780", marginTop: 2 }}>{sub}</div></div></div>)}</div>;
}

const fieldStyle = { width: 180, 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 primaryMini = { padding: "4px 8px", fontSize: 10, background: "#185FA5", border: "none", borderRadius: 4, color: "#fff", cursor: "pointer" };
const miniButton = { padding: "4px 8px", fontSize: 10, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 4, color: "#5F5E5A", cursor: "pointer" };
const dangerMini = { padding: "4px 8px", fontSize: 10, background: "#fff", border: "1px solid #A32D2D", borderRadius: 4, color: "#A32D2D", cursor: "pointer" };