// ─────────────────────────────────────────────────────
// LeadHistoricoPanel — timeline vertical de eventos del lead (GUT-57).
// ─────────────────────────────────────────────────────

const LEAD_EVENTO_META = {
  creado:             { icon: 'plus',  cls: 'glass', label: 'Lead creado' },
  estado:             { icon: 'edit',  cls: '',      label: 'Cambio de estado' },
  campo:              { icon: 'edit',  cls: '',      label: 'Campo modificado' },
  envio_mail:         { icon: 'mail',  cls: 'ok',    label: 'Email enviado' },
  envio_wa:           { icon: 'phone', cls: 'ok',    label: 'WhatsApp enviado' },
  presupuesto_creado: { icon: 'plus',  cls: 'ok',    label: 'Presupuesto creado' },
  accion:             { icon: 'edit',  cls: '',      label: 'Acción' },
  nota:               { icon: 'edit',  cls: '',      label: 'Nota' },
};

const FIELD_LABELS = {
  nombre: 'Nombre', email: 'Email', telefono: 'Teléfono',
  localidad: 'Localidad', provincia: 'Provincia', direccion: 'Dirección',
  vendedor: 'Vendedor', origen: 'Origen',
  interes_pct: 'Interés %', importe: 'Importe',
  descripcion: 'Descripción', productos: 'Productos',
  observaciones: 'Observaciones', ruta_archivo: 'Archivo',
  fecha_solicitud: 'Fecha solicitud', fecha_1_contacto: 'Fecha 1er contacto',
  fecha_envio_pto: 'Fecha envío pto', fecha_aceptacion: 'Fecha aceptación',
  fecha_instalacion: 'Fecha instalación',
};

function describeEvento(ev) {
  const p = ev.payload || {};
  switch (ev.tipo) {
    case 'creado':
      return `Lead ${p.numero_presupuesto || ''}${p.origen ? ` · origen ${p.origen}` : ''}`.trim();
    case 'estado':
      return `${p.from || '—'} → ${p.to || '—'}`;
    case 'campo': {
      const label = FIELD_LABELS[p.campo] || p.campo || 'Campo';
      const antes = p.antes == null || p.antes === '' ? '—' : String(p.antes);
      const despues = p.despues == null || p.despues === '' ? '—' : String(p.despues);
      return `${label}: ${antes} → ${despues}`;
    }
    case 'envio_mail':
      return p.destinatario ? `Email → ${p.destinatario}` : 'Email enviado';
    case 'envio_wa':
      return p.destinatario ? `WhatsApp → ${p.destinatario}` : 'WhatsApp enviado';
    case 'presupuesto_creado':
      return p.numero_presupuesto ? `Presupuesto ${p.numero_presupuesto}` : 'Presupuesto creado';
    case 'accion':
    case 'nota': {
      const t = p.tipo ? `[${p.tipo}] ` : '';
      return `${t}${p.descripcion || (LEAD_EVENTO_META[ev.tipo] || {}).label || ev.tipo}`;
    }
    default:
      return ev.tipo;
  }
}

function fmtFechaEvento(iso) {
  if (!iso) return '';
  try {
    const d = new Date(iso);
    return d.toLocaleString('es-ES', { dateStyle: 'short', timeStyle: 'short' });
  } catch (_) {
    return String(iso);
  }
}

const LeadHistoricoPanel = ({ leadId, onToast }) => {
  const [items, setItems] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (!leadId) return;
    let alive = true;
    setItems(null);
    setError(null);
    API.get(`/api/leads/${leadId}/historico`)
      .then(rows => { if (alive) setItems(Array.isArray(rows) ? rows : []); })
      .catch(err => {
        if (!alive) return;
        setError(err.message || 'Error al cargar histórico');
        setItems([]);
        onToast && onToast(err.message || 'Error al cargar histórico', true);
      });
    return () => { alive = false; };
  }, [leadId]);

  return (
    <div>
      <div className="section-title">Línea temporal</div>
      {items === null && <p className="muted" style={{fontSize:12}}>Cargando…</p>}
      {items && items.length === 0 && !error && (
        <p className="muted" style={{fontSize:12}}>Sin eventos registrados todavía.</p>
      )}
      {items && items.length > 0 && (
        <div className="tl">
          {items.map(ev => {
            const meta = LEAD_EVENTO_META[ev.tipo] || { icon: 'edit', cls: '', label: ev.tipo };
            return (
              <div key={ev.id} className="tl-item">
                <div className={`tl-dot ${meta.cls}`}/>
                <div className="tl-content">
                  <div className="t" style={{display:'flex',alignItems:'center',gap:6}}>
                    <Icon name={meta.icon} size={12}/>
                    <strong>{meta.label}</strong>
                    <span className="muted" style={{fontSize:11}}>· {describeEvento(ev)}</span>
                  </div>
                  <time>
                    {fmtFechaEvento(ev.created_at)}
                    {ev.autor ? ` · ${ev.autor}` : ''}
                  </time>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

window.LeadHistoricoPanel = LeadHistoricoPanel;