import { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ChevronDown, Plus, X } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export interface TechnicalSpecFilter {
  spec_name: string;
  spec_value?: string;
  min_value?: number;
  max_value?: number;
  operator: 'equals' | 'contains' | 'range' | 'has_spec';
}

export interface CoasterStatFilter {
  stat_name: string;
  min_value?: number;
  max_value?: number;
}

interface AdvancedRideFiltersProps {
  technicalSpecFilters: TechnicalSpecFilter[];
  coasterStatFilters: CoasterStatFilter[];
  onTechnicalSpecFiltersChange: (filters: TechnicalSpecFilter[]) => void;
  onCoasterStatFiltersChange: (filters: CoasterStatFilter[]) => void;
}

const COMMON_TECH_SPECS = [
  'Track Material',
  'Manufacturer Model',
  'Train Configuration',
  'Launch System',
  'Braking System',
  'Control System',
  'Safety System',
];

const COMMON_COASTER_STATS = [
  'Max Speed',
  'Height',
  'Drop Height',
  'Length',
  'Duration',
  'Inversions',
  'G-Force',
  'Capacity',
];

export function AdvancedRideFilters({
  technicalSpecFilters,
  coasterStatFilters,
  onTechnicalSpecFiltersChange,
  onCoasterStatFiltersChange,
}: AdvancedRideFiltersProps) {
  const [isSpecsOpen, setIsSpecsOpen] = useState(false);
  const [isStatsOpen, setIsStatsOpen] = useState(false);

  const addTechnicalSpecFilter = () => {
    onTechnicalSpecFiltersChange([
      ...technicalSpecFilters,
      { spec_name: '', operator: 'has_spec' },
    ]);
  };

  const updateTechnicalSpecFilter = (index: number, updates: Partial<TechnicalSpecFilter>) => {
    const updated = [...technicalSpecFilters];
    updated[index] = { ...updated[index], ...updates };
    onTechnicalSpecFiltersChange(updated);
  };

  const removeTechnicalSpecFilter = (index: number) => {
    onTechnicalSpecFiltersChange(technicalSpecFilters.filter((_, i) => i !== index));
  };

  const addCoasterStatFilter = () => {
    onCoasterStatFiltersChange([
      ...coasterStatFilters,
      { stat_name: '' },
    ]);
  };

  const updateCoasterStatFilter = (index: number, updates: Partial<CoasterStatFilter>) => {
    const updated = [...coasterStatFilters];
    updated[index] = { ...updated[index], ...updates };
    onCoasterStatFiltersChange(updated);
  };

  const removeCoasterStatFilter = (index: number) => {
    onCoasterStatFiltersChange(coasterStatFilters.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-4">
      {/* Technical Specifications Filters */}
      <Collapsible open={isSpecsOpen} onOpenChange={setIsSpecsOpen}>
        <CollapsibleTrigger asChild>
          <div className="flex items-center justify-between cursor-pointer p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors">
            <div className="flex items-center gap-2">
              <h4 className="font-semibold">Technical Specifications</h4>
              {technicalSpecFilters.length > 0 && (
                <Badge variant="secondary">{technicalSpecFilters.length}</Badge>
              )}
            </div>
            <ChevronDown className={`w-4 h-4 transition-transform ${isSpecsOpen ? 'rotate-180' : ''}`} />
          </div>
        </CollapsibleTrigger>
        
        <CollapsibleContent className="space-y-3 pt-3">
          {technicalSpecFilters.map((filter, index) => (
            <div key={index} className="p-3 border rounded-lg space-y-3">
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div className="space-y-2">
                    <Label>Specification Name</Label>
                    <Select
                      value={filter.spec_name}
                      onValueChange={(value) => updateTechnicalSpecFilter(index, { spec_name: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select specification" />
                      </SelectTrigger>
                      <SelectContent>
                        {COMMON_TECH_SPECS.map((spec) => (
                          <SelectItem key={spec} value={spec}>
                            {spec}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Filter Type</Label>
                    <Select
                      value={filter.operator}
                      onValueChange={(value: any) => updateTechnicalSpecFilter(index, { operator: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="has_spec">Has Specification</SelectItem>
                        <SelectItem value="equals">Equals Value</SelectItem>
                        <SelectItem value="contains">Contains Text</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => removeTechnicalSpecFilter(index)}
                >
                  <X className="w-4 h-4" />
                </Button>
              </div>

              {(filter.operator === 'equals' || filter.operator === 'contains') && (
                <div className="space-y-2">
                  <Label>Value</Label>
                  <Input
                    value={filter.spec_value || ''}
                    onChange={(e) => updateTechnicalSpecFilter(index, { spec_value: e.target.value })}
                    placeholder="Enter value to match"
                  />
                </div>
              )}
            </div>
          ))}

          <Button
            variant="outline"
            size="sm"
            onClick={addTechnicalSpecFilter}
            className="w-full"
          >
            <Plus className="w-4 h-4 mr-2" />
            Add Technical Spec Filter
          </Button>
        </CollapsibleContent>
      </Collapsible>

      {/* Coaster Statistics Filters */}
      <Collapsible open={isStatsOpen} onOpenChange={setIsStatsOpen}>
        <CollapsibleTrigger asChild>
          <div className="flex items-center justify-between cursor-pointer p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors">
            <div className="flex items-center gap-2">
              <h4 className="font-semibold">Coaster Statistics</h4>
              {coasterStatFilters.length > 0 && (
                <Badge variant="secondary">{coasterStatFilters.length}</Badge>
              )}
            </div>
            <ChevronDown className={`w-4 h-4 transition-transform ${isStatsOpen ? 'rotate-180' : ''}`} />
          </div>
        </CollapsibleTrigger>
        
        <CollapsibleContent className="space-y-3 pt-3">
          {coasterStatFilters.map((filter, index) => (
            <div key={index} className="p-3 border rounded-lg space-y-3">
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 space-y-3">
                  <div className="space-y-2">
                    <Label>Statistic Name</Label>
                    <Select
                      value={filter.stat_name}
                      onValueChange={(value) => updateCoasterStatFilter(index, { stat_name: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select statistic" />
                      </SelectTrigger>
                      <SelectContent>
                        {COMMON_COASTER_STATS.map((stat) => (
                          <SelectItem key={stat} value={stat}>
                            {stat}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="space-y-2">
                      <Label>Min Value</Label>
                      <Input
                        type="number"
                        value={filter.min_value || ''}
                        onChange={(e) =>
                          updateCoasterStatFilter(index, {
                            min_value: e.target.value ? parseFloat(e.target.value) : undefined,
                          })
                        }
                        placeholder="Min"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label>Max Value</Label>
                      <Input
                        type="number"
                        value={filter.max_value || ''}
                        onChange={(e) =>
                          updateCoasterStatFilter(index, {
                            max_value: e.target.value ? parseFloat(e.target.value) : undefined,
                          })
                        }
                        placeholder="Max"
                      />
                    </div>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => removeCoasterStatFilter(index)}
                >
                  <X className="w-4 h-4" />
                </Button>
              </div>
            </div>
          ))}

          <Button
            variant="outline"
            size="sm"
            onClick={addCoasterStatFilter}
            className="w-full"
          >
            <Plus className="w-4 h-4 mr-2" />
            Add Coaster Stat Filter
          </Button>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}