"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Save } from "lucide-react"

export default function Page() {
    const [security, setSecurity] = useState({
        twoFactor: true,
        loginAlerts: true,
        dataExport: false,
    })

    return (
        <div className="space-y-6">
            <div>
                <h2 className="text-2xl font-bold tracking-tight">安全设置</h2>
                <p className="text-muted-foreground">保护您的账户安全和隐私</p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>安全设置</CardTitle>
                    <CardDescription>保护您的账户安全</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="space-y-4">
                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label>双重认证</Label>
                                <p className="text-sm text-muted-foreground">为您的账户添加额外的安全保护</p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Badge variant={security.twoFactor ? "default" : "secondary"}>
                                    {security.twoFactor ? "已启用" : "未启用"}
                                </Badge>
                                <Switch
                                    checked={security.twoFactor}
                                    onCheckedChange={(checked) => setSecurity({ ...security, twoFactor: checked })}
                                />
                            </div>
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label>登录提醒</Label>
                                <p className="text-sm text-muted-foreground">当有新设备登录时发送通知</p>
                            </div>
                            <Switch
                                checked={security.loginAlerts}
                                onCheckedChange={(checked) => setSecurity({ ...security, loginAlerts: checked })}
                            />
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label>数据导出</Label>
                                <p className="text-sm text-muted-foreground">允许导出个人数据</p>
                            </div>
                            <Switch
                                checked={security.dataExport}
                                onCheckedChange={(checked) => setSecurity({ ...security, dataExport: checked })}
                            />
                        </div>
                    </div>

                    <div className="space-y-4 pt-4 border-t">
                        <h4 className="font-medium">活跃会话</h4>
                        <div className="space-y-3">
                            <div className="flex items-center justify-between p-3 border rounded-lg">
                                <div className="space-y-1">
                                    <p className="font-medium">当前设备</p>
                                    <p className="text-sm text-muted-foreground">Chrome on Windows • 北京市 • 刚刚活跃</p>
                                </div>
                                <Badge variant="outline">当前</Badge>
                            </div>

                            <div className="flex items-center justify-between p-3 border rounded-lg">
                                <div className="space-y-1">
                                    <p className="font-medium">iPhone</p>
                                    <p className="text-sm text-muted-foreground">Safari on iOS • 上海市 • 2小时前</p>
                                </div>
                                <Button variant="outline" size="sm">
                                    注销
                                </Button>
                            </div>
                        </div>
                    </div>

                    <Button className="gap-2">
                        <Save className="h-4 w-4" />
                        保存安全设置
                    </Button>
                </CardContent>
            </Card>

            <Card className="border-destructive/50">
                <CardHeader>
                    <CardTitle className="text-destructive">危险操作</CardTitle>
                    <CardDescription>这些操作不可逆转，请谨慎操作</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                        <div className="space-y-1">
                            <Label>删除账户</Label>
                            <p className="text-sm text-muted-foreground">永久删除您的账户和所有相关数据</p>
                        </div>
                        <Button variant="destructive" size="sm">
                            删除账户
                        </Button>
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}