// ─── Leads — full CRUD + qualify + convert ───────────────────

function blankLead() {
  return { company:'', person:'', role:'', email:'', phone:'', city:'', src:'web', score:50, status:'new', owner:'JS', note:'' };
}

// Lead create / edit form
function LeadForm({ rec, onClose }) {
  const isNew = !rec.id;
  const [f, setF] = useS(Object.assign(blankLead(), rec));
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const canSave = f.company.trim() && f.person.trim();

  const save = () => {
    if (!canSave) return;
    if (isNew) { CRMStore.create('leads', f); toast('Lead ' + f.company + ' angelegt'); }
    else { CRMStore.update('leads', rec.id, f); toast('Lead aktualisiert'); }
    onClose();
  };

  return (
    <Modal wide title={isNew ? 'Neuer Lead' : 'Lead bearbeiten'}
      sub={isNew ? 'Erfassen Sie eine eingehende Anfrage — vor der Account-Anlage.' : f.id}
      onClose={onClose}
      footer={<>
        <span className="cmodal-note">{canSave ? 'Bereit zum Speichern' : 'Firma und Ansprechpartner sind erforderlich'}</span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn" disabled={!canSave} onClick={save}>{Icons.check2 || ''} {isNew ? 'Lead anlegen' : 'Speichern'}</button>
        </span>
      </>}>
      <div className="form-grid">
        <Field label="Firma" req full><TextInput value={f.company} onChange={v => set('company', v)} placeholder="z. B. Wittmann Guss GmbH" /></Field>
        <Field label="Ansprechpartner" req><TextInput value={f.person} onChange={v => set('person', v)} placeholder="Vor- und Nachname" /></Field>
        <Field label="Position"><TextInput value={f.role} onChange={v => set('role', v)} placeholder="z. B. Technischer Einkauf" /></Field>
        <Field label="E-Mail"><TextInput value={f.email} onChange={v => set('email', v)} type="email" placeholder="name@firma.de" /></Field>
        <Field label="Telefon"><TextInput value={f.phone} onChange={v => set('phone', v)} placeholder="+49 …" /></Field>
        <Field label="Ort"><TextInput value={f.city} onChange={v => set('city', v)} placeholder="Stadt" /></Field>
        <Field label="Quelle"><Select value={f.src} onChange={v => set('src', v)} options={LEAD_SRC_OPTS} /></Field>
        <Field label="Status"><Select value={f.status} onChange={v => set('status', v)} options={[['new','New'],['work','Working'],['qual','Qualified']]} /></Field>
        <Field label="Owner"><Select value={f.owner} onChange={v => set('owner', v)} options={OWNER_OPTS} /></Field>
        <Field label={'Score · ' + f.score} hint="0–100">
          <input type="range" min="0" max="100" value={f.score} onChange={e => set('score', Number(e.target.value))} className="form-range" />
        </Field>
        <Field label="Notiz" full><TextArea value={f.note} onChange={v => set('note', v)} placeholder="Kontext, Bedarf, nächster Schritt …" /></Field>
      </div>
      {!isNew && <AttachList refType="lead" refId={rec.id} />}
    </Modal>
  );
}

