// C (Logista) views: dashboard, C2 management, import log, users, settings

const { useState: useStateC, useMemo: useMemoC } = React;

function CDashboard({ tenant, onOpenC2 }) {
  const totalArticles = tenant.c2.reduce((s, x) => s + x.articles, 0);
  const totalPieces = tenant.c2.reduce((s, x) => s + x.totalPieces, 0);
  const totalMv = tenant.c2.reduce((s, x) => s + x.movements30d, 0);

  return (
    <div>
      <div className="stats-grid">
        <div className="stat-card">
          <div className="label">Clienti attivi</div>
          <div className="value">{tenant.c2.length}<span style={{fontSize: 14, color: "var(--text-3)", fontWeight: 500}}> / {tenant.c2Limit}</span></div>
          <div className="delta">limite contrattuale</div>
        </div>
        <div className="stat-card">
          <div className="label">Articoli totali</div>
          <div className="value">{totalArticles.toLocaleString("it-CH")}</div>
          <Sparkline values={[820, 880, 910, 950, 1020, 1080, 1140, 1180, 1210, 1240, 1260, 1284]}/>
        </div>
        <div className="stat-card">
          <div className="label">Pezzi a magazzino</div>
          <div className="value">{totalPieces.toLocaleString("it-CH")}</div>
          <Sparkline values={[42, 44, 41, 45, 48, 46, 50, 52, 51, 53, 52, 53.5]}/>
        </div>
        <div className="stat-card">
          <div className="label">Movimenti 30g</div>
          <div className="value">{totalMv.toLocaleString("it-CH")}</div>
          <div className="delta up"><span className="icon">{Icon.arrowUp}</span> +12.4% vs periodo prec.</div>
        </div>
      </div>

      <SectionH>Saldi per cliente</SectionH>
      <div className="c2-grid">
        {tenant.c2.map(c => (
          <div key={c.id} className="c2-card" onClick={() => onOpenC2(c.id)} style={{cursor: "pointer"}}>
            <div className="top">
              <div>
                <div className="name">{c.name}</div>
                <div className="id">{c.id}</div>
              </div>
              <Badge type={c.enableSaldi && c.enableMovimenti ? "ok" : "warn"} dot>
                {c.enableSaldi && c.enableMovimenti ? "completo" : "parziale"}
              </Badge>
            </div>
            <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
              <Badge type={c.enableSaldi ? "info" : "neutral"}>Saldi {c.enableSaldi ? "✓" : "—"}</Badge>
              <Badge type={c.enableMovimenti ? "info" : "neutral"}>Movimenti {c.enableMovimenti ? "✓" : "—"}</Badge>
              <Badge type={c.showLotto ? "info" : "neutral"}>Lotto {c.showLotto ? "✓" : "—"}</Badge>
            </div>
            <div className="stats-row">
              <div className="stat"><div className="l">Articoli</div><div className="v">{c.articles.toLocaleString("it-CH")}</div></div>
              <div className="stat"><div className="l">Pezzi</div><div className="v">{c.totalPieces.toLocaleString("it-CH")}</div></div>
              <div className="stat"><div className="l">Mv 30g</div><div className="v">{c.movements30d.toLocaleString("it-CH")}</div></div>
              <div className="stat"><div className="l">Utenti</div><div className="v">{c.users}</div></div>
            </div>
          </div>
        ))}
        {tenant.c2.length < tenant.c2Limit ? (
          <button className="c2-card" style={{border: "1.5px dashed var(--border-strong)", background: "var(--surface-2)", alignItems: "center", justifyContent: "center", color: "var(--text-3)", minHeight: 180}}>
            <div style={{fontSize: 24, color: "var(--ti-blue)", marginBottom: 4}}>+</div>
            <div style={{fontWeight: 600, color: "var(--text-2)"}}>Nuovo cliente</div>
            <div style={{fontSize: 12}}>{tenant.c2Limit - tenant.c2.length} {tenant.c2Limit - tenant.c2.length === 1 ? "slot disponibile" : "slot disponibili"}</div>
          </button>
        ) : (
          <div className="c2-card" style={{border: "1.5px dashed var(--warn)", background: "var(--warn-soft)", alignItems: "center", justifyContent: "center", textAlign: "center", minHeight: 180}}>
            <div style={{color: "var(--warn)", marginBottom: 4}}><span className="icon">{Icon.alert}</span></div>
            <div style={{fontWeight: 600, color: "var(--text)"}}>Limite contrattuale raggiunto</div>
            <div style={{fontSize: 12, color: "var(--text-2)", padding: "0 12px"}}>Per aggiungere altri clienti contatta TI</div>
            <button className="btn btn-sm btn-secondary" style={{marginTop: 6}}>Richiedi estensione</button>
          </div>
        )}
      </div>
    </div>
  );
}

