// ─── Accounts — list + CRUD + detail drawer ──────────────────

function blankAccount() {
  return { name:'', ind:'', city:'', country:'DE', owner:'JS', tier:'B', health:'g', ar:'0', phone:'', web:'', note:'' };
}

const TIER_OPTS = [['A','A · Key Account'],['B','B · Wachstum'],['C','C · Standard']];
const HEALTH_OPTS = [['g','Gesund'],['y','Beobachten'],['r','Risiko']];
const HEALTH_LABEL = { g:'Gesund', y:'Beobachten', r:'Risiko' };

function AccountForm({ rec, onClose }) {
  const isNew = !rec.id;
  const [f, setF] = useS(Object.assign(blankAccount(), rec));
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const canSave = f.name.trim();
  const save = () => {
    if (!canSave) return;
    if (isNew) { CRMStore.create('accounts', f); toast('Account ' + f.name + ' angelegt'); }
    else { CRMStore.update('accounts', rec.id, f); toast('Account aktualisiert'); }
    onClose();
  };
  return (
    <Modal wide title={isNew ? 'Neuer Account' : 'Account bearbeiten'} sub={isNew ? 'Kundenorganisation anlegen.' : f.id} onClose={onClose}
      footer={<>
        <span className="cmodal-note">{canSave ? 'Bereit zum Speichern' : 'Name ist erforderlich'}</span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn" disabled={!canSave} onClick={save}>{isNew ? 'Account anlegen' : 'Speichern'}</button>
        </span>
      </>}>
      <div className="form-grid">
        <Field label="Firmenname" req full><TextInput value={f.name} onChange={v => set('name', v)} placeholder="z. B. Krause Maschinenbau GmbH" /></Field>
        <Field label="Branche"><TextInput value={f.ind} onChange={v => set('ind', v)} placeholder="z. B. Maschinenbau" /></Field>
        <Field label="Ort"><TextInput value={f.city} onChange={v => set('city', v)} /></Field>
        <Field label="Land"><Select value={f.country} onChange={v => set('country', v)} options={[['DE','Deutschland'],['AT','Österreich'],['CH','Schweiz'],['SE','Schweden'],['CZ','Tschechien']]} /></Field>
        <Field label="Owner"><Select value={f.owner} onChange={v => set('owner', v)} options={OWNER_OPTS} /></Field>
        <Field label="Tier"><Select value={f.tier} onChange={v => set('tier', v)} options={TIER_OPTS} /></Field>
        <Field label="Health"><Select value={f.health} onChange={v => set('health', v)} options={HEALTH_OPTS} /></Field>
        <Field label="Telefon"><TextInput value={f.phone} onChange={v => set('phone', v)} /></Field>
        <Field label="Web"><TextInput value={f.web} onChange={v => set('web', v)} placeholder="firma.de" /></Field>
        <Field label="Notiz" full><TextArea value={f.note} onChange={v => set('note', v)} /></Field>
      </div>
    </Modal>
  );
}

function ContactForm({ rec, onClose }) {
  const isNew = !rec.id;
  const [f, setF] = useS(Object.assign({ name:'', role:'', tag:'Influencer', email:'', phone:'' }, rec));
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const canSave = f.name.trim();
  const save = () => {
    if (!canSave) return;
    if (isNew) { CRMStore.create('contacts', f); toast('Kontakt angelegt'); }
    else { CRMStore.update('contacts', rec.id, f); toast('Kontakt aktualisiert'); }
    onClose();
  };
  return (
    <Modal title={isNew ? 'Neuer Kontakt' : 'Kontakt bearbeiten'} sub={isNew ? 'Ansprechpartner zum Account.' : f.id} onClose={onClose}
      footer={<>
        <span className="cmodal-note">{canSave ? 'Bereit zum Speichern' : 'Name ist erforderlich'}</span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn" disabled={!canSave} onClick={save}>{isNew ? 'Kontakt anlegen' : 'Speichern'}</button>
        </span>
      </>}>
      <div className="form-grid">
        <Field label="Name" req full><TextInput value={f.name} onChange={v => set('name', v)} placeholder="Vor- und Nachname" /></Field>
        <Field label="Position"><TextInput value={f.role} onChange={v => set('role', v)} placeholder="z. B. CTO" /></Field>
        <Field label="Rolle im Buying Center"><Select value={f.tag} onChange={v => set('tag', v)} options={[['Decision Maker','Decision Maker'],['Economic Buyer','Economic Buyer'],['Influencer','Influencer'],['Champion','Champion'],['Primary','Primärkontakt'],['User','Anwender']]} /></Field>
        <Field label="E-Mail"><TextInput value={f.email} onChange={v => set('email', v)} type="email" /></Field>
        <Field label="Telefon"><TextInput value={f.phone} onChange={v => set('phone', v)} /></Field>
      </div>
    </Modal>
  );
}