// Convert lead → account (+ optional opportunity)
function ConvertForm({ lead, onClose, onDone }) {
  const existing = CRMStore.list('accounts').find(a => a.name.toLowerCase() === lead.company.toLowerCase());
  const [createOpp, setCreateOpp] = useS(true);
  const [oppName, setOppName] = useS(lead.company + ' — ' + (lead.note ? 'Neue Opportunity' : 'Erstprojekt'));
  const [amount, setAmount] = useS('');
  const [stage, setStage] = useS('qual');
  const [close, setClose] = useS('');

  const go = () => {
    const res = CRMStore.convertLead(lead.id, { createOpp, oppName, amount, stage, close, owner: lead.owner });
    toast('Lead konvertiert → ' + res.account.name + (res.opportunity ? ' + Opportunity' : ''));
    onDone(res);
    onClose();
  };

  return (
    <Modal wide title={'Lead konvertieren · ' + lead.company}
      sub="Erzeugt einen Account, einen Primärkontakt und optional eine Opportunity."
      onClose={onClose}
      footer={<>
        <span className="cmodal-note">{existing ? 'Bestehender Account wird wiederverwendet' : 'Neuer Account wird angelegt'}</span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn" onClick={go}>Konvertieren</button>
        </span>
      </>}>
      <div className="conv-flow">
        <div className="conv-card">
          <span className="conv-ic">{Icons.leads}</span>
          <b>{lead.company}</b>
          <span>{lead.person} · {lead.role || '—'}</span>
          <span className="conv-tag">Lead {lead.id}</span>
        </div>
        <span className="conv-arrow">→</span>
        <div className="conv-card on">
          <span className="conv-ic">{Icons.accounts}</span>
          <b>{existing ? existing.name : lead.company}</b>
          <span>{existing ? 'bestehend · ' + existing.id : 'neuer Account'}</span>
          <span className="conv-tag on">Account</span>
        </div>
        <span className={"conv-arrow" + (createOpp ? '' : ' off')}>→</span>
        <div className={"conv-card" + (createOpp ? ' on' : ' off')}>
          <span className="conv-ic">{Icons.opps}</span>
          <b>{createOpp ? 'Opportunity' : 'keine Opp'}</b>
          <span>{createOpp ? (amount ? fmtEUR(amount) : 'Betrag offen') : 'übersprungen'}</span>
          <span className={"conv-tag" + (createOpp ? ' on' : '')}>Opportunity</span>
        </div>
      </div>

      <label className="conv-toggle">
        <input type="checkbox" checked={createOpp} onChange={e => setCreateOpp(e.target.checked)} />
        <span>Opportunity direkt mit anlegen</span>
      </label>

      {createOpp && (
        <div className="form-grid" style={{marginTop:14}}>
          <Field label="Opportunity-Name" req full><TextInput value={oppName} onChange={setOppName} /></Field>
          <Field label="Betrag (€)"><TextInput value={amount} onChange={setAmount} type="number" placeholder="z. B. 120000" /></Field>
          <Field label="Stage"><Select value={stage} onChange={setStage} options={STAGE_OPTS.filter(o => !['won','lost'].includes(o[0]))} /></Field>
          <Field label="Erwarteter Abschluss"><TextInput value={close} onChange={setClose} type="date" /></Field>
        </div>
      )}
    </Modal>
  );
}

