import { useMemo, useState } from "react";

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

export default function EQ08FotoErfassenErsetzen() {
  const [source, setSource] = useState("camera");
  const [newPhoto, setNewPhoto] = useState(false);
  const [offline, setOffline] = useState(false);
  const [photoContext, setPhotoContext] = useState("Frontansicht mit Seriennummer gut lesbar.");
  const [fileTooLarge, setFileTooLarge] = useState(false);
  const [invalidType, setInvalidType] = useState(false);
  const [message, setMessage] = useState("");

  const syncStatus = offline ? "pending_sync" : "synced";
  const canSave = newPhoto && !fileTooLarge && !invalidType;

  const validationText = useMemo(() => {
    if (!newPhoto) return "Noch kein neues Foto ausgewählt.";
    if (invalidType) return "Ungültiger Dateityp: Nur Bildformate zulassen.";
    if (fileTooLarge) return "Datei zu gross: Maximalgrösse oder Komprimierung prüfen.";
    return "Foto ist speicherbereit.";
  }, [newPhoto, invalidType, fileTooLarge]);

  function save() {
    if (!canSave) {
      setMessage(`Speichern blockiert: ${validationText}`);
      return;
    }
    setMessage(`Foto gespeichert. Quelle: ${source === "camera" ? "Kamera" : "Datei"}. sync_status: ${syncStatus}. Änderung wird auditierbar protokolliert.`);
  }

  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>Foto erfassen</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" }}>Foto erfassen / ersetzen</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>EQ-08</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setMessage("Zurück zu EQ-03 ohne Änderung.")} style={secondaryButton}>Abbrechen</button>
            <button onClick={save} style={primaryButton}>Foto speichern</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="#EAF3DE" color="#3B6D11">active</Pill>
              <Pill bg="#E6F1FB" color="#185FA5">Hauptfoto</Pill>
              <Pill bg="#E6F1FB" color="#185FA5">QR unabhängig</Pill>
            </div>
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Card title="1 · Aktuelles Hauptfoto">
            <div style={{ height: 180, background: "#F1EFE8", border: "1px solid #D3D1C7", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", color: "#888780" }}>
              <div style={{ fontSize: 34 }}>📷</div>
              <div style={{ fontSize: 12 }}>bestehendes Foto</div>
            </div>
            <div style={{ marginTop: 10, fontSize: 11, color: "#888780" }}>Bleibt erhalten, falls Speichern oder Upload fehlschlägt.</div>
          </Card>

          <Card title="2 · Neue Vorschau">
            <button onClick={() => setNewPhoto(!newPhoto)} style={{ height: 180, width: "100%", background: newPhoto ? "#EAF3DE" : "#E6F1FB", border: newPhoto ? "1px solid #A8D08D" : "1px solid #B5D4F4", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", color: newPhoto ? "#3B6D11" : "#185FA5", cursor: "pointer" }}>
              <div style={{ fontSize: 34 }}>{newPhoto ? "✓" : "+"}</div>
              <div style={{ fontSize: 12 }}>{newPhoto ? "neues Foto gewählt" : "neues Foto auswählen"}</div>
            </button>
            <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
              <button onClick={() => { setSource("camera"); setNewPhoto(true); }} style={source === "camera" ? primaryButton : outlineButton}>Kamera öffnen</button>
              <button onClick={() => { setSource("file"); setNewPhoto(true); }} style={source === "file" ? primaryButton : outlineButton}>Datei wählen</button>
            </div>
          </Card>
        </div>

        <Card title="3 · Foto-Kontext">
          <input value={photoContext} onChange={(event) => setPhotoContext(event.target.value)} placeholder="Optionaler Hinweis, z. B. Frontansicht mit Seriennummer..." style={fieldStyle} />
          <div style={{ marginTop: 8, fontSize: 11, color: "#888780" }}>Kann als Fotometadatum oder strukturierte Notiz gespeichert werden.</div>
        </Card>

        <Card title="4 · Speicherung & Sync">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
            <Pill bg="#E6F1FB" color="#185FA5">is_primary</Pill>
            <Pill bg="#EAF3DE" color="#3B6D11">tenant-isoliert</Pill>
            <Pill bg={offline ? "#FAEEDA" : "#EAF3DE"} color={offline ? "#BA7517" : "#3B6D11"}>sync_status: {syncStatus}</Pill>
            <Pill bg={canSave ? "#EAF3DE" : "#FAEEDA"} color={canSave ? "#3B6D11" : "#BA7517"}>{canSave ? "speicherbereit" : "nicht speicherbereit"}</Pill>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            <Toggle label="Offline simulieren" checked={offline} onChange={setOffline} />
            <Toggle label="Ungültiger Dateityp" checked={invalidType} onChange={setInvalidType} />
            <Toggle label="Datei zu gross" checked={fileTooLarge} onChange={setFileTooLarge} />
          </div>
          <div style={{ marginTop: 12, fontSize: 12, color: canSave ? "#3B6D11" : "#BA7517" }}>{validationText}</div>
        </Card>

        <Card title="Validierung">
          <div style={{ fontSize: 12, color: "#5F5E5A", lineHeight: 1.6 }}>
            Bildformat und Maximalgrösse müssen geprüft werden. Speichern ohne neues Foto wird blockiert. EXIF-Entfernung ist als Datenschutz- und Security-Punkt offen.
          </div>
        </Card>

        {message && <div style={{ padding: "10px 14px", background: message.includes("gespeichert") ? "#EAF3DE" : "#FAEEDA", border: message.includes("gespeichert") ? "1px solid #A8D08D" : "1px solid #FAC775", borderRadius: 8, fontSize: 12, color: message.includes("gespeichert") ? "#3B6D11" : "#BA7517", 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> Fotoauswahl, Quelle, Datei-Validierung und Offline-Schalter beeinflussen Speicherfähigkeit und Sync-Status.
        </div>
      </div>
    </div>
  );
}

function Toggle({ label, checked, onChange }) {
  return (
    <button onClick={() => onChange(!checked)} style={{ padding: "9px 10px", borderRadius: 8, border: checked ? "1.5px solid #BA7517" : "1px solid #D3D1C7", background: checked ? "#FAEEDA" : "#fff", color: checked ? "#BA7517" : "#5F5E5A", cursor: "pointer", textAlign: "left", fontSize: 12 }}>
      {checked ? "☑" : "☐"} {label}
    </button>
  );
}

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