// ─── Quotes — angebote with line items ───────────────────────

const QUOTE_STATUS = {
  draft:    { label:'Entwurf',    cls:'work' },
  sent:     { label:'Versendet',  cls:'new'  },
  accepted: { label:'Angenommen', cls:'qual' },
  rejected: { label:'Abgelehnt',  cls:'lost' }
};
const QUOTE_STATUS_OPTS = [['draft','Entwurf'],['sent','Versendet'],['accepted','Angenommen'],['rejected','Abgelehnt']];

function quoteTotal(q) {
  const sub = (q.items || []).reduce((s, it) => s + (Number(it.qty) || 0) * (Number(it.price) || 0), 0);
  return sub - (Number(q.discount) || 0);
}
function quoteCost(q) { return (q.items || []).reduce((s, it) => s + (Number(it.qty) || 0) * (Number(it.cost) || 0), 0); }
function quoteMargin(q) { const t = quoteTotal(q); return t > 0 ? (t - quoteCost(q)) / t : 0; }
const MARGIN_MIN = 0.25;
const APPROVAL = { none:null, pending:{ label:'Freigabe offen', cls:'work' }, approved:{ label:'Freigegeben', cls:'qual' } };

function blankQuote() {
  return { title:'', oppId:'', accountId:'', status:'draft', items:[{ name:'', qty:1, price:0, cost:0 }], discount:0, validUntil:'', owner:'JS', approval:'none' };
}

