/* ============================================================
   STORICO MACCHINA (modale) + ARCHIVIO PRENOTAZIONI (vista)
   ============================================================ */

const ESITO = {
  liberata:   { label:'Liberata',   color:'var(--ink-3)',          bg:'var(--line-2)' },
  confermata: { label:'Confermata', color:'var(--st-disponibile)', bg:'#e8f6f0' },
};

function fmtRange(a, b){ return `${fmtDate(a)} → ${fmtDate(b)}`; }
function durata(a, b){ const d = Math.round((b-a)/(1000*60*60*24)); return d<=0?'—':(d<31?`${d} gg`:`${Math.round(d/30)} mesi`); }

/* ---- Storico macchina: modale ----------------------------- */
function StoricoModal({ product, archive, bookings, clienteCat, onClose }) {
  const vp = useViewport();
  const all = [
    ...(archive||[]).filter(b=>b.prodId===product.id).map(b=>({ ...b, _archived:true })),
    ...(bookings||[]).filter(b=>b.prodId===product.id).map(b=>({ ...b, _archived:false })),
  ].sort((a,b)=> (b.chiusoIl||b.fine) - (a.chiusoIl||a.fine));

  const nNol = all.filter(b=>b.tipo==='STR'||b.tipo==='LTR').length;
  const commSet = [...new Set(all.map(b=>b.commerciale))];
  const catName = (id)=> (clienteCat||[]).find(c=>c.id===id)?.nome;

  return (
    <ModalShell onClose={onClose} width={620} title="Storico macchina" subtitle={`${product.marca} ${product.modello} · ${window.prodMatricola?window.prodMatricola(product):(product.matricola||'—')}`}>
      {all.length===0 ? (
        <div style={{ padding:'40px 0', textAlign:'center', color:'var(--ink-4)' }}>
          <Icon name="log" size={30} style={{ margin:'0 auto 10px', opacity:.5 }} />
          <div style={{ fontSize:14, fontWeight:600 }}>Nessuno storico per questa macchina</div>
        </div>
      ) : (
        <>
          {/* summary — sempre 3 col perché sono numeri corti */}
          <div className="summary-3col" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: vp.isMobile?8:12, marginBottom: vp.isMobile?14:18 }}>
            {[['Movimenti', all.length],['Noleggi', nNol],['Commerciali', commSet.length]].map(([l,v])=>(
              <div key={l} style={{ background:'var(--surface-2)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', padding: vp.isMobile?'10px 10px':'12px 14px' }}>
                <div style={{ fontFamily:'var(--font-display)', fontSize: vp.isMobile?20:24, fontWeight:800 }}>{v}</div>
                <div style={{ fontSize: vp.isMobile?10.5:11.5, color:'var(--ink-3)', fontWeight:600 }}>{l}</div>
              </div>
            ))}
          </div>
          {/* timeline */}
          <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
            {all.map((b,i)=>(
              <div key={b.id} style={{ display:'flex', gap:13, paddingBottom:i<all.length-1?16:0 }}>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
                  <span style={{ width:11, height:11, borderRadius:99, background: b._archived?'var(--ink-4)':'var(--red)', flexShrink:0, marginTop:3 }} />
                  {i<all.length-1 && <span style={{ width:2, flex:1, background:'var(--line)', marginTop:4 }} />}
                </div>
                <div style={{ flex:1, minWidth:0, background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-md)', padding: vp.isMobile?'11px 13px':'12px 15px', marginBottom:2 }}>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10, marginBottom:5 }}>
                    <span style={{ fontSize: vp.isMobile?13:14, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.cliente}</span>
                    {b._archived
                      ? <span style={{ fontSize:11, fontWeight:700, padding:'3px 9px', borderRadius:99, background:ESITO[b.esito]?.bg, color:ESITO[b.esito]?.color, flexShrink:0 }}>{ESITO[b.esito]?.label||'Chiusa'}</span>
                      : <span style={{ fontSize:11, fontWeight:700, padding:'3px 9px', borderRadius:99, background:BK_STATI[b.stato]?.bg, color:BK_STATI[b.stato]?.color, flexShrink:0 }}>{BK_STATI[b.stato]?.label||'In corso'}</span>}
                  </div>
                  <div style={{ display:'flex', flexWrap:'wrap', gap:'4px 14px', fontSize:12, color:'var(--ink-3)' }}>
                    <span style={{ fontWeight:700, color:'var(--ink-2)' }}>{b.tipo}</span>
                    <span>{fmtRange(b.inizio, b.fine)}</span>
                    <span>· {durata(b.inizio, b.fine)}</span>
                    <span>· {b.commerciale}</span>
                    {catName(b.catClienteId) && <span>· {catName(b.catClienteId)}</span>}
                  </div>
                  {b.note && <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:6, fontStyle:'italic' }}>{b.note}</div>}
                </div>
              </div>
            ))}
          </div>
        </>
      )}
    </ModalShell>
  );
}

