'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Filter, Search, Trash2 } from 'lucide-react';
import { FilterCondition, SoilType, PlantingMode, LandTag } from './landStatisticsReducer';

interface FilterPanelProps {
  filters: FilterCondition;
  soilTypes: SoilType[];
  plantingModes: PlantingMode[];
  tags: LandTag[];
  onFilterChange: (key: keyof FilterCondition, value: any) => void;
  onToggleArrayFilter: (key: 'soilTypes' | 'plantingModes' | 'tags', value: string) => void;
  onClearFilters: () => void;
  onExecuteQuery: () => void;
}

export function FilterPanel({
  filters,
  soilTypes,
  plantingModes,
  tags,
  onFilterChange,
  onToggleArrayFilter,
  onClearFilters,
  onExecuteQuery,
}: FilterPanelProps) {
  return (
    <Card className="p-6">
      <div className="flex items-center gap-2 mb-4">
        <Filter className="w-5 h-5 text-green-600 dark:text-green-400" />
        <h3 className="text-lg font-semibold">筛选条件</h3>
      </div>

      <div className="space-y-6">
        {/* 关键词搜索 */}
        <div className="space-y-2">
          <Label>关键词搜索</Label>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              placeholder="搜索地块名称、编号或位置..."
              value={filters.keyword}
              onChange={(e) => onFilterChange('keyword', e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

        {/* 土壤类型 */}
        <div className="space-y-2">
          <Label>土壤类型</Label>
          <div className="flex flex-wrap gap-2">
            {soilTypes.map((type) => (
              <Badge
                key={type.id}
                variant={filters.soilTypes.includes(type.key) ? 'default' : 'outline'}
                className="cursor-pointer hover:opacity-80 transition-opacity"
                style={{
                  backgroundColor: filters.soilTypes.includes(type.key) ? type.color : 'transparent',
                  borderColor: type.color,
                  color: filters.soilTypes.includes(type.key) ? 'white' : type.color,
                }}
                onClick={() => onToggleArrayFilter('soilTypes', type.key)}
              >
                <div
                  className="w-2 h-2 rounded-full mr-2"
                  style={{ backgroundColor: type.color }}
                />
                {type.name}
              </Badge>
            ))}
          </div>
        </div>

        {/* 种植模式 */}
        <div className="space-y-2">
          <Label>种植模式</Label>
          <div className="flex flex-wrap gap-2">
            {plantingModes.map((mode) => (
              <Badge
                key={mode.id}
                variant={filters.plantingModes.includes(mode.key) ? 'default' : 'outline'}
                className="cursor-pointer hover:opacity-80 transition-opacity"
                style={{
                  backgroundColor: filters.plantingModes.includes(mode.key) ? '#16a34a' : 'transparent',
                  borderColor: '#16a34a',
                  color: filters.plantingModes.includes(mode.key) ? 'white' : '#16a34a',
                }}
                onClick={() => onToggleArrayFilter('plantingModes', mode.key)}
              >
                <span className="mr-1">{mode.emoji}</span>
                {mode.name}
              </Badge>
            ))}
          </div>
        </div>

        {/* 标签 */}
        <div className="space-y-2">
          <Label>标签</Label>
          <div className="flex flex-wrap gap-2">
            {tags.map((tag) => (
              <Badge
                key={tag.id}
                variant={filters.tags.includes(tag.name) ? 'default' : 'outline'}
                className="cursor-pointer hover:opacity-80 transition-opacity"
                style={{
                  backgroundColor: filters.tags.includes(tag.name) ? tag.color : 'transparent',
                  borderColor: tag.color,
                  color: filters.tags.includes(tag.name) ? 'white' : tag.color,
                }}
                onClick={() => onToggleArrayFilter('tags', tag.name)}
              >
                {tag.name}
              </Badge>
            ))}
          </div>
        </div>

        {/* 面积范围 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>最小面积（亩）</Label>
            <Input
              type="number"
              placeholder="如：50"
              value={filters.minArea}
              onChange={(e) => onFilterChange('minArea', e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label>最大面积（亩）</Label>
            <Input
              type="number"
              placeholder="如：200"
              value={filters.maxArea}
              onChange={(e) => onFilterChange('maxArea', e.target.value)}
            />
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex flex-col sm:flex-row gap-2 pt-4">
          <Button
            className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 flex-1"
            onClick={onExecuteQuery}
          >
            <Search className="w-4 h-4 mr-2" />
            执行查询
          </Button>
          <Button
            variant="outline"
            onClick={onClearFilters}
          >
            <Trash2 className="w-4 h-4 mr-2" />
            清空条件
          </Button>
        </div>
      </div>
    </Card>
  );
}