"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Search } from "lucide-react";
import type { Account, Category } from "@/lib/types";

interface TransactionFiltersProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  selectedAccount: string;
  onAccountChange: (account: string) => void;
  selectedCategory: string;
  onCategoryChange: (category: string) => void;
  showReconciled: string;
  onReconciledChange: (value: string) => void;
  accounts: Account[];
  categories: Category[];
}

export function TransactionFilters({
  searchQuery,
  onSearchChange,
  selectedAccount,
  onAccountChange,
  selectedCategory,
  onCategoryChange,
  showReconciled,
  onReconciledChange,
  accounts,
  categories,
}: TransactionFiltersProps) {
  return (
    <Card>
      <CardContent className="pt-4">
        <div className="flex flex-wrap gap-4">
          <div className="flex-1 min-w-[200px]">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="Rechercher..."
                value={searchQuery}
                onChange={(e) => onSearchChange(e.target.value)}
                className="pl-9"
              />
            </div>
          </div>

          <Select value={selectedAccount} onValueChange={onAccountChange}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Compte" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Tous les comptes</SelectItem>
              {accounts.map((account) => (
                <SelectItem key={account.id} value={account.id}>
                  {account.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select value={selectedCategory} onValueChange={onCategoryChange}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Catégorie" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Toutes catégories</SelectItem>
              <SelectItem value="uncategorized">Non catégorisé</SelectItem>
              {categories.map((category) => (
                <SelectItem key={category.id} value={category.id}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Select value={showReconciled} onValueChange={onReconciledChange}>
            <SelectTrigger className="w-[160px]">
              <SelectValue placeholder="Pointage" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Tout</SelectItem>
              <SelectItem value="reconciled">Pointées</SelectItem>
              <SelectItem value="not-reconciled">Non pointées</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardContent>
    </Card>
  );
}