function AccountHierarchy({ acc }) {
  const all = CRMStore.list('accounts');
  const parent = acc.parentId ? CRMStore.get('accounts', acc.parentId) : null;
  const hqId = parent ? parent.id : acc.id;
  const children = all.filter(a => a.parentId === hqId);
  const isGroup = !!parent || children.length > 0;
  if (!isGroup) return null;
  // consolidated pipeline across HQ + all children
  const members = [hqId, ...all.filter(a => a.parentId === hqId).map(a => a.id)];
  const groupPipe = CRMStore.list('opportunities', o => members.includes(o.accountId) && !['won','lost'].includes(o.stage)).reduce((s, o) => s + (o.amount || 0), 0);
  const hq = CRMStore.get('accounts', hqId);
  return (
    <div className="drawer-sec">
      <h4>Konzernstruktur · {fmtEUR(groupPipe)} Pipeline (konsolidiert)</h4>
      <div className="hier">
        <div className={"hier-node hq" + (hqId === acc.id ? ' self' : '')}>{Icons.accounts}<span><b>{hq.name}</b><span>Konzernzentrale · {hq.country}</span></span></div>
        {all.filter(a => a.parentId === hqId).map(c => (
          <div key={c.id} className={"hier-node child" + (c.id === acc.id ? ' self' : '')}>↳ <span><b>{c.name}</b><span>{c.city} · {c.country}</span></span></div>
        ))}
      </div>
    </div>
  );
}

function AccountDrawer({ acc, onClose, onEdit, onOpenOpp, onNewOpp, onAddContact, onEditContact, onDeleteContact }) {
  const opps = CRMStore.list('opportunities', o => o.accountId === acc.id);
  const contacts = CRMStore.list('contacts', c => c.accountId === acc.id);
  const pipe = opps.filter(o => !['won','lost'].includes(o.stage)).reduce((s, o) => s + (o.amount || 0), 0);
  return (
    <>
      <div className="drawer-scrim open" onClick={onClose}></div>
      <aside className="drawer open">
        <div className="drawer-hd">
          <span className="av">{initials(acc.name)}</span>
          <span className="t"><b>{acc.name}</b><span>{acc.ind || '—'} · {acc.city || '—'} · {acc.id}</span></span>
          <button className="x" onClick={onClose}>✕</button>
        </div>
        <div className="drawer-body">
          <div className="drawer-kpis">
            <div className="drawer-kpi"><div className="k">Pipeline</div><div className="v">{fmtEUR(pipe)}</div></div>
            <div className="drawer-kpi"><div className="k">Opps</div><div className="v">{opps.length}</div></div>
            <div className="drawer-kpi"><div className="k">Tier</div><div className="v">{acc.tier}</div></div>
          </div>
          <div className="drawer-sec">
            <h4>Stammdaten</h4>
            <div className="drawer-row"><span className="l">Owner</span><span className="r">{OWNERS[acc.owner] || acc.owner}</span></div>
            <div className="drawer-row"><span className="l">Health</span><span className="r"><span className={"health " + acc.health}></span>{HEALTH_LABEL[acc.health]}</span></div>
            <div className="drawer-row"><span className="l">Offene Forderungen</span><span className="r">{fmtEURfull(acc.ar)}</span></div>
            <div className="drawer-row"><span className="l">Telefon</span><span className="r">{acc.phone || '—'}</span></div>
            <div className="drawer-row"><span className="l">Web</span><span className="r">{acc.web || '—'}</span></div>
          </div>
          {acc.note && <div className="drawer-sec"><h4>Notiz</h4><p className="drawer-note">{acc.note}</p></div>}
          <AccountHierarchy acc={acc} />
          <SapPanel accountId={acc.id} />
          <div className="drawer-sec">
            <h4>Kontakte · {contacts.length} <button className="sec-add" onClick={() => onAddContact(acc)}>{Icons.plus} Kontakt</button></h4>
            {contacts.length === 0 ? <p className="drawer-note">Noch keine Kontakte.</p> :
              contacts.map(c => (
                <div key={c.id} className="drawer-line">
                  <span className="ic">{Icons.accounts}</span>
                  <span className="m"><b>{c.name}</b><span>{c.role} {c.tag ? '· ' + c.tag : ''}</span></span>
                  <span className="line-actions">
                    <button className="ra icon" title="Bearbeiten" onClick={() => onEditContact(c)}>{Icons.edit}</button>
                    <button className="ra icon danger" title="Löschen" onClick={() => onDeleteContact(c)}>{Icons.trash}</button>
                  </span>
                </div>
              ))}
          </div>
          <div className="drawer-sec">
            <h4>Opportunities · {opps.length}</h4>
            {opps.length === 0 ? <p className="drawer-note">Noch keine Opportunities.</p> :
              opps.map(o => {
                const sm = STAGE_META[o.stage] || STAGE_META.qual;
                return <div key={o.id} className="drawer-line clickable" onClick={() => onOpenOpp(o)}><span className="ic">{Icons.opps}</span><span className="m"><b>{o.name}</b><span><span className={"stage-pill " + sm.cls}><span className="dot"></span>{sm.label}</span> · {fmtEUR(o.amount)}</span></span><span className="end">›</span></div>;
              })}
          </div>
        </div>
        <div className="drawer-foot">
          <span className="note">Account · Demo</span>
          <span className="right">
            <button className="btn ghost" onClick={() => onNewOpp(acc)}>{Icons.plus} Opportunity</button>
            <button className="btn" onClick={() => onEdit(acc)}>Bearbeiten</button>
          </span>
        </div>
      </aside>
    </>
  );
}

