// ─── SAP Integration — Hub + per-account panel ───────────────

function fmtEURsap(n) { return '€ ' + (Number(n) || 0).toLocaleString('de-DE'); }

// SAP panel shown inside the Account drawer
function SapPanel({ accountId }) {
  const sap = CRMStore.sapFor(accountId);
  const orders = CRMStore.list('saporders', o => o.accountId === accountId);
  if (!sap) return null;
  return (
    <div className="drawer-sec">
      <h4>{Icons.plug} SAP ERP · Debitor {sap.debtor}</h4>
      <div className="sap-grid">
        <div className="sap-kpi"><span className="k">Umsatz YTD</span><span className="v">{fmtEURsap(sap.revYTD)}</span></div>
        <div className="sap-kpi"><span className="k">Umsatz Vorjahr</span><span className="v">{fmtEURsap(sap.revLY)}</span></div>
        <div className="sap-kpi"><span className="k">Kreditlimit</span><span className="v">€ {sap.credit}</span></div>
      </div>
      <div className="drawer-row"><span className="l">Zahlungsbedingung</span><span className="r">{sap.terms}</span></div>
      <div className="drawer-row"><span className="l">Status</span><span className="r">{sap.blocked ? <span className="sap-flag block">⚠ Liefersperre</span> : <span className="sap-flag ok">✓ frei</span>}</span></div>
      <div style={{ marginTop: 10 }}>
        {orders.length === 0 ? <p className="drawer-note">Keine offenen SAP-Vorgänge.</p> :
          orders.map(o => (
            <div key={o.id} className="drawer-line"><span className="ic">{o.kind === 'zanf' ? Icons.file : Icons.quotes}</span>
              <span className="m"><b>{o.sapNo}</b><span>{o.desc} · {o.status}</span></span>
              <span className="end">{fmtEUR(o.amount)}</span></div>
          ))}
      </div>
    </div>
  );
}

const CONNECTORS = [
  { name:'SAP ERP', sub:'S/4HANA · Debitoren, Aufträge, SAP-Vorgänge', status:'ok', dir:'bidirektional', sync:'vor 6 Min', count:'1.247 Debitoren' },
  { name:'snapADDY', sub:'Visitenkarten-Scan (Messe)', status:'ok', dir:'eingehend', sync:'vor 22 Min', count:'24 Leads / Monat' },
  { name:'Salesviewer', sub:'Website-Tracking', status:'ok', dir:'eingehend', sync:'live', count:'312 Sessions / Woche' },
  { name:'MS Outlook & Teams', sub:'E-Mail, Kalender, Anrufe', status:'ok', dir:'bidirektional', sync:'live', count:'Auto-Logging aktiv' }
];

const SAP_STEPS = [
  { n:'01', t:'Anfrage im CRM', d:'Kundenanfrage erfasst — aus Lead, Mail oder Opportunity.' },
  { n:'02', t:'Klassifikation', d:'Teil/Variante & Werkstoff zugeordnet, Stammdaten geprüft.' },
  { n:'03', t:'HK-Schätzung', d:'Herstellkosten-Kalkulation läuft über API.' },
  { n:'04', t:'SAP zurück ins CRM', d:'SAP-Vorgang angelegt — Preis & Marge im Angebot.' }
];

