// 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 items = MOCK.importLog.filter(l => filter === "all" || l.level === filter);
  return (
    <div>
      <div className="toolbar">
        <SectionH>Log di importazione <span className="sub">· Ultima esecuzione</span></SectionH>
        <div className="right">
          <div className="subtabs" style={{margin: 0}}>
            <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>Tutti ({MOCK.importLog.length})</button>
            <button className={filter === "info" ? "active" : ""} onClick={() => setFilter("info")}>Info</button>
            <button className={filter === "warn" ? "active" : ""} onClick={() => setFilter("warn")}>Warning</button>
            <button className={filter === "ok" ? "active" : ""} onClick={() => setFilter("ok")}>OK</button>
          </div>
          <button className="btn btn-secondary"><span className="icon">{Icon.download}</span>Scarica log</button>
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="label">Ultima esecuzione</div>
          <div className="value" style={{fontSize: 18}}>2026-05-12 06:14</div>
          <div className="delta up"><span className="icon">{Icon.check}</span> completata in 14.2s</div>
        </div>
        <div className="stat-card">
          <div className="label">Record importati</div>
          <div className="value">2.504</div>
          <div className="delta">FCSA 1.894 · ALPNA 412 · CCSA 198</div>
        </div>
        <div className="stat-card">
          <div className="label">Warning</div>
          <div className="value" style={{color: "var(--warn)"}}>2</div>
          <div className="delta">non bloccanti</div>
        </div>
        <div className="stat-card">
          <div className="label">Prossima esecuzione</div>
          <div className="value" style={{fontSize: 18}}>2026-05-13 06:00</div>
          <div className="delta">schedulata ogni 24h</div>
        </div>
      </div>

      <div className="panel">
        {items.map((l, i) => (
          <div key={i} className="log-entry">
            <span className="ts">{l.ts}</span>
            <Badge type={l.level === "warn" ? "warn" : l.level === "ok" ? "ok" : "info"} dot>{l.level.toUpperCase()}</Badge>
            <span className="msg">{l.msg}</span>
            <button className="btn btn-ghost btn-sm">Dettagli</button>
          </div>
        ))}
      </div>
    </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 });