/* ============================================================
   DETTAGLIO PRENOTAZIONE — dati + scheda prodotto + prezzo finale
   ============================================================ */

// Compute the booking economics. Returns a structured object.
function computeBooking({ booking, product, zone, listino, clienteCat, coeff }) {
  const zona = (zone||[]).find(z=>z.id===booking.zonaId);
  const trasportoSr = zona && zona.tariffa===SR;
  const trasporto = (zona && !trasportoSr) ? zona.tariffa : 0;
  const tipo = booking.tipo;
  const isVendita = tipo==='Vendita';
  // battery
  let battPrice = 0, battSr = false, bt = null;
  if (product) {
    bt = (window.battFromProduct ? window.battFromProduct(product.attr) : parseBatt(product.attr && product.attr['Batteria']));
    if (bt) {
      const pr = (listino||LISTINO_BATTERIE_INIT)[battKey(bt.volt, bt.amp)];
      if (pr===SR || pr==null) battSr = true; else battPrice = pr;
    }
  }
  const withBatt = isVendita && booking.batteria && !battSr;

  // usura surcharge (rental only)
  const cat = (clienteCat||[]).find(c=>c.id===booking.catClienteId);
  const magg = cat ? maggiorazioneFor(cat.usura, coeff) : { aumento:0, fascia:null };

  if (isVendita) {
    const listinoPrice = product ? (product.prezzoConsigliato||0) : 0;
    const battCost = withBatt ? battPrice : 0;
    const totale = listinoPrice + battCost; // escluso trasporto
    return { kind:'vendita', zona, trasporto, trasportoSr, listinoPrice, battCost, withBatt, battSr, bt,
      totale, totaleConTrasporto: totale + trasporto, cat, magg };
  }
  // rental
  const baseGiorno = product ? (product.prezzoGiorno||0) : 0;
  const baseMese = product ? (product.prezzoMese||0) : 0;
  const f = 1 + (magg.aumento||0)/100;
  return { kind:'noleggio', tipo, zona, trasporto, trasportoSr, cat, magg,
    baseGiorno, baseMese, giornoFin: Math.round(baseGiorno*f), meseFin: Math.round(baseMese*f) };
}

function DetailRow({ label, value, icon }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, padding:'12px 0', borderBottom:'1px solid var(--line-2)' }}>
      <span style={{ fontSize:13, color:'var(--ink-3)', fontWeight:600, display:'flex', alignItems:'center', gap:8 }}>{icon && <Icon name={icon} size={15} />} {label}</span>
      <span style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)', textAlign:'right' }}>{value}</span>
    </div>
  );
}