function IntegrationsHubView() {
  useStore();
  const [busy, setBusy] = useS(false);
  const orders = CRMStore.list('saporders').slice().sort((a, b) => (a.when < b.when ? 1 : -1));

  const simulate = () => {
    const opp = scopeOwner(CRMStore.list('opportunities')).find(o => !['won','lost'].includes(o.stage) && !CRMStore.list('saporders').some(s => s.oppId === o.id));
    if (!opp) { toast('Alle offenen Opportunities haben bereits einen SAP-Vorgang'); return; }
    setBusy(true);
    setTimeout(() => {
      const acc = CRMStore.get('accounts', opp.accountId);
      const rec = CRMStore.create('saporders', { kind:'zanf', accountId: opp.accountId, oppId: opp.id,
        sapNo: 'ZANF-' + (opp.accountId.replace('ACC-', '')) + '-' + String(Math.floor(Math.random() * 90) + 10),
        desc: opp.name + ' · Kalkulationsanfrage', amount: opp.amount, status: 'HK-Schätzung läuft', when: new Date().toISOString().slice(0, 10) });
      CRMStore.create('activities', { kind:'task', subject:'SAP-Vorgang erhalten: ' + rec.sapNo, refType:'opportunity', refId: opp.id,
        when: new Date().toISOString().slice(0, 10) + ' 09:00', dur:30, owner: opp.owner, done:false, note:'Automatisch aus SAP-Integration.' });
      toast('SAP-Vorgang ' + rec.sapNo + ' angelegt · Aktivität erzeugt');
      setBusy(false);
    }, 1400);
  };

  return (
    <div className="page">
      <div className="page-title-row">
        <div>
          <h1 className="page-title">Integrations Hub · SAP</h1>
          <p className="page-sub">Das CRM nutzt die SAP-Daten — ohne sie zu ersetzen. Debitoren, Aufträge und Kalkulationen bleiben in SAP, das CRM schreibt strukturiert zurück.</p>
        </div>
        <button className="btn" disabled={busy} onClick={simulate}>{busy ? 'SAP rechnet …' : <>{Icons.plus} Anfrage simulieren</>}</button>
      </div>

      <div className="conn-grid">
        {CONNECTORS.map(c => (
          <div key={c.name} className="conn-card">
            <div className="conn-hd">
              <span className={"conn-dot " + c.status}></span>
              <b>{c.name}</b>
              <span className={"conn-status " + c.status}>{c.status === 'ok' ? 'Verbunden' : 'Geplant'}</span>
            </div>
            <p>{c.sub}</p>
            <div className="conn-meta"><span>{c.dir}</span><span>Sync: {c.sync}</span></div>
            <div className="conn-count">{c.count}</div>
          </div>
        ))}
      </div>

      <div className="lv-card" style={{ marginTop: 18 }}>
        <div className="lv-card-hd"><h3>Anfrage → HK-Schätzung → SAP</h3><span className="sub">Anf. 1 · automatisierter Durchstich</span></div>
        <div className="sap-pipe">
          {SAP_STEPS.map((s, i) => (
            <React.Fragment key={s.n}>
              <div className={"sap-step" + (busy ? ' busy' : '')}>
                <span className="sap-step-n">{s.n}</span>
                <b>{s.t}</b>
                <span>{s.d}</span>
              </div>
              {i < SAP_STEPS.length - 1 && <span className="sap-arrow">→</span>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="lv-card" style={{ marginTop: 18 }}>
        <div className="lv-card-hd"><h3>SAP-Vorgänge</h3><span className="sub">{orders.length} · Aufträge &amp; SAP-Vorgänge</span></div>
        <div className="lv-scroll">
          <table className="tbl">
            <thead><tr><th>SAP-Nr.</th><th>Typ</th><th>Account</th><th>Bezeichnung</th><th>Status</th><th className="num">Betrag</th><th>Datum</th></tr></thead>
            <tbody>
              {orders.map(o => {
                const a = CRMStore.get('accounts', o.accountId);
                return (
                  <tr key={o.id}>
                    <td className="name"><b>{o.sapNo}</b></td>
                    <td><span className={"src-tag " + (o.kind === 'zanf' ? 'snap' : '')}>{o.kind === 'zanf' ? 'SAP' : 'Auftrag'}</span></td>
                    <td>{a ? a.name : o.accountId}</td>
                    <td style={{ color:'var(--muted)' }}>{o.desc}</td>
                    <td><span className="status-pill work">{o.status}</span></td>
                    <td className="num" style={{ fontWeight:600 }}>{fmtEUR(o.amount)}</td>
                    <td style={{ fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--muted)' }}>{o.when}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}