'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { Box, Layers, Grid3x3, ZoomIn, ZoomOut } from 'lucide-react';

interface ControlPanelProps {
  selectedField: string;
  selectedNutrient: 'organic' | 'nitrogen' | 'phosphorus' | 'potassium';
  viewMode: '3d' | 'slice' | 'contour';
  depthSlice: number[];
  zoomLevel: number;
  onFieldChange: (value: string) => void;
  onNutrientChange: (value: 'organic' | 'nitrogen' | 'phosphorus' | 'potassium') => void;
  onViewModeChange: (value: '3d' | 'slice' | 'contour') => void;
  onDepthSliceChange: (value: number[]) => void;
  onZoomIn: () => void;
  onZoomOut: () => void;
}

export function ControlPanel({
  selectedField,
  selectedNutrient,
  viewMode,
  depthSlice,
  zoomLevel,
  onFieldChange,
  onNutrientChange,
  onViewModeChange,
  onDepthSliceChange,
  onZoomIn,
  onZoomOut,
}: ControlPanelProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <Card className="p-4">
        <Label className="mb-2 text-sm">选择地块</Label>
        <Select value={selectedField} onValueChange={onFieldChange}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="field-1">东区1号地</SelectItem>
            <SelectItem value="field-2">西区2号地</SelectItem>
            <SelectItem value="field-3">南区3号地</SelectItem>
          </SelectContent>
        </Select>
      </Card>

      <Card className="p-4">
        <Label className="mb-2 text-sm">选择养分指标</Label>
        <Select value={selectedNutrient} onValueChange={onNutrientChange}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="organic">有机质</SelectItem>
            <SelectItem value="nitrogen">全氮</SelectItem>
            <SelectItem value="phosphorus">有效磷</SelectItem>
            <SelectItem value="potassium">速效钾</SelectItem>
          </SelectContent>
        </Select>
      </Card>

      <Card className="p-4">
        <Label className="mb-2 text-sm">可视化模式</Label>
        <div className="flex gap-1">
          <Button
            variant={viewMode === '3d' ? 'default' : 'outline'}
            size="sm"
            onClick={() => onViewModeChange('3d')}
            className="flex-1"
          >
            <Box className="w-3 h-3 mr-1" />
            3D
          </Button>
          <Button
            variant={viewMode === 'slice' ? 'default' : 'outline'}
            size="sm"
            onClick={() => onViewModeChange('slice')}
            className="flex-1"
          >
            <Layers className="w-3 h-3 mr-1" />
            切片
          </Button>
          <Button
            variant={viewMode === 'contour' ? 'default' : 'outline'}
            size="sm"
            onClick={() => onViewModeChange('contour')}
            className="flex-1"
          >
            <Grid3x3 className="w-3 h-3 mr-1" />
            等值
          </Button>
        </div>
      </Card>

      <Card className="p-4">
        <Label className="mb-2 text-sm">缩放比例</Label>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onZoomOut}
          >
            <ZoomOut className="w-4 h-4" />
          </Button>
          <span className="text-sm flex-1 text-center">{zoomLevel}%</span>
          <Button
            variant="outline"
            size="sm"
            onClick={onZoomIn}
          >
            <ZoomIn className="w-4 h-4" />
          </Button>
        </div>
      </Card>

      {viewMode === 'slice' && (
        <Card className="p-4 lg:col-span-4">
          <Label className="mb-2 text-sm">选择切片深度</Label>
          <Slider
            value={depthSlice}
            onValueChange={onDepthSliceChange}
            max={60}
            step={10}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-muted-foreground mt-2">
            <span>0cm</span>
            <span className="font-medium">{depthSlice[0]}cm</span>
            <span>60cm</span>
          </div>
        </Card>
      )}
    </div>
  );
}