"use client";
import Sidebar from "./Sidebar";
import AuthGuard from "./AuthGuard";
import FcmInit from "./FcmInit";
import { useAuthStore } from "@/lib/auth/store";
import { useUnreadNotificationCount } from "@/hooks/useUnreadNotificationCount";
import Link from "next/link";

export default function DashboardLayout({
  children,
  title,
  subtitle,
}: Readonly<{
  children: React.ReactNode;
  title: string;
  subtitle?: string;
}>) {
  const authInfo = useAuthStore((s) => s.authInfo);
  const displayName = authInfo?.name ?? "مرحباً بك";
  const unreadCount = useUnreadNotificationCount();

  return (
    <AuthGuard variant="dashboard">
      <FcmInit />
      <div className="min-h-screen bg-[#13151A] flex">
        <div className="flex-1 mr-64 flex flex-col">
          <header className="h-16 border-b border-white/5 flex items-center justify-between px-8 bg-[#13151A] sticky top-0 z-40">
            <div>
              <h1 className="text-white font-bold text-xl">{title}</h1>
              {subtitle && <p className="text-gray-400 text-xs">{subtitle}</p>}
            </div>

            <div className="flex items-center gap-3">
              <Link href="/notification" className="w-9 h-9 bg-[#1E2128] rounded-xl flex items-center justify-center cursor-pointer relative hover:bg-white/5 transition-colors">
                <div className="w-9 h-9 flex items-center justify-center">
                  <i className="ri-notification-3-line text-gray-300 text-base" />
                </div>
                {unreadCount > 0 && (
                  <span className="absolute -top-1 -right-1 min-w-[16px] h-[16px] px-1 flex items-center justify-center text-[10px] font-bold text-white bg-red-500 rounded-full border border-[#13151A]">
                    {unreadCount > 99 ? "+99" : unreadCount}
                  </span>
                )}
              </Link>
              <div>
                <p className="text-gray-400 text-xs">مرحباً،</p>
                <p className="text-white font-bold text-sm">{displayName} 👋</p>
              </div>
            </div>
          </header>
          <main className="flex-1 p-8">{children}</main>
        </div>
        <Sidebar />
      </div>
    </AuthGuard>
  );
}