/**
 * Rate Filters Panel Component
 *
 * Advanced filters panel for rate search
 * Includes all filter options: companies, volume, weight, price, transit, etc.
 */

'use client';

import { useState } from 'react';
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 updateFilter = <K extends keyof RateSearchFilters>(key: K, value: RateSearchFilters[K]) => {
    onFiltersChange({
      ...filters,
      [key]: value,
    });
  };

  const handleReset = () => {
    onReset();
  };

  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={handleReset}>
          Réinitialiser
        </Button>
      </CardHeader>

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

        {/* Volume CBM */}
        <div className="space-y-2">
          <Label>Volume (CBM)</Label>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <Input
                type="number"
                min={0}
                step={0.1}
                placeholder="Min"
                value={filters.minVolumeCBM || ''}
                onChange={e =>
                  updateFilter('minVolumeCBM', parseFloat(e.target.value) || undefined)
                }
              />
            </div>
            <div>
              <Input
                type="number"
                min={0}
                step={0.1}
                placeholder="Max"
                value={filters.maxVolumeCBM || ''}
                onChange={e =>
                  updateFilter('maxVolumeCBM', parseFloat(e.target.value) || undefined)
                }
              />
            </div>
          </div>
        </div>

        {/* Poids (kg) */}
        <div className="space-y-2">
          <Label>Poids (kg)</Label>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <Input
                type="number"
                min={0}
                step={100}
                placeholder="Min"
                value={filters.minWeightKG || ''}
                onChange={e =>
                  updateFilter('minWeightKG', parseInt(e.target.value, 10) || undefined)
                }
              />
            </div>
            <div>
              <Input
                type="number"
                min={0}
                step={100}
                placeholder="Max"
                value={filters.maxWeightKG || ''}
                onChange={e =>
                  updateFilter('maxWeightKG', parseInt(e.target.value, 10) || undefined)
                }
              />
            </div>
          </div>
        </div>

        {/* Palettes */}
        <div className="space-y-2">
          <Label>Nombre de palettes</Label>
          <Input
            type="number"
            min={0}
            placeholder="Ex: 10"
            value={filters.palletCount || ''}
            onChange={e => updateFilter('palletCount', parseInt(e.target.value, 10) || undefined)}
          />
          <p className="text-xs text-muted-foreground">Laisser vide pour ignorer</p>
        </div>

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

        {/* Devise */}
        <div className="space-y-2">
          <Label>Devise</Label>
          <Select
            value={filters.currency || 'all'}
            onValueChange={value =>
              updateFilter('currency', value === 'all' ? undefined : (value as 'USD' | 'EUR'))
            }
          >
            <SelectTrigger>
              <SelectValue placeholder="Toutes" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Toutes</SelectItem>
              <SelectItem value="USD">USD ($)</SelectItem>
              <SelectItem value="EUR">EUR (€)</SelectItem>
            </SelectContent>
          </Select>
        </div>

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

        {/* Type de conteneur */}
        <div className="space-y-2">
          <Label>Type de conteneur</Label>
          <Select
            value={filters.containerTypes?.[0] || 'all'}
            onValueChange={value =>
              updateFilter('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>

        {/* Prix all-in uniquement */}
        <div className="flex items-center space-x-2">
          <Switch
            id="only-all-in"
            checked={filters.onlyAllInPrices || false}
            onCheckedChange={checked => updateFilter('onlyAllInPrices', checked)}
          />
          <Label htmlFor="only-all-in" className="cursor-pointer">
            Uniquement prix tout compris (sans surcharges séparées)
          </Label>
        </div>

        {/* Date de départ */}
        <div className="space-y-2">
          <Label>Date de départ</Label>
          <Input
            type="date"
            value={filters.departureDate || ''}
            onChange={e => updateFilter('departureDate', e.target.value || undefined)}
          />
          <p className="text-xs text-muted-foreground">
            Filtrer par validité des tarifs à 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 trouvés</span>
            <span className="text-2xl font-bold text-primary">{resultsCount}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