/* ---- Archivio prenotazioni: vista ------------------------- */
function Archivio({ role, currentUser, archive, onView }) {
  const vp = useViewport();
  const [q, setQ] = useState('');
  const [esito, setEsito] = useState('all');
  const [commFilter, setCommFilter] = useState('all');
  const [da, setDa] = useState('');
  const [a, setA] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const myName = currentUser ? currentUser.nome : null;
  const seeAll = role==='admin' || role==='backoffice';

  const base = seeAll ? (archive||[]) : (archive||[]).filter(b=>b.commerciale===myName);
  const commerciali = [...new Set(base.map(b=>b.commerciale))].sort();

  let list = base.slice();
  if (esito!=='all') list = list.filter(b=>b.esito===esito);
  if (seeAll && commFilter!=='all') list = list.filter(b=>b.commerciale===commFilter);
  if (da){ const d=new Date(da); list = list.filter(b=>(b.chiusoIl||b.fine) >= d); }
  if (a){ const d=new Date(a); d.setHours(23,59,59); list = list.filter(b=>(b.chiusoIl||b.fine) <= d); }
  if (q.trim()){ const s=q.toLowerCase(); list = list.filter(b=>(b.cliente+' '+b.prodLabel+' '+b.id+' '+b.commerciale).toLowerCase().includes(s)); }
  list.sort((x,y)=> (y.chiusoIl||y.fine) - (x.chiusoIl||x.fine));

  const counts = {
    all: base.length,
    confermata: base.filter(b=>b.esito==='confermata').length,
    liberata: base.filter(b=>b.esito==='liberata').length,
  };
  const activeFilters = (commFilter!=='all'?1:0) + (da?1:0) + (a?1:0);
  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 G = 'minmax(0,1.5fr) minmax(0,1.15fr) 92px minmax(0,1.1fr) 116px 70px';

  return (
    <div className="scroll" style={{ flex:1, minWidth:0, overflowY:'auto', overflowX:'hidden', display:'flex', flexDirection:'column' }}>
      <div style={{ padding: vp.isMobile?'12px 12px 10px':'18px 30px 14px', borderBottom:'1px solid var(--line)', background:'var(--surface)', position:'sticky', top:0, zIndex:10 }}>

        {/* Tabs esito (scroll-x su mobile) */}
        <div className="scroll-x" style={{ display:'flex', gap:8, marginBottom:11, overflowX:'auto', margin: vp.isMobile?'0 -12px 11px':'0 0 11px', padding: vp.isMobile?'0 12px':'0' }}>
          {[['all','Tutte'],['confermata','Confermate'],['liberata','Liberate']].map(([k,l])=>(
            <button key={k} onClick={()=>setEsito(k)} style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 14px', borderRadius:99, fontSize:13.5, fontWeight:700, whiteSpace:'nowrap', flexShrink:0,
              border:'1.5px solid '+(esito===k?'var(--ink)':'var(--line)'), background: esito===k?'var(--ink)':'var(--surface)', color: esito===k?'var(--surface)':'var(--ink-2)' }}>
              {l}
              <span style={{ fontSize:11.5, fontWeight:800, padding:'1px 7px', borderRadius:99, background: esito===k?'rgba(255,255,255,.22)':'var(--line-2)', color: esito===k?'#fff':'var(--ink-3)' }}>{counts[k]}</span>
            </button>
          ))}
          {!vp.isMobile && <span style={{ marginLeft:'auto', fontSize:13, color:'var(--ink-3)', fontWeight:600, alignSelf:'center' }}>{list.length} archiviate</span>}
        </div>

        {/* Search + filters toggle */}
        <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
          <div style={{ position:'relative', flex:'1 1 220px', maxWidth: vp.isMobile?'none':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={vp.isMobile?'Cerca…':'Cerca cliente, mezzo o codice…'}
              style={{ width:'100%', padding:'10px 14px 10px 40px', fontSize:14, 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>

          {vp.isMobile ? (
            <button onClick={()=>setShowFilters(s=>!s)}
              style={{ padding:'10px 14px', borderRadius:'var(--r-md)', border:'1.5px solid '+(activeFilters>0?'var(--red)':'var(--line)'),
                background: activeFilters>0?'var(--red-tint)':'var(--surface)', color: activeFilters>0?'var(--red)':'var(--ink-2)',
                display:'flex', alignItems:'center', gap:6, fontSize:13, fontWeight:700 }}>
              <Icon name="filter" size={15} /> Filtri {activeFilters>0 && <span style={{ background:'var(--red)', color:'#fff', borderRadius:99, padding:'1px 6px', fontSize:11 }}>{activeFilters}</span>}
            </button>
          ) : (
            <>
              {seeAll && (
                <div style={{ position:'relative' }}>
                  <select value={commFilter} onChange={e=>setCommFilter(e.target.value)} style={selStyle}>
                    <option value="all">Tutti i commerciali</option>
                    {commerciali.map(c=><option key={c} value={c}>{c}</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={{ display:'flex', alignItems:'center', gap:7, padding:'5px 12px', border:'1.5px solid var(--line)', borderRadius:'var(--r-md)', background:'var(--surface)' }}>
                <Icon name="calendar" size={15} style={{ color:'var(--ink-3)' }} />
                <span style={{ fontSize:12, fontWeight:700, color:'var(--ink-4)' }}>Dal</span>
                <input type="date" value={da} onChange={e=>setDa(e.target.value)} style={{ border:'none', outline:'none', background:'transparent', fontSize:13, fontWeight:600, color:'var(--ink-2)' }} />
                <span style={{ fontSize:12, fontWeight:700, color:'var(--ink-4)' }}>al</span>
                <input type="date" value={a} onChange={e=>setA(e.target.value)} style={{ border:'none', outline:'none', background:'transparent', fontSize:13, fontWeight:600, color:'var(--ink-2)' }} />
                {(da||a) && <button onClick={()=>{ setDa(''); setA(''); }} title="Azzera periodo" style={{ display:'flex', color:'var(--red)' }}><Icon name="x" size={14} /></button>}
              </div>
            </>
          )}
        </div>

        {/* Filtri collapsibili mobile */}
        {vp.isMobile && showFilters && (
          <div style={{ marginTop:12, padding:'12px', background:'var(--surface-2)', borderRadius:'var(--r-md)', border:'1px solid var(--line)', display:'flex', flexDirection:'column', gap:10 }}>
            {seeAll && (
              <div style={{ position:'relative' }}>
                <select value={commFilter} onChange={e=>setCommFilter(e.target.value)} style={{ ...selStyle, width:'100%' }}>
                  <option value="all">Tutti i commerciali</option>
                  {commerciali.map(c=><option key={c} value={c}>{c}</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={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              <div>
                <div style={{ fontSize:11, fontWeight:700, color:'var(--ink-3)', marginBottom:4 }}>Dal</div>
                <input type="date" value={da} onChange={e=>setDa(e.target.value)}
                  style={{ width:'100%', padding:'9px 10px', fontSize:14, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface)' }} />
              </div>
              <div>
                <div style={{ fontSize:11, fontWeight:700, color:'var(--ink-3)', marginBottom:4 }}>Al</div>
                <input type="date" value={a} onChange={e=>setA(e.target.value)}
                  style={{ width:'100%', padding:'9px 10px', fontSize:14, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface)' }} />
              </div>
            </div>
            {activeFilters>0 && (
              <button onClick={()=>{ setCommFilter('all'); setDa(''); setA(''); }}
                style={{ padding:'8px 12px', fontSize:12.5, fontWeight:700, color:'var(--red)', background:'transparent', border:'1.5px solid var(--red-tint-2)', borderRadius:'var(--r-md)' }}>
                Azzera filtri
              </button>
            )}
          </div>
        )}
        {vp.isMobile && <div style={{ marginTop:10, fontSize:12, color:'var(--ink-3)', fontWeight:600 }}>{list.length} archiviate</div>}
      </div>

      {vp.isMobile ? (
        /* MOBILE: card list */
        <div style={{ padding:'12px 12px 30px', display:'flex', flexDirection:'column', gap:10 }}>
          {list.length === 0 ? (
            <div style={{ padding:'60px 20px', textAlign:'center', color:'var(--ink-3)', fontSize:14, fontWeight:600 }}>
              Nessuna prenotazione in archivio
            </div>
          ) : list.map(b => (
            <button key={b.id} onClick={()=>onView(b)}
              style={{ textAlign:'left', background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)',
                padding:'13px 14px', display:'flex', flexDirection:'column', gap:8, boxShadow:'var(--sh-1)' }}>
              <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:10 }}>
                <div style={{ minWidth:0, flex:1 }}>
                  <div style={{ fontSize:14, fontWeight:800, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.cliente}</div>
                  <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                    {b.prodLabel}
                  </div>
                </div>
                <span style={{ fontSize:11, fontWeight:700, padding:'4px 9px', borderRadius:99,
                  background: ESITO[b.esito]?.bg, color: ESITO[b.esito]?.color, flexShrink:0, whiteSpace:'nowrap' }}>
                  {ESITO[b.esito]?.label}
                </span>
              </div>
              <div style={{ display:'flex', gap:8, flexWrap:'wrap', fontSize:11.5, fontWeight:700, color:'var(--ink-3)' }}>
                <span style={{ background:'var(--line-2)', color:'var(--ink-2)', padding:'3px 8px', borderRadius:6 }}>{b.tipo}</span>
                <span style={{ padding:'3px 0' }}>{fmtRange(b.inizio, b.fine)}</span>
                <span style={{ padding:'3px 0' }}>· {durata(b.inizio, b.fine)}</span>
              </div>
              <div style={{ fontSize:11.5, color:'var(--ink-4)', fontWeight:600 }}>
                <Icon name="user" size={11} style={{ verticalAlign:'-1px', marginRight:3 }} /> {b.commerciale}
              </div>
            </button>
          ))}
        </div>
      ) : (
        <div style={{ padding:'20px 30px 40px' }}>
          <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:880 }}>
              <div style={{ display:'grid', gridTemplateColumns:G, gap:14, padding:'13px 22px', borderBottom:'1px solid var(--line)', background:'var(--surface-2)', fontSize:11.5, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em' }}>
                <span>Cliente / Mezzo</span><span>Commerciale</span><span>Tipo</span><span>Periodo</span><span>Esito</span><span></span>
              </div>
              {list.length===0 ? (
                <div style={{ padding:'60px 0', textAlign:'center', color:'var(--ink-3)', fontSize:14.5, fontWeight:600 }}>Nessuna prenotazione in archivio</div>
              ) : list.map((b,i)=>(
                <div key={b.id} style={{ display:'grid', gridTemplateColumns:G, gap:14, padding:'14px 22px', borderBottom:i<list.length-1?'1px solid var(--line-2)':'none', alignItems:'center' }}>
                  <div style={{ minWidth:0 }}>
                    <div style={{ fontSize:14, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.cliente}</div>
                    <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.prodLabel} · <span style={{ fontFamily:'var(--font-display)', fontWeight:700 }}>{b.id}</span></div>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:9, minWidth:0 }}>
                    <Avatar name={b.commerciale} size={28} color="var(--role-commerciale)" />
                    <span style={{ fontSize:13, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.commerciale}</span>
                  </div>
                  <span style={{ fontSize:12.5, fontWeight:700, color:'var(--ink-2)', background:'var(--line-2)', padding:'4px 10px', borderRadius:7, justifySelf:'start', whiteSpace:'nowrap' }}>{b.tipo}</span>
                  <div>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{fmtRange(b.inizio, b.fine)}</div>
                    <div style={{ fontSize:11.5, color:'var(--ink-4)', fontWeight:700 }}>{durata(b.inizio, b.fine)}</div>
                  </div>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'5px 11px', borderRadius:99, justifySelf:'start', background:ESITO[b.esito]?.bg, color:ESITO[b.esito]?.color, fontWeight:700, fontSize:12.5 }}>
                    <span style={{ width:6, height:6, borderRadius:99, background:ESITO[b.esito]?.color }} />{ESITO[b.esito]?.label}
                  </span>
                  <div style={{ justifySelf:'end' }}>
                    <button onClick={()=>onView(b)} title="Dettagli" style={{ width:34, height:34, borderRadius:8, border:'1.5px solid var(--line)', color:'var(--ink-3)', display:'flex', alignItems:'center', justifyContent:'center' }}
                      onMouseEnter={e=>{ e.currentTarget.style.color='var(--red)'; e.currentTarget.style.borderColor='var(--red-tint-2)'; }}
                      onMouseLeave={e=>{ e.currentTarget.style.color='var(--ink-3)'; e.currentTarget.style.borderColor='var(--line)'; }}>
                      <Icon name="eye" size={16} />
                    </button>
                  </div>
                </div>
              ))}
            </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { StoricoModal, Archivio, ESITO });