import { User, Settings, LogOut, ChevronRight, Bell, Shield, HelpCircle, Moon, Sun } from "lucide-react";
import { useTheme } from "@/components/ThemeProvider";
import { motion } from "motion/react";

export default function Profile() {
  const { theme, setTheme } = useTheme();

  return (
    <div className="space-y-6">
      <header className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">我的</h1>
      </header>

      {/* User Info Card */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900/50 p-6 shadow-sm backdrop-blur-sm transition-all"
      >
        <div className="flex items-center gap-4">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-violet-100 dark:bg-violet-500/20 text-2xl font-bold text-violet-600 dark:text-violet-400">
            张
          </div>
          <div className="flex-1">
            <h2 className="text-xl font-bold text-slate-900 dark:text-white">张三</h2>
            <p className="text-sm text-slate-500 dark:text-slate-400">高级销售 · 华东大区</p>
          </div>
          <button className="rounded-full bg-slate-50 dark:bg-slate-800 p-2 text-slate-400 dark:text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
            <Settings className="h-5 w-5" />
          </button>
        </div>

        <div className="mt-6 grid grid-cols-3 divide-x divide-slate-100 dark:divide-slate-800 border-t border-slate-50 dark:border-slate-800/50 pt-6">
          <div className="text-center">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">12</p>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">本月商机</p>
          </div>
          <div className="text-center">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">8</p>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">本月拓展</p>
          </div>
          <div className="text-center">
            <p className="text-2xl font-bold text-slate-900 dark:text-white">95</p>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">平均分</p>
          </div>
        </div>
      </motion.div>

      {/* Menu List */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900/50 shadow-sm backdrop-blur-sm overflow-hidden transition-all"
      >
        <ul className="divide-y divide-slate-50 dark:divide-slate-800/50">
          <li>
            <button
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
              className="flex w-full items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors md:hidden"
            >
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800">
                  {theme === "dark" ? <Sun className="h-5 w-5 text-amber-500" /> : <Moon className="h-5 w-5 text-indigo-500" />}
                </div>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                  {theme === "dark" ? "切换亮色模式" : "切换暗色模式"}
                </span>
              </div>
              <ChevronRight className="h-5 w-5 text-slate-300 dark:text-slate-600" />
            </button>
          </li>
          {[
            { icon: User, label: "个人资料", color: "text-blue-500 dark:text-blue-400", bg: "bg-blue-50 dark:bg-blue-500/10" },
            { icon: Bell, label: "消息通知", color: "text-amber-500 dark:text-amber-400", bg: "bg-amber-50 dark:bg-amber-500/10" },
            { icon: Shield, label: "账号安全", color: "text-emerald-500 dark:text-emerald-400", bg: "bg-emerald-50 dark:bg-emerald-500/10" },
            { icon: HelpCircle, label: "帮助中心", color: "text-violet-500 dark:text-violet-400", bg: "bg-violet-50 dark:bg-violet-500/10" },
          ].map((item, i) => (
            <li key={i}>
              <button className="flex w-full items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${item.bg}`}>
                    <item.icon className={`h-5 w-5 ${item.color}`} />
                  </div>
                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{item.label}</span>
                </div>
                <ChevronRight className="h-5 w-5 text-slate-300 dark:text-slate-600" />
              </button>
            </li>
          ))}
        </ul>
      </motion.div>

      {/* Logout */}
      <motion.button
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="flex w-full items-center justify-center gap-2 rounded-2xl border border-rose-100 dark:border-rose-900/50 bg-rose-50 dark:bg-rose-500/10 p-4 text-sm font-semibold text-rose-600 dark:text-rose-400 transition-all hover:bg-rose-100 dark:hover:bg-rose-500/20 active:scale-[0.98]"
      >
        <LogOut className="h-5 w-5" />
        退出登录
      </motion.button>
    </div>
  );
}