"use client";

import { Plus } from "lucide-react";

import { DottedSeparator } from "@/components/dotted-separator";
import { useProjectId } from "@/features/projects/hooks/use-project-id";

import { Button } from "@/components/ui/button";

import { BoardCard } from "./board-card";
import { Board } from "../types";
import { useGetBoards } from "../api/use-get-boards";
import { useCreateBoardModal } from "../hooks/use-create-board-modal";

export const BoardsList = () => {
  const projectId = useProjectId();
  const { open } = useCreateBoardModal();
  const { data: boards, isLoading } = useGetBoards({ projectId });

  if (isLoading) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold">Boards</h2>
          <Button size="sm" disabled>
            <Plus className="size-4 mr-2" />
            Create Board
          </Button>
        </div>
        <DottedSeparator />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-32 bg-muted rounded-lg animate-pulse" />
          ))}
        </div>
      </div>
    );
  }

  const boardsList: Board[] = (boards?.documents as Board[]) || [];

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Boards ({boardsList.length})</h2>
        <Button size="sm" onClick={open}>
          <Plus className="size-4 mr-2" />
          Create Board
        </Button>
      </div>
      <DottedSeparator />
      
      {boardsList.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-6 text-center">
          {/* <div className="size-16 bg-muted rounded-full flex items-center justify-center mb-4">
            <Plus className="size-8 text-muted-foreground" />
          </div> */}
          <h3 className="text-lg font-medium mb-2">No boards yet</h3>
          <p className="text-sm text-muted-foreground mb-6 max-w-md">
            Create your first board to organize tasks into different workflows within this project.
          </p>
          {/* <Button onClick={open}>
            <Plus className="size-4 mr-2" />
            Create First Board
          </Button> */}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {boardsList.map((board) => (
            <BoardCard
              key={board.id}
              board={board}
              projectId={projectId}
            />
          ))}
        </div>
      )}
    </div>
  );
}; 