"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { CategoryIcon } from "@/components/ui/category-icon";
import { CheckCircle2, Circle, Tags } from "lucide-react";
import type { Category } from "@/lib/types";

interface TransactionBulkActionsProps {
  selectedCount: number;
  categories: Category[];
  onReconcile: (reconciled: boolean) => void;
  onSetCategory: (categoryId: string | null) => void;
}

export function TransactionBulkActions({
  selectedCount,
  categories,
  onReconcile,
  onSetCategory,
}: TransactionBulkActionsProps) {
  if (selectedCount === 0) return null;

  return (
    <Card className="bg-primary/5 border-primary/20">
      <CardContent className="py-3">
        <div className="flex items-center gap-4">
          <span className="text-sm font-medium">
            {selectedCount} sélectionnée{selectedCount > 1 ? "s" : ""}
          </span>
          <Button size="sm" variant="outline" onClick={() => onReconcile(true)}>
            <CheckCircle2 className="w-4 h-4 mr-1" />
            Pointer
          </Button>
          <Button
            size="sm"
            variant="outline"
            onClick={() => onReconcile(false)}
          >
            <Circle className="w-4 h-4 mr-1" />
            Dépointer
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button size="sm" variant="outline">
                <Tags className="w-4 h-4 mr-1" />
                Catégoriser
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem onClick={() => onSetCategory(null)}>
                Aucune catégorie
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              {categories.map((cat) => (
                <DropdownMenuItem
                  key={cat.id}
                  onClick={() => onSetCategory(cat.id)}
                >
                  <CategoryIcon
                    icon={cat.icon}
                    color={cat.color}
                    size={14}
                    className="mr-2"
                  />
                  {cat.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardContent>
    </Card>
  );
}