// lead-detail.jsx — Lead detail with timeline stepper
function Timeline({ steps }) {
  return (
    <div style={{ position:'relative' }}>
      {steps.map((s,i)=>{
        const last = i===steps.length-1;
        const color = s.state==='done'?'var(--effectue)':(s.state==='current'?'var(--accepte)':'var(--border-2)');
        return (
          <div key={i} style={{ display:'flex', gap:15, position:'relative', paddingBottom: last?0:22 }}>
            {!last && <div style={{ position:'absolute', left:13, top:26, bottom:0, width:2,
              background: s.state==='done'?'var(--effectue)':'var(--border)' }} />}
            <div style={{ width:28, height:28, borderRadius:'50%', flexShrink:0, zIndex:1, display:'flex', alignItems:'center', justifyContent:'center',
              background: s.state==='done'?'var(--effectue)':(s.state==='current'?'rgba(199,122,10,.12)':'var(--bg)'),
              border: s.state==='todo'?'2px solid var(--border-2)':(s.state==='current'?'2px solid var(--accepte)':'none'),
              color:'#fff' }} className={s.state==='current'?'ring-pulse':''}>
              {s.state==='done' && <Icon name="check" size={15} stroke={2.6} />}
              {s.state==='current' && <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--accepte)' }} />}
            </div>
            <div style={{ paddingTop:2 }}>
              <div style={{ fontSize:14, fontWeight: s.state==='todo'?500:600, lineHeight:1.35, color: s.state==='todo'?'var(--faint)':'var(--ink)' }}>{s.label}</div>
              {s.d && <div style={{ fontSize:12.5, color:'var(--muted)', marginTop:3 }}>{s.d}</div>}
              {s.state==='current' && !s.d && <div style={{ fontSize:12.5, color:'var(--accepte)', marginTop:3, fontWeight:500 }}>En cours</div>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function InfoRow({ label, children, icon }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:16, padding:'11px 0', borderBottom:'1px solid var(--border)' }}>
      <span style={{ fontSize:13.5, color:'var(--muted)', display:'flex', alignItems:'center', gap:8 }}>
        {icon && <span style={{ color:'var(--faint)', display:'flex' }}><Icon name={icon} size={15} /></span>}{label}</span>
      <span style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)', textAlign:'right' }}>{children}</span>
    </div>
  );
}

function CommissionCard({ lead, openDoc }) {
  const statusMap = {
    verse:    { label:'Versée', color:'var(--verse)', bg:'var(--verse-bg)', note:'Versement effectué' },
    valide:   { label:'Validée', color:'var(--effectue)', bg:'var(--effectue-bg)', note:'Versement prévu en juin 2026' },
    attente:  { label:'En attente du déménagement', color:'var(--accepte)', bg:'var(--accepte-bg)', note:'Versement estimé : août 2026' },
  };
  const cs = statusMap[lead.commissionStatus] || statusMap.attente;
  return (
    <div style={{ background:'var(--navy)', color:'var(--cream)', borderRadius:'var(--r-lg)', padding:22, position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', top:-30, right:-20, width:140, height:140, borderRadius:'50%', background:'radial-gradient(circle, rgba(224,65,31,.18), transparent 65%)' }} />
      <div className="card-label" style={{ color:'rgba(245,239,227,.6)', position:'relative' }}>Commission</div>
      <div className="tnum" style={{ fontSize:34, fontWeight:700, margin:'10px 0 4px', letterSpacing:'-.02em', position:'relative' }}>
        {lead.commission?euro(lead.commission):'—'}</div>
      <div style={{ fontSize:12.5, color:'rgba(245,239,227,.66)', marginBottom:16, position:'relative' }}>
        {lead.rate}% · niveau Bronze</div>
      <div style={{ display:'flex', flexDirection:'column', gap:10, position:'relative' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontSize:12.5, color:'rgba(245,239,227,.6)' }}>Statut</span>
          <span style={{ fontSize:12, fontWeight:600, padding:'3px 10px', borderRadius:999, background:cs.bg, color:cs.color }}>{cs.label}</span>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:10, borderTop:'1px solid rgba(245,239,227,.12)' }}>
          <span style={{ fontSize:12.5, color:'rgba(245,239,227,.6)' }}>{cs.note}</span>
        </div>
        {lead.commissionStatus==='verse' && openDoc && (
          <button onClick={()=>openDoc('invoice', lead)} style={{ marginTop:6, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8, width:'100%',
            background:'rgba(245,239,227,.1)', color:'var(--cream)', border:'1px solid rgba(245,239,227,.2)', borderRadius:9, height:40, fontSize:13.5, fontWeight:600, transition:'.15s' }}
            onMouseEnter={e=>e.currentTarget.style.background='rgba(245,239,227,.18)'} onMouseLeave={e=>e.currentTarget.style.background='rgba(245,239,227,.1)'}>
            <Icon name="receipt" size={16} />Télécharger la facture</button>
        )}
      </div>
    </div>
  );
}

function LeadDetail({ mobile, go, leads, id, partner, openDoc, showToast }) {
  const lead = leads.find(l=>l.id===id) || leads[0];
  if (!lead) return null;
  const fLabel = lead.formule==='unknown' ? 'À définir' : window.LBC_DATA.FORMULES[lead.formule]?.label;

  const clientCard = (
    <div className="card card-pad">
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
        <span className="section-title" style={{ fontSize:16 }}>Informations client</span>
        <StatusBadge status={lead.status} pulse />
      </div>
      <InfoRow label="Nom" icon="user">{lead.first} {lead.last}</InfoRow>
      <InfoRow label="Téléphone" icon="phone">{lead.phone || '—'}</InfoRow>
      <InfoRow label="Email" icon="mail">{lead.email || '—'}</InfoRow>
      <InfoRow label="Trajet" icon="pin"><Route from={lead.from} to={lead.to} strong /></InfoRow>
      <InfoRow label="Formule" icon="package">{lead.formule==='unknown'?'À définir':<FormuleBadge formule={lead.formule} />}</InfoRow>
      <InfoRow label="Date souhaitée" icon="calendar">{lead.move || 'À définir'}</InfoRow>
      {lead.notes && <div style={{ paddingTop:13 }}>
        <div style={{ fontSize:13.5, color:'var(--muted)', marginBottom:6 }}>Notes</div>
        <div style={{ fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5, background:'var(--bg)', padding:'12px 14px', borderRadius:10 }}>{lead.notes}</div>
      </div>}
    </div>
  );

  const valueCard = (
    <div className="card card-pad">
      <span className="section-title" style={{ fontSize:16 }}>Valeur</span>
      <div style={{ marginTop:14 }}>
        <InfoRow label="Devis estimé">{lead.estValue?<span className="tnum" style={{ fontSize:16 }}>{euro(lead.estValue)}</span>:<span style={{ color:'var(--faint)', fontWeight:500 }}>En attente</span>}</InfoRow>
        <InfoRow label="Formule">{fLabel}</InfoRow>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:13 }}>
          <span style={{ fontSize:13.5, color:'var(--muted)' }}>Commission estimée</span>
          <span className="tnum" style={{ fontSize:16, fontWeight:700, color:'var(--brand)' }}>{lead.commission?euro(lead.commission):'—'} <span style={{ fontSize:12, fontWeight:500, color:'var(--muted)' }}>({lead.rate}%)</span></span>
        </div>
      </div>
    </div>
  );

  const timelineCard = (
    <div className="card card-pad">
      <span className="section-title" style={{ fontSize:16, display:'block', marginBottom:20 }}>Suivi du déménagement</span>
      <Timeline steps={lead.timeline} />
    </div>
  );

  const breadcrumb = (
    <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:13.5, marginBottom:16 }}>
      <a onClick={()=>go('leads')} style={{ color:'var(--muted)', cursor:'pointer', fontWeight:500 }}>Mes leads</a>
      <Icon name="chevronR" size={14} style={{ color:'var(--faint)' }} />
      <span style={{ color:'var(--ink)', fontWeight:600 }}>{lead.first} {lead.last}</span>
    </div>
  );

  if (mobile) {
    return (
      <div>
        {breadcrumb}
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          <CommissionCard lead={lead} openDoc={openDoc} />
          {timelineCard}
          <MessageThread lead={lead} showToast={showToast} />
          {clientCard}
          {valueCard}
        </div>
      </div>
    );
  }

  return (
    <div>
      {breadcrumb}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:20, gap:16, flexWrap:'wrap' }}>
        <div>
          <h1 className="page-title">{lead.first} {lead.last}</h1>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:8, fontSize:13.5, color:'var(--muted)' }}>
            <span className="mono">{lead.id}</span><span style={{ opacity:.4 }}>•</span>
            <Route from={lead.from} to={lead.to} /><span style={{ opacity:.4 }}>•</span>
            <span>Soumis le {lead.submitted}</span>
          </div>
        </div>
        <button className="btn btn-ghost btn-sm" style={{ height:40 }} onClick={()=>showToast&&showToast('Demande envoyée à l\'équipe LBC')}><Icon name="phone" size={15} />Contacter LBC</button>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, alignItems:'start' }}>
        <div style={{ display:'flex', flexDirection:'column', gap:18 }}>{clientCard}{valueCard}<MessageThread lead={lead} showToast={showToast} /></div>
        <div style={{ display:'flex', flexDirection:'column', gap:18 }}>{timelineCard}<CommissionCard lead={lead} openDoc={openDoc} /></div>
      </div>
    </div>
  );
}

Object.assign(window, { LeadDetail });