"use client";

import Link from "next/link";
import { MoreHorizontal, Trash2, Edit } from "lucide-react";

import { cn } from "@/lib/utils";
import { useConfirm } from "@/hooks/use-confirm";
import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { Board } from "../types";
import { useDeleteBoard } from "../api/use-delete-board";
import { useEditBoardModal } from "../hooks/use-edit-board-modal";

interface BoardCardProps {
  board: Board;
  projectId: string;
}

export const BoardCard = ({ board, projectId }: BoardCardProps) => {
  const workspaceId = useWorkspaceId();
  const { mutate: deleteBoard, isPending: isDeletingBoard } = useDeleteBoard();
  const { open: openEditModal } = useEditBoardModal();

  const [DeleteDialog, confirmDelete] = useConfirm(
    "Delete board",
    "This action cannot be undone. All tasks in this board will be moved to the project level.",
    "destructive"
  );

  const handleDelete = async () => {
    const ok = await confirmDelete();

    if (!ok) return;

    deleteBoard({
      param: { boardId: board.id },
    });
  };

  const handleEdit = () => {
    openEditModal(board.id);
  };

  return (
    <>
      <DeleteDialog />
      <Card className="shadow-none rounded-lg hover:opacity-75 transition">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div className="flex-1">
              <Link href={`/workspaces/${workspaceId}/projects/${projectId}/boards/${board.id}`}>
                <h3 className="text-lg font-medium truncate cursor-pointer hover:underline">
                  {board.name}
                </h3>
              </Link>
              {board.description && (
                <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                  {board.description}
                </p>
              )}
              <div className="flex items-center gap-2 mt-2">
                <span className="text-xs text-muted-foreground">
                  {(board as any).tasks?.length || 0} tasks
                </span>
              </div>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  <MoreHorizontal className="size-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem
                  onClick={handleEdit}
                  className="cursor-pointer"
                >
                  <Edit className="size-4 mr-2" />
                  Edit
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={handleDelete}
                  disabled={isDeletingBoard}
                  className="cursor-pointer text-red-600 focus:text-red-600"
                >
                  <Trash2 className="size-4 mr-2" />
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </CardContent>
      </Card>
    </>
  );
}; 