"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 { CategoryIcon } from "@/components/ui/category-icon";
import { Search, X, Filter } from "lucide-react";
import type { Account, Category } from "@/lib/types";

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

export function TransactionFilters({
  searchQuery,
  onSearchChange,
  selectedAccount,
  onAccountChange,
  selectedCategories,
  onCategoriesChange,
  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>

          <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("")}
          selectedAccount={selectedAccount}
          onClearAccount={() => onAccountChange("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,
  selectedAccount,
  onClearAccount,
  selectedCategories,
  onRemoveCategory,
  onClearCategories,
  showReconciled,
  onClearReconciled,
  accounts,
  categories,
}: {
  searchQuery: string;
  onClearSearch: () => void;
  selectedAccount: string;
  onClearAccount: () => void;
  selectedCategories: string[];
  onRemoveCategory: (id: string) => void;
  onClearCategories: () => void;
  showReconciled: string;
  onClearReconciled: () => void;
  accounts: Account[];
  categories: Category[];
}) {
  const hasSearch = searchQuery.trim() !== "";
  const hasAccount = selectedAccount !== "all";
  const hasCategories = !selectedCategories.includes("all");
  const hasReconciled = showReconciled !== "all";

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

  if (!hasActiveFilters) return null;

  const account = accounts.find((a) => a.id === selectedAccount);
  const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
  const isUncategorized = selectedCategories.includes("uncategorized");

  const clearAll = () => {
    onClearSearch();
    onClearAccount();
    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>
      )}

      {hasAccount && account && (
        <Badge variant="secondary" className="gap-1 text-xs font-normal">
          Compte: {account.name}
          <button onClick={onClearAccount} 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>
  );
}