import { useMemo, useState } from "react";

const statuses = {
  active: { label: "active", bg: "#EAF3DE", color: "#3B6D11" },
  inactive: { label: "inactive", bg: "#FAEEDA", color: "#BA7517" },
  retired: { label: "retired", bg: "#FCEBEB", color: "#A32D2D" },
  archived: { label: "archived", bg: "#F1EFE8", color: "#5F5E5A" },
};

const qualities = {
  complete: { label: "complete", bg: "#EAF3DE", color: "#3B6D11" },
  incomplete: { label: "incomplete", bg: "#FAEEDA", color: "#BA7517" },
  needs_review: { label: "needs_review", bg: "#FCEBEB", color: "#A32D2D" },
};

function Pill({ children, bg, color }) {
  return <span style={{ background: bg, color, borderRadius: 999, padding: "3px 9px", fontSize: 11, fontWeight: 600 }}>{children}</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>
  );
}

function QRMock() {
  const cells = [
    [0,0,1],[1,0,1],[2,0,1],[0,1,1],[2,1,1],[0,2,1],[1,2,1],[2,2,1],
    [8,0,1],[9,0,1],[10,0,1],[8,1,1],[10,1,1],[8,2,1],[9,2,1],[10,2,1],
    [0,8,1],[1,8,1],[2,8,1],[0,9,1],[2,9,1],[0,10,1],[1,10,1],[2,10,1],
    [4,1,1],[5,2,1],[6,1,1],[4,4,1],[6,4,1],[7,5,1],[5,6,1],[9,4,1],[10,5,1],[8,7,1],[4,8,1],[6,9,1],[8,10,1],[10,9,1],[5,10,1]
  ];
  return (
    <div style={{ width: 244, height: 244, border: "1px solid #1a1a18", borderRadius: 8, background: "#fff", display: "grid", gridTemplateColumns: "repeat(11, 1fr)", gridTemplateRows: "repeat(11, 1fr)", gap: 4, padding: 14 }}>
      {Array.from({ length: 121 }).map((_, index) => {
        const x = index % 11;
        const y = Math.floor(index / 11);
        const active = cells.some(([cx, cy]) => cx === x && cy === y);
        return <div key={index} style={{ background: active ? "#1a1a18" : "transparent", borderRadius: 1 }} />;
      })}
    </div>
  );
}

