'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { WeatherDataState, WeatherDataAction } from './weatherDataReducer';

interface ControlPanelProps {
  state: WeatherDataState;
  dispatch: React.Dispatch<WeatherDataAction>;
}

export default function ControlPanel({ state, dispatch }: ControlPanelProps) {
  const handleFieldChange = (fieldId: string) => {
    dispatch({ type: 'SET_FILTERS', payload: { selectedField: fieldId } });
  };

  const handleTimeRangeChange = (timeRange: '24h' | '7d' | '30d') => {
    dispatch({ type: 'SET_FILTERS', payload: { timeRange } });
  };

  return (
    <Card className="p-4">
      <div className="flex items-center gap-4">
        <div className="flex-1">
          <label className="text-xs text-muted-foreground mb-2 block">选择地块</label>
          <Select value={state.filters.selectedField} onValueChange={handleFieldChange}>
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="field-1">东区1号地</SelectItem>
              <SelectItem value="field-2">西区2号地</SelectItem>
              <SelectItem value="field-3">南区3号地</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex-1">
          <label className="text-xs text-muted-foreground mb-2 block">时间范围</label>
          <div className="flex gap-2">
            <Button
              variant={state.filters.timeRange === '24h' ? 'default' : 'outline'}
              size="sm"
              onClick={() => handleTimeRangeChange('24h')}
              className="flex-1"
            >
              24小时
            </Button>
            <Button
              variant={state.filters.timeRange === '7d' ? 'default' : 'outline'}
              size="sm"
              onClick={() => handleTimeRangeChange('7d')}
              className="flex-1"
            >
              7天
            </Button>
            <Button
              variant={state.filters.timeRange === '30d' ? 'default' : 'outline'}
              size="sm"
              onClick={() => handleTimeRangeChange('30d')}
              className="flex-1"
            >
              30天
            </Button>
          </div>
        </div>

        <div className="flex items-end">
          <div className="text-xs text-muted-foreground text-right">
            <div>最后更新:</div>
            <div className="font-medium">{state.lastUpdateTime || '未更新'}</div>
          </div>
        </div>
      </div>
    </Card>
  );
}