'use client';

import { use } from 'react';
import Link from 'next/link';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { KanbanBoard } from '@/components/features/kanban/KanbanBoard';
import { useKanbanBoard } from '@/lib/hooks/use-kanban';

interface KanbanPageProps {
  params: Promise<{ projectId: string }>;
}

export default function KanbanPage({ params }: KanbanPageProps) {
  const { projectId } = use(params);
  const { data: board, isLoading, error } = useKanbanBoard(projectId);

  if (isLoading) {
    return (
      <div className="flex h-[50vh] items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error || !board) {
    return (
      <div className="space-y-4">
        <Link href="/projects">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div className="flex h-[50vh] items-center justify-center">
          <p className="text-sm text-muted-foreground">
            Failed to load kanban board. Please try again later.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href={`/projects/${projectId}`}>
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <h1 className="text-3xl font-bold tracking-tight">Kanban Board</h1>
      </div>

      <KanbanBoard board={board} />
    </div>
  );
}