function CC2Manage({ tenant, onOpenSettings }) {
  const [openId, setOpenId] = useStateC(null);
  const atLimit = tenant.c2.length >= tenant.c2Limit;

  return (
    <div>
      <div className="toolbar">
        <div className="left">
          <SectionH>Clienti <span className="sub">· {tenant.c2.length} / {tenant.c2Limit} slot utilizzati</span></SectionH>
        </div>
        <div className="right">
          <button className="btn btn-secondary"><span className="icon">{Icon.refresh}</span>Sincronizza ERP</button>
          <button className={"btn " + (atLimit ? "btn-secondary" : "btn-primary")} disabled={atLimit}
            title={atLimit ? "Limite raggiunto — richiedi a TI" : ""}>
            <span className="icon">{Icon.plus}</span>Nuovo cliente
          </button>
        </div>
      </div>

      {atLimit && (
        <div className="panel mb-16" style={{borderLeft: "3px solid var(--warn)"}}>
          <div className="panel-body" style={{display: "flex", gap: 12, alignItems: "center"}}>
            <span style={{color: "var(--warn)"}} className="icon">{Icon.alert}</span>
            <div style={{flex: 1}}>
              <div style={{fontWeight: 600}}>Limite di {tenant.c2Limit} clienti raggiunto</div>
              <div style={{fontSize: 12.5, color: "var(--text-2)"}}>Per accordi commerciali con TI puoi creare fino a {tenant.c2Limit} clienti finali. Contatta l'amministratore TI per estendere il piano.</div>
            </div>
            <button className="btn btn-secondary btn-sm">Richiedi estensione a TI</button>
          </div>
        </div>
      )}

      <div className="panel">
        <table className="data">
          <thead>
            <tr>
              <th style={{width: "20%"}}>Ragione sociale</th>
              <th style={{width: "9%"}}>Codice</th>
              <th style={{width: "16%"}}>Permessi</th>
              <th style={{width: "11%"}}>Campi visibili</th>
              <th className="num">Articoli</th>
              <th className="num">Pezzi</th>
              <th className="num">Utenti</th>
              <th style={{width: "9%"}}>Ultimo import</th>
              <th style={{width: "12%"}}></th>
            </tr>
          </thead>
          <tbody>
            {tenant.c2.map(c => (
              <tr key={c.id}>
                <td><strong>{c.name}</strong></td>
                <td className="mono">{c.id}</td>
                <td>
                  <div style={{display: "flex", gap: 4}}>
                    <Badge type={c.enableSaldi ? "ok" : "neutral"}>Saldi</Badge>
                    <Badge type={c.enableMovimenti ? "ok" : "neutral"}>Mvt</Badge>
                  </div>
                </td>
                <td>
                  <div style={{display: "flex", gap: 4}}>
                    {c.showLotto && <Badge type="info">Lotto</Badge>}
                    {c.showProduzione && <Badge type="info">D.Prod</Badge>}
                  </div>
                </td>
                <td className="num">{c.articles.toLocaleString("it-CH")}</td>
                <td className="num"><strong>{c.totalPieces.toLocaleString("it-CH")}</strong></td>
                <td className="num">{c.users}</td>
                <td className="mono muted" style={{fontSize: 12}}>{c.lastImport}</td>
                <td>
                  <div className="row-actions">
                    <button onClick={() => setOpenId(c.id)}><span className="icon">{Icon.settings}</span> Configura</button>
                    <button className="danger" title="Sospendi"><span className="icon">{Icon.trash}</span></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {openId && (
        <C2ConfigModal c2={tenant.c2.find(x => x.id === openId)} onClose={() => setOpenId(null)}/>
      )}
    </div>
  );
}

function C2ConfigModal({ c2, onClose }) {
  const [enableSaldi, setEnableSaldi] = useStateC(c2.enableSaldi);
  const [enableMovimenti, setEnableMovimenti] = useStateC(c2.enableMovimenti);
  const [showLotto, setShowLotto] = useStateC(c2.showLotto);
  const [showProduzione, setShowProduzione] = useStateC(c2.showProduzione);
  const [showDdt, setShowDdt] = useStateC(true);
  const [showCausale, setShowCausale] = useStateC(true);
  const [allowExport, setAllowExport] = useStateC(true);
  const [retention, setRetention] = useStateC("24");

  return (
    <Modal title={`Configurazione cliente — ${c2.name}`} size="lg" onClose={onClose}
      footer={<>
        <button className="btn btn-secondary" onClick={onClose}>Annulla</button>
        <button className="btn btn-primary" onClick={onClose}>Salva configurazione</button>
      </>}>

      <h3 style={{margin: "0 0 8px", fontSize: 13, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.06em"}}>Moduli abilitati</h3>
      <div className="setting-row">
        <div className="left">
          <div className="title">Saldi di magazzino</div>
          <div className="desc">Il cliente può consultare le giacenze in tempo reale dei propri articoli</div>
        </div>
        <Toggle checked={enableSaldi} onChange={setEnableSaldi}/>
      </div>
      <div className="setting-row">
        <div className="left">
          <div className="title">Movimenti di magazzino</div>
          <div className="desc">Il cliente può consultare lo storico di carichi e scarichi</div>
        </div>
        <Toggle checked={enableMovimenti} onChange={setEnableMovimenti}/>
      </div>
      <div className="setting-row">
        <div className="left">
          <div className="title">Export Excel</div>
          <div className="desc">Permette l'esportazione dei dati visibili</div>
        </div>
        <Toggle checked={allowExport} onChange={setAllowExport}/>
      </div>

      <h3 style={{margin: "22px 0 8px", fontSize: 13, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.06em"}}>Campi visibili al cliente</h3>
      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 16px"}}>
        <Checkbox checked={showLotto} onChange={setShowLotto} label="Gestione lotto"/>
        <Checkbox checked={showProduzione} onChange={setShowProduzione} label="Data produzione"/>
        <Checkbox checked={showCausale} onChange={setShowCausale} label="Causale movimento"/>
        <Checkbox checked={showDdt} onChange={setShowDdt} label="Riferimento DDT"/>
      </div>

      <h3 style={{margin: "22px 0 8px", fontSize: 13, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.06em"}}>Dati & retention</h3>
      <div className="field-grid">
        <div className="field">
          <label>Storico movimenti (mesi)</label>
          <select value={retention} onChange={(e) => setRetention(e.target.value)}>
            <option value="6">6 mesi</option>
            <option value="12">12 mesi</option>
            <option value="24">24 mesi</option>
            <option value="60">60 mesi</option>
          </select>
        </div>
        <div className="field">
          <label>Codice ERP (mapping)</label>
          <input type="text" defaultValue={"ERP/" + c2.id}/>
        </div>
        <div className="field">
          <label>Fuso orario</label>
          <select defaultValue="Europe/Zurich">
            <option>Europe/Zurich</option>
            <option>Europe/Rome</option>
            <option>Europe/Paris</option>
          </select>
        </div>
      </div>

      <h3 style={{margin: "22px 0 8px", fontSize: 13, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.06em"}}>API per aggiornamento saldi</h3>
      <div className="twofa-card">
        <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8}}>
          <div style={{fontWeight: 600}}>Endpoint dedicato</div>
          <Badge type="ok" dot>attivo</Badge>
        </div>
        <div style={{display: "flex", flexDirection: "column", gap: 6, fontSize: 12.5}}>
          <div className="api-key">
            <span style={{color: "var(--text-3)"}}>POST</span>
            <span>https://api.ti-stockconnect.ch/v2/stock/{c2.id.toLowerCase()}</span>
            <button className="copy"><span className="icon">{Icon.copy}</span></button>
          </div>
          <div className="api-key">
            <span style={{color: "var(--text-3)"}}>Token</span>
            <span>sk_live_••••••••••••••••··abc4</span>
            <button className="copy">rigenera</button>
          </div>
        </div>
      </div>
    </Modal>
  );
}

function CImportLog() {
  const [filter, setFilter] = useStateC("all");
  const [sessions, setSessions] = useStateC([]);
  const [stats, setStats] = useStateC({ completed: 0, failed: 0, running: 0, total_imported: 0, avg_duration_ms: 0 });
  const [loading, setLoading] = useStateC(true);
  const [selectedSession, setSelectedSession] = useStateC(null);

  const loadData = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ limit: '50' });
      if (filter !== 'all') {
        const statusMap = { ok: 'completed', warn: 'failed', info: 'running' };
        params.set('status', statusMap[filter] || filter);
      }
      const res = await fetch(`/api/import-log?${params}`, {
        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
      });
      const data = await res.json();
      if (data.success) {
        setSessions(data.sessions || []);
        setStats(data.stats || {});
      }
    } catch (err) {
      console.error('Errore caricamento import log:', err);
    }
    setLoading(false);
  };

  React.useEffect(() => { loadData(); }, [filter]);

  const formatDate = (d) => d ? new Date(d).toLocaleString('it-CH', { dateStyle: 'short', timeStyle: 'short' }) : '-';
  const formatDuration = (ms) => ms ? `${(ms / 1000).toFixed(1)}s` : '-';
  const formatTotals = (totals) => {
    if (!totals || typeof totals !== 'object') return '-';
    return Object.entries(totals).map(([k, v]) => `${k} ${v.toLocaleString('it-CH')}`).join(' · ');
  };

  const lastCompleted = sessions.find(s => s.status === 'completed');
  const lastSession = sessions[0];

  return (
    <div>
      <div className="toolbar">
        <SectionH>Log di importazione <span className="sub">· {sessions.length} sessioni</span></SectionH>
        <div className="right">
          <div className="subtabs" style={{margin: 0}}>
            <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>Tutti</button>
            <button className={filter === "ok" ? "active" : ""} onClick={() => setFilter("ok")}>Completati ({stats.completed || 0})</button>
            <button className={filter === "warn" ? "active" : ""} onClick={() => setFilter("warn")}>Falliti ({stats.failed || 0})</button>
            <button className={filter === "info" ? "active" : ""} onClick={() => setFilter("info")}>In corso ({stats.running || 0})</button>
          </div>
          <button className="btn btn-secondary" onClick={loadData}><span className="icon">{Icon.refresh}</span>Aggiorna</button>
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="label">Ultima esecuzione</div>
          <div className="value" style={{fontSize: 18}}>{lastSession ? formatDate(lastSession.started_at) : '-'}</div>
          {lastSession && (
            <div className={`delta ${lastSession.status === 'completed' ? 'up' : lastSession.status === 'failed' ? 'down' : ''}`}>
              <span className="icon">{lastSession.status === 'completed' ? Icon.check : lastSession.status === 'failed' ? Icon.alert : Icon.clock}</span>
              {lastSession.status === 'completed' ? `completata in ${formatDuration(lastSession.duration_ms)}` :
               lastSession.status === 'failed' ? 'fallita' : 'in corso...'}
            </div>
          )}
        </div>
        <div className="stat-card">
          <div className="label">Record importati (totale)</div>
          <div className="value">{(stats.total_imported || 0).toLocaleString('it-CH')}</div>
          {lastCompleted && <div className="delta">{formatTotals(lastCompleted.totals)}</div>}
        </div>
        <div className="stat-card">
          <div className="label">Sessioni fallite</div>
          <div className="value" style={{color: stats.failed > 0 ? "var(--err)" : "var(--text)"}}>{stats.failed || 0}</div>
          <div className="delta">{stats.failed > 0 ? 'da verificare' : 'nessun errore'}</div>
        </div>
        <div className="stat-card">
          <div className="label">Durata media</div>
          <div className="value" style={{fontSize: 18}}>{formatDuration(stats.avg_duration_ms)}</div>
          <div className="delta">su {stats.completed || 0} import completati</div>
        </div>
      </div>

      <div className="panel">
        {loading ? (
          <div style={{padding: 24, textAlign: 'center', color: 'var(--text-3)'}}>Caricamento...</div>
        ) : sessions.length === 0 ? (
          <div style={{padding: 24, textAlign: 'center', color: 'var(--text-3)'}}>Nessuna sessione di import trovata</div>
        ) : (
          <table className="data">
            <thead>
              <tr>
                <th style={{width: '12%'}}>Inizio</th>
                <th style={{width: '12%'}}>Fine</th>
                <th style={{width: '8%'}}>Tipo</th>
                <th style={{width: '10%'}}>Stato</th>
                <th style={{width: '8%'}}>Durata</th>
                <th className="num" style={{width: '10%'}}>Record</th>
                <th>Dettaglio per cliente</th>
                <th style={{width: '10%'}}>Utente</th>
                <th style={{width: '8%'}}></th>
              </tr>
            </thead>
            <tbody>
              {sessions.map(s => (
                <tr key={s.id} className={s.status === 'running' ? 'highlight' : ''}>
                  <td className="mono" style={{fontSize: 12}}>{formatDate(s.started_at)}</td>
                  <td className="mono muted" style={{fontSize: 12}}>{formatDate(s.finished_at)}</td>
                  <td><Badge type={s.type === 'saldi' ? 'info' : 'neutral'}>{s.type}</Badge></td>
                  <td>
                    <Badge type={s.status === 'completed' ? 'ok' : s.status === 'failed' ? 'err' : 'warn'} dot>
                      {s.status === 'completed' ? 'completato' : s.status === 'failed' ? 'fallito' : 'in corso'}
                    </Badge>
                  </td>
                  <td className="mono">{formatDuration(s.duration_ms)}</td>
                  <td className="num"><strong>{(s.total_records || 0).toLocaleString('it-CH')}</strong>{s.skipped > 0 && <span className="muted"> (+{s.skipped} skip)</span>}</td>
                  <td className="muted" style={{fontSize: 12}}>{formatTotals(s.totals)}</td>
                  <td className="muted">{s.username || '-'}</td>
                  <td>
                    <button className="btn btn-ghost btn-sm" onClick={() => setSelectedSession(s)}>
                      {s.status === 'failed' ? 'Errore' : 'Dettagli'}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {selectedSession && (
        <Modal title={`Dettaglio import — ${selectedSession.type}`} onClose={() => setSelectedSession(null)}
          footer={<button className="btn btn-secondary" onClick={() => setSelectedSession(null)}>Chiudi</button>}>
          <div className="field-grid" style={{gap: 12}}>
            <div className="field"><label>ID Sessione</label><div className="mono" style={{fontSize: 11}}>{selectedSession.id}</div></div>
            <div className="field"><label>Tipo</label><div>{selectedSession.type}</div></div>
            <div className="field"><label>Stato</label><Badge type={selectedSession.status === 'completed' ? 'ok' : selectedSession.status === 'failed' ? 'err' : 'warn'}>{selectedSession.status}</Badge></div>
            <div className="field"><label>Utente</label><div>{selectedSession.username || '-'}</div></div>
            <div className="field"><label>Inizio</label><div>{formatDate(selectedSession.started_at)}</div></div>
            <div className="field"><label>Fine</label><div>{formatDate(selectedSession.finished_at)}</div></div>
            <div className="field"><label>Durata</label><div>{formatDuration(selectedSession.duration_ms)}</div></div>
            <div className="field"><label>Record importati</label><div><strong>{(selectedSession.total_records || 0).toLocaleString('it-CH')}</strong></div></div>
            {selectedSession.skipped > 0 && <div className="field"><label>Saltati (duplicati)</label><div>{selectedSession.skipped}</div></div>}
            <div className="field" style={{gridColumn: '1/-1'}}><label>Dettaglio per cliente</label><div>{formatTotals(selectedSession.totals)}</div></div>
            {selectedSession.error && (
              <div className="field" style={{gridColumn: '1/-1'}}>
                <label style={{color: 'var(--err)'}}>Errore</label>
                <div className="mono" style={{background: 'var(--err-soft)', padding: 8, borderRadius: 4, fontSize: 12, whiteSpace: 'pre-wrap'}}>{selectedSession.error}</div>
              </div>
            )}
            <div className="field"><label>IP</label><div className="mono muted">{selectedSession.ip || '-'}</div></div>
          </div>
        </Modal>
      )}
    </div>
  );
}

function CUsers({ tenant }) {
  const [c2Filter, setC2Filter] = useStateC("all");
  const users = MOCK.users.filter(u => c2Filter === "all" || u.c2 === c2Filter);

  return (
    <div>
      <div className="toolbar">
        <SectionH>Utenti <span className="sub">· {users.length} utenti · senza limite di creazione</span></SectionH>
        <div className="right">
          <button className="btn btn-secondary"><span className="icon">{Icon.download}</span>Esporta</button>
          <button className="btn btn-primary"><span className="icon">{Icon.plus}</span>Nuovo utente</button>
        </div>
      </div>

      <div className="subtabs">
        <button className={c2Filter === "all" ? "active" : ""} onClick={() => setC2Filter("all")}>Tutti</button>
        {tenant.c2.map(c => (
          <button key={c.id} className={c2Filter === c.id ? "active" : ""} onClick={() => setC2Filter(c.id)}>{c.name}</button>
        ))}
      </div>

      <div className="panel">
        <table className="data">
          <thead>
            <tr>
              <th>Utente</th>
              <th>Nome completo</th>
              <th>Email</th>
              <th>Cliente</th>
              <th>Ruolo</th>
              <th>2FA</th>
              <th>Ultimo accesso</th>
              <th>Stato</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {users.map(u => (
              <tr key={u.id}>
                <td className="mono"><strong>{u.username}</strong></td>
                <td>{u.name}</td>
                <td className="muted">{u.email}</td>
                <td><Badge type="info">{u.c2}</Badge></td>
                <td>{u.role}</td>
                <td>{u.twofa ? <Badge type="ok" dot>attivo</Badge> : <Badge type="neutral">disattivo</Badge>}</td>
                <td className="mono muted" style={{fontSize: 12}}>{u.lastLogin}</td>
                <td>{u.active ? <Badge type="ok" dot>attivo</Badge> : <Badge type="err">sospeso</Badge>}</td>
                <td>
                  <div className="row-actions">
                    <button><span className="icon">{Icon.edit}</span></button>
                    <button>Reset pwd</button>
                    <button className="danger"><span className="icon">{Icon.trash}</span></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function CSettings({ tenant }) {
  const [twofa, setTwofa] = useStateC(tenant.twofa);
  const [twofaMode, setTwofaMode] = useStateC("totp");
  const [twofaScope, setTwofaScope] = useStateC("all");
  const [notifyOnImport, setNotifyOnImport] = useStateC(true);
  const [notifyOnError, setNotifyOnError] = useStateC(true);

  return (
    <div>
      <SectionH>Impostazioni del cliente <span className="sub">· {tenant.name}</span></SectionH>

      <div className="panel mb-16">
        <div className="panel-header">
          <h3><span className="icon" style={{verticalAlign: "middle", marginRight: 8}}>{Icon.shield}</span>Autenticazione a 2 fattori</h3>
          <Badge type={twofa ? "ok" : "neutral"} dot>{twofa ? "abilitata" : "disabilitata"}</Badge>
        </div>
        <div className="panel-body">
          <div className="setting-row">
            <div className="left">
              <div className="title">Richiedi 2FA per gli utenti di questo C</div>
              <div className="desc">Una volta abilitata, gli utenti dovranno configurare un secondo fattore al prossimo accesso.</div>
            </div>
            <Toggle checked={twofa} onChange={setTwofa}/>
          </div>
          {twofa && <>
            <div className="setting-row">
              <div className="left">
                <div className="title">Metodo</div>
                <div className="desc">Tipo di secondo fattore richiesto</div>
              </div>
              <div style={{display: "flex", gap: 6}}>
                {["totp", "sms", "email"].map(m => (
                  <button key={m} className={"btn btn-sm " + (twofaMode === m ? "btn-primary" : "btn-secondary")} onClick={() => setTwofaMode(m)}>
                    {m === "totp" ? "App TOTP" : m === "sms" ? "SMS" : "Email"}
                  </button>
                ))}
              </div>
            </div>
            <div className="setting-row">
              <div className="left">
                <div className="title">Ambito</div>
                <div className="desc">Quali utenti devono usare 2FA</div>
              </div>
              <div style={{display: "flex", gap: 6}}>
                {[["all", "Tutti"], ["admin", "Solo amministratori cliente"], ["opt", "A discrezione utente"]].map(([k, l]) => (
                  <button key={k} className={"btn btn-sm " + (twofaScope === k ? "btn-primary" : "btn-secondary")} onClick={() => setTwofaScope(k)}>{l}</button>
                ))}
              </div>
            </div>
          </>}
        </div>
      </div>

      <div className="panel mb-16">
        <div className="panel-header"><h3>Notifiche</h3></div>
        <div className="panel-body">
          <div className="setting-row">
            <div className="left">
              <div className="title">Notifica al termine import</div>
              <div className="desc">Email agli amministratori cliente quando i dati sono aggiornati</div>
            </div>
            <Toggle checked={notifyOnImport} onChange={setNotifyOnImport}/>
          </div>
          <div className="setting-row">
            <div className="left">
              <div className="title">Notifica errori import</div>
              <div className="desc">Email immediata in caso di import fallito</div>
            </div>
            <Toggle checked={notifyOnError} onChange={setNotifyOnError}/>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-header"><h3>API & integrazioni</h3></div>
        <div className="panel-body">
          <div className="setting-row">
            <div className="left">
              <div className="title">Endpoint principale</div>
              <div className="desc">Aggiorna saldi e movimenti via REST</div>
            </div>
            <div className="api-key">https://api.ti-stockconnect.ch/v2/{tenant.id.toLowerCase()}</div>
          </div>
          <div className="setting-row">
            <div className="left">
              <div className="title">Chiave API master</div>
              <div className="desc">Ultima rigenerazione: 2026-02-14</div>
            </div>
            <div style={{display: "flex", gap: 8}}>
              <div className="api-key">sk_live_••••••••··f12b</div>
              <button className="btn btn-sm btn-secondary">Rigenera</button>
            </div>
          </div>
          <div className="setting-row">
            <div className="left">
              <div className="title">Webhook saldo modificato</div>
              <div className="desc">URL chiamato a ogni variazione di saldo</div>
            </div>
            <input type="text" defaultValue={`https://erp.${tenant.id.toLowerCase()}.ch/hooks/stock`}
              style={{width: 320, border: "1px solid var(--border-strong)", borderRadius: 3, padding: "6px 10px", fontSize: 12, fontFamily: "var(--font-mono)"}}/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CDashboard, CC2Manage, CImportLog, CUsers, CSettings });