// ─── App shell · sidebar · home dashboard · routing ──────────

const LockIco = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
);

const FN_NAV = [
  { group:'Workspace', items:[
    { id:'home', icon:'home', label:'Home', live:true },
    { id:'ai', icon:'ai', label:'AI Assistant', live:false }
  ]},
  { group:'Sales', items:[
    { id:'leads', icon:'leads', label:'Leads', live:true },
    { id:'accounts', icon:'accounts', label:'Accounts & Contacts', live:true },
    { id:'opps', icon:'opps', label:'Opportunities', live:true },
    { id:'quotes', icon:'quotes', label:'Quotes', live:true },
    { id:'contracts', icon:'contracts', label:'Contracts', live:false }
  ]},
  { group:'Engage', items:[
    { id:'activities', icon:'activities', label:'Activities', live:true },
    { id:'service', icon:'service', label:'Service & Tickets', live:false },
    { id:'visits', icon:'visits', label:'Visit Planning', live:false }
  ]},
  { group:'Operate', items:[
    { id:'journey', icon:'route', label:'Customer Journey', live:true },
    { id:'winloss', icon:'target', label:'Win/Loss & Wettbewerb', live:true },
    { id:'territory', icon:'territory', label:'Territory & Team', live:false },
    { id:'kb', icon:'kb', label:'Knowledge Base', live:false },
    { id:'analytics', icon:'analytics', label:'Reports & Analytics', live:true }
  ]},
  { group:'Configure', items:[
    { id:'integrations', icon:'plug', label:'Integrations Hub', live:true },
    { id:'admin', icon:'admin', label:'Admin & Config', live:false }
  ]}
];

function FnSidebar({ active, go, badges, onReset }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <span style={{display:'flex', alignItems:'center'}}>
          <img src="assets/deepIng-logo.png" alt="deepIng" />
          <span className="crm-tag">CRM</span>
          <span className="demo-pill">Demo</span>
        </span>
      </div>
      <nav className="sidebar-nav">
        {FN_NAV.map(g => (
          <React.Fragment key={g.group}>
            <div className="nav-section">{g.group}</div>
            {g.items.map(n => n.live ? (
              <a key={n.id} className={"nav-item demo-enabled" + (n.id === active ? " active" : "")} onClick={() => go(n.id)}>
                <span className="ico">{Icons[n.icon]}</span><span>{n.label}</span>
                {badges[n.id] != null && <span className="badge">{badges[n.id]}</span>}
              </a>
            ) : (
              <span key={n.id} className="nav-item locked" title="In der Vollversion verfügbar">
                <span className="ico">{Icons[n.icon]}</span><span>{n.label}</span>
                <span className="lock">{LockIco}</span>
              </span>
            ))}
          </React.Fragment>
        ))}
      </nav>
      <div className="sidebar-foot">
        <div className="avatar">{ViewerStore.isBoss() ? 'VL' : ViewerStore.id}</div>
        <div className="user-meta"><b>{ViewerStore.isBoss() ? 'Vertriebsleitung' : OWNERS[ViewerStore.id]}</b><span>{ViewerStore.isBoss() ? 'Boss · Vollzugriff' : 'Sales Rep · DACH'}</span></div>
        <button className="reset-btn" title="Demo-Daten zurücksetzen" onClick={onReset}>{Icons.refresh || '↺'}</button>
      </div>
    </aside>
  );
}

