/* ============================================================
   CONSOLE ADMIN — prodotti, attributi, utenti, log
   Con Supabase Auth integrato
   ============================================================ */

function AdminConsole({ openProduct, toast, attributi, setAttributi, listino, setListino, zone, setZone, users, setUsers, currentUser, products, setProducts, onNewProduct, onEditProduct, onDuplicateProduct, onDeleteProduct, tab, setTab, strListino, setStrListino, clienteCat, setClienteCat, usuraCoeff, setUsuraCoeff, interruptionReasons, setInterruptionReasons }) {
  const vp = useViewport();
  const tabs = [
    { id:'prodotti', label:'Prodotti', icon:'boxes' },
    { id:'attributi', label:'Attributi', icon:'tag' },
    { id:'listino', label:'Listino batterie', icon:'battery' },
    { id:'str', label:'Listino STR', icon:'clock' },
    { id:'zone', label:'Zone di consegna', icon:'pin' },
    { id:'clienti', label:'Categorie clienti', icon:'shield' },
    { id:'interruzioni', label:'Motivi interruzione', icon:'alertCircle' },
    { id:'utenti', label:'Utenti e ruoli', icon:'users' },
    { id:'notifiche', label:'Default notifiche', icon:'bell' },
    { id:'sicurezza', label:'Sicurezza', icon:'lock' },
    { id:'log', label:'Log attività', icon:'log' },
  ];
  return (
    <div className="scroll" style={{ flex:1, minWidth:0, overflowY:'auto', overflowX:'hidden', display:'flex', flexDirection:'column' }}>
      <div className="scroll" style={{ padding: vp.isMobile?'0 12px':'0 30px', borderBottom:'1px solid var(--line)', background:'var(--surface)', display:'flex', gap:4, position:'sticky', top:0, zIndex:10, overflowX:'auto', overflowY:'hidden', flexShrink:0 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)} style={{ display:'flex', alignItems:'center', gap:7, padding: vp.isMobile?'13px 12px':'16px 16px',
            fontSize: vp.isMobile?12.5:14, fontWeight:700, whiteSpace:'nowrap',
            color: tab===t.id?'var(--red)':'var(--ink-3)', borderBottom:'2.5px solid '+(tab===t.id?'var(--red)':'transparent'), marginBottom:-1 }}>
            <Icon name={t.icon} size={vp.isMobile?15:17} /> {t.label}
          </button>
        ))}
      </div>
      <div style={{ padding: vp.isMobile?'16px 12px 30px':'24px 30px 40px',
        overflowX: vp.isMobile?'hidden':'visible' }}>
        {tab==='prodotti' && <AdminProdotti openProduct={openProduct} toast={toast} products={products} setProducts={setProducts} onNew={onNewProduct} onEdit={onEditProduct} onDuplicate={onDuplicateProduct} onDelete={onDeleteProduct} />}
        {tab==='attributi' && <AdminAttributi attributi={attributi} setAttributi={setAttributi} toast={toast} />}
        {tab==='listino' && <AdminListino listino={listino} setListino={setListino} toast={toast} />}
        {tab==='str' && <AdminStr listino={strListino} setListino={setStrListino} toast={toast} />}
        {tab==='zone' && <AdminZone zone={zone} setZone={setZone} toast={toast} />}
        {tab==='clienti' && <AdminClienti coeff={usuraCoeff} setCoeff={setUsuraCoeff} categorie={clienteCat} setCategorie={setClienteCat} toast={toast} />}
        {tab==='interruzioni' && <AdminInterruzioni reasons={interruptionReasons} setReasons={setInterruptionReasons} toast={toast} />}
        {tab==='utenti' && <AdminUtenti toast={toast} users={users} setUsers={setUsers} currentUser={currentUser} />}
        {tab==='notifiche' && <AdminNotificheDefault toast={toast} />}
        {tab==='sicurezza' && <AdminSicurezza toast={toast} currentUser={currentUser} users={users} setUsers={setUsers} />}
        {tab==='log' && <AdminLog />}
      </div>
    </div>
  );
}

/* Dropdown per cambiare lo stato di un prodotto direttamente dalla lista admin.
   Mostra il badge colorato dello stato corrente; al click apre il menu a tendina. */
function StatoDropdown({ stato, onChange }) {
  const st = STATI[stato] || { label: stato, color:'var(--ink-3)', bg:'var(--line-2)' };
  return (
    <div style={{ position:'relative', display:'inline-flex', minWidth:0 }}>
      <select
        value={stato}
        onChange={(e)=>onChange(e.target.value)}
        title="Clicca per cambiare stato"
        style={{
          appearance:'none', WebkitAppearance:'none',
          padding:'5px 26px 5px 11px', borderRadius:99, cursor:'pointer',
          fontSize:12, fontWeight:800, lineHeight:1.2,
          color: st.color, background: st.bg,
          border:'1.5px solid '+st.color+'33',
          textOverflow:'ellipsis', overflow:'hidden', whiteSpace:'nowrap',
        }}>
        {Object.entries(STATI).map(([k,v])=>(
          <option key={k} value={k} style={{ color:'var(--ink)', background:'var(--surface)', fontWeight:600 }}>{v.label}</option>
        ))}
      </select>
      <Icon name="chevDown" size={13} style={{ position:'absolute', right:8, top:'50%', transform:'translateY(-50%)', color:st.color, pointerEvents:'none' }} />
    </div>
  );
}

