"use client"

import Link from "next/link"
import {Card, CardContent, CardDescription, CardTitle} from "@/components/ui/card"
import {Bell, Key, Palette, UserRound} from "lucide-react"

/* 设置项 */
const settingsItems = [
  {
    title: "个人资料",
    description: "查看您的账户信息",
    icon: UserRound,
    href: "/settings/profile",
    category: "个人设置",
  },
  {
    title: "访问令牌 (AccessToken)",
    description: "管理用于 API 访问的个人 Token",
    icon: Key,
    href: "/settings/access-token",
    category: "个人设置",
  },
  {
    title: "通知设置",
    description: "设置您的通知偏好",
    icon: Bell,
    href: "/settings/notifications",
    category: "账户设置",
  },
  {
    title: "外观设置",
    description: "自定义界面主题 and 显示",
    icon: Palette,
    href: "/settings/appearance",
    category: "个人设置",
  },
]

export default function SettingsPage() {
  const groupedSettings = settingsItems.reduce((acc, item) => {
    if (!acc[item.category]) {
      acc[item.category] = []
    }
    acc[item.category].push(item)
    return acc
  }, {} as Record<string, typeof settingsItems>)

  return (
    <div className="space-y-6 py-6">
      <div className="font-semibold text-lg">设置</div>

      {Object.entries(groupedSettings).map(([category, items]) => (
        <div key={category} className="space-y-4">
          <div className="font-medium text-sm text-muted-foreground">{category}</div>
          <div className="grid grid-cols-2 gap-4">
            {items.map((item) => (
              <Link key={item.href} href={item.href}>
                <Card className="py-2 border border-dashed shadow-none hover:bg-muted/50 transition-colors cursor-pointer h-full">
                  <CardContent>
                    <div className="flex items-center gap-4">
                      <item.icon className="size-5 text-primary" />
                      <div>
                        <CardTitle className="mb-1 text-sm">{item.title}</CardTitle>
                        <CardDescription className="text-xs">
                          {item.description}
                        </CardDescription>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}