function HomeView({ go, onAct, onTour }) {
  const leads = scopeOwner(CRMStore.list('leads'));
  const accounts = scopeOwner(CRMStore.list('accounts'));
  const opps = scopeOwner(CRMStore.list('opportunities'));
  const openLeads = leads.filter(l => l.status !== 'conv').length;
  const openOpps = opps.filter(o => !['won','lost'].includes(o.stage));
  const pipe = openOpps.reduce((s, o) => s + (o.amount || 0), 0);
  const won = opps.filter(o => o.stage === 'won').reduce((s, o) => s + (o.amount || 0), 0);

  const cards = [
    { id:'leads', icon:'leads', t:'Leads', p:'Eingehende Anfragen erfassen, scoren, qualifizieren und konvertieren.', n:openLeads, l:'offene Leads' },
    { id:'accounts', icon:'accounts', t:'Accounts & Contacts', p:'Kundenorganisationen und Ansprechpartner — die gemeinsame Datenbasis.', n:accounts.length, l:'Accounts' },
    { id:'opps', icon:'opps', t:'Opportunities', p:'Die Vertriebs-Pipeline von der Qualifizierung bis zum Abschluss.', n:fmtEUR(pipe), l:'offene Pipeline' }
  ];
  const locked = ['Quotes','Contracts','Activities','Service & Tickets','Visit Planning','Reports & Analytics','Integrations Hub'];

  return (
    <div className="page">
      <div className="viewer-bar">
        <span className="viewer-ico">{Icons.accounts}</span>
        <span className="viewer-label">Ansicht als</span>
        <select className="form-select" style={{ width: 280 }} value={ViewerStore.id} onChange={e => ViewerStore.set(e.target.value)}>
          {VIEWERS.map(v => <option key={v.id} value={v.id}>{v.label}</option>)}
        </select>
        {ViewerStore.isBoss()
          ? <span className="viewer-note boss">{Icons.target} Vollzugriff — alle Datensätze aller Mitarbeiter</span>
          : <span className="viewer-note">{Icons.lock || ''} Eingeschränkt — nur eigene Datensätze von {OWNERS[ViewerStore.id]}</span>}
        <button className="tour-btn" onClick={onTour}>▶ Geführte Tour</button>
      </div>

      <div className="page-title-row">
        <div>
          <h1 className="page-title">Willkommen, {ViewerStore.isBoss() ? 'Vertriebsleitung' : (OWNERS[ViewerStore.id] || 'Julia').split(' ')[0]} 👋</h1>
          <p className="page-sub">Funktionsfähige Demo: Datensätze anlegen, bearbeiten, verknüpfen — alles bleibt lokal im Browser gespeichert.</p>
        </div>
      </div>

      <div className="demo-hint">
        <span className="d"></span>
        <span><b>Voll funktionsfähig:</b> Legen Sie Leads an, qualifizieren und konvertieren Sie sie in Accounts &amp; Opportunities. Die Zahlen unten zählen live mit. Ausgegraute Module sind in dieser Demo deaktiviert.</span>
      </div>

      <NextBestAction onAct={onAct} />

      <div className="ov-grid">
        {cards.map(c => (
          <div key={c.id} className="ov-card" onClick={() => go(c.id)}>
            <span className="ov-ic">{Icons[c.icon]}</span>
            <h3>{c.t}</h3>
            <p>{c.p}</p>
            <div className="ov-stat"><span className="n">{c.n}</span><span className="l">{c.l}</span></div>
          </div>
        ))}
      </div>

      <div className="home-metrics">
        <div className="hm"><div className="k">Offene Pipeline</div><div className="v">{fmtEUR(pipe)}</div><div className="s">{openOpps.length} Deals</div></div>
        <div className="hm"><div className="k">Gewonnen (Demo)</div><div className="v">{fmtEUR(won)}</div><div className="s">Closed Won</div></div>
        <div className="hm"><div className="k">Offene Leads</div><div className="v">{openLeads}</div><div className="s">davon {leads.filter(l => l.status === 'qual').length} qualifiziert</div></div>
        <div className="hm"><div className="k">Accounts</div><div className="v">{accounts.length}</div><div className="s">{accounts.filter(a => a.tier === 'A').length} Key Accounts</div></div>
      </div>

      <Dashboard go={go} />

      <div className="ov-locked-row">
        <span className="lbl">In der Vollversion:</span>
        {locked.map(l => <span key={l} className="ov-locked-chip">{LockIco} {l}</span>)}
      </div>
    </div>
  );
}

const HEADERS = {
  home:     { crumb:<b>Home</b>, chips:['Rolle: Sales Rep','Region: DACH'] },
  leads:    { crumb:<><b>Sales</b> · Leads</>, chips:['Zeitraum: Diese Woche','Owner: Team'] },
  accounts: { crumb:<><b>Sales</b> · Accounts & Contacts</>, chips:['Region: DACH','Tier: Alle'] },
  opps:     { crumb:<><b>Sales</b> · Opportunities</>, chips:['Quartal: Q2 2026','Stage: Alle'] },
  quotes:   { crumb:<><b>Sales</b> · Quotes</>, chips:['Status: Alle','Währung: EUR'] },
  activities:{ crumb:<><b>Engage</b> · Activities</>, chips:['Zeitraum: Diese Woche','Owner: Ich'] },
  winloss:  { crumb:<><b>Operate</b> · Win/Loss & Wettbewerb</>, chips:['Zeitraum: Letzte 6 Monate','Region: DACH'] },
  journey:  { crumb:<><b>Operate</b> · Customer Journey</>, chips:['Zeitstrahl','Rechtsklick = kiki'] },
  integrations: { crumb:<><b>Configure</b> · Integrations Hub</>, chips:['SAP S/4HANA','Sync: live'] },
  analytics: { crumb:<><b>Operate</b> · Reports & Analytics</>, chips:['Eigenes Dashboard','Live-Daten'] }
};

