<script>
  import TaskCard from "./TaskCard.svelte";

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

  const columnColors = {
    parking_lot: "bg-slate-100 dark:bg-slate-800 border-slate-300",
    in_progress: "bg-blue-50 dark:bg-blue-900/20 border-blue-300",
    done: "bg-emerald-50 dark:bg-emerald-900/20 border-emerald-300"
  };

  function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.classList.add("ring-2", "ring-primary-400");
  }

  function handleDragLeave(e) {
    e.currentTarget.classList.remove("ring-2", "ring-primary-400");
  }

  function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove("ring-2", "ring-primary-400");

    const taskId = parseInt(e.dataTransfer.getData("taskId"));
    const fromStatus = e.dataTransfer.getData("fromStatus");

    if (fromStatus !== status) {
      onDrop?.(taskId, status);
    }
  }

  function handleDragStart(e, task) {
    e.dataTransfer.setData("taskId", task.id);
    e.dataTransfer.setData("fromStatus", task.status);
    e.dataTransfer.effectAllowed = "move";
  }
</script>

<div class="flex flex-col h-full">
  <!-- Column header -->
  <div class="flex items-center justify-between mb-3 pb-2 border-b border-surface-300 dark:border-surface-600">
    <h3 class="font-semibold text-surface-900 dark:text-surface-100">
      {title}
    </h3>
    <span class="text-sm text-surface-600 dark:text-surface-400 bg-surface-200 dark:bg-surface-700 px-2 py-0.5 rounded-full">
      {tasks.length}
    </span>
  </div>

  <!-- Drop zone -->
  <div
    class="flex-1 min-h-[200px] p-2 rounded-lg border-2 border-dashed transition-all {columnColors[status] || columnColors.parking_lot}"
    ondragover={handleDragOver}
    ondragleave={handleDragLeave}
    ondrop={handleDrop}
  >
    {#if tasks.length === 0}
      <div class="flex items-center justify-center h-32 text-surface-400 dark:text-surface-500 text-sm">
        Drop tasks here
      </div>
    {:else}
      {#each tasks as task (task.id)}
        <div draggable="true" ondragstart={(e) => handleDragStart(e, task)}>
          <TaskCard
            {task}
            {agents}
            {onEdit}
            {onDelete}
            {onAssign}
          />
        </div>
      {/each}
    {/if}
  </div>
</div>
