// Leads — list + detail
const Leads = ({ onNav }) => {
  const D = window.BW_DATA;
  const [view, setView] = useState('list'); // list | detail
  const [selected, setSelected] = useState(null);
  const [filter, setFilter] = useState('all');
  const [checked, setChecked] = useState(new Set());

  const stateMap = {
    active:    { cls: 'dark',  label: 'Activo' },
    qualified: { cls: 'green', label: 'Cualificado' },
    escalated: { cls: 'amber', label: 'Escalado' },
    discarded: { cls: 'red',   label: 'Descartado' },
    closed_won:{ cls: 'blue',  label: 'Cerrado · ganado' },
  };
  const list = D.LEADS.filter(l => filter==='all' || l.channel===filter);

  if (view === 'detail' && selected) return <LeadDetail lead={selected} onBack={()=>setView('list')} />;

  const toggle = (id) => {
    const n = new Set(checked);
    n.has(id) ? n.delete(id) : n.add(id);
    setChecked(n);
  };

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 13, color:'var(--color-text-secondary)' }}>Base de datos · {D.LEADS.length.toLocaleString('es')} de 4.218 leads totales</div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 36, margin: '4px 0 0', letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>Leads</h1>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <div style={{ padding:'6px 12px', background:'white', border:'1px solid var(--color-border)', borderRadius: 8, fontSize: 12.5, color:'var(--color-text-secondary)', display:'flex', alignItems:'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, background: 'var(--color-success)', borderRadius:'50%' }}/>
            Inmovilla sincronizado · hace 1 min
            <I.Refresh size={12} style={{ marginLeft: 4, color:'var(--color-text-muted)', cursor:'pointer' }}/>
          </div>
          <button className="btn"><I.Download size={14}/> Exportar CSV</button>
          <button className="btn btn-primary"><I.Plus size={14}/> Nuevo lead</button>
        </div>
      </div>

      <div className="card">
        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--color-border)', display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap' }}>
          <div style={{ position:'relative', flex: '0 1 320px' }}>
            <I.Search size={14} style={{ position:'absolute', left: 12, top: '50%', transform:'translateY(-50%)', color:'var(--color-text-muted)' }} />
            <input className="input input-sm" placeholder="Buscar por nombre, teléfono, email…" style={{ paddingLeft: 36 }} />
          </div>
          {[['all','Todos los canales',null],['whatsapp','WhatsApp','wa'],['phone','Telefonía','ph'],['email','Email','em']].map(([id,l,ch]) => (
            <button key={id} className={'chip' + (filter===id?' active':'')} onClick={()=>setFilter(id)}>
              {ch && <span style={{ width: 8, height: 8, borderRadius:'50%', background: ch==='wa'?'var(--color-whatsapp)':ch==='ph'?'var(--color-phone)':'var(--color-email)' }}/>}
              {l}
            </button>
          ))}
          <button className="chip">Tipo <I.ChevD size={12}/></button>
          <button className="chip">Estado <I.ChevD size={12}/></button>
          <button className="chip">Comercial <I.ChevD size={12}/></button>
          <button className="chip">Fecha <I.ChevD size={12}/></button>
          {checked.size > 0 && (
            <div style={{ marginLeft:'auto', display:'flex', gap: 8, alignItems:'center', fontSize: 13, color:'var(--color-text-secondary)' }}>
              <span>{checked.size} seleccionados</span>
              <button className="btn btn-sm">Cambiar estado</button>
              <button className="btn btn-sm">Asignar</button>
              <button className="btn btn-sm">Exportar</button>
            </div>
          )}
        </div>

        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 40 }}><input type="checkbox" /></th>
              <th>Lead</th>
              <th style={{ width: 100 }}>Canal</th>
              <th style={{ width: 110 }}>Tipo</th>
              <th style={{ width: 130 }}>Estado</th>
              <th style={{ width: 130 }}>Comercial</th>
              <th style={{ width: 130 }}>Primer contacto</th>
              <th style={{ width: 80 }}></th>
            </tr>
          </thead>
          <tbody>
            {list.map(l => {
              const cls = l.channel==='whatsapp'?'wa':l.channel==='phone'?'ph':'em';
              const cLabel = l.channel==='whatsapp'?'WhatsApp':l.channel==='phone'?'Telefonía':'Email';
              const cIcon = l.channel==='whatsapp' ? <I.WhatsApp size={11}/> : l.channel==='phone' ? <I.Phone size={11}/> : <I.Mail size={11}/>;
              const st = stateMap[l.state] || stateMap.active;
              return (
                <tr key={l.id} onClick={()=>{setSelected(l); setView('detail');}}>
                  <td onClick={(e)=>{e.stopPropagation(); toggle(l.id);}}>
                    <input type="checkbox" checked={checked.has(l.id)} onChange={()=>{}} />
                  </td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                      {l.vip && <I.Star size={12} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>}
                      <div style={{ width: 30, height: 30, borderRadius: '50%', background:'linear-gradient(135deg,#cbd5e1,#64748b)', color:'white', display:'grid', placeItems:'center', fontSize: 11, fontWeight: 600 }}>{l.name.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
                      <div>
                        <div style={{ fontWeight: 500 }}>{l.name}</div>
                        <div style={{ fontSize: 12, color:'var(--color-text-muted)' }} className="mono">{l.id}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className={'ch '+cls}>{cIcon}{cLabel}</span></td>
                  <td>{l.type}</td>
                  <td><span className={'badge ' + st.cls + ' dot'}>{st.label}</span></td>
                  <td>{l.owner}</td>
                  <td><span className="num">{l.first}</span></td>
                  <td><button className="btn btn-sm">Ver</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const LeadDetail = ({ lead, onBack }) => {
  const D = window.BW_DATA;
  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>
      <div style={{ marginBottom: 16 }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ paddingLeft: 0 }}><I.ChevR size={12} style={{ transform:'rotate(180deg)' }}/> Volver a leads</button>
      </div>

      <div style={{ display:'flex', alignItems:'flex-start', gap: 20, marginBottom: 24 }}>
        <div style={{ width: 64, height: 64, borderRadius:'50%', background: 'linear-gradient(135deg,#60A5FA,#2563EB)', color:'white', display:'grid', placeItems:'center', fontSize: 22, fontWeight: 600 }}>{lead.name.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
        <div style={{ flex: 1 }}>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 400, fontSize: 40, margin: 0, letterSpacing:'-0.025em', color:'var(--brand-navy)' }}>{lead.name}</h1>
          <div style={{ display:'flex', gap: 8, marginTop: 8, flexWrap:'wrap', alignItems:'center' }}>
            <span className="mono" style={{ fontSize: 12, color:'var(--color-text-secondary)' }}>{lead.id}</span>
            <span className={'ch ' + (lead.channel==='whatsapp'?'wa':lead.channel==='phone'?'ph':'em')}>
              {lead.channel==='whatsapp' ? <I.WhatsApp size={11}/> : lead.channel==='phone' ? <I.Phone size={11}/> : <I.Mail size={11}/>}
              {lead.channel==='whatsapp'?'WhatsApp':lead.channel==='phone'?'Telefonía':'Email'}
            </span>
            <span className="badge blue">{lead.type}</span>
            <span className="badge green dot">Cualificado</span>
            {lead.vip && <span className="badge amber"><I.Star size={11}/> VIP</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <button className="btn">Cambiar estado <I.ChevD size={12}/></button>
          <button className="btn">Asignar comercial</button>
          <button className="btn"><I.Download size={14}/> Exportar</button>
          <button className="btn btn-primary"><I.Send size={14}/> Enviar informe</button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 380px', gap: 16 }}>
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
          <div className="card">
            <div className="card-head"><div className="card-title">Datos del lead</div><span className="card-sub">Recogidos por agente AG-WA-INB-01 · 11:40</span></div>
            <div style={{ padding: '8px 0' }}>
              {[
                ['Nombre',lead.name],['Email',lead.email],['Teléfono',lead.phone],
                ['Tipo de lead', lead.type],['Presupuesto', lead.budget],['Zona buscada', lead.zone],
                ['Tipología', '3 dormitorios · exterior · garaje'],
                ['Financiación', 'Hipoteca · ING · 80% LTV · preaprobada'],
                ['Plazo', '3-6 meses para entrar a vivir'],
                ['Referencia inmueble', lead.ref],
              ].map(([k,v],i)=>(
                <div key={i} style={{ display:'grid', gridTemplateColumns:'180px 1fr', gap: 16, padding:'10px 24px', borderTop: i?'1px solid var(--color-border)':'none', fontSize: 13.5 }}>
                  <span style={{ color:'var(--color-text-secondary)' }}>{k}</span>
                  <span style={{ fontFamily: k.includes('Referencia')||k.includes('Teléfono')?'var(--font-mono)':'inherit' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-title">Historial de conversaciones</div><span className="card-sub">3 interacciones</span></div>
            <table className="tbl">
              <thead><tr><th>Canal</th><th>Fecha</th><th>Detalle</th><th>Duración / Mensajes</th><th></th></tr></thead>
              <tbody>
                {[
                  {c:'whatsapp', d:'Hoy · 11:38', det:'Cualificación inicial · Recepción WhatsApp', dur:'12 mensajes'},
                  {c:'email',    d:'Ayer · 18:02', det:'Bienvenida + brochure REF-MAD-1029', dur:'2 mensajes'},
                  {c:'phone',    d:'29 abr · 16:14', det:'Llamada saliente · cualificada', dur:'04:32'},
                ].map((h,i)=>{
                  const cls = h.c==='whatsapp'?'wa':h.c==='phone'?'ph':'em';
                  return (
                    <tr key={i}>
                      <td><span className={'ch '+cls}>{h.c==='whatsapp'?<I.WhatsApp size={11}/>:h.c==='phone'?<I.Phone size={11}/>:<I.Mail size={11}/>}{h.c==='whatsapp'?'WhatsApp':h.c==='phone'?'Telefonía':'Email'}</span></td>
                      <td><span className="num">{h.d}</span></td>
                      <td>{h.det}</td>
                      <td><span className="num">{h.dur}</span></td>
                      <td><button className="btn btn-sm">Abrir</button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
          <div className="card" style={{ background:'linear-gradient(180deg,#FAFAFF,white)', borderColor:'#E5E7FF' }}>
            <div className="card-head" style={{ borderBottom: '1px solid #E5E7FF' }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <I.Sparkle size={16} style={{ color: 'var(--color-outbound)' }}/>
                <div className="card-title">Informe de cualificación IA</div>
              </div>
              <span className="badge violet" style={{ fontSize: 11 }}>Score 92 / 100</span>
            </div>
            <div className="card-body" style={{ fontSize: 13.5, lineHeight: 1.6 }}>
              <div style={{ marginBottom: 14 }}><strong>Tipología detectada:</strong> Comprador particular · alta intención.</div>
              <div style={{ marginBottom: 14 }}>Marta busca activamente desde hace dos meses. Tiene financiación preaprobada por ING al 80% LTV y horquilla flexible hasta 650.000 €. Sus criterios son sólidos (3 dorm., exterior, garaje en Chamberí) y muestra disponibilidad inmediata para visitas.</div>
              <div style={{ background:'white', border:'1px solid var(--color-border)', borderRadius: 10, padding: 14, marginBottom: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color:'var(--color-outbound)', marginBottom: 4, textTransform:'uppercase', letterSpacing:'.04em' }}>Recomendación</div>
                <div>Llamar hoy a las 18:00 desde Lucía R. y adjuntar 3 referencias en Chamberí: REF-MAD-1029, 1031 y 1044.</div>
              </div>
              <div style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>Generado · Hoy 11:40 · Modelo GPT-4o · 412 tokens</div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-title">Acciones</div></div>
            <div style={{ padding: 16, display:'flex', flexDirection:'column', gap: 8 }}>
              <button className="btn" style={{ justifyContent:'flex-start' }}><I.Send size={14}/> Enviar informe por email</button>
              <button className="btn" style={{ justifyContent:'flex-start' }}><I.ExternalLink size={14}/> Ver en Inmovilla</button>
              <button className="btn" style={{ justifyContent:'flex-start' }}><I.Star size={14}/> Marcar como VIP</button>
              <button className="btn" style={{ justifyContent:'flex-start' }}><I.Tag size={14}/> Añadir etiqueta</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.LeadsPage = Leads;