// ============================================================
// LSPD — Fahrzeugregister (zentral, verknüpft mit Cognate-Akten)
// ============================================================

function QuelleBadge({ quelle }) {
  const q = FAHRZEUG_QUELLEN[quelle] || FAHRZEUG_QUELLEN.lspd;
  return (
    <span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide"
      style={{ color: q.color, background: `${q.color}1f`, border: `1px solid ${q.color}40` }}>
      <Icon name={q.icon} size={12} /> {q.label}
    </span>
  );
}
function FahrzeugStatusBadge({ status }) {
  const s = FAHRZEUG_STATUS[status] || FAHRZEUG_STATUS.ANGEMELDET;
  return (
    <span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide"
      style={{ color: s.color, background: `${s.color}1f`, border: `1px solid ${s.color}40` }}>
      <span className="h-1.5 w-1.5 rounded-full" style={{ background: s.color }} />{s.label}
    </span>
  );
}

// Akte vorhanden? (Name-Match)
function akteFuerHalter(name) {
  const norm = s => (s || '').toLowerCase().replace(/\s+/g, ' ').trim();
  return (window.COGNATE_AKTEN || []).find(a => norm(a.name) === norm(name));
}

// ---- Fahrzeug anmelden / bearbeiten ----
function FahrzeugModal({ open, onClose, onSave, initial }) {
  const empty = { kennzeichen: '', modell: '', typ: 'PKW', farbe: '', halter: '', vin: '', quelle: 'lspd', status: 'ANGEMELDET' };
  const [f, setF] = useState(empty);
  useEffect(() => { if (open) setF(initial ? { ...initial } : empty); }, [open, initial]);
  const setV = (k, v) => setF(s => ({ ...s, [k]: v }));
  const linked = akteFuerHalter(f.halter);

  const save = () => {
    if (!f.kennzeichen.trim() || !f.modell.trim()) return;
    onSave({ ...f, kennzeichen: f.kennzeichen.toUpperCase(), vin: f.vin || ('VIN-' + Math.floor(1000 + Math.random() * 8999)), datum: '07.06.2026' });
  };

  return (
    <Modal open={open} onClose={onClose} title={initial ? 'Fahrzeug bearbeiten' : 'Fahrzeug anmelden'} width="max-w-xl"
      footer={<><Btn variant="ghost" onClick={onClose}>Abbrechen</Btn><Btn icon="Check" onClick={save}>{initial ? 'Speichern' : 'Anmelden'}</Btn></>}>
      <div className="grid sm:grid-cols-2 gap-4">
        <Field label="Kennzeichen" required><TextInput value={f.kennzeichen} onChange={e => setV('kennzeichen', e.target.value)} placeholder="XX-1234" /></Field>
        <Field label="Modell" required><TextInput value={f.modell} onChange={e => setV('modell', e.target.value)} placeholder="z. B. Bravado Buffalo" /></Field>
        <Field label="Typ"><Select value={f.typ} onChange={e => setV('typ', e.target.value)}>{FAHRZEUG_TYPEN.map(t => <option key={t}>{t}</option>)}</Select></Field>
        <Field label="Farbe"><TextInput value={f.farbe} onChange={e => setV('farbe', e.target.value)} placeholder="z. B. Schwarz" /></Field>
        <div className="sm:col-span-2">
          <Field label="Halter (Name)" required hint="Stimmt der Name mit einer Akte überein, erscheint das Fahrzeug automatisch in der Personenakte.">
            <TextInput value={f.halter} onChange={e => setV('halter', e.target.value)} placeholder="Vor- und Nachname" />
          </Field>
          {f.halter && (linked
            ? <div className="mt-1.5 flex items-center gap-1.5 text-[12px] text-success"><Icon name="Link2" size={13} /> Verknüpft mit Akte <span className="font-mono">{linked.id}</span></div>
            : <div className="mt-1.5 flex items-center gap-1.5 text-[12px] text-muted"><Icon name="Unlink" size={13} /> Keine passende Akte gefunden — Fahrzeug wird trotzdem registriert.</div>)}
        </div>
        <Field label="FIN / VIN"><TextInput value={f.vin} onChange={e => setV('vin', e.target.value)} placeholder="automatisch" /></Field>
        <Field label="Status"><Select value={f.status} onChange={e => setV('status', e.target.value)}>{Object.entries(FAHRZEUG_STATUS).map(([k, s]) => <option key={k} value={k}>{s.label}</option>)}</Select></Field>
        <div className="sm:col-span-2">
          <Label className="mb-2">Quelle / Zulassungsstelle</Label>
          <div className="grid sm:grid-cols-2 gap-2">
            {Object.entries(FAHRZEUG_QUELLEN).map(([k, q]) => (
              <button key={k} onClick={() => setV('quelle', k)} className={`flex items-center gap-2.5 rounded-md border px-3 h-11 text-left transition-all ${f.quelle === k ? 'border-accent bg-[var(--c-accent-soft)]' : 'border-line hover:border-muted'}`}>
                <span className="grid place-items-center h-7 w-7 rounded-md shrink-0" style={{ background: `${q.color}1f`, color: q.color }}><Icon name={q.icon} size={16} /></span>
                <span className="text-sm font-semibold">{q.label}</span>
              </button>
            ))}
          </div>
          <div className="mt-2 flex items-center gap-1.5 text-[11px] text-muted"><Icon name="Plug" size={12} /> Offene Schnittstelle: Externe Werkstätten (z. B. Bennys) können Fahrzeuge eigenständig anmelden.</div>
        </div>
      </div>
    </Modal>
  );
}

