'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { CompanyMultiSelect } from './CompanyMultiSelect';
import { useFilterOptions } from '@/hooks/useFilterOptions';
import type { RateSearchFilters } from '@/types/rate-filters';

interface RateFiltersPanelProps {
  filters: RateSearchFilters;
  onFiltersChange: (filters: RateSearchFilters) => void;
  resultsCount: number;
  onReset: () => void;
}

export function RateFiltersPanel({
  filters,
  onFiltersChange,
  resultsCount,
  onReset,
}: RateFiltersPanelProps) {
  const { companies, containerTypes, loading } = useFilterOptions();

  const update = <K extends keyof RateSearchFilters>(key: K, value: RateSearchFilters[K]) => {
    onFiltersChange({ ...filters, [key]: value });
  };

  return (
    <Card className="h-full">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
        <CardTitle className="text-lg font-semibold">Filtres</CardTitle>
        <Button variant="ghost" size="sm" onClick={onReset}>
          Réinitialiser
        </Button>
      </CardHeader>

      <CardContent className="space-y-6">
        {/* Fournisseurs */}
        <div className="space-y-2">
          <Label>Fournisseurs</Label>
          <CompanyMultiSelect
            companies={companies}
            selected={filters.companies || []}
            onChange={selected => update('companies', selected)}
            disabled={loading}
          />
        </div>

        {/* Routing direct uniquement */}
        <div className="flex items-center space-x-2">
          <Switch
            id="only-direct"
            checked={filters.onlyDirect || false}
            onCheckedChange={checked => update('onlyDirect', checked)}
          />
          <Label htmlFor="only-direct" className="cursor-pointer">
            Routing direct uniquement
          </Label>
        </div>

        {/* Exclure les routes sans DG */}
        <div className="flex items-center space-x-2">
          <Switch
            id="dg-routes"
            checked={filters.excludeNonDgRoutes || false}
            onCheckedChange={checked => update('excludeNonDgRoutes', checked)}
          />
          <Label htmlFor="dg-routes" className="cursor-pointer">
            Acceptation DG requise
          </Label>
        </div>

        {/* Prix (total estimé) */}
        <div className="space-y-2">
          <Label>Prix estimé total</Label>
          <div className="grid grid-cols-2 gap-2">
            <Input
              type="number"
              min={0}
              step={100}
              placeholder="Min"
              value={filters.minPrice || ''}
              onChange={e => update('minPrice', parseFloat(e.target.value) || undefined)}
            />
            <Input
              type="number"
              min={0}
              step={100}
              placeholder="Max"
              value={filters.maxPrice || ''}
              onChange={e => update('maxPrice', parseFloat(e.target.value) || undefined)}
            />
          </div>
        </div>

        {/* Durée de transit */}
        <div className="space-y-2">
          <Label>Transit (jours)</Label>
          <div className="grid grid-cols-2 gap-2">
            <Input
              type="number"
              min={0}
              placeholder="Min"
              value={filters.minTransitDays || ''}
              onChange={e => update('minTransitDays', parseInt(e.target.value, 10) || undefined)}
            />
            <Input
              type="number"
              min={0}
              placeholder="Max"
              value={filters.maxTransitDays || ''}
              onChange={e => update('maxTransitDays', parseInt(e.target.value, 10) || undefined)}
            />
          </div>
        </div>

        {/* Type de conteneur */}
        <div className="space-y-2">
          <Label>Type de conteneur</Label>
          <Select
            value={filters.containerTypes?.[0] || 'all'}
            onValueChange={value => update('containerTypes', value === 'all' ? undefined : [value])}
          >
            <SelectTrigger>
              <SelectValue placeholder="Tous" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Tous les types</SelectItem>
              {containerTypes.map(type => (
                <SelectItem key={type} value={type}>
                  {type}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* Date de validité */}
        <div className="space-y-2">
          <Label>Date de départ</Label>
          <Input
            type="date"
            value={filters.departureDate || ''}
            onChange={e => update('departureDate', e.target.value || undefined)}
          />
          <p className="text-xs text-muted-foreground">Filtre les tarifs valides à cette date</p>
        </div>

        {/* Résultats */}
        <div className="pt-4 border-t">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Résultats</span>
            <span className="text-2xl font-bold text-primary">{resultsCount}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
