// views-kanban.jsx — Kanban board with drag & drop

const COLUMNS = [
  { id: "pendiente", label: "Pendiente" },
  { id: "proceso", label: "En proceso" },
];

function KanbanView({ tickets, onOpenTicket, onMove, onCreate }) {
  const [draggingId, setDraggingId] = React.useState(null);
  const [dzCol, setDzCol] = React.useState(null);
  const [leavingIds, setLeavingIds] = React.useState(new Set());

  const byStatus = {
    pendiente: tickets.filter(t => t.estado === "pendiente"),
    proceso: tickets.filter(t => t.estado === "proceso"),
  };

  const pOrder = { alta: 0, media: 1, baja: 2 };
  for (const k of Object.keys(byStatus)) {
    byStatus[k].sort((a, b) => {
      if (pOrder[a.prioridad] !== pOrder[b.prioridad]) return pOrder[a.prioridad] - pOrder[b.prioridad];
      return new Date(b.fecha) - new Date(a.fecha);
    });
  }

  const handleDragStart = (e, id) => {
    setDraggingId(id);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", id);
    setTimeout(() => {}, 0);
  };
  const handleDragEnd = () => {
    setDraggingId(null);
    setDzCol(null);
  };
  const handleDragOver = (e, col) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    if (dzCol !== col) setDzCol(col);
  };
  const handleDragLeave = (e, col) => {
    if (!e.currentTarget.contains(e.relatedTarget)) {
      if (dzCol === col) setDzCol(null);
    }
  };
  const handleDrop = (e, col) => {
    e.preventDefault();
    const id = e.dataTransfer.getData("text/plain") || draggingId;
    setDzCol(null);
    setDraggingId(null);
    if (!id) return;
    const current = tickets.find(t => t.id === id);
    if (!current || current.estado === col) return;

    onMove(id, col);
  };

  return (
    <div className="kanban">
      {COLUMNS.map(col => (
        <div className="col" data-status={col.id} key={col.id}>
          <div className="col-h">
            <span className="col-dot"></span>
            <h2>{col.label}</h2>
            <span className="col-count">{byStatus[col.id].length}</span>
            {col.id === "pendiente" && onCreate && (
              <button className="col-add" onClick={onCreate} aria-label="Nuevo ticket" title="Nuevo ticket">
                <Icon name="plus" style={{ width: 15, height: 15 }} />
              </button>
            )}
          </div>
          <div
            className={"col-body " + (dzCol === col.id ? "dz" : "")}
            onDragOver={e => handleDragOver(e, col.id)}
            onDragLeave={e => handleDragLeave(e, col.id)}
            onDrop={e => handleDrop(e, col.id)}
          >
            {byStatus[col.id].map(t => (
              <KanbanCard
                key={t.id}
                ticket={t}
                onOpen={() => onOpenTicket(t.id)}
                dragging={draggingId === t.id}
                leaving={leavingIds.has(t.id)}
                onDragStart={(e) => handleDragStart(e, t.id)}
                onDragEnd={handleDragEnd}
              />
            ))}
            {byStatus[col.id].length === 0 && (
              <div className="col-done-empty">
                Arrastra una tarjeta aquí.
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

function KanbanCard({ ticket, onOpen, onDragStart, onDragEnd, dragging, leaving }) {
  const ref = React.useRef(null);
  const [entering, setEntering] = React.useState(true);
  React.useEffect(() => {
    const t = setTimeout(() => setEntering(false), 360);
    return () => clearTimeout(t);
  }, []);

  return (
    <div
      ref={ref}
      className={"kcard " + (dragging ? "dragging " : "") + (leaving ? "leaving " : "") + (entering ? "entering" : "")}
      draggable
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      onClick={onOpen}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === "Enter") onOpen(); }}
    >
      <div className="kcard-row">
        <span className="kcard-code">{ticket.id}</span>
        <span style={{ marginLeft: "auto" }}><PriorityBadge value={ticket.prioridad} /></span>
      </div>
      <div className="kcard-client">{ticket.cliente}</div>
      <div className="kcard-desc">{ticket.descripcion}</div>
      <div className="kcard-foot">
        <span className="phone">{ticket.celular}</span>
        {ticket.archivos && ticket.archivos.length > 0 && (
          <span className="attach-pill">
            <Icon name="paperclip" style={{ width: 12, height: 12 }} />
            {ticket.archivos.length}
          </span>
        )}
        <span className="age">{fmtAge(ticket.fecha)}</span>
      </div>
    </div>
  );
}

window.KanbanView = KanbanView;