import { useMemo, useState } from "react";

const baseEquipment = {
  name: "12l Stahlflasche gelb",
  type: "cylinder",
  typeLabel: "Tauchflasche",
  manufacturer: "Luxfer",
  model: "12l Stahl",
  serial: "123456",
  inventory: "INT-0047",
  assignment: "internal",
  owner: "Tauchschule",
  location: "Lager A / Regal 2",
  condition: "gut",
  createdAt: "04.05.2026 10:42",
  createdBy: "David",
};

const typeDetails = [
  ["Material", "Stahl"],
  ["Volumen", "12 l"],
  ["Arbeitsdruck", "232 bar"],
  ["Gewinde", "M25x2"],
  ["Letzte Prüfung", "—"],
  ["Nächste Prüfung", "fehlt"],
  ["Normreferenz", "fehlt"],
  ["Ventiltyp", "prüfen"],
];

const notes = [
  ["04.05.2026 10:42", "David", "Allgemein", "Ersterfassung im Lager. Etikett gut lesbar, TÜV-Daten müssen ergänzt werden."],
  ["04.05.2026 10:50", "David", "Zustand", "Aussen leichte Gebrauchsspuren, keine sichtbaren Schäden."],
  ["04.05.2026 11:05", "David", "Prüfung", "Nächste Prüfung und Normreferenz später ergänzen."],
];

const pillMap = {
  active: { label: "Aktiv", bg: "#EAF3DE", color: "#3B6D11" },
  inactive: { label: "Inaktiv", bg: "#F1EFE8", color: "#5F5E5A" },
  complete: { label: "complete", bg: "#EAF3DE", color: "#3B6D11" },
  incomplete: { label: "incomplete", bg: "#FAEEDA", color: "#BA7517" },
  needs_review: { label: "needs_review", bg: "#FCEBEB", color: "#A32D2D" },
  synced: { label: "synced", bg: "#EAF3DE", color: "#3B6D11" },
  pending_sync: { label: "pending_sync", bg: "#FAEEDA", color: "#BA7517" },
  local_only: { label: "local_only", bg: "#E6F1FB", color: "#185FA5" },
  conflict: { label: "conflict", bg: "#FCEBEB", color: "#A32D2D" },
};

function Pill({ value, label }) {
  const s = pillMap[value] || { label: label || value, bg: "#F1EFE8", color: "#5F5E5A" };
  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" }}>
      <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>
  );
}

function DataRow({ label, value, warning }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "150px 1fr", gap: 10, padding: "8px 0", borderBottom: "1px solid #F1EFE8", fontSize: 12 }}>
      <div style={{ color: "#888780" }}>{label}</div>
      <div style={{ color: warning ? "#A32D2D" : "#1a1a18", fontWeight: warning ? 600 : 400 }}>{value || "—"}</div>
    </div>
  );
}