function AdminProdotti({ openProduct, toast, products, setProducts, onNew, onEdit, onDuplicate, onDelete }) {
  const vp = useViewport();
  const all = products || PRODOTTI;
  const [q, setQ] = useState('');
  const [fCat, setFCat] = useState('all');
  const [fStato, setFStato] = useState('all');
  const [fLista, setFLista] = useState('all');
  const [sort, setSort] = useState('recent'); // recent | matr-asc | matr-desc | alpha-asc | alpha-desc
  const LISTE = [['Vendita','Vendita'],['STR','STR'],['LTR','LTR'],['Pronta consegna','Pronta']];

  const changeStato = async (id, nuovoStato) => {
    const p = (products||[]).find(x=>x.id===id);
    if (!p || (p.stato===nuovoStato)) return;
    const vecchio = p.stato;
    // aggiorna stato locale
    setProducts(prev => prev.map(x => x.id===id ? { ...x, stato: nuovoStato } : x));
    // persisti su DB — la colonna nel database si chiama "status" (non "stato")
    if (window.SF_CONFIG.useSupabase) {
      try {
        const sb = window.DataAPI.client();
        console.log('[changeStato] id=', id, 'tipo=', typeof id, 'nuovoStato=', nuovoStato);
        const { data, error, status: httpStatus } = await sb
          .from('products')
          .update({ status: nuovoStato })
          .eq('id', id)
          .select();
        console.log('[changeStato] risposta →', { data, error, httpStatus });
        if (error) throw error;
        if (!data || data.length === 0) {
          throw new Error('Nessuna riga aggiornata (id non trovato o RLS): ' + id);
        }
      } catch(e) {
        console.error('changeStato FULL ERROR:', e?.message, e?.code, e?.details, e?.hint, e);
        toast && toast('Errore cambio stato: ' + (e?.message || 'sconosciuto'));
        setProducts(prev => prev.map(x => x.id===id ? { ...x, stato: vecchio } : x));
        return;
      }
    }
    toast && toast(`Stato aggiornato: ${STATI[nuovoStato]?.label || nuovoStato}`);
    window.LogAPI?.logEvent('product.status_changed', {
      entity_type: 'product', entity_id: id,
      title: 'Stato prodotto cambiato',
      description: `${p.marca} ${p.modello} · ${STATI[vecchio]?.label||vecchio} → ${STATI[nuovoStato]?.label||nuovoStato}`,
      metadata: { matricola: p.matricola||p.id, da: vecchio, a: nuovoStato },
    });
  };

  const toggleLista = async (id, lista) => {
    setProducts(prev => prev.map(p => {
      if (p.id!==id) return p;
      const cur = p.liste || (p.dest?[p.dest]:[]);
      const has = cur.includes(lista);
      const nuoveListe = has ? cur.filter(l=>l!==lista) : [...cur, lista];
      if (window.SF_CONFIG.useSupabase) {
        window.DataAPI.update('products', id, { liste: nuoveListe }).catch(e => console.error('toggleLista', e));
      }
      window.LogAPI?.logEvent('product.modified', {
        entity_type: 'product', entity_id: id,
        title: 'Liste prodotto aggiornate',
        description: `${p.marca} ${p.modello} · ${has?'rimosso da':'aggiunto a'} "${lista}"`,
        metadata: { matricola: p.matricola||p.id, marca: p.marca, modello: p.modello, lista, action: has?'removed':'added', liste_attuali: nuoveListe },
      });
      return { ...p, liste: nuoveListe };
    }));
  };

  let list = all.slice();
  if (fCat!=='all') list = list.filter(p=>p.cat===fCat||p.category_id===fCat);
  if (fStato!=='all') list = list.filter(p=>p.stato===fStato||p.status===fStato);
  if (fLista!=='all') list = list.filter(p=>(p.liste||[p.dest]).includes(fLista));
  if (q.trim()){ const s=q.toLowerCase(); list = list.filter(p=>(prodLabel(p)+' '+(p.matricola||'')).toLowerCase().includes(s)); }

  // Ordinamento
  const matrKey = (p) => {
    const m = String(p.matricola || p.id || '');
    // se la matricola è numerica, ordina come numero; altrimenti alfabetico
    const n = parseFloat(m.replace(/[^\d.]/g,''));
    return { num: isNaN(n)?null:n, str: m.toLowerCase() };
  };
  const cmpMatr = (a,b) => {
    const ka=matrKey(a), kb=matrKey(b);
    if (ka.num!=null && kb.num!=null && ka.num!==kb.num) return ka.num - kb.num;
    return ka.str.localeCompare(kb.str);
  };
  const cmpAlpha = (a,b) => prodLabel(a).localeCompare(prodLabel(b), 'it', { sensitivity:'base' });
  const cmpRecent = (a,b) => {
    // ultima aggiunta: usa created_at se disponibile, altrimenti l'ordine dell'array (fine = più recente)
    const ta = a.created_at ? new Date(a.created_at).getTime() : null;
    const tb = b.created_at ? new Date(b.created_at).getTime() : null;
    if (ta!=null && tb!=null) return tb - ta;
    return all.indexOf(b) - all.indexOf(a); // fallback: indice più alto = aggiunto dopo
  };
  switch (sort) {
    case 'matr-asc':  list.sort(cmpMatr); break;
    case 'matr-desc': list.sort((a,b)=>cmpMatr(b,a)); break;
    case 'alpha-asc': list.sort(cmpAlpha); break;
    case 'alpha-desc':list.sort((a,b)=>cmpAlpha(b,a)); break;
    case 'recent':
    default:          list.sort(cmpRecent); break;
  }

  const selStyle = { appearance:'none', padding:'9px 32px 9px 13px', fontSize:13, fontWeight:600, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface)', color:'var(--ink-2)', cursor:'pointer' };
  const PG = '90px minmax(0,1.7fr) minmax(0,1.1fr) 140px 66px 66px 66px 66px 128px';
  return (
    <>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16, gap:16, flexWrap:'wrap' }}>
        <div>
          <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontSize:19, fontWeight:800 }}>Gestione prodotti</h2>
          <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:2 }}>{all.length} mezzi · spunta le liste in cui ogni mezzo deve comparire nel catalogo</div>
        </div>
        <div style={{ display:'flex', gap:10 }}>
          <Btn variant="ghost" icon="download" onClick={()=>toast('Export CSV generato')}>Export CSV</Btn>
          <Btn icon="plus" onClick={onNew}>Nuovo prodotto</Btn>
        </div>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', marginBottom:16 }}>
        <div style={{ position:'relative', flex:'1 1 230px', maxWidth:340 }}>
          <Icon name="search" size={18} style={{ position:'absolute', left:13, top:'50%', transform:'translateY(-50%)', color:'var(--ink-4)' }} />
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Cerca per marca, modello o matricola…"
            style={{ width:'100%', padding:'10px 14px 10px 40px', fontSize:13.5, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface-2)', outline:'none' }}
            onFocus={e=>e.target.style.borderColor='var(--red)'} onBlur={e=>e.target.style.borderColor='var(--line)'} />
        </div>
        <div style={{ position:'relative' }}>
          <select value={fCat} onChange={e=>setFCat(e.target.value)} style={selStyle}>
            <option value="all">Tutte le categorie</option>
            {CATEGORIE.map(c=><option key={c.id} value={c.id}>{c.nome}</option>)}
          </select>
          <Icon name="chevDown" size={15} style={{ position:'absolute', right:11, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
        </div>
        <div style={{ position:'relative' }}>
          <select value={fLista} onChange={e=>setFLista(e.target.value)} style={selStyle}>
            <option value="all">Tutte le liste</option>
            {['Vendita','STR','LTR','Pronta consegna'].map(l=><option key={l} value={l}>{l}</option>)}
          </select>
          <Icon name="chevDown" size={15} style={{ position:'absolute', right:11, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
        </div>
        <div style={{ position:'relative' }}>
          <select value={fStato} onChange={e=>setFStato(e.target.value)} style={selStyle}>
            <option value="all">Tutti gli stati</option>
            {Object.entries(STATI).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}
          </select>
          <Icon name="chevDown" size={15} style={{ position:'absolute', right:11, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
        </div>
        <div style={{ position:'relative' }}>
          <select value={sort} onChange={e=>setSort(e.target.value)} style={{ ...selStyle, borderColor:'var(--red)', color:'var(--red)', fontWeight:700 }} title="Ordina">
            <option value="recent">Ultima aggiunta</option>
            <option value="matr-asc">Matricola ↑</option>
            <option value="matr-desc">Matricola ↓</option>
            <option value="alpha-asc">Nome A→Z</option>
            <option value="alpha-desc">Nome Z→A</option>
          </select>
          <Icon name="chevDown" size={15} style={{ position:'absolute', right:11, top:'50%', transform:'translateY(-50%)', color:'var(--red)', pointerEvents:'none' }} />
        </div>
        <span style={{ marginLeft:'auto', fontSize:13, color:'var(--ink-3)', fontWeight:600 }}>{list.length} mezzi</span>
      </div>
      <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--sh-1)' }}>
        <div className="scroll" style={{ overflowX:'auto' }}>
        <div style={{ minWidth:1020 }}>
        <div style={{ display:'grid', gridTemplateColumns:PG, gap:12, padding:'13px 20px', background:'var(--surface-2)',
          borderBottom:'1px solid var(--line)', fontSize:11, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em', alignItems:'center' }}>
          <span>Matr.</span><span>Mezzo</span><span>Categoria</span><span style={{ textAlign:'center' }}>Stato</span>
          {LISTE.map(([k,l])=><span key={k} style={{ textAlign:'center' }}>{l}</span>)}
          <span style={{ textAlign:'right' }}>Azioni</span>
        </div>
        {list.length===0 ? (
          <div style={{ padding:'50px 0', textAlign:'center', color:'var(--ink-3)', fontWeight:600 }}>Nessun mezzo trovato</div>
        ) : list.map((p,i) => {
          const cat = CATEGORIE.find(c=>c.id===(p.cat||p.category_id));
          const cur = p.liste || (p.dest?[p.dest]:[]);
          return (
            <div key={p.id} style={{ display:'grid', gridTemplateColumns:PG, gap:12, padding:'12px 20px',
              borderBottom: i<list.length-1?'1px solid var(--line-2)':'none', alignItems:'center', fontSize:13.5 }}>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:800, color:'var(--ink-2)' }}>{p.matricola || '—'}</span>
              <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
                <span style={{ width:32, height:32, borderRadius:7, flexShrink:0, background:'var(--line-2)', color:'var(--ink-4)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name={cat?.icon||'boxes'} size={17} stroke={1.6} />
                </span>
                <span style={{ fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{prodLabel(p)}</span>
              </div>
              <span style={{ color:'var(--ink-2)', fontWeight:600, fontSize:13, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{cat?.nome||'—'}</span>
              <div style={{ display:'flex', justifyContent:'center', minWidth:0 }}>
                <StatoDropdown stato={p.stato||p.status} onChange={(nuovo)=>changeStato(p.id, nuovo)} />
              </div>
              {LISTE.map(([k])=>{
                const on = cur.includes(k);
                return (
                  <button key={k} onClick={()=>toggleLista(p.id,k)} title={k} style={{ display:'flex', justifyContent:'center' }}>
                    <span style={{ width:24, height:24, borderRadius:6, flexShrink:0, border:'1.5px solid '+(on?'var(--red)':'var(--line)'), background:on?'var(--red)':'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center', transition:'.12s' }}>
                      {on && <Icon name="check" size={15} stroke={3} style={{ color:'#fff' }} />}
                    </span>
                  </button>
                );
              })}
              <div style={{ display:'flex', gap:6, justifySelf:'end' }}>
                <button onClick={()=>openProduct(p)} title="Visualizza" style={iconBtn}><Icon name="eye" size={16} /></button>
                <button onClick={()=>onEdit(p)} title="Modifica" style={iconBtn}><Icon name="edit" size={16} /></button>
                <button onClick={()=>onDuplicate(p)} title="Duplica" style={iconBtn}><Icon name="copy" size={16} /></button>
              </div>
            </div>
          );
        })}
        </div>
        </div>
      </div>
      <div style={{ marginTop:14, fontSize:12.5, color:'var(--ink-4)', display:'flex', alignItems:'center', gap:8 }}>
        <Icon name="boxes" size={15} /> Un mezzo può comparire in più liste contemporaneamente. Prezzi e dati restano nella scheda prodotto.
      </div>
    </>
  );
}

const iconBtn = { width:32, height:32, borderRadius:7, border:'1.5px solid var(--line)', color:'var(--ink-3)', display:'flex', alignItems:'center', justifyContent:'center' };

function AdminUtenti({ toast, users, setUsers, currentUser }) {
  const vp = useViewport();
  const [editing, setEditing] = useState(undefined);
  const [confirm, setConfirm] = useState(null);
  const [hover, setHover] = useState(null);
  const [pwModal, setPwModal] = useState(null);  // utente di cui cambiare password
  const [createdInfo, setCreatedInfo] = useState(null);  // info post-creazione per mostrare password

  const save = async (u, isNew) => {
    try {
      if (isNew) {
        // Crea via edge function (Supabase Auth)
        const created = await window.AuthAPI.adminCreateUser({
          nome: u.nome, email: u.email, role: u.ruolo || u.role,
          attivo: u.attivo, password: u.password,
        });
        setUsers(prev => [...prev, created]);
        // Mostra modal con password creata da copiare
        setCreatedInfo({ user: created, password: u.password });
      } else {
        // Update profilo (senza password)
        await window.DataAPI.update('users', u.id, {
          nome: u.nome,
          email: u.email,
          role: u.ruolo || u.role,
          attivo: u.attivo,
        });
        setUsers(prev => prev.map(x=>x.id===u.id?{ ...x, ...u, role: u.ruolo || u.role }:x));
        toast('Utente aggiornato');
      }
      setEditing(undefined);
    } catch(e) {
      toast(e.message || 'Errore salvataggio utente');
      console.error(e);
    }
  };

  const remove = async (u) => {
    try { await window.DataAPI.remove('users', u.id); }
    catch(e) { toast('Errore rimozione utente'); console.error(e); return; }
    setUsers(prev=>prev.filter(x=>x.id!==u.id));
    setConfirm(null);
    toast(`Utente "${u.nome}" rimosso`);
  };

  const toggleAttivo = async (u) => {
    const nuovoAttivo = !u.attivo;
    try { await window.DataAPI.update('users', u.id, { attivo: nuovoAttivo }); }
    catch(e) { toast('Errore aggiornamento utente'); console.error(e); return; }
    setUsers(prev=>prev.map(x=>x.id===u.id?{...x,attivo:nuovoAttivo}:x));
  };

  return (
    <>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14, gap:12, flexWrap:'wrap' }}>
        <div style={{ minWidth:0, flex:1 }}>
          <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?17:19, fontWeight:800 }}>Utenti e ruoli</h2>
          <div style={{ fontSize: vp.isMobile?12.5:13, color:'var(--ink-3)', marginTop:2 }}>{users.length} utenti{!vp.isMobile && ' · crea account e gestisci le credenziali'}</div>
        </div>
        <Btn icon="plus" size={vp.isMobile?'sm':'md'} onClick={()=>setEditing(null)}>{vp.isMobile?'Nuovo':'Nuovo utente'}</Btn>
      </div>
      {vp.isMobile ? (
        /* MOBILE: card list, tap = edit */
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {users.map(u => {
            const isSelf = currentUser && u.id===currentUser.id;
            const ruolo = u.ruolo || u.role;
            const isMigrated = !!u.auth_user_id;
            return (
              <div key={u.id} onClick={()=>setEditing(u)}
                style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)',
                  padding:'12px 14px', boxShadow:'var(--sh-1)', cursor:'pointer' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                  <Avatar name={u.nome} color={RUOLI[ruolo]?.color||'var(--ink-3)'} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
                      <span style={{ fontSize:14, fontWeight:800 }}>{u.nome}</span>
                      {isSelf && <span style={{ fontSize:10, fontWeight:800, color:'var(--ink-3)', background:'var(--line-2)', padding:'2px 6px', borderRadius:99 }}>TU</span>}
                      {!isMigrated && <span style={{ fontSize:10, fontWeight:800, color:'#9a5800', background:'#fdf0e0', padding:'2px 6px', borderRadius:99 }}>DA MIGRARE</span>}
                    </div>
                    <div style={{ fontSize:12, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{u.email}</div>
                  </div>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
                  <RolePill ruolo={ruolo} />
                  <label style={{ display:'flex', alignItems:'center', gap:7, cursor:'pointer' }} onClick={e=>{ e.stopPropagation(); toggleAttivo(u); }}>
                    <span style={{ width:34, height:20, borderRadius:99, background:u.attivo?'var(--st-disponibile)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
                      <span style={{ position:'absolute', top:2.5, left:u.attivo?17:2.5, width:15, height:15, borderRadius:99, background:'#fff', transition:'.2s' }} />
                    </span>
                    <span style={{ fontSize:11.5, fontWeight:700, color:u.attivo?'var(--st-disponibile)':'var(--ink-4)' }}>{u.attivo?'Attivo':'Off'}</span>
                  </label>
                </div>
              </div>
            );
          })}
          <button onClick={()=>setEditing(null)}
            style={{ padding:'12px', color:'var(--red)', fontSize:13, fontWeight:700, background:'var(--red-tint)',
              border:'1.5px dashed var(--red-tint-2)', borderRadius:'var(--r-lg)',
              display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <Icon name="plus" size={16} /> Aggiungi utente
          </button>
        </div>
      ) : (
      <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--sh-1)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr) 130px', gap:14, padding:'13px 22px', background:'var(--surface-2)',
          borderBottom:'1px solid var(--line)', fontSize:11, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em' }}>
          <span>Utente</span><span>Ruolo</span><span>Stato</span><span style={{ textAlign:'right' }}>Azioni</span>
        </div>
        {users.map((u,i)=>{
          const isSelf = currentUser && u.id===currentUser.id;
          const ruolo = u.ruolo || u.role;
          const isMigrated = !!u.auth_user_id;
          return (
          <div key={u.id} onMouseEnter={()=>setHover(u.id)} onMouseLeave={()=>setHover(null)}
            style={{ display:'grid', gridTemplateColumns:'minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr) 130px', gap:14, padding:'13px 22px',
            borderBottom: i<users.length-1?'1px solid var(--line-2)':'none', alignItems:'center', background: hover===u.id?'var(--surface-2)':'transparent' }}>
            <div style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
              <Avatar name={u.nome} color={RUOLI[ruolo]?.color||'var(--ink-3)'} />
              <div style={{ minWidth:0 }}>
                <div style={{ fontSize:14, fontWeight:700, display:'flex', alignItems:'center', gap:8 }}>
                  {u.nome}
                  {isSelf && <span style={{ fontSize:10.5, fontWeight:800, color:'var(--ink-3)', background:'var(--line-2)', padding:'2px 7px', borderRadius:99, letterSpacing:'.03em' }}>TU</span>}
                  {!isMigrated && <span title="Account non ancora migrato a Supabase Auth" style={{ fontSize:10.5, fontWeight:800, color:'#9a5800', background:'#fdf0e0', padding:'2px 7px', borderRadius:99, letterSpacing:'.03em' }}>DA MIGRARE</span>}
                </div>
                <div style={{ fontSize:12.5, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{u.email}</div>
              </div>
            </div>
            <div><RolePill ruolo={ruolo} /></div>
            <label style={{ display:'flex', alignItems:'center', gap:9, cursor:'pointer' }} onClick={()=>toggleAttivo(u)}>
              <span style={{ width:40, height:23, borderRadius:99, background:u.attivo?'var(--st-disponibile)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
                <span style={{ position:'absolute', top:3, left:u.attivo?20:3, width:17, height:17, borderRadius:99, background:'#fff', transition:'.2s', boxShadow:'0 1px 2px rgba(0,0,0,.2)' }} />
              </span>
              <span style={{ fontSize:12.5, fontWeight:700, color:u.attivo?'var(--st-disponibile)':'var(--ink-4)' }}>{u.attivo?'Attivo':'Disattivo'}</span>
            </label>
            <div style={{ display:'flex', gap:6, justifySelf:'end', opacity: hover===u.id?1:0, transition:'opacity .12s' }}>
              <button onClick={()=>setPwModal(u)} title="Cambia password" style={iconBtn} disabled={!isMigrated}><Icon name="lock" size={14} /></button>
              <button onClick={()=>setEditing(u)} title="Modifica" style={iconBtn}><Icon name="edit" size={15} /></button>
              {isSelf ? (
                <span title="Non puoi rimuovere il tuo account" style={{ ...iconBtn, color:'var(--ink-4)', cursor:'default', borderStyle:'dashed' }}><Icon name="lock" size={14} /></span>
              ) : (
                <button onClick={()=>setConfirm(u)} title="Rimuovi" style={{ ...iconBtn, color:'var(--red)', borderColor:'var(--red-tint-2)' }}><Icon name="x" size={15} /></button>
              )}
            </div>
          </div>
        );})}
        <button onClick={()=>setEditing(null)} style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'14px 22px',
          color:'var(--ink-3)', fontSize:13.5, fontWeight:700, borderTop:'1px dashed var(--line)', background:'var(--surface-2)' }}
          onMouseEnter={e=>e.currentTarget.style.color='var(--red)'} onMouseLeave={e=>e.currentTarget.style.color='var(--ink-3)'}>
          <Icon name="plus" size={17} /> Aggiungi utente
        </button>
      </div>
      )}

      {editing!==undefined && <UserEditModal user={editing} isSelf={editing && currentUser && editing.id===currentUser.id} onClose={()=>setEditing(undefined)} onSave={(u)=>save(u, editing===null)} existing={users} />}
      {pwModal && <ChangePasswordModal user={pwModal} onClose={()=>setPwModal(null)} toast={toast} />}
      {createdInfo && <CreatedUserModal info={createdInfo} onClose={()=>setCreatedInfo(null)} />}
      {confirm && <ConfirmDialog title="Rimuovere l'utente?"
        message={<>Stai per rimuovere <b>{confirm.nome}</b> ({confirm.email}). Perderà l'accesso alla piattaforma.</>}
        confirmLabel="Rimuovi utente" onConfirm={()=>remove(confirm)} onClose={()=>setConfirm(null)} />}
    </>
  );
}

// Modal post-creazione: mostra password generata da copiare
function CreatedUserModal({ info, onClose }) {
  const [copied, setCopied] = useState(false);
  const copyAll = () => {
    const text = `Smart Fleet Menabue\nEmail: ${info.user.email}\nPassword: ${info.password}`;
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(()=>setCopied(false), 2000);
  };
  return (
    <ModalShell onClose={onClose} width={460} title="Utente creato" subtitle="Copia e invia le credenziali all'utente">
      <div style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 14px', background:'#e8f6f0', borderRadius:'var(--r-md)', marginBottom:18 }}>
        <Icon name="check" size={17} style={{ color:'var(--st-disponibile)' }} />
        <span style={{ fontSize:13, color:'#0c6b4a', fontWeight:600 }}>Account creato con successo. Copia le credenziali — la password non sarà più visibile.</span>
      </div>
      <div style={{ background:'var(--surface-2)', borderRadius:'var(--r-md)', padding:'14px 16px', marginBottom:14 }}>
        <div style={{ marginBottom:8 }}>
          <div style={{ fontSize:11.5, fontWeight:800, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:3 }}>Email</div>
          <div style={{ fontSize:14, fontWeight:700, fontFamily:'monospace' }}>{info.user.email}</div>
        </div>
        <div>
          <div style={{ fontSize:11.5, fontWeight:800, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:3 }}>Password</div>
          <div style={{ fontSize:14, fontWeight:700, fontFamily:'monospace', color:'var(--red)' }}>{info.password}</div>
        </div>
      </div>
      <Btn full icon={copied?'check':'copy'} onClick={copyAll}>{copied?'Copiato!':'Copia credenziali'}</Btn>
      <div style={{ marginTop:10, fontSize:12, color:'var(--ink-4)', textAlign:'center' }}>
        Invia queste credenziali all'utente via canale sicuro (es. WhatsApp, di persona)
      </div>
    </ModalShell>
  );
}

// Modal cambia password di un altro utente (senza chiedere quella vecchia)
function ChangePasswordModal({ user, onClose, toast }) {
  const [password, setPassword] = useState('');
  const [showPw, setShowPw] = useState(true);
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);

  const genPw = () => {
    const chars='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#';
    let p=''; for(let i=0;i<12;i++) p+=chars[Math.floor(Math.random()*chars.length)];
    setPassword(p);
  };
  const copy = () => { navigator.clipboard.writeText(password); setCopied(true); setTimeout(()=>setCopied(false), 2000); };

  const submit = async () => {
    if (password.length < 8) { toast('Password deve essere di almeno 8 caratteri'); return; }
    setLoading(true);
    try {
      await window.AuthAPI.adminUpdatePassword(user.id, password);
      toast('Password aggiornata. Comunicala all\'utente.');
    } catch(e) {
      toast(e.message || 'Errore aggiornamento password');
      setLoading(false);
      return;
    }
    setLoading(false);
  };

  return (
    <ModalShell onClose={onClose} width={460} title="Cambia password" subtitle={`${user.nome} · ${user.email}`}>
      <div style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 14px', background:'var(--red-tint)', borderRadius:'var(--r-md)', marginBottom:18 }}>
        <Icon name="shield" size={17} style={{ color:'var(--red)' }} />
        <span style={{ fontSize:13, color:'var(--red)', fontWeight:600 }}>Stai impostando una nuova password per questo utente. Quella precedente non sarà più valida.</span>
      </div>
      <Field label="Nuova password" required>
        <div style={{ display:'flex', gap:9 }}>
          <div style={{ position:'relative', flex:1 }}>
            <input type={showPw?'text':'password'} value={password} onChange={e=>setPassword(e.target.value)} placeholder="min. 8 caratteri" style={{ ...inputStyle, paddingRight:40, fontFamily: password ? 'monospace' : 'inherit' }} autoFocus />
            <button type="button" onClick={()=>setShowPw(s=>!s)} tabIndex={-1} style={{ position:'absolute', right:6, top:'50%', transform:'translateY(-50%)', padding:8, color:'var(--ink-3)', display:'flex' }}>
              <Icon name={showPw?'eyeOff':'eye'} size={18} />
            </button>
          </div>
          <Btn variant="subtle" icon="refresh" onClick={genPw}>Genera</Btn>
          {password && <Btn variant="ghost" icon={copied?'check':'copy'} onClick={copy}>{copied?'OK':''}</Btn>}
        </div>
      </Field>
      <div style={{ display:'flex', gap:12, marginTop:22 }}>
        <Btn variant="ghost" full onClick={onClose}>Annulla</Btn>
        <Btn full icon="check" onClick={submit} disabled={loading || password.length<8}>{loading?'Aggiornamento…':'Aggiorna password'}</Btn>
      </div>
    </ModalShell>
  );
}

// User editor: passwordfield solo per creazione, no per modifica (per modifica c'è ChangePasswordModal)
function UserEditModal({ user, isSelf, onClose, onSave, existing }) {
  const isNew = user===null;
  const [nome, setNome] = useState(user?.nome || '');
  const [email, setEmail] = useState(user?.email || '');
  const [ruolo, setRuolo] = useState(user?.ruolo || user?.role || 'commerciale');
  const [attivo, setAttivo] = useState(user ? user.attivo : true);
  const [password, setPassword] = useState('');
  const [showPw, setShowPw] = useState(true);
  const [copied, setCopied] = useState(false);
  const emailDupe = existing.some(u => u.email.toLowerCase()===email.trim().toLowerCase() && u.id!==user?.id);
  const valid = nome.trim() && email.trim() && /.+@.+\..+/.test(email) && !emailDupe && (!isNew || password.length>=8);

  const genPw = () => {
    const chars='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#';
    let p=''; for(let i=0;i<12;i++) p+=chars[Math.floor(Math.random()*chars.length)];
    setPassword(p);
  };
  const copy = () => { navigator.clipboard.writeText(password); setCopied(true); setTimeout(()=>setCopied(false), 2000); };

  const submit = () => {
    if(!valid) return;
    onSave({ id:user?.id, nome:nome.trim(), email:email.trim(), ruolo, attivo, password: isNew ? password : undefined });
  };

  return (
    <ModalShell onClose={onClose} width={520} title={isNew?'Nuovo utente':'Modifica utente'} subtitle={isNew?'Crea un account e imposta la password iniziale':user.nome}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Field label="Nome e cognome" required>
          <input value={nome} onChange={e=>setNome(e.target.value)} placeholder="es. Mario Rossi" style={inputStyle} autoFocus />
        </Field>
        <Field label="Email aziendale" required>
          <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="nome@menabue.it" style={{ ...inputStyle, borderColor: emailDupe?'var(--red)':'var(--line)' }} disabled={!isNew} />
          {emailDupe && <span style={{ fontSize:12, color:'var(--red)', fontWeight:600, marginTop:5, display:'block' }}>Email già in uso da un altro utente</span>}
          {!isNew && <span style={{ fontSize:11.5, color:'var(--ink-4)', marginTop:5, display:'block' }}>L'email non è modificabile dopo la creazione (chiave di login)</span>}
        </Field>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          <Field label="Ruolo" required>
            {isSelf ? (
              <div style={{ display:'flex', alignItems:'center', gap:8, padding:'11px 13px', background:'var(--line-2)', borderRadius:'var(--r-md)' }}>
                <RolePill ruolo={ruolo} />
                <span style={{ fontSize:11.5, color:'var(--ink-4)', fontWeight:600 }}>· bloccato</span>
              </div>
            ) : (
              <div style={{ position:'relative' }}>
                <select value={ruolo} onChange={e=>setRuolo(e.target.value)} style={{ ...inputStyle, appearance:'none', paddingRight:34 }}>
                  <option value="commerciale">Commerciale</option>
                  <option value="backoffice">Back Office</option>
                  <option value="admin">Admin</option>
                  <option value="cliente">Cliente</option>
                </select>
                <Icon name="chevDown" size={16} style={{ position:'absolute', right:12, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
              </div>
            )}
          </Field>
          <Field label="Stato account">
            <label style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 13px', background:'var(--surface-2)', border:'1.5px solid var(--line)', borderRadius:'var(--r-md)', cursor:'pointer' }} onClick={()=>setAttivo(a=>!a)}>
              <span style={{ width:40, height:23, borderRadius:99, background:attivo?'var(--st-disponibile)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
                <span style={{ position:'absolute', top:3, left:attivo?20:3, width:17, height:17, borderRadius:99, background:'#fff', transition:'.2s', boxShadow:'0 1px 2px rgba(0,0,0,.2)' }} />
              </span>
              <span style={{ fontSize:13, fontWeight:700, color:attivo?'var(--st-disponibile)':'var(--ink-4)' }}>{attivo?'Attivo':'Disattivo'}</span>
            </label>
          </Field>
        </div>
        {isNew && (
          <Field label="Password iniziale" required>
            <div style={{ display:'flex', gap:9 }}>
              <div style={{ position:'relative', flex:1 }}>
                <input type={showPw?'text':'password'} value={password} onChange={e=>setPassword(e.target.value)} placeholder="min. 8 caratteri" style={{ ...inputStyle, paddingRight:40, fontFamily: password ? 'monospace' : 'inherit' }} />
                <button type="button" onClick={()=>setShowPw(s=>!s)} tabIndex={-1} style={{ position:'absolute', right:6, top:'50%', transform:'translateY(-50%)', padding:8, color:'var(--ink-3)', display:'flex' }}>
                  <Icon name={showPw?'eyeOff':'eye'} size={18} />
                </button>
              </div>
              <Btn variant="subtle" icon="refresh" onClick={genPw}>Genera</Btn>
              {password && <Btn variant="ghost" icon={copied?'check':'copy'} onClick={copy}>{copied?'OK':''}</Btn>}
            </div>
            <span style={{ fontSize:12, color:'var(--ink-4)', marginTop:6, display:'block' }}>Comunicala all'utente via canale sicuro. Per cambiarla in futuro usa il bottone "lucchetto" nella lista.</span>
          </Field>
        )}
        {!isNew && (
          <div style={{ padding:'12px 14px', background:'var(--surface-2)', borderRadius:'var(--r-md)', fontSize:12.5, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:9 }}>
            <Icon name="lock" size={15} style={{ color:'var(--ink-4)' }} /> Per cambiare la password di questo utente, chiudi e usa il pulsante "lucchetto" nella lista utenti.
          </div>
        )}
      </div>
      <div style={{ display:'flex', gap:12, marginTop:22 }}>
        <Btn variant="ghost" full onClick={onClose}>Annulla</Btn>
        <Btn full icon="check" onClick={submit} disabled={!valid}>{isNew?'Crea utente':'Salva modifiche'}</Btn>
      </div>
    </ModalShell>
  );
}

// Sezione "Sicurezza" — cambia la propria password admin + migrazione utenti
function AdminSicurezza({ toast, currentUser, users, setUsers }) {
  const [newPw, setNewPw] = useState('');
  const [confirmPw, setConfirmPw] = useState('');
  const [showPw, setShowPw] = useState(false);
  const [loading, setLoading] = useState(false);
  const [migrating, setMigrating] = useState(false);
  const [migrationResults, setMigrationResults] = useState(null);

  const legacyCount = users.filter(u => !u.auth_user_id).length;

  const submitOwnPw = async () => {
    if (newPw.length < 8) { toast('Password deve essere di almeno 8 caratteri'); return; }
    if (newPw !== confirmPw) { toast('Le password non coincidono'); return; }
    setLoading(true);
    try {
      await window.AuthAPI.changeOwnPassword(newPw);
      setNewPw(''); setConfirmPw('');
      toast('La tua password è stata aggiornata');
    } catch(e) {
      toast(e.message || 'Errore aggiornamento password');
    }
    setLoading(false);
  };

  const runMigration = async () => {
    setMigrating(true);
    setMigrationResults(null);
    try {
      const results = await window.AuthAPI.adminMigrateExisting();
      setMigrationResults(results);
      // Ricarica la lista users
      const fresh = await window.DataAPI.list('users');
      if (fresh) setUsers(fresh);
      toast('Migrazione completata');
    } catch(e) {
      toast(e.message || 'Errore migrazione');
    }
    setMigrating(false);
  };

  return (
    <div className="admin-sicurezza-mobile" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:22, maxWidth:1100 }}>
      {/* Cambia password personale */}
      <section style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', boxShadow:'var(--sh-1)', padding:'22px 24px' }}>
        <h3 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)', fontSize:17, fontWeight:800 }}>La tua password</h3>
        <p style={{ margin:'0 0 18px', fontSize:13, color:'var(--ink-3)' }}>Cambia la password del tuo account admin. Non serve la password attuale.</p>
        <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
          <Field label="Nuova password" required>
            <div style={{ position:'relative' }}>
              <input type={showPw?'text':'password'} value={newPw} onChange={e=>setNewPw(e.target.value)} placeholder="min. 8 caratteri" style={{ ...inputStyle, paddingRight:40 }} />
              <button type="button" onClick={()=>setShowPw(s=>!s)} tabIndex={-1} style={{ position:'absolute', right:6, top:'50%', transform:'translateY(-50%)', padding:8, color:'var(--ink-3)', display:'flex' }}>
                <Icon name={showPw?'eyeOff':'eye'} size={18} />
              </button>
            </div>
          </Field>
          <Field label="Conferma nuova password" required>
            <input type={showPw?'text':'password'} value={confirmPw} onChange={e=>setConfirmPw(e.target.value)} placeholder="ripeti" style={{ ...inputStyle, borderColor: confirmPw && newPw!==confirmPw?'var(--red)':'var(--line)' }} />
          </Field>
          <Btn icon="check" onClick={submitOwnPw} disabled={loading || newPw.length<8 || newPw!==confirmPw}>{loading?'Aggiornamento…':'Aggiorna la mia password'}</Btn>
        </div>
      </section>

      {/* Migrazione utenti */}
      <section style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', boxShadow:'var(--sh-1)', padding:'22px 24px' }}>
        <h3 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)', fontSize:17, fontWeight:800 }}>Migrazione utenti legacy</h3>
        <p style={{ margin:'0 0 18px', fontSize:13, color:'var(--ink-3)' }}>Sposta gli utenti esistenti su Supabase Auth. Le password esistenti rimangono valide.</p>
        <div style={{ display:'flex', alignItems:'center', gap:11, padding:'12px 14px', background: legacyCount>0?'#fdf0e0':'#e8f6f0', borderRadius:'var(--r-md)', marginBottom:14 }}>
          <Icon name={legacyCount>0?'alertCircle':'check'} size={18} style={{ color: legacyCount>0?'#9a5800':'var(--st-disponibile)' }} />
          <span style={{ fontSize:13, fontWeight:600, color: legacyCount>0?'#9a5800':'#0c6b4a' }}>
            {legacyCount>0 ? `${legacyCount} utenti ancora da migrare` : 'Tutti gli utenti sono migrati'}
          </span>
        </div>
        <Btn icon="refresh" onClick={runMigration} disabled={migrating || legacyCount===0} full>{migrating?'Migrazione in corso…':'Migra utenti legacy'}</Btn>

        {migrationResults && (
          <div style={{ marginTop:16, padding:'12px 14px', background:'var(--surface-2)', borderRadius:'var(--r-md)' }}>
            <div style={{ fontSize:12, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:8 }}>Risultati migrazione</div>
            {migrationResults.length === 0 ? (
              <div style={{ fontSize:13, color:'var(--ink-3)' }}>Nessun utente da migrare.</div>
            ) : migrationResults.map((r, i) => (
              <div key={i} style={{ fontSize:12.5, padding:'5px 0', borderBottom: i<migrationResults.length-1?'1px solid var(--line-2)':'none', display:'flex', justifyContent:'space-between' }}>
                <span><b>{r.nome}</b></span>
                <span style={{ color: r.status==='migrated'?'var(--st-disponibile)': r.status==='linked'?'var(--st-inarrivo)':'var(--red)', fontWeight:700 }}>
                  {r.status === 'migrated' ? '✓ migrato' : r.status === 'linked' ? '⟲ collegato' : r.status === 'error' ? '✕ errore' : r.status}
                </span>
              </div>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

function AdminLog() {
  const vp = useViewport();
  const [logs, setLogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('all');
  const [q, setQ] = useState('');
  const [confirmClear, setConfirmClear] = useState(false);
  const [clearing, setClearing] = useState(false);

  useEffect(() => {
    (async () => {
      const data = await window.LogAPI.listActivityLog({ limit: 200 });
      setLogs(data);
      setLoading(false);
    })();
  }, []);

  // Svuota tutti i log (solo admin, protetto anche da RLS)
  const clearAllLogs = async () => {
    setClearing(true);
    try {
      const sb = window.DataAPI.client();
      if (sb) {
        // Delete type-agnostic: created_at esiste sempre ed è > epoch.
        // Evita problemi col tipo della colonna id (bigint vs uuid).
        const { error } = await sb
          .from('activity_log')
          .delete()
          .gte('created_at', '1970-01-01T00:00:00Z');
        if (error) throw error;
      }
      setLogs([]);
      setConfirmClear(false);
    } catch (e) {
      console.error('clear logs', e);
      alert('Errore durante lo svuotamento: ' + (e?.message || 'sconosciuto'));
    } finally {
      setClearing(false);
    }
  };

  // Determine category from event_type
  const categoryOf = (et) => {
    if (!et) return 'altro';
    if (et.startsWith('booking.')) return 'prenotazioni';
    if (et.startsWith('rental.')) return 'noleggi';
    if (et.startsWith('product.')) return 'prodotti';
    if (et.startsWith('client.')) return 'clienti';
    return 'altro';
  };

  const catColor = {
    prenotazioni: 'var(--st-prenotato)',
    noleggi: '#6c5ce7',
    prodotti: 'var(--st-disponibile)',
    clienti: 'var(--red)',
    altro: 'var(--ink-3)',
  };
  const catLabel = {
    prenotazioni: 'Prenotazione',
    noleggi: 'Noleggio',
    prodotti: 'Prodotto',
    clienti: 'Cliente',
    altro: 'Altro',
  };

  let filtered = logs.slice();
  if (filter !== 'all') filtered = filtered.filter(l => categoryOf(l.event_type) === filter);
  if (q.trim()) {
    const s = q.toLowerCase();
    filtered = filtered.filter(l => (l.actor_nome + ' ' + l.title + ' ' + (l.description||'')).toLowerCase().includes(s));
  }

  const counts = {
    all: logs.length,
    prenotazioni: logs.filter(l => categoryOf(l.event_type)==='prenotazioni').length,
    noleggi: logs.filter(l => categoryOf(l.event_type)==='noleggi').length,
    prodotti: logs.filter(l => categoryOf(l.event_type)==='prodotti').length,
    clienti: logs.filter(l => categoryOf(l.event_type)==='clienti').length,
  };

  return (
    <>
      <div style={{ marginBottom:16, display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:14 }}>
        <div>
          <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontSize:19, fontWeight:800 }}>Log attività</h2>
          <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:2 }}>Tracciamento completo delle azioni · utente, azione, oggetto, orario</div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
          <span style={{ fontSize:13, color:'var(--ink-3)', fontWeight:600 }}>{filtered.length} {filtered.length===1?'evento':'eventi'}</span>
          {logs.length>0 && (
            <button onClick={()=>setConfirmClear(true)} title="Svuota tutti i log"
              style={{ display:'flex', alignItems:'center', gap:7, padding:'8px 13px', borderRadius:'var(--r-md)', fontSize:13, fontWeight:700,
                border:'1.5px solid var(--red-tint-2)', background:'var(--red-tint)', color:'var(--red)', cursor:'pointer' }}>
              <Icon name="x" size={15} /> Svuota log
            </button>
          )}
        </div>
      </div>

      <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', marginBottom:14 }}>
        <div style={{ display:'flex', gap:7, flexWrap:'wrap' }}>
          {[['all','Tutti'],['prenotazioni','Prenotazioni'],['noleggi','Noleggi'],['prodotti','Prodotti'],['clienti','Clienti']].map(([k,l])=>(
            <button key={k} onClick={()=>setFilter(k)} style={{ display:'flex', alignItems:'center', gap:7, padding:'8px 13px', borderRadius:99, fontSize:13, fontWeight:700,
              border:'1.5px solid '+(filter===k?'var(--ink)':'var(--line)'), background: filter===k?'var(--ink)':'var(--surface)', color: filter===k?'#fff':'var(--ink-2)' }}>
              {l}
              <span style={{ fontSize:11, fontWeight:800, padding:'1px 6px', borderRadius:99, background: filter===k?'rgba(255,255,255,.22)':'var(--line-2)', color: filter===k?'#fff':'var(--ink-3)' }}>{counts[k]}</span>
            </button>
          ))}
        </div>
        <div style={{ position:'relative', marginLeft:'auto', flex:'1 1 220px', maxWidth:320 }}>
          <Icon name="search" size={18} style={{ position:'absolute', left:13, top:'50%', transform:'translateY(-50%)', color:'var(--ink-4)' }} />
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Cerca utente, oggetto, dettagli…"
            style={{ width:'100%', padding:'10px 14px 10px 40px', fontSize:13.5, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface-2)', outline:'none' }}
            onFocus={e=>e.target.style.borderColor='var(--red)'} onBlur={e=>e.target.style.borderColor='var(--line)'} />
        </div>
      </div>

      <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--sh-1)' }}>
        {loading ? (
          <div style={{ padding:'60px 0', textAlign:'center', color:'var(--ink-3)', fontWeight:600 }}>Caricamento…</div>
        ) : filtered.length===0 ? (
          <div style={{ padding:'60px 0', textAlign:'center', color:'var(--ink-3)', fontWeight:600 }}>Nessuna attività registrata</div>
        ) : filtered.map((a,i)=>{
          const cat = categoryOf(a.event_type);
          const when = new Date(a.created_at).toLocaleString('it-IT', { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' });
          if (vp.isMobile) {
            return (
              <div key={a.id} style={{ display:'flex', gap:10, padding:'12px 14px', borderBottom: i<filtered.length-1?'1px solid var(--line-2)':'none' }}>
                <Avatar name={a.actor_nome||'?'} size={30} color="var(--ink-3)" />
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:2 }}>
                    <b style={{ fontSize:12.5, fontWeight:800 }}>{a.actor_nome||'Sistema'}</b>
                    <span style={{ fontSize:10.5, fontWeight:700, color: catColor[cat], background:'color-mix(in srgb, '+catColor[cat]+' 12%, var(--surface))', padding:'1px 6px', borderRadius:99, whiteSpace:'nowrap' }}>{catLabel[cat]}</span>
                  </div>
                  <div style={{ fontSize:12.5, color:'var(--ink-2)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{a.title}</div>
                  {a.description && <div style={{ fontSize:11.5, color:'var(--ink-3)', marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{a.description}</div>}
                  <div style={{ fontSize:10.5, color:'var(--ink-4)', fontWeight:600, marginTop:3 }}>{when}</div>
                </div>
              </div>
            );
          }
          return (
            <div key={a.id} style={{ display:'flex', alignItems:'center', gap:14, padding:'14px 22px', borderBottom: i<filtered.length-1?'1px solid var(--line-2)':'none' }}>
              <Avatar name={a.actor_nome||'?'} size={34} color="var(--ink-3)" />
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13.5 }}>
                  <b style={{ fontWeight:700 }}>{a.actor_nome||'Sistema'}</b>
                  <span style={{ color:'var(--ink-2)' }}> · {a.title}</span>
                </div>
                {a.description && <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{a.description}</div>}
              </div>
              <span style={{ fontSize:11.5, fontWeight:700, color: catColor[cat], background:'color-mix(in srgb, '+catColor[cat]+' 12%, var(--surface))', padding:'4px 10px', borderRadius:99, whiteSpace:'nowrap' }}>{catLabel[cat]}</span>
              <span style={{ fontSize:12.5, color:'var(--ink-4)', fontWeight:600, width:110, textAlign:'right', whiteSpace:'nowrap' }}>{when}</span>
            </div>
          );
        })}
      </div>

      {confirmClear && <ConfirmDialog title="Svuotare tutti i log?"
        message={<>
          <div style={{ marginBottom:10 }}>Stai per eliminare <b>tutti i {logs.length} log attività</b>. L'azione è irreversibile.</div>
          <div style={{ padding:'10px 12px', background:'var(--red-tint)', border:'1px solid var(--red-tint-2)', borderRadius:8, fontSize:12.5, color:'var(--ink-2)', display:'flex', gap:8, alignItems:'flex-start' }}>
            <Icon name="alertCircle" size={16} style={{ color:'var(--red)', flexShrink:0, marginTop:1 }} />
            <span><b>Sconsigliato.</b> Il log attività serve a tracciare chi ha fatto cosa (audit). Eliminarlo cancella per sempre lo storico e riduce la tracciabilità. Svuotalo solo se strettamente necessario.</span>
          </div>
        </>}
        confirmLabel={clearing ? 'Eliminazione…' : 'Svuota comunque'} onConfirm={clearAllLogs} onClose={()=>!clearing && setConfirmClear(false)} />}
    </>
  );
}

Object.assign(window, { AdminConsole, AdminLog, AdminInterruzioni });

/* ============================================================
   ADMIN — Motivi di interruzione noleggio
   CRUD con persistenza su interruption_reasons
   ============================================================ */
function AdminInterruzioni({ reasons, setReasons, toast }) {
  const vp = useViewport();
  const [editing, setEditing] = useState(undefined);
  const [confirm, setConfirm] = useState(null);
  const [hover, setHover] = useState(null);

  const list = (reasons || []).slice().sort((a,b) => (a.ordine||0) - (b.ordine||0));

  const save = async (r) => {
    const isNew = !reasons.some(x => x.id === r.id);
    if (window.SF_CONFIG.useSupabase) {
      try {
        if (isNew) {
          const row = await window.DataAPI.insert('interruption_reasons', {
            label: r.label, descrizione: r.descrizione || null, ordine: r.ordine || 0, attivo: true,
          });
          r = { ...r, id: row.id };
        } else {
          await window.DataAPI.update('interruption_reasons', r.id, {
            label: r.label, descrizione: r.descrizione || null, ordine: r.ordine || 0, attivo: r.attivo !== false,
          });
        }
      } catch (e) { console.error(e); toast('Errore salvataggio: ' + (e?.message||'')); return; }
    }
    setReasons(prev => prev.some(x=>x.id===r.id) ? prev.map(x=>x.id===r.id?r:x) : [...prev, r]);
    setEditing(undefined);
    toast(isNew ? 'Motivo aggiunto' : 'Motivo aggiornato');
  };

  const remove = async (r) => {
    if (window.SF_CONFIG.useSupabase) {
      try { await window.DataAPI.remove('interruption_reasons', r.id); }
      catch (e) { console.error(e); toast('Errore eliminazione'); return; }
    }
    setReasons(prev => prev.filter(x => x.id !== r.id));
    setConfirm(null);
    toast('Motivo eliminato');
  };

  const toggleActive = async (r) => {
    const updated = { ...r, attivo: !r.attivo };
    if (window.SF_CONFIG.useSupabase) {
      try { await window.DataAPI.update('interruption_reasons', r.id, { attivo: updated.attivo }); }
      catch (e) { console.error(e); toast('Errore'); return; }
    }
    setReasons(prev => prev.map(x => x.id === r.id ? updated : x));
  };

  return (
    <>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:14, gap:12, flexWrap:'wrap' }}>
        <div style={{ minWidth:0, flex:1 }}>
          <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?17:19, fontWeight:800 }}>Motivi di interruzione</h2>
          <div style={{ fontSize: vp.isMobile?12.5:13, color:'var(--ink-3)', marginTop:2, maxWidth:560 }}>
            {vp.isMobile ? 'Motivi per interrompere un noleggio.' : 'Lista dei motivi selezionabili quando un noleggio viene interrotto anticipatamente. Tracciano l\'affidabilità dei clienti nel tempo.'}
          </div>
        </div>
        <Btn icon="plus" size={vp.isMobile?'sm':'md'} onClick={()=>setEditing(null)}>{vp.isMobile?'Nuovo':'Nuovo motivo'}</Btn>
      </div>

      {vp.isMobile ? (
        /* Card list mobile */
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {list.length === 0 ? (
            <div style={{ padding:'40px 0', textAlign:'center', color:'var(--ink-3)', fontWeight:600 }}>
              Nessun motivo configurato
            </div>
          ) : list.map(r => (
            <div key={r.id} onClick={()=>setEditing(r)}
              style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)',
                padding:'12px 14px', boxShadow:'var(--sh-1)', cursor:'pointer' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
                <span style={{ width:30, height:30, borderRadius:8, flexShrink:0, background:'var(--red-tint)', color:'var(--red)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name="alertCircle" size={16} />
                </span>
                <span style={{ fontSize:14, fontWeight:800, flex:1, minWidth:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{r.label}</span>
                <button onClick={e=>{ e.stopPropagation(); toggleActive(r); }} style={{
                  fontSize:11, fontWeight:700, padding:'3px 8px', borderRadius:99,
                  background: r.attivo !== false ? 'color-mix(in srgb, var(--st-disponibile) 14%, var(--surface))' : 'var(--line-2)',
                  color: r.attivo !== false ? 'var(--st-disponibile)' : 'var(--ink-4)',
                  border:'none', flexShrink:0 }}>
                  {r.attivo !== false ? '● Attivo' : '○ Off'}
                </button>
              </div>
              {r.descrizione && <div style={{ fontSize:12, color:'var(--ink-3)', marginLeft:40 }}>{r.descrizione}</div>}
            </div>
          ))}
          <button onClick={()=>setEditing(null)}
            style={{ padding:'12px', color:'var(--red)', fontSize:13, fontWeight:700, background:'var(--red-tint)',
              border:'1.5px dashed var(--red-tint-2)', borderRadius:'var(--r-lg)',
              display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <Icon name="plus" size={16} /> Aggiungi motivo
          </button>
        </div>
      ) : (
      <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--sh-1)' }}>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,2fr) minmax(0,3fr) 100px 120px', gap:14, padding:'12px 20px', background:'var(--surface-2)', borderBottom:'1px solid var(--line)',
          fontSize:11, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em' }}>
          <span>Motivo</span><span>Descrizione</span><span>Stato</span><span style={{ textAlign:'right' }}>Azioni</span>
        </div>
        {list.length === 0 && (
          <div style={{ padding:'50px 0', textAlign:'center', color:'var(--ink-3)', fontWeight:600 }}>
            Nessun motivo configurato
          </div>
        )}
        {list.map((r,i)=>(
          <div key={r.id} onMouseEnter={()=>setHover(r.id)} onMouseLeave={()=>setHover(null)}
            style={{ display:'grid', gridTemplateColumns:'minmax(0,2fr) minmax(0,3fr) 100px 120px', gap:14, padding:'13px 20px', alignItems:'center',
              borderBottom: i<list.length-1?'1px solid var(--line-2)':'none', background:hover===r.id?'var(--surface-2)':'transparent' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
              <span style={{ width:30, height:30, borderRadius:8, flexShrink:0, background:'var(--red-tint)', color:'var(--red)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name="alertCircle" size={16} />
              </span>
              <span style={{ fontSize:14, fontWeight:700 }}>{r.label}</span>
            </div>
            <span style={{ fontSize:12.5, color:'var(--ink-3)' }}>{r.descrizione || '—'}</span>
            <button onClick={()=>toggleActive(r)} style={{
              fontSize:11.5, fontWeight:700, padding:'4px 10px', borderRadius:99,
              background: r.attivo !== false ? 'color-mix(in srgb, var(--st-disponibile) 14%, var(--surface))' : 'var(--line-2)',
              color: r.attivo !== false ? 'var(--st-disponibile)' : 'var(--ink-4)',
              border:'none', cursor:'pointer', justifySelf:'start' }}>
              {r.attivo !== false ? '● Attivo' : '○ Disattivo'}
            </button>
            <div style={{ display:'flex', gap:6, justifyContent:'flex-end', opacity:hover===r.id?1:0, transition:'.12s' }}>
              <button onClick={()=>setEditing(r)} title="Modifica" style={iconBtn}><Icon name="edit" size={15} /></button>
              <button onClick={()=>setConfirm(r)} title="Elimina" style={{ ...iconBtn, color:'var(--red)', borderColor:'var(--red-tint-2)' }}><Icon name="x" size={15} /></button>
            </div>
          </div>
        ))}
        <button onClick={()=>setEditing(null)} style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'14px 20px', color:'var(--ink-3)', fontSize:13.5, fontWeight:700, borderTop:'1px dashed var(--line)', background:'var(--surface-2)' }}
          onMouseEnter={e=>e.currentTarget.style.color='var(--red)'} onMouseLeave={e=>e.currentTarget.style.color='var(--ink-3)'}>
          <Icon name="plus" size={17} /> Aggiungi motivo
        </button>
      </div>
      )}

      {editing !== undefined && <InterruptionReasonModal data={editing} onClose={()=>setEditing(undefined)} onSave={save} />}
      {confirm && <ConfirmDialog title="Eliminare il motivo?"
        message={<>Stai per eliminare <b>{confirm.label}</b>. Le interruzioni passate che lo usavano resteranno comunque tracciate.</>}
        confirmLabel="Elimina motivo" onConfirm={()=>remove(confirm)} onClose={()=>setConfirm(null)} />}
    </>
  );
}

function InterruptionReasonModal({ data, onClose, onSave }) {
  const isNew = !data;
  const [label, setLabel] = useState(data?.label || '');
  const [descrizione, setDescrizione] = useState(data?.descrizione || '');
  const [ordine, setOrdine] = useState(data?.ordine ?? 10);
  const valid = label.trim() !== '';
  const submit = () => {
    if (!valid) return;
    onSave({
      id: data?.id,
      label: label.trim(),
      descrizione: descrizione.trim() || null,
      ordine: Number(ordine) || 0,
      attivo: data?.attivo !== false,
    });
  };
  return (
    <ModalShell onClose={onClose} width={460} title={isNew?'Nuovo motivo':'Modifica motivo'} subtitle={isNew?'Configura un motivo selezionabile':data.label}>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <Field label="Etichetta" required>
          <input value={label} onChange={e=>setLabel(e.target.value)} placeholder="es. Mezzo non più necessario" style={inputStyle} autoFocus />
        </Field>
        <Field label="Descrizione (facoltativa)">
          <input value={descrizione} onChange={e=>setDescrizione(e.target.value)} placeholder="Quando si usa questo motivo" style={inputStyle} />
        </Field>
        <Field label="Ordine di visualizzazione">
          <input value={ordine} onChange={e=>setOrdine(e.target.value.replace(/[^\d]/g,''))} placeholder="10" style={inputStyle} />
        </Field>
      </div>
      <div style={{ display:'flex', gap:12, marginTop:22 }}>
        <Btn variant="ghost" full onClick={onClose}>Annulla</Btn>
        <Btn full icon="check" onClick={submit} disabled={!valid}>{isNew?'Crea motivo':'Salva'}</Btn>
      </div>
    </ModalShell>
  );
}

Object.assign(window, { InterruptionReasonModal });