'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>
  );
}