import { DashboardShell } from "@/components/dashboard-shell"
import { DashboardHeader } from "@/components/dashboard-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Save, RefreshCw, Database, Shield, Bell, Sparkles } from "lucide-react"

export default function SettingsPage() {
  return (
    <DashboardShell>
      <DashboardHeader heading="系统设置" text="管理系统配置和参数">
        <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
          <Save className="mr-2 h-4 w-4" />
          保存设置
        </Button>
      </DashboardHeader>

      <Tabs defaultValue="general" className="space-y-4">
        <TabsList className="bg-white p-1 shadow-md rounded-lg border">
          <TabsTrigger
            value="general"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            基本设置
          </TabsTrigger>
          <TabsTrigger
            value="database"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            数据库设置
          </TabsTrigger>
          <TabsTrigger
            value="security"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            安全设置
          </TabsTrigger>
          <TabsTrigger
            value="notifications"
            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
          >
            通知设置
          </TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  基本设置
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>配置系统基本参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="system-name">系统名称</Label>
                  <Input
                    id="system-name"
                    defaultValue="洛天依管理系统"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="system-version">系统版本</Label>
                  <Input
                    id="system-version"
                    defaultValue="1.0.0"
                    className="border-gray-300 focus-visible:ring-pink-500"
                    disabled
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="system-description">系统描述</Label>
                <Textarea
                  id="system-description"
                  defaultValue="洛天依APP管理系统，用于管理洛天依的AI模型、服装、道具等内容。"
                  className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="language">系统语言</Label>
                  <Select defaultValue="zh-CN">
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="zh-CN">简体中文</SelectItem>
                      <SelectItem value="en-US">English</SelectItem>
                      <SelectItem value="ja-JP">日本語</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="timezone">系统时区</Label>
                  <Select defaultValue="Asia/Shanghai">
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Asia/Shanghai">中国标准时间 (UTC+8)</SelectItem>
                      <SelectItem value="America/New_York">美国东部时间 (UTC-5)</SelectItem>
                      <SelectItem value="Europe/London">格林威治标准时间 (UTC+0)</SelectItem>
                      <SelectItem value="Asia/Tokyo">日本标准时间 (UTC+9)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Switch id="maintenance-mode" />
                <Label htmlFor="maintenance-mode" className="cursor-pointer">
                  启用维护模式
                </Label>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                <RefreshCw className="mr-2 h-4 w-4" />
                恢复默认设置
              </Button>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
                <Save className="mr-2 h-4 w-4" />
                保存设置
              </Button>
            </CardFooter>
          </Card>

          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-blue-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-600">
                  系统外观
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-blue-600 to-teal-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>配置系统外观和主题</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="theme">系统主题</Label>
                  <Select defaultValue="light">
                    <SelectTrigger className="border-gray-300 focus:ring-blue-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="light">浅色主题</SelectItem>
                      <SelectItem value="dark">深色主题</SelectItem>
                      <SelectItem value="system">跟随系统</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="primary-color">主题色</Label>
                  <Select defaultValue="pink-purple">
                    <SelectTrigger className="border-gray-300 focus:ring-blue-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="pink-purple">粉紫渐变</SelectItem>
                      <SelectItem value="blue-teal">蓝青渐变</SelectItem>
                      <SelectItem value="orange-red">橙红渐变</SelectItem>
                      <SelectItem value="green-teal">绿青渐变</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Switch id="animations" defaultChecked />
                <Label htmlFor="animations" className="cursor-pointer">
                  启用界面动画
                </Label>
              </div>
            </CardContent>
            <CardFooter className="flex justify-end">
              <Button className="bg-gradient-to-r from-blue-500 to-teal-600 hover:from-blue-600 hover:to-teal-700 transition-all duration-300 shadow-md hover:shadow-lg">
                <Sparkles className="mr-2 h-4 w-4" />
                应用主题
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="database" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  数据库设置
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>配置系统数据库连接</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="db-type">数据库类型</Label>
                  <Select defaultValue="mysql">
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="mysql">MySQL</SelectItem>
                      <SelectItem value="postgresql">PostgreSQL</SelectItem>
                      <SelectItem value="mongodb">MongoDB</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="db-host">数据库主机</Label>
                  <Input
                    id="db-host"
                    defaultValue="localhost"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="db-port">数据库端口</Label>
                  <Input id="db-port" defaultValue="3306" className="border-gray-300 focus-visible:ring-pink-500" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="db-name">数据库名称</Label>
                  <Input
                    id="db-name"
                    defaultValue="luo_tianyi_app"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="db-user">数据库用户名</Label>
                  <Input id="db-user" defaultValue="admin" className="border-gray-300 focus-visible:ring-pink-500" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="db-password">数据库密码</Label>
                  <Input
                    id="db-password"
                    type="password"
                    defaultValue="********"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Switch id="db-ssl" defaultChecked />
                <Label htmlFor="db-ssl" className="cursor-pointer">
                  启用SSL连接
                </Label>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                <Database className="mr-2 h-4 w-4" />
                测试连接
              </Button>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
                <Save className="mr-2 h-4 w-4" />
                保存设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="security" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  安全设置
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>配置系统安全参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="session-timeout">会话超时时间（分钟）</Label>
                  <Input
                    id="session-timeout"
                    type="number"
                    defaultValue="30"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="max-login-attempts">最大登录尝试次数</Label>
                  <Input
                    id="max-login-attempts"
                    type="number"
                    defaultValue="5"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="password-policy">密码策略</Label>
                  <Select defaultValue="strong">
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="basic">基本（至少8个字符）</SelectItem>
                      <SelectItem value="medium">中等（至少8个字符，包含数字和字母）</SelectItem>
                      <SelectItem value="strong">强（至少8个字符，包含大小写字母、数字和特殊字符）</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="password-expiry">密码过期时间（天）</Label>
                  <Input
                    id="password-expiry"
                    type="number"
                    defaultValue="90"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Switch id="two-factor-auth" defaultChecked />
                <Label htmlFor="two-factor-auth" className="cursor-pointer">
                  启用双因素认证
                </Label>
              </div>

              <div className="flex items-center space-x-2 pt-2">
                <Switch id="ip-restriction" />
                <Label htmlFor="ip-restriction" className="cursor-pointer">
                  启用IP限制
                </Label>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                <RefreshCw className="mr-2 h-4 w-4" />
                恢复默认设置
              </Button>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
                <Shield className="mr-2 h-4 w-4" />
                保存安全设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="notifications" className="space-y-4">
          <Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
            <CardHeader>
              <CardTitle className="text-xl font-bold flex items-center">
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
                  通知设置
                </span>
                <div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
              </CardTitle>
              <CardDescription>配置系统通知参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email-server">邮件服务器</Label>
                <Input
                  id="email-server"
                  defaultValue="smtp.example.com"
                  className="border-gray-300 focus-visible:ring-pink-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email-port">邮件服务器端口</Label>
                  <Input id="email-port" defaultValue="587" className="border-gray-300 focus-visible:ring-pink-500" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email-encryption">加密方式</Label>
                  <Select defaultValue="tls">
                    <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">无</SelectItem>
                      <SelectItem value="ssl">SSL</SelectItem>
                      <SelectItem value="tls">TLS</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="email-username">邮件账户</Label>
                  <Input
                    id="email-username"
                    defaultValue="noreply@example.com"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email-password">邮件密码</Label>
                  <Input
                    id="email-password"
                    type="password"
                    defaultValue="********"
                    className="border-gray-300 focus-visible:ring-pink-500"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label>通知类型</Label>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Switch id="notify-login" defaultChecked />
                    <Label htmlFor="notify-login" className="cursor-pointer">
                      登录通知
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="notify-content" defaultChecked />
                    <Label htmlFor="notify-content" className="cursor-pointer">
                      内容更新通知
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="notify-system" defaultChecked />
                    <Label htmlFor="notify-system" className="cursor-pointer">
                      系统更新通知
                    </Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="notify-security" defaultChecked />
                    <Label htmlFor="notify-security" className="cursor-pointer">
                      安全警报通知
                    </Label>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200">
                <RefreshCw className="mr-2 h-4 w-4" />
                恢复默认设置
              </Button>
              <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
                <Bell className="mr-2 h-4 w-4" />
                保存通知设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </DashboardShell>
  )
}