'use client';

import React, { useState } from 'react';
import { DndContext, DragEndEvent, closestCenter } from '@dnd-kit/core';
import Column from './Column';
import { useBoardStore } from '../../../lib/store';

interface BoardProps {
  sprintId?: string;
}

export default function Board({ sprintId }: BoardProps) {
  const { columns, moveCard } = useBoardStore();

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    moveCard(String(active.id), String(over.id));
  };

  const filteredColumns = sprintId
    ? columns.filter((col) => col.sprintId === sprintId)
    : columns;

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <div className="flex gap-4 h-full overflow-x-auto p-6">
        {filteredColumns.map((column) => (
          <Column key={column.id} column={column} />
        ))}
        <button className="flex-shrink-0 w-64 h-12 rounded-xl border-2 border-dashed
          border-border text-muted-foreground hover:border-primary hover:text-primary
          text-sm font-medium transition-all duration-150">
          + Add column
        </button>
      </div>
    </DndContext>
  );
}