import { Button, buttonVariants } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Download, Pause, Play, RotateCcw, Settings, Share2 } from "lucide-react"
import { useState } from "react"

export const Control = () => {

    const [selectedLocation, setSelectedLocation] = useState('beijing');

    const handleLocationChange = (value: string) => {
        setSelectedLocation(value);
    }

    const [selectedLayer, setSelectedLayer] = useState('precipitation');

    const handleLayerChange = (value: string) => {
        setSelectedLayer(value);
    }

    const [isPlaying, setIsPlaying] = useState(false);

    const togglePlayback = () => {
        setIsPlaying(!isPlaying);
    }

    const [animationSpeed, setAnimationSpeed] = useState([1.0]);

    const resetAnimation = () => {
        setAnimationSpeed([1.0]);
    }

    const [radarVisible, setRadarVisible] = useState(true);

    const [showLegend, setShowLegend] = useState(true);

    const [opacity, setOpacity] = useState([0.5]);


    return (

        <Card className="lg:col-span-1">
            <CardHeader>
                <div className="flex items-center gap-2">
                    <Settings className="w-5 h-5" />
                    <h3 className="font-semibold">控制面板</h3>
                </div>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    <div className="flex flex-col gap-2">
                        <Label htmlFor="location">选择地区</Label>
                        <Select value={selectedLocation} onValueChange={handleLocationChange}>
                            <SelectTrigger className="w-full">
                                <SelectValue placeholder="选择城市" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="beijing">北京</SelectItem>
                                <SelectItem value="shanghai">上海</SelectItem>
                                <SelectItem value="guangzhou">广州</SelectItem>
                                <SelectItem value="shenzhen">深圳</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>

                    {/* Layer Selection */}
                    <div className="flex flex-col gap-2">
                        <Label>雷达图层</Label>
                        <Select value={selectedLayer} onValueChange={setSelectedLayer}>
                            <SelectTrigger className="w-full">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="precipitation">降水强度</SelectItem>
                                <SelectItem value="velocity">风速</SelectItem>
                                <SelectItem value="reflectivity">反射率</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>

                    <Separator />

                    {/* Animation Controls */}
                    <div className="space-y-3">
                        <Label>动画控制</Label>
                        <div className="flex gap-2">
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={togglePlayback}
                                className="flex-1"
                            >
                                {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
                            </Button>
                            <Button
                                variant="outline"
                                size="sm"
                                onClick={resetAnimation}
                            >
                                <RotateCcw className="w-4 h-4" />
                            </Button>
                        </div>

                        <div>
                            <Label className="text-sm">播放速度: {animationSpeed[0]}x</Label>
                            <Slider
                                value={animationSpeed}
                                onValueChange={setAnimationSpeed}
                                max={3}
                                min={0.5}
                                step={0.5}
                                className="mt-2"
                            />
                        </div>
                    </div>

                    <Separator />

                    {/* Display Options */}
                    <div className="space-y-3">
                        <Label>显示选项</Label>

                        <div className="flex items-center justify-between">
                            <span className="text-sm">雷达图层</span>
                            <Switch checked={radarVisible} onCheckedChange={setRadarVisible} />
                        </div>

                        <div className="flex items-center justify-between">
                            <span className="text-sm">图例</span>
                            <Switch checked={showLegend} onCheckedChange={setShowLegend} />
                        </div>

                        <div>
                            <Label className="text-sm">透明度: {Math.round(opacity[0] * 100)}%</Label>
                            <Slider
                                value={opacity}
                                onValueChange={setOpacity}
                                max={1}
                                min={0.1}
                                step={0.1}
                                className="mt-2"
                            />
                        </div>
                    </div>

                    <Separator />

                    {/* Export Options */}
                    <div className="space-y-2">
                        <Label>导出选项</Label>
                        <div className="flex gap-2">
                            <Button variant="outline" size="sm" className="flex-1">
                                <Download className="w-4 h-4 mr-1" />
                                导出
                            </Button>
                            <Button variant="outline" size="sm" className="flex-1">
                                <Share2 className="w-4 h-4 mr-1" />
                                分享
                            </Button>
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    )
}