/* ============================================================
   DA PREPARARE — macchine con ordine confermato, in preparazione.
   Sono le prenotazioni con da_preparare=true (opportunità in "ordine"
   o fasi successive prima di "consegnato"). Stanno tra Prenotazioni
   e Archivio: l'ordine è acquisito ma la macchina non è ancora consegnata.
   ============================================================ */

function DaPreparare({ role, currentUser, users, bookings, opportunities, stages, onView, onOpenOpportunity, onChangeStage, onCreateOppFor, toast }) {
  const vp = useViewport();
  const [q, setQ] = useState('');
  const [commFilter, setCommFilter] = useState('all');
  const [tipoFilter, setTipoFilter] = useState('all');
  const isManager = role==='admin' || role==='backoffice';

  // solo prenotazioni marcate "da preparare"
  let items = (bookings || []).filter(b => b.da_preparare || b.daPreparare);
  // permessi: il commerciale vede solo le proprie macchine
  if (!isManager) {
    items = items.filter(b => b.commerciale_id===currentUser?.id || b.commerciale===currentUser?.nome);
  }

  const commerciali = [...new Set(items.map(b=>b.commerciale).filter(Boolean))].sort();

  let list = items.slice();
  if (commFilter!=='all') list = list.filter(b=>b.commerciale===commFilter);
  if (tipoFilter!=='all') list = list.filter(b=>b.tipo===tipoFilter);
  if (q.trim()) { const s=q.trim().toLowerCase(); list = list.filter(b => `${b.cliente||''} ${b.prodLabel||''} ${b.matricola||''} ${b.numeroPreventivo||''} ${b.id||''}`.toLowerCase().includes(s)); }
  list.sort((a,b)=> (a.cliente||'').localeCompare(b.cliente||''));

  const oppForBooking = (bid) => (opportunities||[]).find(o => (o.bookingIds||[]).includes(bid));
  const stageName = (o) => { const st=(stages||[]).find(s=>s.id===o?.stage_id); return st?st.nome:'—'; };

  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' };

  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 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10, flexWrap:'wrap', marginBottom:10 }}>
          <div>
            <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?18:22, fontWeight:800, letterSpacing:'-.01em' }}>Da preparare</h1>
            <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:2 }}>
              {list.length} {list.length===1?'macchina':'macchine'} · ordine confermato, non ancora consegnata
            </div>
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
          <div style={{ position:'relative', flex: vp.isMobile?'1 1 100%':'1 1 240px', maxWidth: vp.isMobile?'none':360 }}>
            <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 cliente, mezzo o codice…"
              style={{ width:'100%', padding:'10px 32px 10px 40px', fontSize:13.5, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface-2)', outline:'none' }} />
            {q && <button onClick={()=>setQ('')} style={{ position:'absolute', right:9, top:'50%', transform:'translateY(-50%)', padding:4, color:'var(--ink-4)' }}><Icon name="x" size={14} /></button>}
          </div>
          {/* filtro tipo contratto */}
          <div style={{ position:'relative', flex: vp.isMobile?1:'none' }}>
            <select value={tipoFilter} onChange={e=>setTipoFilter(e.target.value)}
              style={{ ...selStyle, width: vp.isMobile?'100%':'auto',
                borderColor: tipoFilter!=='all'?'var(--red)':'var(--line)',
                background: tipoFilter!=='all'?'var(--red-tint)':'var(--surface)',
                color: tipoFilter!=='all'?'var(--red)':'var(--ink-2)' }}>
              <option value="all">Tutti i contratti</option>
              {['Vendita','STR','LTR','Prova','Tampone'].map(t=><option key={t} value={t}>{t==='STR'?'Nol. breve':t==='LTR'?'Nol. lungo':t}</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', flex: vp.isMobile?1:'none' }}>
            <select value={commFilter} onChange={e=>setCommFilter(e.target.value)} style={{...selStyle, width: vp.isMobile?'100%':'auto'}}>
              <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>
          {!vp.isMobile && <span style={{ marginLeft:'auto', fontSize:13, color:'var(--ink-3)', fontWeight:600, whiteSpace:'nowrap' }}>{list.length} macchine</span>}
        </div>
      </div>

      <div style={{ padding: vp.isMobile?'12px 12px 90px':'18px 30px 40px', display:'flex', flexDirection:'column', gap:10, maxWidth:1180, margin:'0 auto', width:'100%' }}>
        {list.length === 0 ? (
          <div style={{ padding:'60px 20px', textAlign:'center', color:'var(--ink-3)', fontSize:14, fontWeight:600 }}>
            Nessuna macchina da preparare.<br />
            <span style={{ fontSize:12.5, fontWeight:500, color:'var(--ink-4)' }}>Le macchine appaiono qui quando l'opportunità passa in "Confermato / Ordine".</span>
          </div>
        ) : list.map(b => {
          const opp = oppForBooking(b.id);
          const isNoleggio = b.tipo==='STR' || b.tipo==='LTR' || b.tipo==='Tampone';
          // fasi selezionabili: dalla fase corrente in avanti (no indietro, no perso/sospeso)
          const currentStage = opp ? (stages||[]).find(s=>s.id===opp.stage_id) : null;
          const currentIdx = currentStage?.sort_order ?? ((stages||[]).find(s=>s.codice==='ordine')?.sort_order ?? 0);
          const forwardStages = (stages||[]).filter(s => s.active && (s.sort_order??0) >= currentIdx && s.codice!=='perso' && s.codice!=='sospeso')
            .sort((a,b)=>(a.sort_order||0)-(b.sort_order||0));
          return (
            <div key={b.id} style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'14px 16px', boxShadow:'var(--sh-1)',
              display:'flex', alignItems:'center', gap:14, flexWrap: vp.isMobile?'wrap':'nowrap' }}>
              <div style={{ width:40, height:40, borderRadius:'var(--r-md)', background:'var(--line-2)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name="forklift" size={20} style={{ color:'var(--ink-3)' }} />
              </div>
              <button onClick={()=>onView(b)} style={{ flex:1, minWidth:0, textAlign:'left' }}>
                <div style={{ fontSize:14, fontWeight:800, 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} · {b.tipo}
                  {b.numeroPreventivo ? ` · prev. ${b.numeroPreventivo}` : ''}
                </div>
              </button>
              {/* cambio fase: solo da ordine in poi, senza tornare indietro */}
              {opp && forwardStages.length>0 ? (
                <div style={{ position:'relative', flexShrink:0 }}>
                  <select value={opp.stage_id} onChange={e=>{ if(e.target.value!==opp.stage_id) onChangeStage && onChangeStage(opp.id, e.target.value); }}
                    style={{ appearance:'none', padding:'8px 30px 8px 12px', fontSize:12.5, fontWeight:700, borderRadius:'var(--r-md)',
                      border:'1.5px solid var(--line)', background:'var(--surface-2)', color:'var(--ink-2)', cursor:'pointer', maxWidth: vp.isMobile?150:190 }}>
                    {forwardStages.map(s => <option key={s.id} value={s.id}>{s.nome}</option>)}
                  </select>
                  <Icon name="chevDown" size={14} style={{ position:'absolute', right:9, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)', pointerEvents:'none' }} />
                </div>
              ) : (
                /* prenotazione senza opportunità collegata: offri di crearla per gestire l'avanzamento */
                <button onClick={()=>onCreateOppFor && onCreateOppFor(b)} title="Crea l'opportunità per gestire l'avanzamento"
                  style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 12px', borderRadius:'var(--r-md)',
                    border:'1.5px dashed var(--red)', background:'var(--red-tint)', color:'var(--red)', fontSize:12, fontWeight:700, flexShrink:0 }}>
                  <Icon name="plus" size={14} /> {vp.isMobile?'Opp.':'Collega opportunità'}
                </button>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { DaPreparare });