function BookingDetail({ booking, role, products, zone, listino, clienteCat, coeff, allBookings, onBack, backLabel, onEdit, onContractData, openProduct, onAction, canFree,
  rentalExtensions, interruptionReasons, onExtendRental, onInterruptRental, onChangeStartDate }) {
  const vp = useViewport();
  const product = (products||PRODOTTI).find(p=>p.id===booking.prodId);
  const econ = computeBooking({ booking, product, zone, listino, clienteCat, coeff });
  const cat = econ.cat;
  const archived = !!booking.esito;
  const dl = Math.ceil((booking.fine - new Date())/(1000*60*60*24));
  const st = archived
    ? { label: booking.esito==='confermata'?'Prenotazione archiviata chiusa':'Prenotazione archiviata liberata', color: booking.esito==='confermata'?'var(--st-disponibile)':'var(--ink-3)', bg: booking.esito==='confermata'?'#e8f6f0':'var(--line-2)' }
    : { attiva:{label:'Prenotazione attiva'}, in_scadenza:{label:'Prenotazione in scadenza'}, scaduta:{label:'Prenotazione scaduta'} }[booking.stato]
      ? { ...BK_STATI[booking.stato], label: { attiva:'Prenotazione attiva', in_scadenza:'Prenotazione in scadenza', scaduta:'Prenotazione scaduta' }[booking.stato] }
      : BK_STATI[booking.stato];
  const proroghe = (rentalExtensions || []).length;

  // ============================================================
  // Flag noleggio: attivo / interrotto / non iniziato / etc
  // ============================================================
  const isNoleggio = booking.tipo === 'STR' || booking.tipo === 'LTR';
  const isRentalAttivo = archived && booking.esito === 'confermata' && isNoleggio && !booking.rientrato && !booking.interrotto;
  const today = new Date(); today.setHours(0,0,0,0);
  const consegnaDate = booking.dataConsegna ? new Date(booking.dataConsegna) : null;
  const canChangeStart = isRentalAttivo && consegnaDate && consegnaDate > today;
  const canInterrupt = isRentalAttivo && (role === 'admin' || role === 'backoffice');
  const canExtend = isRentalAttivo;

  // Ultima data fine: o ultima proroga, o data_rientro originale
  const sortedExts = (rentalExtensions || []).slice().sort((a,b)=>(a.numero||0)-(b.numero||0));
  const lastEndDate = sortedExts.length > 0
    ? new Date(sortedExts[sortedExts.length-1].data_fine_proroga)
    : (booking.dataRientro || booking.fine);

  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: vp.isMobile?8:14, position:'sticky', top:0, zIndex:20, flexWrap: vp.isMobile?'wrap':'nowrap' }}>
        <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 ? '' : (backLabel || 'Prenotazioni')}
        </button>
        <div style={{ flex:1, minWidth:0, order: vp.isMobile?3:0, width: vp.isMobile?'100%':'auto' }}>
          <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?16:19, fontWeight:800, letterSpacing:'-.01em', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{booking.cliente}</h1>
          <div style={{ fontSize:12, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>Prenotazione <b>{booking.id}</b> · {booking.tipo}</div>
        </div>
        <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'5px 10px', borderRadius:99, background:st.bg, color:st.color, fontWeight:700, fontSize:11.5, flexShrink:0 }}>
          <span style={{ width:5, height:5, borderRadius:99, background:st.color }} />{vp.isMobile ? st.label.replace('Prenotazione ','') : st.label}
        </span>
        {!archived && !vp.isMobile && <Btn icon="edit" onClick={()=>onEdit(booking)}>Modifica</Btn>}
        {!archived && vp.isMobile && (
          <button onClick={()=>onEdit(booking)} title="Modifica"
            style={{ width:36, height:36, borderRadius:9, border:'1.5px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink-2)', flexShrink:0 }}>
            <Icon name="edit" size={16} />
          </button>
        )}
      </div>

      <div style={{ padding: vp.isMobile?'16px 12px 30px':'24px 30px 50px', maxWidth:1180, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns: vp.isMobile?'1fr':'1fr 1fr', gap: vp.isMobile?16:24, alignItems:'start' }}>
          {/* LEFT — booking data */}
          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
            <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'20px 22px', boxShadow:'var(--sh-1)' }}>
              <h3 style={{ margin:'0 0 6px', fontFamily:'var(--font-display)', fontSize:16, fontWeight:800 }}>Dati prenotazione</h3>
              <div style={{ display:'flex', alignItems:'center', gap:8, margin:'2px 0 12px', padding:'10px 13px', borderRadius:'var(--r-md)', background:st.bg }}>
                <span style={{ width:8, height:8, borderRadius:99, background:st.color }} />
                <span style={{ fontSize:13.5, fontWeight:800, color:st.color }}>{st.label}</span>
              </div>
              <div style={{ padding:'2px 0' }}>
                <DetailRow label="Cliente" value={booking.cliente} icon="users" />
                <DetailRow label="Commerciale" value={booking.commerciale} icon="users" />
                <DetailRow label="Tipo esigenza" value={booking.tipo} icon="tag" />
                <DetailRow label="Periodo" value={`${fmtDate(booking.inizio)} → ${fmtDate(booking.fine)}`} icon="calendar" />
                {archived
                  ? <DetailRow label="Chiusa il" value={booking.chiusoIl?fmtDate(booking.chiusoIl):'—'} icon="clock" />
                  : <DetailRow label="Scadenza" value={dl<0?`scaduta da ${-dl} gg`:dl===0?'scade oggi':`tra ${dl} gg`} icon="clock" />}
                {/* Proroghe: contate da rental_extensions per i noleggi, da .proroghe legacy per le prenotazioni */}
                {isNoleggio && archived
                  ? <DetailRow label="Proroghe noleggio" value={proroghe>0?`${proroghe} ${proroghe===1?'proroga':'proroghe'}`:'Mai prorogato'} icon="refresh" />
                  : <DetailRow label="Proroghe" value={(booking.proroghe||0)>0?`${booking.proroghe} ${booking.proroghe===1?'volta':'volte'}`:'Mai prorogata'} icon="refresh" />
                }
                <DetailRow label="Zona consegna" value={econ.zona?`${econ.zona.nome} · ${econ.trasportoSr?'Su richiesta':fmtEur(econ.trasporto)}`:'Ritiro in sede'} icon="pin" />
                {!archived && <DetailRow label="Probabilità chiusura" value={`${booking.prob}%`} icon="chart" />}

                {/* Dati contratto base */}
                {archived && booking.esito==='confermata' && <>
                  <DetailRow label="N. preventivo" value={booking.numeroPreventivo || '— da inserire'} icon="pdf" />
                  <DetailRow label="Prezzo pattuito" value={booking.prezzoPattuito!=null?fmtEur(booking.prezzoPattuito):'— da inserire'} icon="tag" />
                  {/* Per i noleggi: tipo prezzo + calcoli automatici */}
                  {isNoleggio && booking.prezzo_tipo && (
                    <DetailRow label="Tipo prezzo" value={
                      booking.prezzo_tipo === 'totale' ? 'Totale' :
                      booking.prezzo_tipo === 'giornaliero' ? 'Al giorno' :
                      booking.prezzo_tipo === 'mensile' ? 'Al mese' : booking.prezzo_tipo
                    } icon="chart" />
                  )}
                  {isNoleggio && booking.prezzo_giornaliero_calc != null && (
                    <DetailRow label="Equivale a · giorno" value={fmtEur(booking.prezzo_giornaliero_calc)} icon="clock" />
                  )}
                  {isNoleggio && booking.prezzo_mensile_calc != null && (
                    <DetailRow label="Equivale a · mese" value={fmtEur(booking.prezzo_mensile_calc)} icon="calendar" />
                  )}
                  {/* Date noleggio (consegna/rientro) */}
                  {isNoleggio && booking.dataConsegna && (
                    <DetailRow label="Data consegna" value={fmtDate(booking.dataConsegna)} icon="calendar" />
                  )}
                  {isNoleggio && booking.dataRientro && (
                    <DetailRow label="Rientro previsto" value={fmtDate(booking.dataRientro)} icon="calendar" />
                  )}
                  <DetailRow label="Tempo noleggio" value={booking.tempoNoleggio || '—'} icon="clock" />
                </>}
              </div>
              {booking.note && (
                <div style={{ marginTop:14, padding:'12px 14px', background:'var(--surface-2)', borderRadius:'var(--r-md)' }}>
                  <div style={{ fontSize:11.5, fontWeight:800, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing:'.04em', marginBottom:5 }}>Note</div>
                  <div style={{ fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5 }}>{booking.note}</div>
                </div>
              )}
            </div>

            {/* CATEGORIA CLIENTE card */}
            <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'20px 22px', boxShadow:'var(--sh-1)', position:'relative', overflow:'hidden' }}>
              <div style={{ position:'absolute', top:0, left:0, width:4, height:'100%', background:'var(--red)' }} />
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
                <span style={{ width:36, height:36, borderRadius:9, background:'var(--red-tint)', color:'var(--red)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name="shield" size={19} />
                </span>
                <div>
                  <div style={{ fontSize:14.5, fontWeight:800 }}>Categoria cliente</div>
                  <div style={{ fontSize:12, color:'var(--ink-3)' }}>Determina l'usura del mezzo a noleggio</div>
                </div>
              </div>
              {cat ? (
                <>
                  <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:10 }}>
                    <span style={{ fontSize:16, fontWeight:800 }}>{cat.nome}</span>
                    <span style={{ fontSize:12.5, fontWeight:700, color:'var(--ink-3)' }}>usura {cat.usura}%</span>
                  </div>
                  <div style={{ height:8, borderRadius:99, background:'var(--line-2)', overflow:'hidden', marginBottom:12 }}>
                    <div style={{ width:cat.usura+'%', height:'100%', background: cat.usura>50?'var(--red)':cat.usura>30?'var(--st-prenotato)':'var(--st-disponibile)' }} />
                  </div>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 13px', background:'var(--surface-2)', borderRadius:'var(--r-md)' }}>
                    <span style={{ fontSize:13, fontWeight:600, color:'var(--ink-2)' }}>Maggiorazione noleggio applicata</span>
                    <span style={{ fontWeight:800, color: econ.magg.aumento>0?'var(--red)':'var(--st-disponibile)' }}>{pct(econ.magg.aumento)}</span>
                  </div>
                </>
              ) : (
                <div style={{ fontSize:13, color:'var(--ink-4)', fontWeight:600 }}>Nessuna categoria cliente assegnata.</div>
              )}
            </div>
          </div>

          {/* RIGHT — product card + final price */}
          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
            {product ? (
              <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', boxShadow:'var(--sh-1)', overflow:'hidden' }}>
                <ProductImage productId={product.id} placeholder="Nessuna foto"
                  style={{ width:'100%', height:'170px', display:'block' }} />
                <div style={{ padding:'18px 22px' }}>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6 }}>
                    <StatoBadge stato={product.stato} size="sm" />
                    <span style={{ fontFamily:'var(--font-display)', fontSize:13, fontWeight:800, color:'var(--ink-3)' }}>{product.matricola || '—'}</span>
                  </div>
                  <h3 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)', fontSize:20, fontWeight:800 }}>{prodLabel(product)}</h3>
                  <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12.5, color:'var(--ink-3)', marginBottom:12 }}>
                    <Icon name="pin" size={13} /> {product.posizione}
                  </div>
                  <button onClick={()=>openProduct(product)} style={{ display:'flex', alignItems:'center', gap:6, fontSize:13, fontWeight:700, color:'var(--red)' }}>
                    Apri scheda completa <Icon name="arrowRight" size={15} />
                  </button>
                </div>
              </div>
            ) : (
              <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'30px', textAlign:'center', color:'var(--ink-4)', fontWeight:600 }}>Mezzo non disponibile</div>
            )}

            {/* FINAL PRICE */}
            {econ.kind==='vendita' ? (
              <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'20px 22px', boxShadow:'var(--sh-1)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:14 }}>
                  <Icon name="tag" size={17} style={{ color:'var(--red)' }} />
                  <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontSize:16, fontWeight:800 }}>Riepilogo vendita</h3>
                </div>
                <DetailRow label="Prezzo di listino (IVA escl.)" value={fmtEur(econ.listinoPrice)} />
                {econ.withBatt && <DetailRow label="Batteria nuova" value={fmtEur(econ.battCost)} icon="battery" />}
                {booking.batteria && econ.battSr && <DetailRow label="Batteria nuova" value="Su richiesta" icon="battery" />}
                <DetailRow label="Trasporto" value={econ.zona?(econ.trasportoSr?'Su richiesta':fmtEur(econ.trasporto)):'Ritiro in sede'} icon="pin" />
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginTop:14, padding:'14px 16px', background:'var(--red-tint)', borderRadius:'var(--r-md)' }}>
                  <span style={{ fontWeight:800, color:'var(--red)' }}>Totale stimato</span>
                  <span style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:800, color:'var(--red)' }}>{fmtEur(econ.totaleConTrasporto)}</span>
                </div>
                <div style={{ fontSize:11.5, color:'var(--ink-4)', marginTop:8, textAlign:'right' }}>Mezzo {fmtEur(econ.totale)} + trasporto {econ.zona?(econ.trasportoSr?'su richiesta':fmtEur(econ.trasporto)):'—'}</div>
              </div>
            ) : (
              <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'20px 22px', boxShadow:'var(--sh-1)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:14 }}>
                  <Icon name="clock" size={17} style={{ color:'var(--red)' }} />
                  <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontSize:16, fontWeight:800 }}>Tariffe noleggio ({econ.tipo})</h3>
                </div>
                <DetailRow label="Tariffa base · giorno" value={fmtEur(econ.baseGiorno)} />
                <DetailRow label="Tariffa base · mese" value={fmtEur(econ.baseMese)} />
                <DetailRow label={`Maggiorazione usura${cat?` (${cat.nome})`:''}`} value={pct(econ.magg.aumento)} />
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginTop:14 }}>
                  <div style={{ padding:'12px 14px', background:'var(--red-tint)', borderRadius:'var(--r-md)' }}>
                    <div style={{ fontSize:11.5, fontWeight:700, color:'var(--red)', textTransform:'uppercase', letterSpacing:'.03em' }}>Giorno finale</div>
                    <div style={{ fontFamily:'var(--font-display)', fontSize:21, fontWeight:800, color:'var(--red)', marginTop:2 }}>{fmtEur(econ.giornoFin)}</div>
                  </div>
                  <div style={{ padding:'12px 14px', background:'var(--red-tint)', borderRadius:'var(--r-md)' }}>
                    <div style={{ fontSize:11.5, fontWeight:700, color:'var(--red)', textTransform:'uppercase', letterSpacing:'.03em' }}>Mese finale</div>
                    <div style={{ fontFamily:'var(--font-display)', fontSize:21, fontWeight:800, color:'var(--red)', marginTop:2 }}>{fmtEur(econ.meseFin)}</div>
                  </div>
                </div>
                {econ.zona && <div style={{ fontSize:11.5, color:'var(--ink-4)', marginTop:10, textAlign:'right' }}>+ trasporto {econ.trasportoSr?'su richiesta':fmtEur(econ.trasporto)} ({econ.zona.nome})</div>}
              </div>
            )}

            {/* ============================================================
                AZIONI
                - Prenotazione attiva: proroga/riprenota/conferma/libera (esistenti)
                - Noleggio archiviato attivo: proroga, modifica data inizio (se non iniziato), interrompi (admin/back)
                - Tutti gli archiviati confermati: modifica/aggiungi dati contratto
                ============================================================ */}
            {archived ? (
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {/* Azioni specifiche noleggio attivo */}
                {canExtend && (
                  <Btn full icon="refresh" onClick={()=>onExtendRental(booking)}>Proroga noleggio</Btn>
                )}
                {canChangeStart && (
                  <Btn variant="ghost" full icon="calendar" onClick={()=>onChangeStartDate(booking)}>Modifica data inizio</Btn>
                )}
                {canInterrupt && (
                  <Btn variant="ghost" full icon="alertCircle" onClick={()=>onInterruptRental(booking)}
                    style={{ color:'var(--red)', borderColor:'var(--red-tint-2)' }}>Interrompi noleggio</Btn>
                )}
                {/* Modifica dati contratto: per tutti gli archiviati confermati */}
                {booking.esito==='confermata' && (
                  <Btn variant="ghost" full icon="edit" onClick={()=>onContractData(booking)}>
                    {(booking.numeroPreventivo||booking.prezzoPattuito!=null||booking.tempoNoleggio)?'Modifica dati contratto':'Aggiungi dati contratto'}
                  </Btn>
                )}
              </div>
            ) : (
              <div style={{ display:'flex', gap:10 }}>
                {booking.stato==='in_scadenza' && <Btn variant="subtle" full onClick={()=>onAction(booking,'proroga')}>Proroga</Btn>}
                {booking.stato==='scaduta' && !( (allBookings||[]).some(x=>x.id!==booking.id && x.prodId===booking.prodId && x.stato==='attiva' && x.commerciale!==booking.commerciale) ) && <Btn variant="subtle" full onClick={()=>onAction(booking,'riprenota')}>Riprenota</Btn>}
                <Btn full icon="check" onClick={()=>onAction(booking,'conferma')}>Conferma</Btn>
                {canFree(booking) && <Btn variant="ghost" full icon="unlock" onClick={()=>onAction(booking,'libera')}>Libera mezzo</Btn>}
              </div>
            )}
          </div>
        </div>

        {/* ============================================================
            CRONOLOGIA NOLEGGIO — proroghe + eventuale interruzione
            ============================================================ */}
        {isNoleggio && archived && booking.esito === 'confermata' && (proroghe > 0 || booking.interrotto) && (
          <RentalTimeline booking={booking} extensions={rentalExtensions} reasons={interruptionReasons} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { BookingDetail, computeBooking, DetailRow });Object.assign(window, { BookingDetail, computeBooking, DetailRow });