"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Settings, Volume2, FlashlightIcon as Brightness4, Wifi, Battery } from "lucide-react"

export default function ControlPanel() {
    const [volume, setVolume] = useState([75])
    const [brightness, setBrightness] = useState([60])
    const [temperature, setTemperature] = useState([22])
    const [serverName, setServerName] = useState("Production Server")
    const [apiKey, setApiKey] = useState("")
    const [maxConnections, setMaxConnections] = useState([100])

    return (
        <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
            <div className="mx-auto max-w-4xl space-y-6">
                {/* Header */}
                <div className="flex items-center gap-3">
                    <Settings className="h-8 w-8 text-slate-700" />
                    <div>
                        <h1 className="text-3xl font-bold text-slate-900">Control Panel</h1>
                        <p className="text-slate-600">Manage your system settings and configurations</p>
                    </div>
                </div>

                <div className="grid gap-6 md:grid-cols-2">
                    {/* System Controls */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Volume2 className="h-5 w-5" />
                                System Controls
                            </CardTitle>
                            <CardDescription>Adjust audio, display, and system preferences</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                            <div className="space-y-2">
                                <Label htmlFor="volume">Volume: {volume[0]}%</Label>
                                <Slider id="volume" value={volume} onValueChange={setVolume} max={100} step={1} className="w-full" />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="brightness">
                                    <Brightness4 className="inline h-4 w-4 mr-1" />
                                    Brightness: {brightness[0]}%
                                </Label>
                                <Slider
                                    id="brightness"
                                    value={brightness}
                                    onValueChange={setBrightness}
                                    max={100}
                                    step={1}
                                    className="w-full"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="temperature">Temperature: {temperature[0]}°C</Label>
                                <Slider
                                    id="temperature"
                                    value={temperature}
                                    onValueChange={setTemperature}
                                    min={16}
                                    max={30}
                                    step={0.5}
                                    className="w-full"
                                />
                            </div>
                        </CardContent>
                    </Card>

                    {/* Server Configuration */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Wifi className="h-5 w-5" />
                                Server Configuration
                            </CardTitle>
                            <CardDescription>Configure server settings and API access</CardDescription>
                        </CardHeader>
                        <CardContent className="space-y-6">
                            <div className="space-y-2">
                                <Label htmlFor="server-name">Server Name</Label>
                                <Input
                                    id="server-name"
                                    value={serverName}
                                    onChange={(e) => setServerName(e.target.value)}
                                    placeholder="Enter server name"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="api-key">API Key</Label>
                                <Input
                                    id="api-key"
                                    type="password"
                                    value={apiKey}
                                    onChange={(e) => setApiKey(e.target.value)}
                                    placeholder="Enter API key"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="connections">Max Connections: {maxConnections[0]}</Label>
                                <Slider
                                    id="connections"
                                    value={maxConnections}
                                    onValueChange={setMaxConnections}
                                    min={10}
                                    max={500}
                                    step={10}
                                    className="w-full"
                                />
                            </div>
                        </CardContent>
                    </Card>

                    {/* Status Dashboard */}
                    <Card className="md:col-span-2">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Battery className="h-5 w-5" />
                                System Status
                            </CardTitle>
                            <CardDescription>Current system metrics and status indicators</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="grid gap-4 md:grid-cols-4">
                                <div className="space-y-2">
                                    <Label className="text-sm font-medium">CPU Usage</Label>
                                    <div className="flex items-center gap-2">
                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
                                            <div className="bg-blue-500 h-2 rounded-full w-3/4"></div>
                                        </div>
                                        <Badge variant="secondary">75%</Badge>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <Label className="text-sm font-medium">Memory</Label>
                                    <div className="flex items-center gap-2">
                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
                                            <div className="bg-green-500 h-2 rounded-full w-1/2"></div>
                                        </div>
                                        <Badge variant="secondary">8.2GB</Badge>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <Label className="text-sm font-medium">Storage</Label>
                                    <div className="flex items-center gap-2">
                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
                                            <div className="bg-orange-500 h-2 rounded-full w-5/6"></div>
                                        </div>
                                        <Badge variant="secondary">456GB</Badge>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <Label className="text-sm font-medium">Network</Label>
                                    <div className="flex items-center gap-2">
                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
                                            <div className="bg-purple-500 h-2 rounded-full w-1/3"></div>
                                        </div>
                                        <Badge variant="outline" className="text-green-600 border-green-600">
                                            Online
                                        </Badge>
                                    </div>
                                </div>
                            </div>

                            <Separator className="my-6" />

                            <div className="flex flex-wrap gap-3">
                                <Button>Apply Settings</Button>
                                <Button variant="outline">Reset to Default</Button>
                                <Button variant="ghost">Export Config</Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}