/* ============================================================
   SCHEDA CLIENTE — vista a 360°:
   dati editabili, probabilità calcolata, opportunità attive/passate,
   macchine a noleggio/comprate/noleggiate in passato, commerciali attivi.
   ============================================================ */

function SchedaCliente({ cliente, role, clienti, setClienti, zone, clienteCat, opportunities, stages, bookings, archive, users,
                        interruptionReasons, onBack, onOpenOpportunity, onOpenBooking, setBookings, setArchive, toast }) {
  const vp = useViewport();
  const isManager = role==='admin' || role==='backoffice';

  // dati editabili
  const [editing, setEditing] = useState(false);
  const [rs, setRs] = useState(cliente.ragione_sociale || '');
  const [zonaId, setZonaId] = useState(cliente.zona_id || '');
  const [catId, setCatId] = useState(cliente.client_category_id || '');
  const [saving, setSaving] = useState(false);

  const cid = cliente.id;
  const zonaName = (id) => (zone||[]).find(z=>z.id===id)?.nome || '—';
  const catName = (id) => (clienteCat||[]).find(c=>c.id===id)?.nome || '—';
  const stageName = (id) => (stages||[]).find(s=>s.id===id)?.nome || '—';
  const stagePct = (id) => (stages||[]).find(s=>s.id===id)?.percent ?? 0;
  const commName = (id) => (users||[]).find(u=>u.id===id)?.nome || '—';

  // --- opportunità del cliente (per id o per nome) ---
  const matchCliente = (o) => o.cliente_id===cid || (o.cliente||'').toLowerCase()===(cliente.ragione_sociale||'').toLowerCase();
  const cliOpps = (opportunities||[]).filter(matchCliente);
  const oppsAttive = cliOpps.filter(o => (o.esito||'aperta')==='aperta');
  const oppsVinte = cliOpps.filter(o => o.esito==='vinta');
  const oppsPerse = cliOpps.filter(o => o.esito==='persa');

  // --- macchine (da bookings attivi + archivio) ---
  const matchBk = (b) => b.cliente_id===cid || (b.cliente||'').toLowerCase()===(cliente.ragione_sociale||'').toLowerCase();
  const activeBk = (bookings||[]).filter(matchBk);
  const archBk = (archive||[]).filter(matchBk);

  // a noleggio ora: prenotazioni attive di tipo STR/LTR, oppure archivio noleggio non rientrato
  const noleggioOra = [
    ...activeBk.filter(b => (b.tipo==='STR'||b.tipo==='LTR'||b.tipo==='Tampone')),
    ...archBk.filter(b => (b.tipo==='STR'||b.tipo==='LTR'||b.tipo==='Tampone') && b.esito==='confermata' && b.rientrato===false),
  ];
  // comprate: archivio tipo Vendita confermata
  const comprate = archBk.filter(b => b.tipo==='Vendita' && b.esito==='confermata');
  // noleggiate in passato: archivio noleggio rientrato o liberato
  const noleggiPassati = archBk.filter(b => (b.tipo==='STR'||b.tipo==='LTR'||b.tipo==='Tampone') && (b.rientrato===true || b.esito==='liberata'));

  // --- commerciali più attivi (per numero opportunità) ---
  const commCount = {};
  cliOpps.forEach(o => { if (o.commerciale_id) commCount[o.commerciale_id] = (commCount[o.commerciale_id]||0)+1; });
  const commRank = Object.entries(commCount).map(([id,n])=>({ id, n })).sort((a,b)=>b.n-a.n);

  // --- probabilità calcolata: vinte / (vinte+perse), mappata 20-80 ---
  const chiuse = oppsVinte.length + oppsPerse.length;
  const successRate = chiuse>0 ? oppsVinte.length/chiuse : 0.5; // neutro se nessuno storico
  const probabilita = Math.round(20 + successRate*60); // range fisso 20-80

  // --- statistiche noleggio: proroghe medie + interruzioni anticipate ---
  const tuttiNoleggi = [...noleggioOra, ...noleggiPassati];
  const noleggiConProroghe = tuttiNoleggi.filter(b => (b.proroghe ?? 0) > 0);
  const totProroghe = tuttiNoleggi.reduce((s,b)=>s+(b.proroghe ?? 0), 0);
  const mediaProroghe = tuttiNoleggi.length > 0 ? (totProroghe / tuttiNoleggi.length) : 0;

  const reasonName = (id) => (interruptionReasons||[]).find(r=>r.id===id)?.label || 'Motivo non specificato';
  const interruzioni = archBk.filter(b => b.interrotto);
  // rileva mancati pagamenti (per nome motivo)
  const isMancatoPagamento = (b) => {
    const nome = reasonName(b.interruzione_reason_id).toLowerCase();
    return nome.includes('pagament') || nome.includes('insolut') || nome.includes('mancato pag');
  };
  const mancatiPagamenti = interruzioni.filter(isMancatoPagamento);

  const save = async () => {
    if (!rs.trim()) { toast('La ragione sociale non può essere vuota'); return; }
    setSaving(true);
    const patch = { ragione_sociale: rs.trim(), zona_id: zonaId||null, client_category_id: catId||null };
    try {
      if (window.SF_CONFIG.useSupabase) {
        await window.DataAPI.update('clienti', cid, patch);
        // propaga il nome sulle prenotazioni se cambiato
        if (rs.trim() !== cliente.ragione_sociale) {
          const cli = window.DataAPI.client();
          await cli.from('bookings').update({ cliente: rs.trim() }).eq('cliente_id', cid);
          await cli.from('bookings_archive').update({ cliente: rs.trim() }).eq('cliente_id', cid);
          setBookings?.(prev => prev.map(b => b.cliente_id===cid ? { ...b, cliente: rs.trim() } : b));
          setArchive?.(prev => prev.map(b => b.cliente_id===cid ? { ...b, cliente: rs.trim() } : b));
        }
      }
      setClienti?.(prev => prev.map(c => c.id===cid ? { ...c, ...patch } : c));
      toast('Cliente aggiornato');
      setEditing(false);
    } catch(e){ console.error('save cliente', e); toast('Errore salvataggio'); }
    finally { setSaving(false); }
  };

  const probColor = probabilita>=60 ? 'var(--st-disponibile)' : probabilita>=40 ? '#d98a00' : 'var(--red)';

  return (
    <div className="scroll" style={{ flex:1, minWidth:0, overflowY:'auto', overflowX:'hidden' }}>
      {/* top bar */}
      <div style={{ padding: vp.isMobile?'10px 12px':'14px 30px', borderBottom:'1px solid var(--line)', background:'var(--surface)',
        display:'flex', alignItems:'center', gap:14, position:'sticky', top:0, zIndex:20 }}>
        <button onClick={onBack} style={{ display:'flex', alignItems:'center', gap:7, fontSize:13, fontWeight:700, color:'var(--ink-2)', padding:'7px 12px', borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', flexShrink:0 }}>
          <Icon name="chevLeft" size={16} /> {vp.isMobile?'':'Anagrafica'}
        </button>
        <div style={{ flex:1, minWidth:0 }}>
          <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?17:20, fontWeight:800, letterSpacing:'-.01em', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{cliente.ragione_sociale}</h1>
          <div style={{ fontSize:12, color:'var(--ink-3)' }}>Scheda cliente</div>
        </div>
      </div>

      <div style={{ padding: vp.isMobile?'16px 12px 40px':'24px 30px 50px', maxWidth:1180, margin:'0 auto' }}>
        {/* ALERT mancati pagamenti */}
        {mancatiPagamenti.length > 0 && (
          <div style={{ display:'flex', alignItems:'flex-start', gap:12, padding:'14px 16px', marginBottom:20,
            background:'var(--red-tint)', border:'1.5px solid var(--red)', borderRadius:'var(--r-lg)' }}>
            <Icon name="alertCircle" size={22} style={{ color:'var(--red)', flexShrink:0, marginTop:1 }} />
            <div>
              <div style={{ fontSize:14, fontWeight:800, color:'var(--red)' }}>Attenzione: mancati pagamenti in passato</div>
              <div style={{ fontSize:12.5, color:'var(--ink-2)', marginTop:3 }}>
                Questo cliente ha {mancatiPagamenti.length} {mancatiPagamenti.length===1?'noleggio interrotto':'noleggi interrotti'} per mancato pagamento.
                Valutare con attenzione prima di concedere nuovi noleggi.
              </div>
            </div>
          </div>
        )}

        <div style={{ display:'grid', gridTemplateColumns: vp.isMobile?'1fr':'1.5fr 1fr', gap: vp.isMobile?16:24, alignItems:'start' }}>

          {/* LEFT: dati + opportunità + macchine */}
          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>

            {/* Dati anagrafici */}
            <div style={cardBox}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: editing?14:12 }}>
                <h3 style={cTitle}>Dati anagrafici</h3>
                {!editing
                  ? <Btn size="sm" variant="ghost" icon="edit" onClick={()=>setEditing(true)}>Modifica</Btn>
                  : <div style={{ display:'flex', gap:8 }}>
                      <Btn size="sm" variant="ghost" onClick={()=>{ setEditing(false); setRs(cliente.ragione_sociale||''); setZonaId(cliente.zona_id||''); setCatId(cliente.client_category_id||''); }}>Annulla</Btn>
                      <Btn size="sm" icon="check" onClick={save} disabled={saving}>Salva</Btn>
                    </div>}
              </div>
              {!editing ? (
                <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(140px,1fr))', gap:14 }}>
                  <InfoCell label="Ragione sociale" value={cliente.ragione_sociale} />
                  <InfoCell label="Zona" value={zonaName(cliente.zona_id)} icon="pin" />
                  <InfoCell label="Categoria" value={catName(cliente.client_category_id)} icon="tag" />
                </div>
              ) : (
                <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                  <Field label="Ragione sociale" required>
                    <input value={rs} onChange={e=>setRs(e.target.value)} style={inputStyle} />
                  </Field>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                    <Field label="Zona">
                      <div style={{ position:'relative' }}>
                        <select value={zonaId} onChange={e=>setZonaId(e.target.value)} style={{ ...inputStyle, appearance:'none', paddingRight:30 }}>
                          <option value="">—</option>
                          {(zone||[]).map(z=><option key={z.id} value={z.id}>{z.nome}</option>)}
                        </select>
                        <Icon name="chevDown" size={15} style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
                      </div>
                    </Field>
                    <Field label="Categoria">
                      <div style={{ position:'relative' }}>
                        <select value={catId} onChange={e=>setCatId(e.target.value)} style={{ ...inputStyle, appearance:'none', paddingRight:30 }}>
                          <option value="">—</option>
                          {(clienteCat||[]).map(c=><option key={c.id} value={c.id}>{c.nome}</option>)}
                        </select>
                        <Icon name="chevDown" size={15} style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
                      </div>
                    </Field>
                  </div>
                </div>
              )}
            </div>

            {/* Opportunità attive */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Opportunità attive ({oppsAttive.length})</h3>
              {oppsAttive.length===0 ? <Empty>Nessuna opportunità in corso</Empty> : (
                <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
                  {oppsAttive.map(o => (
                    <button key={o.id} onClick={()=>onOpenOpportunity(o)} style={oppRow}>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:13.5, fontWeight:700 }}>{stageName(o.stage_id)}</div>
                        <div style={{ fontSize:11.5, color:'var(--ink-3)' }}>
                          {(o.bookingIds||[]).length} macchina/e · {(o.desiredIds||[]).length} desiderata/e
                          {o.commerciale_id ? ` · ${commName(o.commerciale_id)}` : ''}
                        </div>
                      </div>
                      <div style={{ display:'flex', alignItems:'center', gap:8, flexShrink:0 }}>
                        <div style={{ width:52, height:5, borderRadius:99, background:'var(--line-2)', overflow:'hidden' }}>
                          <div style={{ width:stagePct(o.stage_id)+'%', height:'100%', background:'var(--red)' }} />
                        </div>
                        <span style={{ fontSize:12, fontWeight:800, color:'var(--ink-3)', minWidth:32, textAlign:'right' }}>{stagePct(o.stage_id)}%</span>
                        <Icon name="chevRight" size={16} style={{ color:'var(--ink-4)' }} />
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Opportunità passate */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Opportunità passate ({oppsVinte.length+oppsPerse.length})</h3>
              {(oppsVinte.length+oppsPerse.length)===0 ? <Empty>Nessuna opportunità conclusa</Empty> : (
                <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
                  {[...oppsVinte, ...oppsPerse].map(o => (
                    <button key={o.id} onClick={()=>onOpenOpportunity(o)} style={oppRow}>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:13.5, fontWeight:700 }}>{stageName(o.stage_id)}</div>
                        <div style={{ fontSize:11.5, color:'var(--ink-3)' }}>{o.chiusa_il ? new Date(o.chiusa_il).toLocaleDateString('it-IT') : ''}{o.commerciale_id?` · ${commName(o.commerciale_id)}`:''}</div>
                      </div>
                      <span style={{ padding:'4px 10px', borderRadius:99, fontSize:11, fontWeight:800,
                        background: o.esito==='vinta'?'#e8f6f0':'var(--line-2)', color: o.esito==='vinta'?'var(--st-disponibile)':'var(--ink-3)' }}>
                        {o.esito==='vinta'?'Vinta':'Persa'}
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Macchine */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Macchine</h3>
              <MachineGroup title="A noleggio ora" items={noleggioOra} empty="Nessun noleggio in corso" onOpenBooking={onOpenBooking} />
              <MachineGroup title="Comprate" items={comprate} empty="Nessun acquisto registrato" onOpenBooking={onOpenBooking} />
              <MachineGroup title="Noleggiate in passato" items={noleggiPassati} empty="Nessun noleggio passato" onOpenBooking={onOpenBooking} last />
            </div>
          </div>

          {/* RIGHT: probabilità + commerciali */}
          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>

            {/* Probabilità */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:14 }}>Probabilità cliente</h3>
              <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10 }}>
                <div style={{ position:'relative', width:120, height:120 }}>
                  <svg width="120" height="120" viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="52" fill="none" stroke="var(--line-2)" strokeWidth="12" />
                    <circle cx="60" cy="60" r="52" fill="none" stroke={probColor} strokeWidth="12" strokeLinecap="round"
                      strokeDasharray={2*Math.PI*52} strokeDashoffset={2*Math.PI*52*(1-probabilita/100)}
                      transform="rotate(-90 60 60)" />
                  </svg>
                  <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
                    <span style={{ fontFamily:'var(--font-display)', fontSize:28, fontWeight:800, color:probColor }}>{probabilita}%</span>
                  </div>
                </div>
                <div style={{ fontSize:12, color:'var(--ink-3)', textAlign:'center', lineHeight:1.5 }}>
                  Calcolata su {chiuse} {chiuse===1?'trattativa conclusa':'trattative concluse'}
                  {chiuse>0 ? ` (${oppsVinte.length} vinte, ${oppsPerse.length} perse)` : ' — nessuno storico'}
                </div>
              </div>
            </div>

            {/* Commerciali più attivi */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Commerciali più attivi</h3>
              {commRank.length===0 ? <Empty>Nessuna interazione registrata</Empty> : (
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {commRank.map((c, i) => (
                    <div key={c.id} style={{ display:'flex', alignItems:'center', gap:11 }}>
                      <span style={{ width:22, height:22, borderRadius:99, background: i===0?'var(--red)':'var(--line-2)', color: i===0?'#fff':'var(--ink-3)',
                        fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>{i+1}</span>
                      <span style={{ flex:1, fontSize:13.5, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{commName(c.id)}</span>
                      <span style={{ fontSize:12, fontWeight:700, color:'var(--ink-3)' }}>{c.n} {c.n===1?'opp.':'opp.'}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Riepilogo numerico */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Riepilogo</h3>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <StatCell n={oppsAttive.length} label="Opp. attive" />
                <StatCell n={oppsVinte.length} label="Opp. vinte" />
                <StatCell n={noleggioOra.length} label="A noleggio" />
                <StatCell n={comprate.length} label="Comprate" />
              </div>
            </div>

            {/* Statistiche noleggio */}
            <div style={cardBox}>
              <h3 style={{ ...cTitle, marginBottom:12 }}>Statistiche noleggio</h3>
              <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10 }}>
                  <div style={{ fontSize:12.5, color:'var(--ink-2)', fontWeight:600 }}>Proroghe medie per noleggio</div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:18, fontWeight:800 }}>{mediaProroghe.toFixed(1)}</div>
                </div>
                <div style={{ fontSize:11, color:'var(--ink-4)' }}>
                  {tuttiNoleggi.length>0
                    ? `Su ${tuttiNoleggi.length} noleggi · ${noleggiConProroghe.length} con almeno una proroga · ${totProroghe} proroghe totali`
                    : 'Nessun noleggio registrato'}
                </div>

                {interruzioni.length > 0 && (
                  <div style={{ borderTop:'1px solid var(--line-2)', paddingTop:12, marginTop:2 }}>
                    <div style={{ fontSize:12.5, fontWeight:700, color:'var(--ink-2)', marginBottom:8 }}>
                      Interruzioni anticipate ({interruzioni.length})
                    </div>
                    <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
                      {interruzioni.map(b => (
                        <div key={b.id} style={{ display:'flex', alignItems:'flex-start', gap:8, fontSize:12 }}>
                          <Icon name="alertCircle" size={14} style={{ color: isMancatoPagamento(b)?'var(--red)':'var(--ink-4)', flexShrink:0, marginTop:1 }} />
                          <div style={{ minWidth:0 }}>
                            <span style={{ fontWeight:700, color: isMancatoPagamento(b)?'var(--red)':'var(--ink-2)' }}>{reasonName(b.interruzione_reason_id)}</span>
                            <span style={{ color:'var(--ink-4)' }}> · {b.prodLabel}</span>
                            {b.data_interruzione && <span style={{ color:'var(--ink-4)' }}> · {new Date(b.data_interruzione).toLocaleDateString('it-IT')}</span>}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* helper stile */
const cardBox = { background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'18px 20px', boxShadow:'var(--sh-1)' };
const cTitle = { margin:0, fontFamily:'var(--font-display)', fontSize:16, fontWeight:800 };
const oppRow = { display:'flex', alignItems:'center', gap:10, padding:'10px 12px', background:'var(--surface-2)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', textAlign:'left', width:'100%' };

function InfoCell({ label, value, icon }) {
  return (
    <div>
      <div style={{ fontSize:11, fontWeight:700, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'.03em', marginBottom:3 }}>{label}</div>
      <div style={{ fontSize:14, fontWeight:700, display:'flex', alignItems:'center', gap:5 }}>
        {icon && <Icon name={icon} size={13} style={{ color:'var(--ink-3)' }} />}{value}
      </div>
    </div>
  );
}
function StatCell({ n, label }) {
  return (
    <div style={{ background:'var(--surface-2)', borderRadius:'var(--r-md)', padding:'12px', textAlign:'center' }}>
      <div style={{ fontFamily:'var(--font-display)', fontSize:22, fontWeight:800 }}>{n}</div>
      <div style={{ fontSize:11, color:'var(--ink-3)', fontWeight:600, marginTop:2 }}>{label}</div>
    </div>
  );
}
function Empty({ children }) {
  return <div style={{ fontSize:13, color:'var(--ink-4)', padding:'6px 0' }}>{children}</div>;
}
function MachineGroup({ title, items, empty, onOpenBooking, last }) {
  return (
    <div style={{ marginBottom: last?0:16 }}>
      <div style={{ fontSize:11.5, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.03em', marginBottom:8 }}>{title} ({items.length})</div>
      {items.length===0 ? <div style={{ fontSize:12.5, color:'var(--ink-4)' }}>{empty}</div> : (
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          {items.map(b => (
            <button key={b.id} onClick={()=>onOpenBooking && onOpenBooking(b)} style={{ display:'flex', alignItems:'center', gap:9, padding:'9px 11px', background:'var(--surface-2)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', textAlign:'left', width:'100%' }}>
              <Icon name="forklift" size={15} style={{ color:'var(--ink-3)', flexShrink:0 }} />
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.prodLabel}</div>
                <div style={{ fontSize:11, color:'var(--ink-3)' }}>{b.tipo}{b.numeroPreventivo?` · prev. ${b.numeroPreventivo}`:''}</div>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SchedaCliente });