function QuoteForm({ rec, onClose }) {
  const isNew = !rec.id;
  const [f, setF] = useS(Object.assign(blankQuote(), JSON.parse(JSON.stringify(rec))));
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const opps = CRMStore.list('opportunities');

  const setItem = (i, k, v) => setF(p => { const items = p.items.slice(); items[i] = { ...items[i], [k]: v }; return { ...p, items }; });
  const addItem = () => setF(p => ({ ...p, items: [...p.items, { name:'', qty:1, price:0, cost:0 }] }));
  const rmItem = (i) => setF(p => ({ ...p, items: p.items.filter((_, j) => j !== i) }));
  const addFromCatalog = (sku) => { const pr = CRMStore.list('products').find(x => x.sku === sku); if (!pr) return; setF(p => ({ ...p, items: [...p.items.filter(it => it.name || it.price), { name: pr.name, qty:1, price: pr.price, cost: pr.cost }] })); };

  // when opp chosen, inherit its account
  const onOpp = (v) => { const o = CRMStore.get('opportunities', v); setF(p => ({ ...p, oppId: v, accountId: o ? o.accountId : p.accountId, title: p.title || (o ? o.name : '') })); };

  const canSave = f.title.trim() && f.accountId;
  const total = quoteTotal(f);
  const margin = quoteMargin(f);
  const needsApproval = (margin < MARGIN_MIN || (f.discount > 0 && total > 0 && (Number(f.discount) / (total + Number(f.discount))) > 0.10)) && total > 0;
  const save = () => {
    if (!canSave) return;
    const approval = needsApproval ? (f.approval === 'approved' ? 'approved' : 'pending') : 'none';
    const payload = Object.assign({}, f, { discount: Number(f.discount) || 0, approval,
      items: f.items.map(it => ({ name: it.name, qty: Number(it.qty) || 0, price: Number(it.price) || 0, cost: Number(it.cost) || 0 })) });
    if (isNew) { CRMStore.create('quotes', payload); toast('Angebot angelegt'); }
    else { CRMStore.update('quotes', rec.id, payload); toast('Angebot aktualisiert'); }
    onClose();
  };

  return (
    <Modal wide title={isNew ? 'Neues Angebot' : 'Angebot bearbeiten'} sub={isNew ? 'Angebot mit Positionen erstellen.' : f.id} onClose={onClose}
      footer={<>
        <span className="cmodal-note">Gesamt: <b style={{color:'var(--ink)'}}>{fmtEURfull(total)}</b></span>
        <span className="cmodal-foot-right">
          <button className="btn ghost" onClick={onClose}>Abbrechen</button>
          <button className="btn" disabled={!canSave} onClick={save}>{isNew ? 'Angebot anlegen' : 'Speichern'}</button>
        </span>
      </>}>
      <div className="form-grid">
        <Field label="Titel" req full><TextInput value={f.title} onChange={v => set('title', v)} placeholder="z. B. Spindelpaket S-7" /></Field>
        <Field label="Opportunity"><Select value={f.oppId} onChange={onOpp} options={[['','— keine —'], ...opps.map(o => [o.id, o.name])]} /></Field>
        <Field label="Account" req><Select value={f.accountId} onChange={v => set('accountId', v)} options={[['','— wählen —'], ...CRMStore.list('accounts').map(a => [a.id, a.name])]} /></Field>
        <Field label="Status"><Select value={f.status} onChange={v => set('status', v)} options={QUOTE_STATUS_OPTS} /></Field>
        <Field label="Gültig bis"><TextInput value={f.validUntil} onChange={v => set('validUntil', v)} type="date" /></Field>
      </div>

      <div className="q-catalog">
        <span className="kiki-field-label">Produktkatalog</span>
        <Select value="" onChange={addFromCatalog} options={[['','+ Position aus Katalog …'], ...CRMStore.list('products').map(p => [p.sku, p.name + ' · ' + fmtEUR(p.price) + ' (Marge ' + Math.round((p.price - p.cost) / p.price * 100) + '%)'])]} />
      </div>
      <div className="q-items">
        <div className="q-items-hd q6"><span>Position</span><span>Menge</span><span>EK €</span><span>VK €</span><span>Summe</span><span></span></div>
        {f.items.map((it, i) => (
          <div className="q-item q6" key={i}>
            <input className="form-input" value={it.name} placeholder="Bezeichnung" onChange={e => setItem(i, 'name', e.target.value)} />
            <input className="form-input" type="number" value={it.qty} onChange={e => setItem(i, 'qty', e.target.value)} />
            <input className="form-input" type="number" value={it.cost} onChange={e => setItem(i, 'cost', e.target.value)} />
            <input className="form-input" type="number" value={it.price} onChange={e => setItem(i, 'price', e.target.value)} />
            <span className="q-item-sum">{fmtEURfull((Number(it.qty) || 0) * (Number(it.price) || 0))}</span>
            <button className="q-item-rm" onClick={() => rmItem(i)} disabled={f.items.length === 1} title="Position entfernen">×</button>
          </div>
        ))}
        <button className="q-item-add" onClick={addItem}>{Icons.plus} Leere Position</button>
      </div>

      <div className="q-totals">
        <div className="qt-row"><span>Zwischensumme</span><span>{fmtEURfull(f.items.reduce((s, it) => s + (Number(it.qty) || 0) * (Number(it.price) || 0), 0))}</span></div>
        <div className="qt-row"><span>Rabatt €</span><input className="form-input qt-disc" type="number" value={f.discount} onChange={e => set('discount', e.target.value)} /></div>
        <div className="qt-row"><span>Marge</span><span style={{ color: margin < MARGIN_MIN ? 'var(--danger)' : 'var(--success)' }}>{Math.round(margin * 100)}% · {fmtEURfull(total - quoteCost(f))}</span></div>
        <div className="qt-row total"><span>Gesamt</span><span>{fmtEURfull(total)}</span></div>
      </div>

      {needsApproval && (
        <div className="q-approval">
          <div className="q-approval-hd">⚠ {margin < MARGIN_MIN ? ('Marge unter ' + Math.round(MARGIN_MIN * 100) + '%') : 'Rabatt über 10%'} — Freigabe durch Vertriebsleitung erforderlich</div>
          {ViewerStore.isBoss()
            ? <label className="conv-toggle"><input type="checkbox" checked={f.approval === 'approved'} onChange={e => set('approval', e.target.checked ? 'approved' : 'pending')} /><span>Freigabe als Vertriebsleitung erteilen</span></label>
            : <div className="q-approval-note">{f.approval === 'approved' ? '✓ Bereits freigegeben.' : 'Beim Speichern wird die Freigabe angefordert. Versand erst nach Freigabe möglich.'}</div>}
        </div>
      )}
    </Modal>
  );
}

