"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { BookOpen, Users, UserCheck, DollarSign, ClipboardCheck, BarChart3, Shield } from "lucide-react";
import { useAuth } from "@/lib/stores/auth-store";
import { useRouter } from "next/navigation";

interface DashboardData {
  users: { total: number; active: number; athletes: number; coaches: number; judges: number; admins: number };
  courses: { total: number; active: number; registrations: number; completed: number };
  revenue: number;
}

export default function SuperAdminDashboard() {
  const { token, logout } = useAuth();
  const router = useRouter();
  const [data, setData] = useState<DashboardData | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!token) return;
    fetch("/api/dashboard", {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then(async (r) => {
        const body = await r.json();
        if (!r.ok) throw new Error(body.error || "خطا در دریافت اطلاعات");
        setData(body);
      })
      .catch((e) => {
        setError(e.message);
      });
  }, [token]);

  if (error) {
    return (
      <div className="text-center py-12">
        <p className="text-red-600 mb-4">{error}</p>
        <button
          onClick={() => { logout(); router.push("/auth"); }}
          className="text-sm text-[#2563EB] underline"
        >
          ورود مجدد
        </button>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-2">پنل مدیریت ارشد</h1>
      <p className="text-gray-600 mb-8">مدیریت کل سامانه مربیگری ورزشی</p>

      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8">
        {[
          { label: "کاربران", value: data?.users.total ?? "-", icon: Users, href: "/dashboard/admin/users", color: "text-blue-600 bg-blue-50" },
          { label: "دوره‌ها", value: data?.courses.total ?? "-", icon: BookOpen, href: "/dashboard/admin/courses", color: "text-green-600 bg-green-50" },
          { label: "مربیان", value: data?.users.coaches ?? "-", icon: UserCheck, href: "/dashboard/admin/coaches", color: "text-purple-600 bg-purple-50" },
          { label: "ثبت‌نام‌ها", value: data?.courses.registrations ?? "-", icon: ClipboardCheck, href: "/dashboard/admin/finance", color: "text-amber-600 bg-amber-50" },
          { label: "درآمد", value: data ? `${data.revenue.toLocaleString()}` : "-", icon: DollarSign, href: "/dashboard/admin/finance", color: "text-emerald-600 bg-emerald-50" },
          { label: "گزارشات", value: "مشاهده", icon: BarChart3, href: "/dashboard/admin/reports", color: "text-rose-600 bg-rose-50" },
        ].map((stat) => (
          <Link
            key={stat.label}
            href={stat.href}
            className="p-4 rounded-xl border bg-white hover:border-[#2563EB] transition-all"
          >
            <div className={`w-10 h-10 rounded-lg ${stat.color} flex items-center justify-center mb-3`}>
              <stat.icon className="h-5 w-5" />
            </div>
            <div className="text-lg font-bold text-gray-900">{stat.value}</div>
            <div className="text-xs text-gray-500">{stat.label}</div>
          </Link>
        ))}
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        <div className="rounded-xl border bg-white p-5">
          <h2 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <Shield className="h-5 w-5 text-[#2563EB]" />
            دسترسی سریع
          </h2>
          <div className="grid grid-cols-2 gap-2">
            {[
              { label: "کاربر جدید", href: "/dashboard/admin/users" },
              { label: "دوره جدید", href: "/dashboard/admin/courses" },
              { label: "مربی جدید", href: "/dashboard/admin/coaches" },
              { label: "رشته جدید", href: "/dashboard/admin/sports" },
            ].map((item) => (
              <Link
                key={item.label}
                href={item.href}
                className="p-3 rounded-lg bg-gray-50 text-sm text-gray-700 hover:bg-blue-50 hover:text-[#2563EB] transition-colors"
              >
                {item.label}
              </Link>
            ))}
          </div>
        </div>
        <div className="rounded-xl border bg-white p-5">
          <h2 className="font-semibold text-gray-900 mb-4">آخرین فعالیت‌ها</h2>
          <p className="text-sm text-gray-500 text-center py-8">فعالیتی ثبت نشده است</p>
        </div>
      </div>
    </div>
  );
}