"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CategoryCombobox } from "@/components/ui/category-combobox";
import { CheckCircle2, Circle } 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) {
  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);

  if (selectedCount === 0) return null;

  const handleCategorySelect = (categoryId: string | null) => {
    setSelectedCategoryId(null); // Reset après sélection
    onSetCategory(categoryId);
  };

  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>
          <CategoryCombobox
            categories={categories}
            value={selectedCategoryId}
            onChange={handleCategorySelect}
            placeholder="Catégoriser..."
            width="w-[300px]"
            buttonWidth="w-auto"
          />
        </div>
      </CardContent>
    </Card>
  );
}