function LeadsView({ focus, clearFocus }) {
  const [q, setQ] = useS('');
  const [tab, setTab] = useS('open');
  const [edit, setEdit] = useS(null);     // lead being created/edited
  const [conv, setConv] = useS(null);     // lead being converted
  const [del, setDel] = useS(null);       // lead pending delete
  const [sort, setSort] = useS({ key:'', dir:1 });

  // kiki Next Best Action → open the targeted lead directly
  useE(() => {
    if (!focus) return;
    const live = CRMStore.get('leads', focus.rec.id) || focus.rec;
    if (focus.action === 'convert') setConv(live); else setEdit(live);
    clearFocus();
  }, [focus]);

  const all = scopeOwner(CRMStore.list('leads'));
  const counts = {
    open: all.filter(l => l.status !== 'conv').length,
    new: all.filter(l => l.status === 'new').length,
    work: all.filter(l => l.status === 'work').length,
    qual: all.filter(l => l.status === 'qual').length,
    conv: all.filter(l => l.status === 'conv').length
  };
  const tabs = [['open','Offen',counts.open],['new','New',counts.new],['work','Working',counts.work],['qual','Qualified',counts.qual],['conv','Konvertiert',counts.conv]];

  let rows = all;
  if (tab === 'open') rows = rows.filter(l => l.status !== 'conv');
  else rows = rows.filter(l => l.status === tab);
  if (q.trim()) {
    const s = q.toLowerCase();
    rows = rows.filter(l => (l.company + ' ' + l.person + ' ' + l.role + ' ' + l.city).toLowerCase().includes(s));
  }
  const LSTORD = { new:0, work:1, qual:2, conv:3 };
  rows = applySort(rows, sort, (l, k) => k === 'company' ? l.company.toLowerCase() : k === 'src' ? (SRC_META[l.src] || {}).label || '' : k === 'score' ? l.score : k === 'status' ? (LSTORD[l.status] || 0) : k === 'owner' ? l.owner : '');

  return (
    <div className="page">
      <div className="page-title-row">
        <div>
          <h1 className="page-title">Leads</h1>
          <p className="page-sub">Eingehende Anfragen erfassen, scoren, qualifizieren — und in einen Account + Opportunity überführen.</p>
        </div>
        <button className="btn" onClick={() => setEdit(blankLead())}>{Icons.plus} Neuer Lead</button>
      </div>

      <Toolbar q={q} onQ={setQ} placeholder="Leads durchsuchen …" tabs={tabs} tab={tab} onTab={setTab} />

      <div className="lv-card">
        <div className="lv-card-hd">
          <h3>Lead Inbox</h3><span className="sub">{rows.length} Datensätze</span>
        </div>
        {rows.length === 0 ? (
          <div className="empty">Keine Leads in dieser Ansicht. <a onClick={() => setEdit(blankLead())}>Ersten Lead anlegen →</a></div>
        ) : (
        <div className="lv-scroll">
        <table className="tbl">
          <thead><tr><SortTh k="company" label="Lead" sort={sort} setSort={setSort} /><SortTh k="src" label="Quelle" sort={sort} setSort={setSort} /><SortTh k="score" label="Score" sort={sort} setSort={setSort} /><SortTh k="status" label="Status" sort={sort} setSort={setSort} /><SortTh k="owner" label="Owner" sort={sort} setSort={setSort} /><th className="num">Aktion</th></tr></thead>
          <tbody>
            {rows.map(l => {
              const sm = SRC_META[l.src] || SRC_META.web;
              const st = LEAD_STATUS[l.status] || LEAD_STATUS.new;
              return (
                <tr key={l.id} data-kiki-id={l.id} data-kiki-label={l.company} data-kiki-kind="Lead" {...attachDropProps('lead', l.id)}>
                  <td className="name"><div className="name-cell"><span className="avatar-sm alt">{initials(l.company)}</span><span><b>{l.company}</b><span className="sub">{l.person} · {l.role || '—'} · {l.id}</span></span></div></td>
                  <td><span className={"src-tag " + sm.cls}>{sm.label}</span></td>
                  <td><span className="score"><span className="track"><span style={{width:l.score + '%'}}></span></span><b>{l.score}</b></span></td>
                  <td><span className={"status-pill " + st.cls}>{st.label}</span></td>
                  <td>{l.owner}</td>
                  <td className="num">
                    <div className="row-actions">
                      {l.status !== 'conv' && l.status !== 'qual' && <button className="ra" title="Als qualifiziert markieren" onClick={() => { CRMStore.update('leads', l.id, { status:'qual' }); toast('Lead qualifiziert'); }}>Qualifizieren</button>}
                      {l.status !== 'conv' && <button className="ra primary" title="In Account + Opportunity konvertieren" onClick={() => setConv(l)}>Konvertieren</button>}
                      {l.status === 'conv' && <span className="ra-done">✓ konvertiert</span>}
                      <button className="ra icon" title="Bearbeiten" onClick={() => setEdit(l)}>{Icons.edit || '✎'}</button>
                      <button className="ra icon danger" title="Löschen" onClick={() => setDel(l)}>{Icons.trash || '🗑'}</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        </div>
        )}
      </div>

      {edit && <LeadForm rec={edit} onClose={() => setEdit(null)} />}
      {conv && <ConvertForm lead={conv} onClose={() => setConv(null)} onDone={() => {}} />}
      {del && <Confirm danger text={'Lead „' + del.company + '" wirklich löschen?'} confirmLabel="Löschen"
        onConfirm={() => { CRMStore.remove('leads', del.id); toast('Lead gelöscht'); setDel(null); }}
        onCancel={() => setDel(null)} />}
    </div>
  );
}