'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import {
  Bell,
  Shield,
  Download,
  Key,
  User,
  Mail,
  Smartphone,
  Globe,
  Moon,
  Sun,
  Check
} from 'lucide-react'

export default function BrandSettingsPage() {
  const [notifications, setNotifications] = useState({
    email: true,
    push: true,
    reviewComplete: true,
    newSubmission: true,
    riskAlert: true,
  })

  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('dark')

  const handleSave = () => {
    alert('设置已保存')
  }

  return (
    <div className="space-y-6 max-w-4xl">
      {/* 页面标题 */}
      <div>
        <h1 className="text-2xl font-bold text-text-primary">系统设置</h1>
        <p className="text-sm text-text-secondary mt-1">管理账户和系统偏好设置</p>
      </div>

      {/* 通知设置 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bell size={18} className="text-accent-indigo" />
            通知设置
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between py-3 border-b border-border-subtle">
            <div>
              <p className="font-medium text-text-primary">邮件通知</p>
              <p className="text-sm text-text-secondary">接收重要事件的邮件提醒</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={notifications.email}
                onChange={(e) => setNotifications({ ...notifications, email: e.target.checked })}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-bg-elevated peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent-indigo rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-indigo"></div>
            </label>
          </div>

          <div className="flex items-center justify-between py-3 border-b border-border-subtle">
            <div>
              <p className="font-medium text-text-primary">推送通知</p>
              <p className="text-sm text-text-secondary">浏览器推送通知</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={notifications.push}
                onChange={(e) => setNotifications({ ...notifications, push: e.target.checked })}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-bg-elevated peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-accent-indigo rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-indigo"></div>
            </label>
          </div>

          <div className="pt-2">
            <p className="text-sm font-medium text-text-primary mb-3">通知类型</p>
            <div className="space-y-3">
              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={notifications.reviewComplete}
                  onChange={(e) => setNotifications({ ...notifications, reviewComplete: e.target.checked })}
                  className="w-4 h-4 accent-accent-indigo"
                />
                <span className="text-text-secondary">审核完成通知</span>
              </label>
              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={notifications.newSubmission}
                  onChange={(e) => setNotifications({ ...notifications, newSubmission: e.target.checked })}
                  className="w-4 h-4 accent-accent-indigo"
                />
                <span className="text-text-secondary">新提交通知</span>
              </label>
              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={notifications.riskAlert}
                  onChange={(e) => setNotifications({ ...notifications, riskAlert: e.target.checked })}
                  className="w-4 h-4 accent-accent-indigo"
                />
                <span className="text-text-secondary">风险预警通知</span>
              </label>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 外观设置 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe size={18} className="text-purple-400" />
            外观设置
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-text-secondary mb-4">选择界面主题</p>
          <div className="flex gap-3">
            <button
              type="button"
              onClick={() => setTheme('light')}
              className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
                theme === 'light' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
              }`}
            >
              <Sun size={20} className="text-yellow-400" />
              <span className="text-text-primary">浅色</span>
              {theme === 'light' && <Check size={16} className="text-accent-indigo ml-2" />}
            </button>
            <button
              type="button"
              onClick={() => setTheme('dark')}
              className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
                theme === 'dark' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
              }`}
            >
              <Moon size={20} className="text-accent-indigo" />
              <span className="text-text-primary">深色</span>
              {theme === 'dark' && <Check size={16} className="text-accent-indigo ml-2" />}
            </button>
            <button
              type="button"
              onClick={() => setTheme('system')}
              className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 transition-colors ${
                theme === 'system' ? 'border-accent-indigo bg-accent-indigo/10' : 'border-border-subtle hover:border-accent-indigo/50'
              }`}
            >
              <Globe size={20} className="text-text-secondary" />
              <span className="text-text-primary">跟随系统</span>
              {theme === 'system' && <Check size={16} className="text-accent-indigo ml-2" />}
            </button>
          </div>
        </CardContent>
      </Card>

      {/* 账户安全 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield size={18} className="text-accent-green" />
            账户安全
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between py-3 border-b border-border-subtle">
            <div className="flex items-center gap-3">
              <Key size={20} className="text-text-tertiary" />
              <div>
                <p className="font-medium text-text-primary">修改密码</p>
                <p className="text-sm text-text-secondary">定期更换密码以保护账户安全</p>
              </div>
            </div>
            <Button variant="secondary" size="sm">修改</Button>
          </div>

          <div className="flex items-center justify-between py-3 border-b border-border-subtle">
            <div className="flex items-center gap-3">
              <Smartphone size={20} className="text-text-tertiary" />
              <div>
                <p className="font-medium text-text-primary">双因素认证</p>
                <p className="text-sm text-text-secondary">启用后需要手机验证码登录</p>
              </div>
            </div>
            <Button variant="secondary" size="sm">启用</Button>
          </div>

          <div className="flex items-center justify-between py-3">
            <div className="flex items-center gap-3">
              <Mail size={20} className="text-text-tertiary" />
              <div>
                <p className="font-medium text-text-primary">绑定邮箱</p>
                <p className="text-sm text-text-secondary">brand@example.com</p>
              </div>
            </div>
            <Button variant="secondary" size="sm">修改</Button>
          </div>
        </CardContent>
      </Card>

      {/* 数据导出 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Download size={18} className="text-orange-400" />
            数据导出
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-text-secondary">导出您的审核数据和报告</p>
          <div className="flex gap-3">
            <Button variant="secondary">
              <Download size={16} />
              导出审核记录
            </Button>
            <Button variant="secondary">
              <Download size={16} />
              导出统计报告
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 保存按钮 */}
      <div className="flex justify-end pt-4">
        <Button onClick={handleSave}>
          保存设置
        </Button>
      </div>
    </div>
  )
}