// ─────────────────────────────────────────────────────
// LEAD detail drawer — wired to /api/records/:id and exports.
// ─────────────────────────────────────────────────────

const PRESU_ESTADOS_DRAWER = ['Borrador', 'Enviado', 'Aceptado', 'Rechazado', 'Cancelado'];

const LeadDrawer = ({ lead, onClose, onEdit, onToast, onRefresh }) => {
  const [tab, setTab]     = React.useState('ficha');
  const [detail, setDetail] = React.useState(null);
  const [presupuestos, setPresupuestos] = React.useState([]);
  const [presuLoading, setPresuLoading] = React.useState(false);
  const [presuModal, setPresuModal] = React.useState(false);
  const [reload, setReload] = React.useState(0);

  React.useEffect(() => {
    if (!lead) { setDetail(null); setPresupuestos([]); return; }
    let alive = true;
    API.get(`/api/records/${lead.id}`).then(r => {
      if (!alive) return;
      setDetail(window.toUiRow(r));
    }).catch(()=>{});
    setPresuLoading(true);
    API.get(`/api/presupuestos?lead_id=${lead.id}&include_archivados=1`).then(rows => {
      if (!alive) return;
      setPresupuestos(Array.isArray(rows) ? rows : []);
    }).catch(() => alive && setPresupuestos([]))
      .finally(() => alive && setPresuLoading(false));
    return () => { alive = false; };
  }, [lead && lead.id, reload]);

  const updatePresuEstado = async (id, estado) => {
    try {
      await API.put(`/api/presupuestos/${id}`, { estado });
      onToast && onToast('Estado actualizado ✓');
      setReload(k => k + 1);
    } catch (e) {
      onToast && onToast(e.message || 'Error al actualizar estado', true);
    }
  };

  // Enviar presupuesto por canal por defecto (mail/wa) — GUT-59.
  // Descarga el PDF localmente y abre mailto:/wa.me con cuerpo pidiendo
  // adjuntar el fichero descargado. No se incluye URL del ERP (subdominio privado).
  const enviarPresupuesto = (p) => {
    const row = detail || lead;
    const canal = row.via_envio_default === 'wa' ? 'wa' : 'mail';
    const numero = p.numero_presupuesto || '';
    const filename = `presupuesto_${numero || p.id}.pdf`;
    let href = '#';
    let destinatario = '';
    if (canal === 'mail') {
      const email = (row.email || '').trim();
      if (!email) { onToast && onToast('Lead sin email', true); return; }
      destinatario = email;
      const subject = `Presupuesto ${numero}`.trim();
      const body = `Hola ${row.nombre || ''},\n\nTe adjuntamos el presupuesto ${numero} en PDF.\n\nUn saludo,\nKurtenglass`;
      href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    } else {
      const raw = (row.tel || '').trim();
      const digits = raw.replace(/[^\d]/g, '');
      if (!digits) { onToast && onToast('Lead sin teléfono', true); return; }
      destinatario = raw;
      const text = `Hola ${row.nombre || ''}, te adjuntamos el presupuesto ${numero} desde Kurtenglass.`;
      href = `https://wa.me/${digits}?text=${encodeURIComponent(text)}`;
    }
    // Descarga el PDF para que el usuario lo adjunte manualmente en el cliente.
    API.download(`/api/presupuestos/${p.id}/pdf`, filename)
      .then(() => {
        window.open(href, '_blank', 'noopener,noreferrer');
        onToast && onToast(`PDF descargado (${filename}) — adjúntalo en el ${canal === 'wa' ? 'chat' : 'correo'}`);
      })
      .catch(err => { onToast && onToast(err.message || 'No se pudo descargar el PDF', true); return; });
    // Registro en histórico (no bloquea si falla).
    API.post(`/api/leads/${row.id}/historico`, {
      tipo: canal === 'wa' ? 'envio_wa' : 'envio_mail',
      payload: { destinatario, presupuesto_id: p.id, numero_presupuesto: numero },
    }).then(() => setReload(k => k + 1))
      .catch(err => onToast && onToast(err.message || 'No se registró el evento', true));
  };

  if (!lead) return null;
  const l = detail || lead;
  const e = window.DATA.ESTADOS_LEAD[l.estado] || { label: l.estado || '—', cls: '' };

  const onPrint = () => {
    API.download(`/api/export/records/${l.id}/pdf`, `lead_${l.np || l.id}.pdf`)
      .catch(err => onToast && onToast(err.message || 'Error al exportar PDF', true));
  };
  const onExportExcel = () => {
    API.download(`/api/export/records/${l.id}/excel`, `lead_${l.np || l.id}.xlsx`)
      .catch(err => onToast && onToast(err.message || 'Error al exportar Excel', true));
  };
  const mailInfo = window.buildContactUrl ? window.buildContactUrl('mail', l) : { href:'#', disabled:true, title:'' };
  const waInfo   = window.buildContactUrl ? window.buildContactUrl('wa',   l) : { href:'#', disabled:true, title:'' };
  const isWaPrimary = l.via_envio_default === 'wa';
  const primaryInfo   = isWaPrimary ? waInfo   : mailInfo;
  const secondaryInfo = isWaPrimary ? mailInfo : waInfo;
  const primaryLabel   = isWaPrimary ? { emoji:'💬', text:'WhatsApp' } : { emoji:'✉️', text:'Email' };
  const secondaryLabel = isWaPrimary ? { emoji:'✉️', text:'Email' }    : { emoji:'💬', text:'WhatsApp' };
  const renderContactBtn = (info, lbl, isPrimary) => info.disabled
    ? <button className="btn" disabled title={info.title} style={{opacity:.45,cursor:'not-allowed'}}>{lbl.emoji} {lbl.text}</button>
    : <a className={`btn${isPrimary?' primary':''}`} href={info.href} target="_blank" rel="noopener noreferrer" title={info.title}>{lbl.emoji} {lbl.text}</a>;

  return (
    <>
      <div className={`drawer-bg ${lead?'open':''}`} onClick={onClose}/>
      <div className={`drawer ${lead?'open':''}`}>
        <div className="dr-head">
          <span className="id mono">{l.np}</span>
          <h2>{l.nombre}</h2>
          <span className={`pill ${e.cls}`} style={{marginLeft:8}}><span className="d"/>{e.label}</span>
          <div className="actions">
            <button className="btn ghost sm tip" data-tip="Editar" onClick={()=>onEdit && onEdit(l.id)}><Icon name="edit" size={13}/></button>
            <button className="btn ghost sm tip" data-tip="Excel" onClick={onExportExcel}><Icon name="download" size={13}/></button>
            <button className="btn ghost sm tip" data-tip="Imprimir PDF" onClick={onPrint}><Icon name="print" size={13}/></button>
            {renderContactBtn(primaryInfo, primaryLabel, true)}
            {renderContactBtn(secondaryInfo, secondaryLabel, false)}
            <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
          </div>
        </div>

        <div className="dr-tabs">
          <button className={tab==='ficha'?'on':''}    onClick={()=>setTab('ficha')}>Ficha</button>
          <button className={tab==='hist'?'on':''}     onClick={()=>setTab('hist')}>Histórico</button>
          <button className={tab==='archivos'?'on':''} onClick={()=>setTab('archivos')}>Archivos</button>
          <button className={tab==='tareas'?'on':''}   onClick={()=>setTab('tareas')}>Tareas</button>
          <button className={tab==='acciones'?'on':''} onClick={()=>setTab('acciones')}>Acciones</button>
        </div>

        <div className="dr-body">
          {tab === 'ficha' && (
            <div className="dr-grid">
              <div>
                <div className="section-title">Contacto</div>
                <div className="fields-grid">
                  <div className="field"><label>Nombre completo</label><div className="v">{l.nombre || '—'}</div></div>
                  <div className="field"><label>Vendedor asignado</label><div className="v"><VendedorChip code={l.vendedor}/></div></div>
                  <div className="field"><label>Teléfono</label><div className="v mono">{l.tel || '—'}</div></div>
                  <div className="field"><label>Email</label><div className="v">{l.email || '—'}</div></div>
                  <div className="field"><label>Localidad</label><div className="v">{l.loc || '—'}</div></div>
                  <div className="field"><label>Provincia</label><div className="v">{l.prov || '—'}</div></div>
                  <div className="field full"><label>Dirección</label><div className="v">{l.direccion || '—'}</div></div>
                </div>

                <div className="section-title">Presupuesto</div>
                <div className="fields-grid cols-3">
                  <div className="field"><label>Nº Presupuesto</label><div className="v mono">{l.np || '—'}</div></div>
                  <div className="field"><label>Fecha solicitud</label><div className="v">{l.fecha_solicitud || '—'}</div></div>
                  <div className="field"><label>Fecha envío</label><div className="v">{l.fecha_pre || '—'}</div></div>
                  <div className="field"><label>Importe</label><div className="v mono">{l.importe ? window.fmtEur(l.importe) : '—'}</div></div>
                  <div className="field"><label>Fecha aceptación</label><div className="v">{l.fecha_acept || '—'}</div></div>
                  <div className="field"><label>F. instalación</label><div className="v">{l.fecha_inst || '—'}</div></div>
                </div>

                <div className="section-title">Productos interesados</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:8}}>
                  {(l.productosCanon || []).map((c, i) => {
                    const id = window.PROD_CANON_TO_ID[c];
                    const p = id ? window.DATA.PRODUCTOS.find(x=>x.id===id) : null;
                    const label = window.PROD_LABELS[c] || c;
                    return (
                      <div key={i} style={{display:'flex',gap:10,padding:8,border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)'}}>
                        {p
                          ? <span className="prod" style={{width:44,height:44}}><img src={p.img}/></span>
                          : <span className="prod" style={{width:44,height:44,display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,color:'var(--ink-3)'}}>{label.slice(0,3)}</span>}
                        <div style={{display:'flex',flexDirection:'column',justifyContent:'center'}}>
                          <div style={{fontWeight:600,fontSize:13}}>{label}</div>
                          <div className="muted" style={{fontSize:11}}>{c}</div>
                        </div>
                      </div>
                    );
                  })}
                  {(!l.productosCanon || !l.productosCanon.length) && <div className="muted" style={{fontSize:12}}>Sin productos asignados</div>}
                </div>

                <div className="section-title" style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                  <span>Presupuestos enlazados</span>
                  {presupuestos.length > 0 ? (
                    <button className="btn primary sm" onClick={() => {
                      const target = presupuestos.find(p => !p.archivado) || presupuestos[0];
                      if (!target) return;
                      onClose && onClose();
                      window.dispatchEvent(new CustomEvent('erp:open-presupuesto', { detail: { id: target.id } }));
                    }}>
                      <Icon name="eye" size={12}/> Ver presupuesto
                    </button>
                  ) : (
                    <button className="btn primary sm" onClick={() => setPresuModal(true)}>
                      <Icon name="plus" size={12}/> Crear presupuesto
                    </button>
                  )}
                </div>
                <div style={{border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)'}}>
                  {presuLoading && <div className="muted" style={{padding:10,fontSize:12}}>Cargando…</div>}
                  {!presuLoading && presupuestos.length === 0 && (
                    <div className="muted" style={{padding:10,fontSize:12}}>Sin presupuestos enlazados.</div>
                  )}
                  {presupuestos.map(p => (
                    <div key={p.id} style={{display:'flex',alignItems:'center',gap:8,padding:'8px 10px',borderTop:'1px solid var(--line)',fontSize:12.5}}>
                      <strong className="mono">{p.numero_presupuesto}</strong>
                      <span className="muted">{p.lineas_count || 0} líneas</span>
                      <span className="tb-spacer" style={{flex:1}}/>
                      <span className="mono">{p.total_con_iva != null
                        ? new Intl.NumberFormat('es-ES',{style:'currency',currency:'EUR'}).format(Number(p.total_con_iva))
                        : '—'}</span>
                      <select value={p.estado || 'Borrador'} onChange={e => updatePresuEstado(p.id, e.target.value)}
                        style={{padding:'2px 6px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12}}>
                        {PRESU_ESTADOS_DRAWER.map(s => <option key={s} value={s}>{s}</option>)}
                      </select>
                      <button className="btn sm" onClick={() => enviarPresupuesto(p)}
                        title={`Enviar por ${l.via_envio_default === 'wa' ? 'WhatsApp' : 'email'}`}>
                        {l.via_envio_default === 'wa' ? '💬' : '✉️'} Enviar
                      </button>
                      {p.archivado && <span className="pill err" style={{fontSize:10}}><span className="d"/>Archivado</span>}
                    </div>
                  ))}
                </div>

                <div className="section-title">Descripción</div>
                <div style={{padding:10,border:'1px solid var(--line)',background:'var(--surface)',borderRadius:6,fontSize:12.5,lineHeight:1.5,whiteSpace:'pre-wrap'}}>
                  {l.desc || <span className="muted">—</span>}
                </div>
              </div>

              <div>
                <div className="section-title">Estado &amp; seguimiento</div>
                <div className="fields-grid">
                  <div className="field"><label>Estado</label><div className="v"><span className={`pill ${e.cls}`}><span className="d"/>{e.label}</span></div></div>
                  <div className="field"><label>Origen</label><div className="v"><span className="tag">{l.origen || '—'}</span></div></div>
                  <div className="field full">
                    <label>% Interés ({l.interes}%)</label>
                    <div style={{padding:'10px 8px',border:'1px solid var(--line)',background:'var(--surface)',borderRadius:6}}>
                      <span className={`pbar ${l.interes>=80?'ok':l.interes>=50?'warn':''}`} style={{width:'100%',height:6}}><i style={{width:`${l.interes}%`}}/></span>
                    </div>
                  </div>
                  <div className="field"><label>Próx. acción</label><div className="v">{l.accion_dia || '—'}</div></div>
                  <div className="field"><label>Mes</label><div className="v">{l.mes || '—'}</div></div>
                  <div className="field full"><label>Última acción</label><div className="v" style={{whiteSpace:'pre-wrap'}}>{l.accion || '—'}</div></div>
                  <div className="field full"><label>Observaciones</label><div className="v" style={{whiteSpace:'pre-wrap'}}>{l.obs || '—'}</div></div>
                </div>
              </div>
            </div>
          )}
          {tab === 'hist' && (
            window.LeadHistoricoPanel
              ? <window.LeadHistoricoPanel leadId={l.id} onToast={onToast}/>
              : <p className="muted" style={{fontSize:12}}>Histórico no disponible.</p>
          )}
          {tab === 'archivos' && (
            <ArchivosPanel entityType="leads" entityId={l.id} title="Archivos del lead" onToast={onToast}/>
          )}
          {tab === 'tareas' && (
            <div>
              <div className="section-title">Tareas asociadas</div>
              <p className="muted" style={{fontSize:12}}>Integración con tareas disponible próximamente.</p>
            </div>
          )}
          {tab === 'acciones' && (
            <div>
              <div className="section-title">Kanban de acciones</div>
              {window.LeadAccionesKanban
                ? <window.LeadAccionesKanban leadId={l.id} onToast={onToast} refreshKey={l.id}/>
                : <p className="muted" style={{fontSize:12}}>Cargando…</p>}
            </div>
          )}
        </div>
      </div>
      {presuModal && window.PresupuestoHeaderForm && (() => {
        const PresuForm = window.PresupuestoHeaderForm;
        return <PresuForm
          leadPreset={{
            id: l.id,
            numero_presupuesto: l.np,
            nombre: l.nombre,
            email: l.email,
            telefono: l.tel,
            direccion: l.direccion,
            localidad: l.loc,
            provincia: l.prov,
            // Preselección del vendedor en el modal de presupuesto.
            vendedor: l.vendedor,
          }}
          onClose={() => setPresuModal(false)}
          onSaved={() => { setReload(k => k + 1); onRefresh && onRefresh(); }}
          onToast={onToast}
        />;
      })()}
    </>
  );
};

window.LeadDrawer = LeadDrawer;