"use client";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  MoreVertical,
  Pencil,
  Trash2,
  Folder,
  FolderOpen,
  ChevronRight,
  ChevronDown,
  GripVertical,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { Folder as FolderType, Account } from "@/lib/types";

interface DraggableFolderItemProps {
  folder: FolderType;
  accounts?: Account[];
  allFolders?: FolderType[];
  level: number;
  isExpanded: boolean;
  onToggleExpand: () => void;
  onEdit: (folder: FolderType) => void;
  onDelete: (folderId: string) => void;
  onEditAccount?: (account: Account) => void;
  formatCurrency: (amount: number) => string;
  folderAccounts: Account[];
  childFolders: FolderType[];
  folderTotal: number;
}

export function DraggableFolderItem({
  folder,
  level,
  isExpanded,
  onToggleExpand,
  onEdit,
  onDelete,
  formatCurrency,
  folderAccounts,
  childFolders,
  folderTotal,
}: DraggableFolderItemProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: `folder-${folder.id}`,
    data: {
      type: "folder",
      folder,
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div ref={setNodeRef} style={style}>
      <div
        className={cn(
          "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group",
          level > 0 && "ml-6",
          isDragging && "bg-muted/80",
        )}
      >
        <button
          {...attributes}
          {...listeners}
          className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
        >
          <GripVertical className="w-4 h-4 text-muted-foreground" />
        </button>
        <button
          onClick={onToggleExpand}
          className="p-1 hover:bg-muted rounded"
          disabled={folderAccounts.length === 0 && childFolders.length === 0}
        >
          {folderAccounts.length > 0 || childFolders.length > 0 ? (
            isExpanded ? (
              <ChevronDown className="w-4 h-4 text-muted-foreground" />
            ) : (
              <ChevronRight className="w-4 h-4 text-muted-foreground" />
            )
          ) : (
            <div className="w-4 h-4" />
          )}
        </button>

        <div
          className="w-6 h-6 rounded flex items-center justify-center"
          style={{ backgroundColor: `${folder.color}20` }}
        >
          {isExpanded ? (
            <FolderOpen className="w-4 h-4" style={{ color: folder.color }} />
          ) : (
            <Folder className="w-4 h-4" style={{ color: folder.color }} />
          )}
        </div>

        <span className="flex-1 font-medium text-sm">{folder.name}</span>

        {folderAccounts.length > 0 && (
          <span
            className={cn(
              "text-sm font-semibold tabular-nums",
              folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
            )}
          >
            {formatCurrency(folderTotal)}
          </span>
        )}

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 opacity-0 group-hover:opacity-100"
            >
              <MoreVertical className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => onEdit(folder)}>
              <Pencil className="w-4 h-4 mr-2" />
              Modifier
            </DropdownMenuItem>
            {folder.id !== "folder-root" && (
              <DropdownMenuItem
                onClick={() => onDelete(folder.id)}
                className="text-red-600"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Supprimer
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}