/* Interactive Kanban demo for KittyClaw hero */
const { useState, useRef, useEffect } = React;

const COLUMNS = [
  { id: "Backlog",     color: "#6b6b75", label: "Backlog" },
  { id: "Todo",        color: "#7aa9ff", label: "Todo" },
  { id: "InProgress",  color: "#ff7a3d", label: "In Progress" },
  { id: "Review",      color: "#c79cff", label: "Review" },
];

const INITIAL_TICKETS = [
  { id: 47, title: "Wire up automation engine triggers", status: "InProgress", priority: "critical", labels: ["arch"], assignee: "claude", agent: true },
  { id: 51, title: "Stream claude CLI output to drawer", status: "InProgress", priority: "required", labels: ["feat"], assignee: "programmer", agent: true },
  { id: 38, title: "Drag-and-drop between columns",      status: "Todo",       priority: "required", labels: ["feat"], assignee: "owner",      agent: false },
  { id: 42, title: "Per-project SQLite migrations",      status: "Todo",       priority: "required", labels: ["arch"], assignee: "groomer",    agent: true },
  { id: 55, title: "@mention notifications",             status: "Backlog",    priority: "nice",     labels: ["feat"], assignee: "owner",      agent: false },
  { id: 58, title: "Markdown render: #ticket refs",      status: "Backlog",    priority: "nice",     labels: ["doc"],  assignee: "claude",     agent: true },
  { id: 61, title: "Onboarding: detect git on PATH",     status: "Backlog",    priority: "idea",     labels: ["ops"],  assignee: "qa-tester",  agent: true },
  { id: 33, title: "Auto-commit memory.md after run",    status: "Review",     priority: "required", labels: ["feat"], assignee: "committer",  agent: true },
  { id: 29, title: "Subticket progress rollup",          status: "Review",     priority: "nice",     labels: ["feat"], assignee: "owner",      agent: false },
  { id: 24, title: "Heisenbug: SSE reconnect loop",      status: "Todo",       priority: "critical", labels: ["bug"],  assignee: "qa-tester",  agent: true },
];

function initials(name) {
  if (!name) return "?";
  const p = name.split(/[-\s]/);
  return (p[0][0] + (p[1]?.[0] || "")).toUpperCase();
}

function Ticket({ ticket, onDragStart, onDragEnd, isDragging, isMoving }) {
  const lab = (l) =>
    ({ bug: "label-bug", feat: "label-feat", ops: "label-ops", doc: "label-doc", arch: "label-arch" }[l]);

  return (
    <div
      className={`ticket ${isDragging ? "dragging" : ""} ${isMoving ? "moving" : ""}`}
      draggable
      onDragStart={(e) => onDragStart(e, ticket)}
      onDragEnd={onDragEnd}
    >
      <div className={`priority-bar p-${ticket.priority}`}></div>
      <div className="ticket-meta">
        <span className="ticket-id">#{ticket.id}</span>
        <span>·</span>
        <span>{ticket.priority}</span>
      </div>
      <p className="ticket-title">{ticket.title}</p>
      <div className="ticket-foot">
        <div className="labels">
          {ticket.labels.map((l) => (
            <span key={l} className={`label-tag ${lab(l)}`}>
              {l}
            </span>
          ))}
        </div>
        <span className="assignee">
          <span className={`avatar ${ticket.agent ? "agent" : "human"}`}>
            {ticket.agent ? "✦" : initials(ticket.assignee)}
          </span>
          {ticket.assignee}
        </span>
      </div>
    </div>
  );
}

function KanbanDemo() {
  const [tickets, setTickets] = useState(INITIAL_TICKETS);
  const [draggingId, setDraggingId] = useState(null);
  const [dragOverCol, setDragOverCol] = useState(null);
  const [movingId, setMovingId] = useState(null);

  // auto-play: agent moves a ticket every few seconds, until user interacts
  const [autoplay, setAutoplay] = useState(true);
  const interactedRef = useRef(false);

  useEffect(() => {
    if (!autoplay) return;
    const order = ["Backlog", "Todo", "InProgress", "Review"];
    const tick = () => {
      if (interactedRef.current) return;
      setTickets((cur) => {
        // find an agent-owned ticket not yet in Review
        const candidates = cur.filter((t) => t.agent && t.status !== "Review");
        if (!candidates.length) return cur;
        const t = candidates[Math.floor(Math.random() * candidates.length)];
        const next = order[order.indexOf(t.status) + 1];
        if (!next) return cur;
        setMovingId(t.id);
        setTimeout(() => setMovingId(null), 900);
        return cur.map((x) => (x.id === t.id ? { ...x, status: next } : x));
      });
    };
    const int = setInterval(tick, 2400);
    return () => clearInterval(int);
  }, [autoplay]);

  const onDragStart = (e, t) => {
    interactedRef.current = true;
    setAutoplay(false);
    setDraggingId(t.id);
    e.dataTransfer.effectAllowed = "move";
    try { e.dataTransfer.setData("text/plain", String(t.id)); } catch (_) {}
  };
  const onDragEnd = () => {
    setDraggingId(null);
    setDragOverCol(null);
  };
  const onDragOver = (e, colId) => {
    e.preventDefault();
    setDragOverCol(colId);
  };
  const onDrop = (e, colId) => {
    e.preventDefault();
    if (draggingId == null) return;
    setTickets((cur) =>
      cur.map((t) => (t.id === draggingId ? { ...t, status: colId } : t))
    );
    setMovingId(draggingId);
    setTimeout(() => setMovingId(null), 700);
    setDraggingId(null);
    setDragOverCol(null);
  };

  return (
    <div className="kanban" role="region" aria-label="Kanban demo">
      <div className="kanban-header">
        <div className="kanban-title">
          <span className="kanban-dots">
            <i></i><i></i><i></i>
          </span>
          <span>kittyclaw / demo-board</span>
        </div>
        <div className="kanban-title" style={{ gap: 14 }}>
          <span style={{ color: autoplay ? "var(--green)" : "var(--ink-dim)" }}>
            {autoplay ? "● live" : "○ paused"}
          </span>
          <span style={{ color: "var(--ink-dim)" }}>{tickets.length} tickets</span>
        </div>
      </div>

      <div className="kanban-cols">
        {COLUMNS.map((col) => {
          const colTickets = tickets.filter((t) => t.status === col.id);
          const isOver = dragOverCol === col.id;
          return (
            <div
              key={col.id}
              className="kanban-col"
              style={{
                background: isOver ? "rgba(255,122,61,0.05)" : undefined,
                borderColor: isOver ? "var(--accent-line)" : undefined,
              }}
              onDragOver={(e) => onDragOver(e, col.id)}
              onDrop={(e) => onDrop(e, col.id)}
            >
              <div className="kcol-head">
                <span className="pill">
                  <span className="swatch" style={{ background: col.color }}></span>
                  {col.label}
                </span>
                <span className="kcol-count">{colTickets.length}</span>
              </div>
              {colTickets.map((t) => (
                <Ticket
                  key={t.id}
                  ticket={t}
                  onDragStart={onDragStart}
                  onDragEnd={onDragEnd}
                  isDragging={draggingId === t.id}
                  isMoving={movingId === t.id}
                />
              ))}
              {isOver && draggingId != null && <div className="drop-indicator"></div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.KanbanDemo = KanbanDemo;