// ---- Fahrzeug-Detail (mit Akten-Verknüpfung) ----
function FahrzeugDetail({ v, onClose, onEdit, onDelete, go }) {
  const linked = v ? akteFuerHalter(v.halter) : null;
  return (
    <Modal open={!!v} onClose={onClose} title="Fahrzeugakte" width="max-w-lg"
      footer={<><Btn variant="ghost" icon="Trash2" className="!text-danger" onClick={onDelete}>Löschen</Btn><Btn variant="outline" icon="Pencil" onClick={onEdit}>Bearbeiten</Btn></>}>
      {v && (
        <div>
          <div className="flex items-center gap-4">
            <div className="grid place-items-center h-16 w-16 rounded-lg shrink-0" style={{ background: `${FAHRZEUG_STATUS[v.status].color}1f`, color: FAHRZEUG_STATUS[v.status].color }}><Icon name="Car" size={30} /></div>
            <div className="min-w-0">
              <div className="font-mono text-xl font-extrabold">{v.kennzeichen}</div>
              <div className="text-sm text-muted truncate">{v.modell} · {v.typ}</div>
              <div className="mt-2 flex items-center gap-2 flex-wrap"><FahrzeugStatusBadge status={v.status} /><QuelleBadge quelle={v.quelle} /></div>
            </div>
          </div>
          <div className="mt-5 grid grid-cols-2 gap-3">
            {[['Halter', v.halter], ['Farbe', v.farbe], ['FIN / VIN', v.vin], ['Angemeldet am', v.datum]].map(([l, val]) => (
              <div key={l} className="rounded-md border border-line bg-bg/40 p-3"><div className="uplabel text-[10px]">{l}</div><div className="mt-1 font-semibold text-sm truncate">{val}</div></div>
            ))}
          </div>
          {/* Akten-Verknüpfung */}
          <div className="mt-4 rounded-md border border-line p-4">
            <div className="uplabel text-[10px] mb-2">Verknüpfte Personenakte</div>
            {linked ? (
              <button onClick={() => { onClose(); go && go('akten'); }} className="w-full flex items-center gap-3 rounded-md border border-line bg-bg/40 px-3 py-2.5 hover:border-accent/50 transition-colors text-left">
                <div className="grid place-items-center h-9 w-9 rounded-md bg-[var(--c-accent-soft)] text-accent shrink-0"><Icon name="UserRound" size={18} /></div>
                <div className="min-w-0 flex-1">
                  <div className="font-semibold text-sm truncate">{linked.name}</div>
                  <div className="font-mono text-[11px] text-muted">{linked.id}</div>
                </div>
                <Icon name="ArrowUpRight" size={16} className="text-muted shrink-0" />
              </button>
            ) : (
              <div className="flex items-center gap-2 text-sm text-muted"><Icon name="Unlink" size={15} /> Keine Akte unter „{v.halter}" gefunden.</div>
            )}
          </div>
        </div>
      )}
    </Modal>
  );
}