function AccountsView({ onOpenOpp, onNewOppForAccount, focusRec, clearFocus }) {
  const [q, setQ] = useS('');
  const [tab, setTab] = useS('all');
  const [edit, setEdit] = useS(null);
  const [open, setOpen] = useS(null);
  const [del, setDel] = useS(null);
  const [contactEdit, setContactEdit] = useS(null);
  const [contactDel, setContactDel] = useS(null);
  const [sort, setSort] = useS({ key:'', dir:1 });

  useE(() => {
    if (!focusRec) return;
    setOpen(CRMStore.get('accounts', focusRec.id) || focusRec);
    clearFocus();
  }, [focusRec]);

  const all = scopeOwner(CRMStore.list('accounts'));
  const tabs = [['all','Alle',all.length],['my','Meine',all.filter(a => a.owner === 'JS').length],['key','Key (A)',all.filter(a => a.tier === 'A').length]];
  let rows = all;
  if (tab === 'my') rows = rows.filter(a => a.owner === 'JS');
  if (tab === 'key') rows = rows.filter(a => a.tier === 'A');
  if (q.trim()) { const s = q.toLowerCase(); rows = rows.filter(a => (a.name + ' ' + a.ind + ' ' + a.city).toLowerCase().includes(s)); }

  const pipeFor = (id) => fmtEUR(CRMStore.list('opportunities', o => o.accountId === id && !['won','lost'].includes(o.stage)).reduce((s, o) => s + (o.amount || 0), 0));
  const oppCount = (id) => CRMStore.list('opportunities', o => o.accountId === id).length;
  const pipeNum = (id) => CRMStore.list('opportunities', o => o.accountId === id && !['won','lost'].includes(o.stage)).reduce((s, o) => s + (o.amount || 0), 0);
  const TIERORD = { A:0, B:1, C:2 }, HORD = { g:0, y:1, r:2 };
  rows = applySort(rows, sort, (a, k) => k === 'name' ? a.name.toLowerCase() : k === 'ind' ? (a.ind || '').toLowerCase() : k === 'owner' ? a.owner : k === 'opps' ? oppCount(a.id) : k === 'pipe' ? pipeNum(a.id) : k === 'tier' ? (TIERORD[a.tier] || 0) : k === 'health' ? (HORD[a.health] || 0) : '');

  return (
    <div className="page">
      <div className="page-title-row">
        <div>
          <h1 className="page-title">Accounts &amp; Contacts</h1>
          <p className="page-sub">Single Source of Truth für Kundenorganisationen — alle Opportunities und Kontakte referenzieren einen Account.</p>
        </div>
        <button className="btn" onClick={() => setEdit(blankAccount())}>{Icons.plus} Neuer Account</button>
      </div>

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

      <div className="lv-card">
        <div className="lv-card-hd"><h3>Accounts</h3><span className="sub">{rows.length} Datensätze</span></div>
        {rows.length === 0 ? (
          <div className="empty">Keine Accounts. <a onClick={() => setEdit(blankAccount())}>Ersten Account anlegen →</a></div>
        ) : (
        <div className="lv-scroll">
        <table className="tbl">
          <thead><tr><SortTh k="name" label="Account" sort={sort} setSort={setSort} /><SortTh k="ind" label="Branche" sort={sort} setSort={setSort} /><SortTh k="owner" label="Owner" sort={sort} setSort={setSort} /><SortTh k="opps" label="Opps" cls="num" sort={sort} setSort={setSort} /><SortTh k="pipe" label="Pipeline" cls="num" sort={sort} setSort={setSort} /><SortTh k="tier" label="Tier" sort={sort} setSort={setSort} /><SortTh k="health" label="Health" sort={sort} setSort={setSort} /><th className="num">Aktion</th></tr></thead>
          <tbody>
            {rows.map(a => (
              <tr key={a.id} className="clickable" onClick={() => setOpen(a)} data-kiki-id={a.id} data-kiki-label={a.name} data-kiki-kind="Account">
                <td className="name"><div className="name-cell"><span className="avatar-sm">{initials(a.name)}</span><span><b>{a.name}{a.hq && <span className="hq-badge">Konzern</span>}{a.parentId && <span className="hq-badge sub">↳ Werk</span>}</b><span className="sub">{a.city || '—'} · {a.id}</span></span></div></td>
                <td>{a.ind || '—'}</td>
                <td>{a.owner}</td>
                <td className="num">{oppCount(a.id)}</td>
                <td className="num">{pipeFor(a.id)}</td>
                <td><span className="src-tag">{a.tier}</span></td>
                <td><span className={"health " + a.health}></span></td>
                <td className="num" onClick={e => e.stopPropagation()}>
                  <div className="row-actions">
                    <button className="ra icon" title="Bearbeiten" onClick={() => setEdit(a)}>{Icons.edit || '✎'}</button>
                    <button className="ra icon danger" title="Löschen" onClick={() => setDel(a)}>{Icons.trash || '🗑'}</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
        )}
      </div>

      {open && <AccountDrawer acc={CRMStore.get('accounts', open.id)} onClose={() => setOpen(null)} onEdit={a => { setOpen(null); setEdit(a); }} onOpenOpp={o => { setOpen(null); onOpenOpp(o); }} onNewOpp={a => { setOpen(null); onNewOppForAccount(a); }}
        onAddContact={a => setContactEdit({ accountId: a.id })}
        onEditContact={c => setContactEdit(c)}
        onDeleteContact={c => setContactDel(c)} />}
      {contactEdit && <ContactForm rec={contactEdit} onClose={() => setContactEdit(null)} />}
      {contactDel && <Confirm danger text={'Kontakt „' + contactDel.name + '" löschen?'} confirmLabel="Löschen"
        onConfirm={() => { CRMStore.remove('contacts', contactDel.id); toast('Kontakt gelöscht'); setContactDel(null); }}
        onCancel={() => setContactDel(null)} />}
      {edit && <AccountForm rec={edit} onClose={() => setEdit(null)} />}
      {del && <Confirm danger text={'Account „' + del.name + '" löschen? Verknüpfte Opportunities bleiben bestehen.'} confirmLabel="Löschen"
        onConfirm={() => { CRMStore.remove('accounts', del.id); toast('Account gelöscht'); setDel(null); }}
        onCancel={() => setDel(null)} />}
    </div>
  );
}