import { useMemo, useState } from "react";

const noteTypes = [
  ["general", "Allgemein"],
  ["condition", "Zustand"],
  ["inspection", "Prüfung"],
  ["service", "Service"],
  ["rental", "Verleih"],
  ["completion", "Vervollständigung"],
  ["other", "Sonstiges"],
];

const visibilityOptions = [
  ["internal", "Intern", "Nur Tenant-Benutzer"],
  ["customer_relevant", "Kundenrelevant", "Für Kundenportal vormerken"],
  ["admin", "Administrativ", "Nur berechtigte Rollen"],
];

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 EQ07NotizErfassen() {
  const [noteType, setNoteType] = useState("general");
  const [visibility, setVisibility] = useState("internal");
  const [noteText, setNoteText] = useState("Etikett gut lesbar, TÜV-Daten müssen ergänzt werden.");
  const [addsCompletionNotes, setAddsCompletionNotes] = useState(true);
  const [conditionHint, setConditionHint] = useState(false);
  const [customerReview, setCustomerReview] = useState(false);
  const [offline, setOffline] = useState(false);
  const [message, setMessage] = useState("");

  const selectedType = noteTypes.find(([value]) => value === noteType)?.[1] || noteType;
  const selectedVisibility = visibilityOptions.find(([value]) => value === visibility)?.[1] || visibility;
  const syncStatus = offline ? "pending_sync" : "synced";

  const preview = useMemo(() => {
    return `04.05.2026 11:30 · David · ${selectedType} · ${selectedVisibility}`;
  }, [selectedType, selectedVisibility]);

  function save() {
    if (!noteType) {
      setMessage("Notiztyp fehlt.");
      return;
    }
    if (!noteText.trim()) {
      setMessage("Notiztext ist Pflicht.");
      return;
    }
    setMessage(`Notiz gespeichert. Typ: ${selectedType}. Sichtbarkeit: ${selectedVisibility}. sync_status: ${syncStatus}. Die Notiz erscheint in EQ-03.`);
  }

  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>Notiz 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" }}>Notiz erfassen</h1>
            <span style={{ background: "#E6F1FB", color: "#185FA5", borderRadius: 999, padding: "2px 8px", fontSize: 11, fontWeight: 600 }}>EQ-07</span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setMessage("Zurück zu EQ-03 ohne Speichern.")} style={secondaryButton}>Abbrechen</button>
            <button onClick={save} style={primaryButton}>Notiz 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="#FAEEDA" color="#BA7517">incomplete</Pill>
              <Pill bg="#E6F1FB" color="#185FA5">Historie</Pill>
            </div>
          </div>
        </Card>

        <Card title="1 · Notiztyp">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {noteTypes.map(([value, label]) => (
              <button key={value} onClick={() => setNoteType(value)} style={{ padding: "7px 12px", borderRadius: 999, border: noteType === value ? "1.5px solid #185FA5" : "1px solid #D3D1C7", background: noteType === value ? "#E6F1FB" : "#fff", color: noteType === value ? "#185FA5" : "#5F5E5A", cursor: "pointer", fontSize: 12, fontWeight: noteType === value ? 600 : 400 }}>
                {label}
              </button>
            ))}
          </div>
        </Card>

        <Card title="2 · Sichtbarkeit">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {visibilityOptions.map(([value, title, hint]) => (
              <button key={value} onClick={() => setVisibility(value)} style={{ padding: 12, borderRadius: 8, border: visibility === value ? "1.5px solid #185FA5" : "1px solid #D3D1C7", background: visibility === value ? "#E6F1FB" : "#fff", color: visibility === value ? "#185FA5" : "#5F5E5A", cursor: "pointer", textAlign: "left" }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>{title}</div>
                <div style={{ fontSize: 10, marginTop: 6 }}>{hint}</div>
              </button>
            ))}
          </div>
        </Card>

        <Card title="3 · Notiztext *">
          <textarea value={noteText} onChange={(event) => setNoteText(event.target.value)} rows={6} placeholder="Fachliche Notiz zum Equipment erfassen..." style={{ ...fieldStyle, resize: "vertical" }} />
          <div style={{ marginTop: 8, fontSize: 11, color: "#888780" }}>Datum/Zeit und Benutzer werden systemseitig gespeichert.</div>
        </Card>

        <Card title="4 · Optionale Markierungen">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            <Toggle label="Ergänzt completion_notes" checked={addsCompletionNotes} onChange={setAddsCompletionNotes} />
            <Toggle label="Zustandshinweis" checked={conditionHint} onChange={setConditionHint} />
            <Toggle label="Kundenrelevant prüfen" checked={customerReview} onChange={setCustomerReview} />
          </div>
          <label style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "#5F5E5A" }}>
            <input type="checkbox" checked={offline} onChange={(e) => setOffline(e.target.checked)} /> Offline speichern simulieren
          </label>
        </Card>

        <Card title="Vorschau">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
            <Pill bg="#E6F1FB" color="#185FA5">{selectedType}</Pill>
            <Pill bg="#EAF3DE" color="#3B6D11">{selectedVisibility}</Pill>
            <Pill bg={offline ? "#FAEEDA" : "#EAF3DE"} color={offline ? "#BA7517" : "#3B6D11"}>sync_status: {syncStatus}</Pill>
          </div>
          <div style={{ fontSize: 12, fontWeight: 600, color: "#1a1a18" }}>{preview}</div>
          <div style={{ fontSize: 12, color: "#5F5E5A", marginTop: 6 }}>{noteText || "Noch kein Notiztext erfasst."}</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> Notiztyp, Sichtbarkeit und Markierungen steuern die fachliche Einordnung. Die Notiz ergänzt Audit-Log und erscheint in EQ-03.
        </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 secondaryButton = { padding: "8px 14px", fontSize: 12, background: "#fff", border: "1px solid #B4B2A9", borderRadius: 6, color: "#5F5E5A", cursor: "pointer" };