// ---- Hauptseite ----
function Fahrzeugregister({ go }) {
  const [all, setAll] = useState([]);
  const [q, setQ] = useState('');
  const [quelle, setQuelle] = useState('ALLE');
  const [status, setStatus] = useState('ALLE');
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState(null);
  const [detail, setDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [usingMock, setUsingMock] = useState(false);

  const applyVehicles = (list) => {
    setAll(list);
    if (window.vehicleStore) {
      window.vehicleStore.list = list.slice();
      window.vehicleStore._emit?.();
    }
  };

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      setLoading(true);
      setError(null);
      try {
        if (!window.LSPD) throw new Error('API nicht verfügbar');
        const data = await window.LSPD.loadFahrzeuge(q);
        if (!cancelled) {
          applyVehicles(data.fahrzeuge || []);
          setUsingMock(false);
        }
      } catch (e) {
        console.error(e);
        if (!cancelled) {
          applyVehicles((window.vehicleStore && window.vehicleStore.getAll()) || FAHRZEUGE);
          setUsingMock(true);
          setError('API nicht erreichbar — Demodaten werden angezeigt.');
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    };
    const t = setTimeout(load, q ? 250 : 0);
    return () => { cancelled = true; clearTimeout(t); };
  }, [q]);

  const rows = all.filter(v =>
    (quelle === 'ALLE' || v.quelle === quelle) &&
    (status === 'ALLE' || v.status === status) &&
    (q === '' || [v.kennzeichen, v.modell, v.halter].some(x => x.toLowerCase().includes(q.toLowerCase())))
  );

  const saveVehicle = async (v) => {
    if (usingMock || !window.LSPD) {
      if (editing) {
        const next = all.map(x => x.kennzeichen === editing.kennzeichen ? { ...x, ...v } : x);
        applyVehicles(next);
      } else {
        applyVehicles([v, ...all]);
      }
      setModalOpen(false);
      setEditing(null);
      return;
    }
    try {
      if (editing && editing.dbId) {
        const res = await window.LSPD.updateFahrzeug(editing.dbId, v);
        const next = all.map(x => (x.dbId === editing.dbId ? res.fahrzeug : x));
        applyVehicles(next);
      } else {
        const res = await window.LSPD.registerFahrzeug(v);
        applyVehicles([res.fahrzeug, ...all]);
      }
      setModalOpen(false);
      setEditing(null);
    } catch (e) {
      alert(e.message || 'Speichern fehlgeschlagen');
    }
  };

  const removeVehicle = async (v) => {
    if (!v) return;
    if (usingMock || !window.LSPD || !v.dbId) {
      applyVehicles(all.filter(x => x.kennzeichen !== v.kennzeichen));
      setDetail(null);
      return;
    }
    try {
      await window.LSPD.deleteFahrzeug(v.dbId);
      applyVehicles(all.filter(x => x.dbId !== v.dbId));
      setDetail(null);
    } catch (e) {
      alert(e.message || 'Löschen fehlgeschlagen');
    }
  };

  return (
    <div>
      <PageHead title="Fahrzeugregister" sub="Zentrale Zulassung · automatisch mit Cognate-Akten verknüpft">
        <Btn icon="Plus" onClick={() => { setEditing(null); setModalOpen(true); }}>Fahrzeug anmelden</Btn>
      </PageHead>

      {error && (
        <div className="mb-4 rounded-md border border-warning/40 bg-warning/10 px-4 py-3 text-sm text-warning flex items-center gap-2">
          <Icon name="TriangleAlert" size={16} /> {error}
        </div>
      )}
      {loading && (
        <div className="mb-4 text-sm text-muted flex items-center gap-2">
          <Icon name="LoaderCircle" size={16} className="animate-spin" /> Fahrzeuge werden geladen …
        </div>
      )}

      {/* Quick-Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
        {[
          ['Fahrzeuge gesamt', all.length, 'Car', 'ink'],
          ['Angemeldet', all.filter(v => v.status === 'ANGEMELDET').length, 'CircleCheck', 'success'],
          ['Zur Fahndung', all.filter(v => v.status === 'GESUCHT').length, 'Siren', 'danger'],
          ['Bennys-Importe', all.filter(v => v.quelle === 'bennys').length, 'Wrench', 'warning'],
        ].map(([l, val, ic, tone]) => <StatCard key={l} label={l} value={val} sub="aktuell" icon={ic} tone={tone} />)}
      </div>

      {/* Filter: Quelle */}
      <div className="flex flex-wrap items-center gap-2 mb-3">
        <span className="uplabel text-[10px] mr-1">Quelle</span>
        {[['ALLE', 'Alle'], ['lspd', FAHRZEUG_QUELLEN.lspd.label], ['bennys', FAHRZEUG_QUELLEN.bennys.label]].map(([k, l]) => (
          <button key={k} onClick={() => setQuelle(k)} className={`rounded-md border px-2.5 h-8 text-[12px] font-bold uppercase tracking-wide transition-all ${quelle === k ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>{l}</button>
        ))}
      </div>
      {/* Filter: Status */}
      <div className="flex flex-wrap items-center gap-2 mb-4">
        <span className="uplabel text-[10px] mr-1">Status</span>
        <button onClick={() => setStatus('ALLE')} className={`rounded-md border px-2.5 h-8 text-[12px] font-bold uppercase tracking-wide transition-all ${status === 'ALLE' ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>Alle</button>
        {Object.entries(FAHRZEUG_STATUS).map(([k, s]) => (
          <button key={k} onClick={() => setStatus(k)} className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 h-8 text-[12px] font-bold uppercase tracking-wide transition-all ${status === k ? 'border-accent text-accent bg-[var(--c-accent-soft)]' : 'border-line text-muted hover:text-ink'}`}>
            <span className="h-1.5 w-1.5 rounded-full" style={{ background: s.color }} />{s.label}
          </button>
        ))}
      </div>

      <div className="relative mb-4">
        <Icon name="Search" size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Kennzeichen, Modell oder Halter suchen …" className="w-full h-11 rounded-md bg-card border border-line pl-9 pr-3 text-sm outline-none focus:border-accent" />
      </div>

      {/* Tabelle */}
      <Card className="overflow-hidden">
        <div className="hidden md:grid grid-cols-[1fr_1.5fr_1.4fr_1.2fr_1.1fr_40px] gap-3 px-4 py-3 border-b border-line text-[11px] uplabel">
          <span>Kennzeichen</span><span>Fahrzeug</span><span>Halter</span><span>Quelle</span><span>Status</span><span></span>
        </div>
        {rows.length === 0 && <div className="p-8 text-center text-muted text-sm">Keine Fahrzeuge gefunden.</div>}
        {rows.map(v => {
          const linked = akteFuerHalter(v.halter);
          return (
            <button key={v.kennzeichen} onClick={() => setDetail(v)} className="w-full text-left grid grid-cols-2 md:grid-cols-[1fr_1.5fr_1.4fr_1.2fr_1.1fr_40px] gap-3 items-center px-4 py-3 border-b border-line/60 last:border-0 hover:bg-white/[.03] transition-colors">
              <div className="flex items-center gap-2.5 min-w-0">
                <span className="grid place-items-center h-8 w-8 rounded-md shrink-0" style={{ background: `${FAHRZEUG_STATUS[v.status].color}1f`, color: FAHRZEUG_STATUS[v.status].color }}><Icon name="Car" size={16} /></span>
                <span className="font-mono text-[13px] font-bold">{v.kennzeichen}</span>
              </div>
              <div className="min-w-0">
                <div className="text-sm font-semibold truncate">{v.modell}</div>
                <div className="text-[12px] text-muted">{v.typ} · {v.farbe}</div>
              </div>
              <div className="min-w-0 flex items-center gap-1.5">
                <span className="text-sm truncate">{v.halter}</span>
                {linked && <span title={`Akte ${linked.id}`} className="shrink-0 text-success"><Icon name="Link2" size={13} /></span>}
              </div>
              <div><QuelleBadge quelle={v.quelle} /></div>
              <div><FahrzeugStatusBadge status={v.status} /></div>
              <Icon name="ChevronRight" size={16} className="text-muted justify-self-end hidden md:block" />
            </button>
          );
        })}
      </Card>

      <FahrzeugModal open={modalOpen} onClose={() => { setModalOpen(false); setEditing(null); }} onSave={saveVehicle} initial={editing} />
      <FahrzeugDetail v={detail} go={go} onClose={() => setDetail(null)}
        onEdit={() => { setEditing(detail); setDetail(null); setModalOpen(true); }}
        onDelete={() => removeVehicle(detail)} />
    </div>
  );
}

Object.assign(window, { Fahrzeugregister, QuelleBadge, FahrzeugStatusBadge, akteFuerHalter });