<script>
  import KanbanColumn from "./KanbanColumn.svelte";
  import { moveTask } from "../../lib/opc-api.js";

  let { tasks = [], agents = [], onEdit, onDelete, onAssign, onTaskMoved } = $props();

  const columns = [
    { id: "parking_lot", title: "Parking Lot", status: "parking_lot" },
    { id: "in_progress", title: "In Progress", status: "in_progress" },
    { id: "done", title: "Done", status: "done" }
  ];

  function getTasksByStatus(status) {
    return tasks.filter(t => t.status === status);
  }

  async function handleDrop(taskId, newStatus) {
    try {
      await moveTask(taskId, newStatus);
      onTaskMoved?.(taskId, newStatus);
    } catch (e) {
      alert("Failed to move task: " + e.message);
    }
  }
</script>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
  {#each columns as column}
    <KanbanColumn
      title={column.title}
      status={column.status}
      tasks={getTasksByStatus(column.status)}
      {agents}
      {onEdit}
      {onDelete}
      {onAssign}
      onDrop={handleDrop}
    />
  {/each}
</div>