function QuotesView({ focusRec, clearFocus }) {
  const [q, setQ] = useS('');
  const [tab, setTab] = useS('all');
  const [edit, setEdit] = useS(null);
  const [del, setDel] = useS(null);
  const [sort, setSort] = useS({ key:'', dir:1 });

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

  const all = scopeOwner(CRMStore.list('quotes'));
  const tabs = [['all','Alle',all.length],['draft','Entwurf',all.filter(x => x.status === 'draft').length],['sent','Versendet',all.filter(x => x.status === 'sent').length],['accepted','Angenommen',all.filter(x => x.status === 'accepted').length]];
  let rows = all;
  if (tab !== 'all') rows = rows.filter(x => x.status === tab);
  if (q.trim()) { const s = q.toLowerCase(); rows = rows.filter(x => x.title.toLowerCase().includes(s)); }

  const accName = (id) => { const a = CRMStore.get('accounts', id); return a ? a.name : '—'; };
  const QSTORD = { draft:0, sent:1, accepted:2, rejected:3 };
  rows = applySort(rows, sort, (x, k) => k === 'title' ? x.title.toLowerCase() : k === 'account' ? accName(x.accountId).toLowerCase() : k === 'margin' ? quoteMargin(x) : k === 'total' ? quoteTotal(x) : k === 'status' ? (QSTORD[x.status] || 0) : k === 'approval' ? (x.approval || '') : '');
  const sum = rows.reduce((s, x) => s + quoteTotal(x), 0);

  return (
    <div className="page">
      <div className="page-title-row">
        <div>
          <h1 className="page-title">Quotes</h1>
          <p className="page-sub">Angebote mit Positionen — verknüpft mit Opportunity und Account. Status von Entwurf bis Angenommen.</p>
        </div>
        <button className="btn" onClick={() => setEdit(blankQuote())}>{Icons.plus} Neues Angebot</button>
      </div>

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

      <div className="lv-card">
        <div className="lv-card-hd"><h3>Angebote</h3><span className="sub">{rows.length} · {fmtEUR(sum)} gesamt</span></div>
        {rows.length === 0 ? (
          <div className="empty">Keine Angebote. <a onClick={() => setEdit(blankQuote())}>Erstes Angebot anlegen →</a></div>
        ) : (
        <div className="lv-scroll">
        <table className="tbl">
          <thead><tr><SortTh k="title" label="Angebot" sort={sort} setSort={setSort} /><SortTh k="account" label="Account" sort={sort} setSort={setSort} /><SortTh k="margin" label="Marge" cls="num" sort={sort} setSort={setSort} /><SortTh k="total" label="Gesamt" cls="num" sort={sort} setSort={setSort} /><SortTh k="status" label="Status" sort={sort} setSort={setSort} /><SortTh k="approval" label="Freigabe" sort={sort} setSort={setSort} /><th className="num">Aktion</th></tr></thead>
          <tbody>
            {rows.map(x => {
              const st = QUOTE_STATUS[x.status] || QUOTE_STATUS.draft;
              const mg = quoteMargin(x);
              const appr = APPROVAL[x.approval || 'none'];
              return (
                <tr key={x.id} data-kiki-id={x.id} data-kiki-label={x.title} data-kiki-kind="Quote">
                  <td className="name"><div className="name-cell"><span className="avatar-sm">{Icons.quotes}</span><span><b>{x.title}</b><span className="sub">{x.id}{x.oppId ? ' · ' + x.oppId : ''}</span></span></div></td>
                  <td>{accName(x.accountId)}</td>
                  <td className="num"><span style={{ fontFamily:'var(--font-mono)', fontWeight:600, color: mg < MARGIN_MIN ? 'var(--danger)' : 'var(--success)' }}>{Math.round(mg * 100)}%</span></td>
                  <td className="num" style={{fontWeight:600}}>{fmtEUR(quoteTotal(x))}</td>
                  <td><span className={"status-pill " + st.cls}>{st.label}</span></td>
                  <td>{appr ? <span className={"status-pill " + appr.cls}>{appr.label}</span> : <span style={{color:'var(--muted-2)', fontSize:12}}>—</span>}</td>
                  <td className="num">
                    <div className="row-actions">
                      {x.approval === 'pending' && ViewerStore.isBoss() && <button className="ra primary" onClick={() => { CRMStore.update('quotes', x.id, { approval:'approved' }); toast('Angebot freigegeben'); }}>Freigeben</button>}
                      {x.status === 'draft' && <button className="ra" onClick={() => { if (x.approval === 'pending') { toast('Freigabe ausstehend — Versand blockiert'); return; } CRMStore.update('quotes', x.id, { status:'sent' }); toast('Angebot versendet · Nachfass-Aufgabe in 1 Woche erstellt'); }}>Versenden</button>}
                      {x.status === 'sent' && <button className="ra primary" onClick={() => { CRMStore.update('quotes', x.id, { status:'accepted' }); toast('Angebot angenommen'); }}>Annehmen</button>}
                      <button className="ra icon" title="Bearbeiten" onClick={() => setEdit(x)}>{Icons.edit || '✎'}</button>
                      <button className="ra icon danger" title="Löschen" onClick={() => setDel(x)}>{Icons.trash || '🗑'}</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        </div>
        )}
      </div>

      {edit && <QuoteForm rec={edit} onClose={() => setEdit(null)} />}
      {del && <Confirm danger text={'Angebot „' + del.title + '" löschen?'} confirmLabel="Löschen"
        onConfirm={() => { CRMStore.remove('quotes', del.id); toast('Angebot gelöscht'); setDel(null); }}
        onCancel={() => setDel(null)} />}
    </div>
  );
}