// ─────────────────────────────────────────────────────
// GUT-58: Kanban de acciones para un lead.
// Tres columnas por estado derivado (pendiente · sin_completar · completada).
// Drag & drop nativo HTML5 entre columnas y selector de estado por card
// como fallback (sin librerías). Persistencia vía PATCH /api/acciones/:id.
// ─────────────────────────────────────────────────────

const KANBAN_COLS = [
  { key: 'pendiente',     label: 'Pendiente',     bg: '#fff4e0', border: '#f0b860', ink: '#a05a00' },
  { key: 'sin_completar', label: 'Sin completar', bg: '#fde4e4', border: '#e98a8a', ink: '#a51d1d' },
  { key: 'completada',    label: 'Completada',    bg: '#e6f5e6', border: '#7fc88a', ink: '#1f6b2b' },
];

const KANBAN_TIPO_ICONS = {
  NOTA:'📝', LLAMADA:'📞', EMAIL:'✉️', WHATSAPP:'💬',
  REUNION:'🤝', VISITA:'📍', TAREA:'✅',
};

const fmtKDate = (iso) => {
  if (!iso) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso));
  if (m) return `${m[3]}/${m[2]}/${m[1]}`;
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '';
  return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
};

const LeadAccionesKanban = ({ leadId, onToast, refreshKey }) => {
  const [items, setItems] = React.useState(null);
  const [dragId, setDragId] = React.useState(null);
  const [dragOverCol, setDragOverCol] = React.useState(null);

  const load = React.useCallback(() => {
    if (!leadId) { setItems([]); return; }
    API.get(`/api/leads/${leadId}/acciones`)
      .then(rows => setItems(Array.isArray(rows) ? rows : []))
      .catch(e => { setItems([]); onToast && onToast(e.message || 'Error al cargar acciones', true); });
  }, [leadId, onToast]);

  React.useEffect(() => { load(); }, [load, refreshKey]);

  const persist = async (id, patch) => {
    try {
      await API.patch(`/api/acciones/${id}`, patch);
    } catch (e) {
      onToast && onToast(e.message || 'Error al guardar cambios', true);
      load();
    }
  };

  const moveTo = (id, newEstado) => {
    setItems(prev => (prev || []).map(it => it.id === id ? { ...it, estado: newEstado } : it));
    // Compute new orden = max(orden) in target column + 1
    const target = (items || []).filter(it => it.estado === newEstado && it.id !== id);
    const maxOrden = target.reduce((m, it) => Math.max(m, Number(it.orden) || 0), 0);
    persist(id, { estado: newEstado, orden: maxOrden + 1 });
  };

  const onDragStart = (e, id) => {
    setDragId(id);
    try { e.dataTransfer.setData('text/plain', String(id)); } catch {}
    e.dataTransfer.effectAllowed = 'move';
  };
  const onDragOver = (e, colKey) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    if (dragOverCol !== colKey) setDragOverCol(colKey);
  };
  const onDragLeave = (colKey) => { if (dragOverCol === colKey) setDragOverCol(null); };
  const onDrop = (e, colKey) => {
    e.preventDefault();
    const id = dragId || Number(e.dataTransfer.getData('text/plain'));
    setDragOverCol(null);
    setDragId(null);
    if (!id) return;
    const it = (items || []).find(x => x.id === id);
    if (!it || it.estado === colKey) return;
    moveTo(id, colKey);
  };

  if (items === null) {
    return <div style={{color:'var(--ink-3)', fontSize:12.5}}>Cargando kanban…</div>;
  }

  const grouped = KANBAN_COLS.map(col => ({
    ...col,
    cards: items
      .filter(it => it.estado === col.key)
      .slice()
      .sort((a, b) => {
        const oa = Number(a.orden); const ob = Number(b.orden);
        const va = Number.isFinite(oa) ? oa : Number.POSITIVE_INFINITY;
        const vb = Number.isFinite(ob) ? ob : Number.POSITIVE_INFINITY;
        if (va !== vb) return va - vb;
        return b.id - a.id;
      }),
  }));

  return (
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8}}>
      {grouped.map(col => (
        <div
          key={col.key}
          onDragOver={(e)=>onDragOver(e, col.key)}
          onDragLeave={()=>onDragLeave(col.key)}
          onDrop={(e)=>onDrop(e, col.key)}
          style={{
            border:`1px solid ${col.border}`,
            background: dragOverCol === col.key ? '#f5faff' : '#fff',
            borderRadius:6,
            padding:8,
            minHeight:140,
          }}
        >
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            marginBottom:6, paddingBottom:4, borderBottom:`1px solid ${col.border}`,
          }}>
            <span style={{fontSize:11, fontWeight:700, color:col.ink, textTransform:'uppercase', letterSpacing:.5}}>
              {col.label}
            </span>
            <span style={{fontSize:11, color:'var(--ink-3)'}}>{col.cards.length}</span>
          </div>
          {col.cards.length === 0 ? (
            <div style={{fontSize:11.5, fontStyle:'italic', color:'var(--ink-3)', padding:'8px 4px'}}>
              {dragOverCol === col.key ? 'Soltar aquí…' : 'Sin acciones'}
            </div>
          ) : col.cards.map(it => (
            <div
              key={it.id}
              draggable
              onDragStart={(e)=>onDragStart(e, it.id)}
              style={{
                background: col.bg,
                border:`1px solid ${col.border}`,
                borderRadius:4,
                padding:'6px 8px',
                marginBottom:6,
                fontSize:12,
                cursor:'grab',
                opacity: dragId === it.id ? 0.5 : 1,
              }}
              title="Arrastrar para mover de columna"
            >
              <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:3}}>
                <span>{KANBAN_TIPO_ICONS[it.tipo] || '•'}</span>
                <strong style={{fontSize:11.5}}>{it.tipo}</strong>
                <span style={{flex:1}}/>
                <select
                  value={it.estado}
                  onChange={e=>moveTo(it.id, e.target.value)}
                  title="Cambiar estado (fallback)"
                  style={{fontSize:10.5, padding:'1px 2px', border:`1px solid ${col.border}`, borderRadius:3, background:'#fff'}}
                >
                  {KANBAN_COLS.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
                </select>
              </div>
              {it.descripcion && (
                <div style={{whiteSpace:'pre-wrap', color:'var(--ink-1)', fontSize:11.5, marginBottom:3}}>
                  {it.descripcion}
                </div>
              )}
              <div style={{fontSize:10.5, color:col.ink}}>
                {it.fecha_proxima ? `⏰ ${fmtKDate(it.fecha_proxima)}` : (it.fecha_accion ? fmtKDate(it.fecha_accion) : '')}
                {it.usuario ? ` · ${it.usuario}` : ''}
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

window.LeadAccionesKanban = LeadAccionesKanban;