export default function EQ09QRCodeAnzeigen() {
  const [status, setStatus] = useState("active");
  const [quality, setQuality] = useState("complete");
  const [syncStatus, setSyncStatus] = useState("synced");
  const [message, setMessage] = useState("");

  const qrValue = "equipment:qr:eq_9f4c2f7e-3c3c-4f87-ae18-2c06d1b8a901";
  const workflowEligible = status === "active" && quality === "complete" && syncStatus !== "conflict";

  const statusHint = useMemo(() => {
    if (syncStatus === "conflict") return "Synchronisationskonflikt: QR-Code bleibt lesbar, aber Datensatz muss geprüft werden.";
    if (status !== "active") return `Equipment ist ${status}. QR-Code bleibt lesbar, zeigt aber den Status deutlich an.`;
    if (quality !== "complete") return "Datensatz ist nicht vollständig. QR-Code öffnet die Detailansicht, spezifische Workflows bleiben gesperrt.";
    return "QR-Code öffnet nach Berechtigung die Equipment-Detailansicht EQ-03.";
  }, [status, quality, syncStatus]);

  return (
    <div style={{ fontFamily: "var(--font-sans, system-ui)", background: "#F1EFE8", minHeight: 760, 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 style={{ color: "#185FA5" }}>12l Stahlflasche gelb</span><span style={{ margin: "0 6px" }}>›</span><span>QR-Code anzeigen</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 500, color: "#1a1a18" }}>QR-Code anzeigen</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>EQ-09</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setMessage("Zurück zu EQ-03.")} style={secondaryButton}>Schliessen</button>
            <button onClick={() => setMessage("QR-Wert kopiert.")} style={outlineButton}>Kopieren</button>
            <button onClick={() => setMessage("Druck / Export vorbereitet. Etikettenformat ist noch offen.")} style={primaryButton}>Export</button>
          </div>
        </div>

        <Card title="Equipment">
          <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, color: "#1a1a18" }}>12l Stahlflasche gelb</div>
              <div style={{ fontSize: 12, color: "#888780", marginTop: 4 }}>Tauchflasche · SN 123456 · INV INT-0047 · Intern · Lager A</div>
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", justifyContent: "flex-end" }}>
              <Pill bg={statuses[status].bg} color={statuses[status].color}>{statuses[status].label}</Pill>
              <Pill bg={qualities[quality].bg} color={qualities[quality].color}>{qualities[quality].label}</Pill>
              <Pill bg={workflowEligible ? "#EAF3DE" : "#FCEBEB"} color={workflowEligible ? "#3B6D11" : "#A32D2D"}>Workflow: {workflowEligible ? "Ja" : "Nein"}</Pill>
            </div>
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "330px 1fr", gap: 14 }}>
          <Card title="1 · QR-Code">
            <div style={{ display: "flex", justifyContent: "center", padding: "12px 0" }}>
              <QRMock />
            </div>
            <div style={{ textAlign: "center", fontSize: 11, color: "#888780" }}>Platzhalter-QR im Wireframe</div>
          </Card>

          <Card title="2 · QR-Wert / Link">
            <div style={{ background: "#F1EFE8", border: "1px solid #D3D1C7", borderRadius: 6, padding: "10px", fontSize: 11, color: "#5F5E5A", wordBreak: "break-all", marginBottom: 12 }}>
              {qrValue}
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
              <Pill bg="#E6F1FB" color="#185FA5">nicht-sequenziell</Pill>
              <Pill bg="#EAF3DE" color="#3B6D11">keine Kundendaten</Pill>
              <Pill bg="#EAF3DE" color="#3B6D11">zugriffsgeschützt</Pill>
              <Pill bg="#F1EFE8" color="#5F5E5A">kein NFC V1</Pill>
            </div>
            <button onClick={() => setMessage("Link zur Equipment-Detailansicht kopiert.")} style={{ ...outlineButton, width: "100%", marginBottom: 8 }}>Link kopieren</button>
            <button onClick={() => setMessage("QR-Identifier erneuern ist nicht V1. Später für Widerruf prüfen.")} style={{ ...secondaryButton, width: "100%" }}>QR-Identifier später erneuern</button>
          </Card>
        </div>

        <Card title="Statushinweis">
          <div style={{ fontSize: 12, color: "#5F5E5A", marginBottom: 10 }}>{statusHint}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            <select value={status} onChange={(e) => setStatus(e.target.value)} style={fieldStyle}>
              <option value="active">active</option>
              <option value="inactive">inactive</option>
              <option value="retired">retired</option>
              <option value="archived">archived</option>
            </select>
            <select value={quality} onChange={(e) => setQuality(e.target.value)} style={fieldStyle}>
              <option value="complete">complete</option>
              <option value="incomplete">incomplete</option>
              <option value="needs_review">needs_review</option>
            </select>
            <select value={syncStatus} onChange={(e) => setSyncStatus(e.target.value)} style={fieldStyle}>
              <option value="synced">synced</option>
              <option value="pending_sync">pending_sync</option>
              <option value="local_only">local_only</option>
              <option value="conflict">conflict</option>
            </select>
          </div>
        </Card>

        <Card title="Aktionen & Sicherheit">
          <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
            Der QR-Code enthält keine Kundendaten im Klartext und nutzt keinen sequenziellen Identifier. Der Zugriff auf EQ-03 bleibt berechtigungsabhängig. Druck und Export sind vorbereitet; Etikettenformat und ggf. PDF-Ausgabe werden später festgelegt.
          </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> Status, Datenqualität und Sync-Status beeinflussen Hinweise und Workflow-Fähigkeit. V1 setzt QR-Code um; NFC wird nicht angeboten.
        </div>
      </div>
    </div>
  );
}

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" };