'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Skeleton } from '@/components/ui/skeleton';
import { API_BASE } from '@/lib/config';

interface Stats {
  totalUsers: number;
  totalCourses: number;
  totalPrompts: number;
  totalPosts: number;
  todayOrders: number;
  revenue: number;
}

const links = [
  { href: '/admin/analytics', title: '数据分析', desc: '数据统计与趋势分析', color: 'from-violet-500 to-violet-600' },
  { href: '/admin/users', title: '用户管理', desc: '管理用户、查看分析', color: 'from-blue-500 to-blue-600' },
  { href: '/admin/courses', title: '课程管理', desc: '管理课程内容', color: 'from-green-500 to-green-600' },
  { href: '/admin/prompts', title: '提示词管理', desc: '审核提示词内容', color: 'from-purple-500 to-purple-600' },
  { href: '/admin/contents', title: '内容管理', desc: '管理文章资讯', color: 'from-orange-500 to-orange-600' },
  { href: '/admin/tools', title: '工具管理', desc: '管理AI工具库', color: 'from-cyan-500 to-cyan-600' },
  { href: '/admin/orders', title: '订单管理', desc: '查看支付订单', color: 'from-rose-500 to-rose-600' },
  { href: '/admin/enterprise', title: '企业版管理', desc: '管理组织、成员和学习报告', color: 'from-indigo-500 to-indigo-600' },
  { href: '/admin/practices', title: '练习管理', desc: '管理练习题库', color: 'from-teal-500 to-teal-600' },
  { href: '/admin/posts', title: '帖子管理', desc: '管理社区帖子', color: 'from-sky-500 to-sky-600' },
  { href: '/admin/models', title: '模型管理', desc: '管理AI模型', color: 'from-violet-500 to-violet-600' },
  { href: '/admin/comments', title: '评论审核', desc: '审核社区评论', color: 'from-pink-500 to-pink-600' },
  { href: '/admin/operations/banners', title: 'Banner管理', desc: '管理首页横幅', color: 'from-emerald-500 to-emerald-600' },
  { href: '/admin/operations/notifications', title: '推送管理', desc: '系统推送通知', color: 'from-red-500 to-red-600' },
  { href: '/admin/settings/roles', title: '角色权限', desc: '管理系统角色和权限', color: 'from-amber-500 to-amber-600' },
  { href: '/admin/settings/config', title: '系统配置', desc: '站点、AI、会员配置', color: 'from-slate-500 to-slate-600' },
];

export default function AdminDashboard() {
  const router = useRouter();
  const [stats, setStats] = useState<Stats | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => { loadStats(); }, []);

  async function loadStats() {
    try {
      const token = localStorage.getItem('adminToken');
      const res = await fetch(`${API_BASE}/admin/dashboard`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (res.ok) {
        const data = await res.json();
        setStats(data.stats || data);
      }
    } catch {}
    setLoading(false);
  }

  if (loading) return (
    <div className="space-y-4 p-6">
      <Skeleton className="h-8 w-48" />
      <Skeleton className="h-10 w-full" />
      <Skeleton className="h-10 w-full" />
      <Skeleton className="h-10 w-3/4" />
    </div>
  );

  return (
    <>
      <div className="border-b border-border bg-card px-4 py-4">
        <h1 className="text-2xl font-bold text-foreground">后台管理</h1>
        <p className="text-sm text-muted-foreground">宇之然AI平台管理系统</p>
      </div>

      <div className="p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div className="bg-card rounded-xl border border-border p-6">
            <div className="text-sm text-muted-foreground mb-1">总用户数</div>
            <div className="text-3xl font-bold text-blue-600">{stats?.totalUsers || 0}</div>
          </div>
          <div className="bg-card rounded-xl border border-border p-6">
            <div className="text-sm text-muted-foreground mb-1">课程总数</div>
            <div className="text-3xl font-bold text-green-600">{stats?.totalCourses || 0}</div>
          </div>
          <div className="bg-card rounded-xl border border-border p-6">
            <div className="text-sm text-muted-foreground mb-1">提示词总数</div>
            <div className="text-3xl font-bold text-purple-600">{stats?.totalPrompts || 0}</div>
          </div>
          <div className="bg-card rounded-xl border border-border p-6">
            <div className="text-sm text-muted-foreground mb-1">今日订单</div>
            <div className="text-3xl font-bold text-orange-600">{stats?.todayOrders || 0}</div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {links.map(link => (
            <Link key={link.href} href={link.href}
              className="bg-card rounded-xl border border-border p-6 hover:shadow-md hover:-translate-y-0.5 transition-all">
              <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${link.color} flex items-center justify-center text-white text-lg font-bold mb-3`}>
                {link.title[0]}
              </div>
              <div className="text-lg font-semibold text-foreground mb-1">{link.title}</div>
              <p className="text-sm text-muted-foreground">{link.desc}</p>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}
