"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useAuth } from "@/lib/stores/auth-store";
import {
  LayoutDashboard,
  BookOpen,
  CreditCard,
  ClipboardCheck,
  Award,
  User,
  CalendarCheck,
  Trophy,
  LogOut,
  Menu,
  X,
} from "lucide-react";
const sidebarItems = [
  { label: "داشبورد", href: "/dashboard/athlete", icon: LayoutDashboard },
  { label: "دوره‌های من", href: "/dashboard/athlete/courses", icon: BookOpen },
  { label: "مسابقات", href: "/dashboard/athlete/competitions", icon: Trophy },
  { label: "پرداخت‌ها", href: "/dashboard/athlete/payments", icon: CreditCard },
  { label: "نظرسنجی‌ها", href: "/dashboard/athlete/surveys", icon: ClipboardCheck },
  { label: "گواهینامه‌ها", href: "/dashboard/athlete/certificates", icon: Award },
  { label: "حضور و غیاب", href: "/dashboard/athlete/attendance", icon: CalendarCheck },
  { label: "پروفایل", href: "/dashboard/athlete/profile", icon: User },
];

export default function AthleteLayout({ children }: { children: React.ReactNode }) {
  const { user, isAuthenticated, hydrated, logout } = useAuth();
  const router = useRouter();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    if (!hydrated) return;
    if (!isAuthenticated) {
      router.push("/auth");
    } else if (user && user.role !== "ATHLETE") {
      router.push("/auth");
    } else if (!user?.nationalId || !user?.fullName) {
      router.push("/auth/setup");
    }
  }, [hydrated, isAuthenticated, user, router]);

  if (!hydrated || !isAuthenticated || !user) return null;

  return (
    <div className="flex min-h-[calc(100vh-4rem)]">
      {/* Mobile sidebar toggle */}
      <button
        className="lg:hidden fixed bottom-4 right-4 z-50 w-12 h-12 rounded-full bg-[#2563EB] text-white shadow-lg flex items-center justify-center"
        onClick={() => setSidebarOpen(!sidebarOpen)}
      >
        {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
      </button>

      {/* Sidebar */}
      <aside
        className={`fixed lg:sticky top-16 lg:top-16 z-40 h-[calc(100vh-4rem)] w-64 bg-white border-l transform transition-transform duration-200 ease-in-out ${
          sidebarOpen ? "translate-x-0" : "translate-x-full lg:translate-x-0"
        }`}
      >
        <div className="p-4 border-b">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-[#2563EB] font-bold">
              {user.fullName?.charAt(0) || user.phone.charAt(0)}
            </div>
            <div className="overflow-hidden">
              <div className="font-medium text-sm text-gray-900 truncate">
                {user.fullName || user.phone}
              </div>
              <div className="text-xs text-gray-500">ورزشکار</div>
            </div>
          </div>
        </div>

        <nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-12rem)]">
          {sidebarItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              onClick={() => setSidebarOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 text-sm text-gray-600 rounded-lg hover:bg-blue-50 hover:text-[#2563EB] transition-colors"
            >
              <item.icon className="h-4.5 w-4.5" />
              {item.label}
            </Link>
          ))}
          <button
            onClick={() => { logout(); router.push("/"); }}
            className="flex items-center gap-3 px-3 py-2.5 text-sm text-red-600 rounded-lg hover:bg-red-50 transition-colors w-full"
          >
            <LogOut className="h-4.5 w-4.5" />
            خروج
          </button>
        </nav>
      </aside>

      {/* Main content */}
      <div className="flex-1 bg-gray-50 min-h-[calc(100vh-4rem)]">
        <div className="p-4 md:p-6 lg:p-8">{children}</div>
      </div>
    </div>
  );
}