fintrack/components/transactions/transaction-filters.tsx

"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Search, X, Filter, Wallet } from "lucide-react";
import type { Account, Category, Folder } from "@/lib/types";

interface TransactionFiltersProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  selectedAccounts: string[];
  onAccountsChange: (accounts: string[]) => void;
  selectedCategories: string[];
  onCategoriesChange: (categories: string[]) => void;
  showReconciled: string;
  onReconciledChange: (value: string) => void;
  accounts: Account[];
  folders: Folder[];
  categories: Category[];
}

export function TransactionFilters({
  searchQuery,
  onSearchChange,
  selectedAccounts,
  onAccountsChange,
  selectedCategories,
  onCategoriesChange,
  showReconciled,
  onReconciledChange,
  accounts,
  folders,
  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>

          <AccountFilterCombobox
            accounts={accounts}
            folders={folders}
            value={selectedAccounts}
            onChange={onAccountsChange}
            className="w-[200px]"
          />

          <CategoryFilterCombobox
            categories={categories}
            value={selectedCategories}
            onChange={onCategoriesChange}
            className="w-[220px]"
          />

          <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>

        <ActiveFilters
          searchQuery={searchQuery}
          onClearSearch={() => onSearchChange("")}
          selectedAccounts={selectedAccounts}
          onRemoveAccount={(id) => {
            const newAccounts = selectedAccounts.filter((a) => a !== id);
            onAccountsChange(newAccounts.length > 0 ? newAccounts : ["all"]);
          }}
          onClearAccounts={() => onAccountsChange(["all"])}
          selectedCategories={selectedCategories}
          onRemoveCategory={(id) => {
            const newCategories = selectedCategories.filter((c) => c !== id);
            onCategoriesChange(newCategories.length > 0 ? newCategories : ["all"]);
          }}
          onClearCategories={() => onCategoriesChange(["all"])}
          showReconciled={showReconciled}
          onClearReconciled={() => onReconciledChange("all")}
          accounts={accounts}
          categories={categories}
        />
      </CardContent>
    </Card>
  );
}

function ActiveFilters({
  searchQuery,
  onClearSearch,
  selectedAccounts,
  onRemoveAccount,
  onClearAccounts,
  selectedCategories,
  onRemoveCategory,
  onClearCategories,
  showReconciled,
  onClearReconciled,
  accounts,
  categories,
}: {
  searchQuery: string;
  onClearSearch: () => void;
  selectedAccounts: string[];
  onRemoveAccount: (id: string) => void;
  onClearAccounts: () => void;
  selectedCategories: string[];
  onRemoveCategory: (id: string) => void;
  onClearCategories: () => void;
  showReconciled: string;
  onClearReconciled: () => void;
  accounts: Account[];
  categories: Category[];
}) {
  const hasSearch = searchQuery.trim() !== "";
  const hasAccounts = !selectedAccounts.includes("all");
  const hasCategories = !selectedCategories.includes("all");
  const hasReconciled = showReconciled !== "all";

  const hasActiveFilters = hasSearch || hasAccounts || hasCategories || hasReconciled;

  if (!hasActiveFilters) return null;

  const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
  const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
  const isUncategorized = selectedCategories.includes("uncategorized");

  const clearAll = () => {
    onClearSearch();
    onClearAccounts();
    onClearCategories();
    onClearReconciled();
  };

  return (
    <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border flex-wrap">
      <Filter className="h-3.5 w-3.5 text-muted-foreground" />
      
      {hasSearch && (
        <Badge variant="secondary" className="gap-1 text-xs font-normal">
          Recherche: &quot;{searchQuery}&quot;
          <button onClick={onClearSearch} className="ml-1 hover:text-foreground">
            <X className="h-3 w-3" />
          </button>
        </Badge>
      )}

      {selectedAccs.map((acc) => (
        <Badge key={acc.id} variant="secondary" className="gap-1 text-xs font-normal">
          <Wallet className="h-3 w-3" />
          {acc.name}
          <button
            onClick={() => onRemoveAccount(acc.id)}
            className="ml-1 hover:text-foreground"
          >
            <X className="h-3 w-3" />
          </button>
        </Badge>
      ))}

      {isUncategorized && (
        <Badge variant="secondary" className="gap-1 text-xs font-normal">
          Non catégorisé
          <button onClick={onClearCategories} className="ml-1 hover:text-foreground">
            <X className="h-3 w-3" />
          </button>
        </Badge>
      )}

      {selectedCats.map((cat) => (
        <Badge
          key={cat.id}
          variant="secondary"
          className="gap-1 text-xs font-normal"
          style={{
            backgroundColor: `${cat.color}15`,
            borderColor: `${cat.color}30`,
          }}
        >
          <CategoryIcon icon={cat.icon} color={cat.color} size={12} />
          {cat.name}
          <button
            onClick={() => onRemoveCategory(cat.id)}
            className="ml-1 hover:text-foreground"
          >
            <X className="h-3 w-3" />
          </button>
        </Badge>
      ))}

      {hasReconciled && (
        <Badge variant="secondary" className="gap-1 text-xs font-normal">
          {showReconciled === "reconciled" ? "Pointées" : "Non pointées"}
          <button onClick={onClearReconciled} className="ml-1 hover:text-foreground">
            <X className="h-3 w-3" />
          </button>
        </Badge>
      )}

      <button
        onClick={clearAll}
        className="text-xs text-muted-foreground hover:text-foreground ml-auto"
      >
        Effacer tout
      </button>
    </div>
  );
}