"use client";

import { Search } from "lucide-react";
import { Input } from "@/shared/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select";
import type { RegistryFilters as Filters } from "../hooks/use-registry";
import { DEFAULT_DOC_TYPE_LABELS } from "../types";

interface RegistryFiltersProps {
  filters: Filters;
  onUpdate: <K extends keyof Filters>(key: K, value: Filters[K]) => void;
}

export function RegistryFilters({ filters, onUpdate }: RegistryFiltersProps) {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <div className="relative flex-1 min-w-[200px]">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Caută după subiect, expeditor, număr..."
          value={filters.search}
          onChange={(e) => onUpdate("search", e.target.value)}
          className="pl-9"
        />
      </div>

      <Select
        value={filters.direction}
        onValueChange={(v) => onUpdate("direction", v as Filters["direction"])}
      >
        <SelectTrigger className="w-[130px]">
          <SelectValue placeholder="Direcție" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">Toate</SelectItem>
          <SelectItem value="intrat">Intrat</SelectItem>
          <SelectItem value="iesit">Ieșit</SelectItem>
        </SelectContent>
      </Select>

      <Select
        value={filters.documentType}
        onValueChange={(v) =>
          onUpdate("documentType", v as Filters["documentType"])
        }
      >
        <SelectTrigger className="w-[160px]">
          <SelectValue placeholder="Tip document" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">Toate tipurile</SelectItem>
          {Object.entries(DEFAULT_DOC_TYPE_LABELS).map(([key, label]) => (
            <SelectItem key={key} value={key}>
              {label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select
        value={filters.status}
        onValueChange={(v) => onUpdate("status", v as Filters["status"])}
      >
        <SelectTrigger className="w-[130px]">
          <SelectValue placeholder="Status" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">Toate</SelectItem>
          <SelectItem value="deschis">Deschis</SelectItem>
          <SelectItem value="inchis">Închis</SelectItem>
          <SelectItem value="reserved">Rezervat</SelectItem>
        </SelectContent>
      </Select>

      <Select
        value={filters.company}
        onValueChange={(v) => onUpdate("company", v)}
      >
        <SelectTrigger className="w-[170px]">
          <SelectValue placeholder="Companie" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">Toate companiile</SelectItem>
          <SelectItem value="beletage">Beletage</SelectItem>
          <SelectItem value="urban-switch">Urban Switch</SelectItem>
          <SelectItem value="studii-de-teren">Studii de Teren</SelectItem>
          <SelectItem value="group">Grup</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}
