"use client"

import { useState } from "react"
import { Settings, Database, Shield, Bell, HelpCircle } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function SettingsPage() {
  const [notifications, setNotifications] = useState(true)
  const [dataSync, setDataSync] = useState(true)
  const [autoAnalysis, setAutoAnalysis] = useState(false)

  return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex justify-between items-center p-4">
          <h1 className="text-xl font-semibold text-blue-600">系统设置</h1>
        </div>
      </header>

      <div className="p-4 space-y-6">
        {/* 用户信息卡片 */}
        <Card className="p-6">
          <div className="flex items-center space-x-4">
            <Avatar className="w-20 h-20">
              <AvatarImage src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=400&h=400&auto=format&fit=crop" />
              <AvatarFallback>管理员</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-blue-600">系统管理员</h2>
              <p className="text-gray-500">用户数字资产中台</p>
            </div>
          </div>
        </Card>

        {/* 系统设置 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Settings className="w-5 h-5 mr-2" />
              系统设置
            </CardTitle>
            <CardDescription>配置系统运行参数</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="notifications">消息通知</Label>
                <p className="text-sm text-gray-500">接收系统通知和提醒</p>
              </div>
              <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="dataSync">数据同步</Label>
                <p className="text-sm text-gray-500">自动同步用户数据</p>
              </div>
              <Switch id="dataSync" checked={dataSync} onCheckedChange={setDataSync} />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="autoAnalysis">自动分析</Label>
                <p className="text-sm text-gray-500">启用AI自动分析功能</p>
              </div>
              <Switch id="autoAnalysis" checked={autoAnalysis} onCheckedChange={setAutoAnalysis} />
            </div>
          </CardContent>
        </Card>

        {/* 数据管理 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Database className="w-5 h-5 mr-2" />
              数据管理
            </CardTitle>
            <CardDescription>管理系统数据和存储</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Database className="w-4 h-4 mr-2" />
              数据备份
            </Button>
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Shield className="w-4 h-4 mr-2" />
              数据清理
            </Button>
          </CardContent>
        </Card>

        {/* 帮助与支持 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <HelpCircle className="w-5 h-5 mr-2" />
              帮助与支持
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <HelpCircle className="w-4 h-4 mr-2" />
              使用帮助
            </Button>
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Bell className="w-4 h-4 mr-2" />
              系统状态
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}