export default function EQ03EquipmentDetail() {
  const [quality, setQuality] = useState("incomplete");
  const [syncStatus, setSyncStatus] = useState("synced");
  const [mode, setMode] = useState("cylinder");
  const [message, setMessage] = useState("");

  const equipment = useMemo(() => {
    if (mode === "other") {
      return { ...baseEquipment, name: "Scooter Suex 1", type: "other", typeLabel: "Sonstiges: Scooter", manufacturer: "Suex", model: "XJ", serial: "SX-12345", inventory: "SCO-001" };
    }
    if (mode === "unknown") {
      return { ...baseEquipment, name: "Unbestimmtes Teil #TMP-8831", type: "unknown", typeLabel: "Unbestimmt", manufacturer: "", model: "", serial: "", inventory: "TMP-8831", assignment: "unassigned", owner: "Unbestimmt", location: "Inventurbox" };
    }
    return baseEquipment;
  }, [mode]);

  const workflowEligible = quality === "complete" && mode !== "unknown";
  const warning = !workflowEligible || syncStatus === "conflict";

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 880, 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: "#fff", fontWeight: 500, borderBottom: "1px solid #185FA5", paddingBottom: 2 }}>Equipment</span>
          <span style={{ color: "#888780" }}>Kunden</span>
          <span style={{ color: "#888780" }}>Workflows</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" }}>Equipment</span><span style={{ margin: "0 6px" }}>›</span><span>{equipment.name}</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <h1 style={{ margin: 0, fontSize: 20, fontWeight: 500, color: "#1a1a18" }}>{equipment.name}</h1>
              <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>EQ-03</span>
              <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>{equipment.typeLabel}</span>
              <Pill value="active" />
              <Pill value={quality} />
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setMessage("Zurück zu EQ-01") } style={secondaryButton}>Zurück</button>
            <button onClick={() => setMessage("Öffnet EQ-04 Equipment bearbeiten") } style={primaryButton}>Bearbeiten</button>
            <button onClick={() => setMessage("QR-Code wird angezeigt") } style={outlineButton}>QR</button>
            <button onClick={() => setMessage("Öffnet EQ-06 Equipment archivieren") } style={dangerButton}>Archiv</button>
          </div>
        </div>

        {warning && (
          <div style={{ background: syncStatus === "conflict" ? "#FCEBEB" : "#FAEEDA", border: syncStatus === "conflict" ? "1px solid #F7C1C1" : "1px solid #FAC775", borderRadius: 8, padding: "10px 14px", color: syncStatus === "conflict" ? "#A32D2D" : "#BA7517", fontSize: 12, marginBottom: 14 }}>
            {syncStatus === "conflict" ? "Synchronisationskonflikt: Datensatz muss geprüft werden." : "Datensatz ist nicht workflow-fähig. Fehlende Angaben müssen ergänzt oder geprüft werden."}
          </div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "230px 1fr", gap: 14, marginBottom: 14 }}>
          <Card title="Foto & QR-Code" action={<span style={{ fontSize: 10, color: "#888780" }}>NFC nicht V1</span>}>
            <div style={{ height: 130, background: "#F1EFE8", border: "1px solid #D3D1C7", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", color: "#888780", marginBottom: 12 }}>
              <div style={{ fontSize: 30 }}>📷</div>
              <div style={{ fontSize: 11 }}>Hauptfoto</div>
            </div>
            <button onClick={() => setMessage("QR-Code anzeigen") } style={{ ...outlineButton, width: "100%", marginBottom: 8 }}>QR-Code anzeigen</button>
            <button onClick={() => setMessage("Öffnet EQ-08 Foto erfassen / ersetzen") } style={{ ...secondaryButton, width: "100%", marginBottom: 8 }}>Foto ersetzen</button>
            <button onClick={() => setMessage("Öffnet EQ-07 Notiz erfassen") } style={{ ...secondaryButton, width: "100%" }}>Notiz ergänzen</button>
          </Card>

          <Card title="Basisdaten">
            <DataRow label="Anzeigename" value={equipment.name} />
            <DataRow label="Equipment-Typ" value={equipment.typeLabel} warning={mode === "unknown"} />
            <DataRow label="Hersteller / Modell" value={`${equipment.manufacturer || "—"} · ${equipment.model || "—"}`} />
            <DataRow label="Seriennummer" value={equipment.serial} />
            <DataRow label="Inventarnummer" value={equipment.inventory} />
            <DataRow label="Zuordnung" value={`${equipment.assignment === "internal" ? "Intern" : equipment.assignment === "unassigned" ? "Unbestimmt" : "Kunde"} · ${equipment.owner}`} warning={equipment.assignment === "unassigned"} />
            <DataRow label="Standort" value={equipment.location} />
            <DataRow label="Zustand" value={equipment.condition} />
            <DataRow label="Erfasst" value={`${equipment.createdAt} · ${equipment.createdBy}`} />
          </Card>
        </div>

        <Card title="Datenqualität & Sync" action={<button onClick={() => setMessage("Öffnet EQ-04 zum Vervollständigen") } style={outlineButton}>Vervollständigen</button>}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
            <Pill value={quality} />
            <Pill value={workflowEligible ? "complete" : "incomplete"} label={`Workflow-fähig: ${workflowEligible ? "Ja" : "Nein"}`} />
            <Pill value={syncStatus} />
            <Pill value="synced" label="QR-Code aktiv" />
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
            <button onClick={() => setQuality("complete")} style={secondaryButton}>complete</button>
            <button onClick={() => setQuality("incomplete")} style={secondaryButton}>incomplete</button>
            <button onClick={() => setQuality("needs_review")} style={secondaryButton}>needs_review</button>
            <button onClick={() => setSyncStatus("synced")} style={secondaryButton}>synced</button>
            <button onClick={() => setSyncStatus("pending_sync")} style={secondaryButton}>pending_sync</button>
            <button onClick={() => setSyncStatus("conflict")} style={secondaryButton}>conflict</button>
          </div>
          <div style={{ fontSize: 11, color: "#888780" }}>completion_notes: Nächste Prüfung, Normreferenz und Ventiltyp ergänzen.</div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
          <Card title="Typabhängige Zusatzdaten">
            {typeDetails.map(([label, value]) => <DataRow key={label} label={label} value={mode === "unknown" ? "nicht verfügbar" : value} warning={value === "fehlt" || mode === "unknown"} />)}
          </Card>

          <Card title="Wireframe-Modus">
            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 8 }}>
              <button onClick={() => setMode("cylinder")} style={mode === "cylinder" ? primaryButton : secondaryButton}>Tauchflasche</button>
              <button onClick={() => setMode("other")} style={mode === "other" ? primaryButton : secondaryButton}>other: Scooter</button>
              <button onClick={() => setMode("unknown")} style={mode === "unknown" ? primaryButton : secondaryButton}>unknown: unbestimmt</button>
            </div>
            <div style={{ marginTop: 12, fontSize: 11, color: "#888780" }}>other zeigt freie Typbezeichnung. unknown ist nicht workflow-fähig.</div>
          </Card>
        </div>

        <div style={{ marginTop: 14 }}>
          <Card title="Notizhistorie" action={<button onClick={() => setMessage("Öffnet EQ-07 Notiz erfassen") } style={outlineButton}>+ Notiz</button>}>
            {notes.map(([date, user, type, text]) => (
              <div key={`${date}-${type}`} style={{ padding: "9px 0", borderBottom: "1px solid #F1EFE8" }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: "#1a1a18" }}>{date} · {user} · {type}</div>
                <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 4 }}>{text}</div>
              </div>
            ))}
          </Card>
        </div>

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

        <div style={{ marginTop: 14, padding: "10px 14px", background: "#FAEEDA", border: "1px solid #FAC775", borderRadius: 8, fontSize: 11, color: "#BA7517" }}>
          <strong>Wireframe-Simulation:</strong> Datenqualität, Sync-Status und Modus beeinflussen Workflow-Fähigkeit und Hinweise. QR-Code ist V1-Umfang; NFC wird nicht angezeigt.
        </div>
      </div>
    </div>
  );
}

const primaryButton = { padding: "7px 12px", fontSize: 12, background: "#185FA5", border: "none", borderRadius: 6, color: "#fff", cursor: "pointer", fontWeight: 600 };
const outlineButton = { padding: "7px 12px", fontSize: 12, background: "#fff", border: "1px solid #185FA5", borderRadius: 6, color: "#185FA5", cursor: "pointer", fontWeight: 600 };
const secondaryButton = { padding: "7px 12px", fontSize: 12, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" };
const dangerButton = { padding: "7px 12px", fontSize: 12, background: "#FCEBEB", border: "1px solid #A32D2D", borderRadius: 6, color: "#A32D2D", cursor: "pointer", fontWeight: 600 };