function FnApp() {
  useStore();
  const [view, setView] = useS('home');
  const [tourOpen, setTourOpen] = useS(false);
  const [oppFocus, setOppFocus] = useS(null);
  const [leadFocus, setLeadFocus] = useS(null);
  const [quoteFocus, setQuoteFocus] = useS(null);
  const [accountFocus, setAccountFocus] = useS(null);
  const [resetAsk, setResetAsk] = useS(false);

  const go = (id) => { setView(id); };

  // kiki Next Best Action → open the specific record directly
  const onAct = (it) => {
    if (it.view === 'opps') { setOppFocus(it.rec); setView('opps'); }
    else if (it.view === 'leads') { setLeadFocus({ rec: it.rec, action: it.action }); setView('leads'); }
    else if (it.view === 'quotes') { setQuoteFocus(it.rec); setView('quotes'); }
    else if (it.view === 'accounts') { setAccountFocus(it.rec); setView('accounts'); }
    else { setView(it.view); }
    toast('kiki → ' + it.cta);
  };

  const badges = {
    leads: scopeOwner(CRMStore.list('leads')).filter(l => l.status !== 'conv').length,
    accounts: scopeOwner(CRMStore.list('accounts')).length,
    opps: scopeOwner(CRMStore.list('opportunities')).filter(o => !['won','lost'].includes(o.stage)).length,
    quotes: scopeOwner(CRMStore.list('quotes')).filter(q => q.status === 'draft' || q.status === 'sent').length,
    activities: scopeOwner(CRMStore.list('activities')).filter(a => !a.done).length,
    winloss: scopeOwner(CRMStore.list('kvps')).filter(k => k.status === 'open').length
  };

  const head = HEADERS[view] || HEADERS.home;

  return (
    <>
      <div className="topstrip"></div>
      <FnSidebar active={view} go={go} badges={badges} onReset={() => setResetAsk(true)} />
      <div className="main">
        <header className="app-header">
          <span className="crumb">{head.crumb}</span>
          <div className="chip-row">{head.chips.map((c, i) => <span key={i} className="chip">{c} <span className="x">×</span></span>)}</div>
          <div className="header-actions" style={{marginLeft:'auto', display:'flex', gap:8, alignItems:'center'}}>
            <GlobalSearch go={go} />
            <span className="icon-btn">{Icons.bell}</span>
          </div>
        </header>

        {view === 'home' && <HomeView go={go} onAct={onAct} onTour={() => setTourOpen(true)} />}
        {view === 'leads' && <LeadsView focus={leadFocus} clearFocus={() => setLeadFocus(null)} />}
        {view === 'accounts' && <AccountsView onOpenOpp={(o) => { setOppFocus(o); setView('opps'); }} onNewOppForAccount={(a) => { setOppFocus(blankOpp(a.id)); setView('opps'); }} focusRec={accountFocus} clearFocus={() => setAccountFocus(null)} />}
        {view === 'opps' && <OppsView focusRec={oppFocus} clearFocus={() => setOppFocus(null)} />}
        {view === 'quotes' && <QuotesView focusRec={quoteFocus} clearFocus={() => setQuoteFocus(null)} />}
        {view === 'activities' && <ActivitiesView />}
        {view === 'winloss' && <WinLossView />}
        {view === 'journey' && <CustomerJourneyView />}
        {view === 'integrations' && <IntegrationsHubView />}
        {view === 'analytics' && <ReportsView />}
      </div>

      <ToastHost />
      <KikiLayer />
      <AttachLayer />
      <Tour open={tourOpen} onClose={() => setTourOpen(false)} go={go} />
      {resetAsk && <Confirm danger text="Alle in dieser Demo angelegten/geänderten Daten verwerfen und auf den Ausgangsstand zurücksetzen?" confirmLabel="Zurücksetzen"
        onConfirm={() => { CRMStore.reset(); toast('Demo-Daten zurückgesetzt'); setResetAsk(false); setView('home'); }}
        onCancel={() => setResetAsk(false)} />}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<FnApp />);