"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useLang } from "@/context/LanguageContext";
import { PanelShell, centralNavIcons } from "@/components/PanelShell";
import { PageLoader } from "@/components/ui";
import { useApi } from "@/lib/client";
import { IconShield, IconSparkle, IconLayers, IconUpload, IconUser } from "@/components/icons";

interface Me {
  user: {
    id: number;
    name: string;
    email: string;
    role: string;
  } | null;
}

export default function CentralLayout({ children }: { children: React.ReactNode }) {
  const { t } = useLang();
  const router = useRouter();
  const { data, loading, error } = useApi<Me>("/api/auth/me");

  // Invalid/stale session (cookie already cleared by the API) → back to login
  useEffect(() => {
    if (!loading && (error || data?.user == null)) {
      router.replace("/login");
    }
  }, [loading, error, data, router]);

  if (loading) return <PageLoader text={t.common.loading} />;
  if (!data?.user) return <PageLoader text={t.common.sessionExpired} />;

  const nav: {
    href: string;
    label: string;
    icon: React.ComponentType<{ className?: string }>;
    group?: string;
  }[] = [
    // Items keep the original menu sequence; `group` only inserts a sidebar
    // section header above the first item of each run.
    { href: "/central", label: t.common.dashboard, icon: centralNavIcons.dashboard, group: t.navGroups.overview },
    { href: "/central/monitoring", label: t.common.monitoring, icon: centralNavIcons.monitoring, group: t.navGroups.overview },
    { href: "/central/flowchart", label: t.flowchartPage.navLabel, icon: IconLayers },
    { href: "/central/packages", label: t.common.packages, icon: centralNavIcons.packages, group: t.navGroups.management },
    { href: "/central/pricing", label: t.central.pricingPage.title, icon: centralNavIcons.payments, group: t.navGroups.management },
    { href: "/central/institutions", label: t.common.institutions, icon: centralNavIcons.institutions, group: t.navGroups.management },
    { href: "/central/accounts", label: t.common.accounts, icon: centralNavIcons.accounts, group: t.navGroups.management },
    { href: "/central/requests", label: t.common.requests, icon: centralNavIcons.requests, group: t.navGroups.management },
    { href: "/central/demo-requests", label: t.central.demoRequestsPage.title, icon: IconSparkle, group: t.navGroups.management },
    { href: "/central/support", label: t.common.support, icon: centralNavIcons.support, group: t.navGroups.communication },
    { href: "/central/announcements", label: t.notifications.announcementsTitle, icon: centralNavIcons.support, group: t.navGroups.communication },
    { href: "/central/payments", label: t.common.payments, icon: centralNavIcons.payments, group: t.navGroups.billingSetup },
    { href: "/central/academic", label: t.common.academicInfo, icon: centralNavIcons.academic, group: t.navGroups.billingSetup },
    { href: "/central/verify", label: t.verifyPage.navLabel, icon: IconShield, group: t.navGroups.tools },
    { href: "/central/upload-policy", label: t.central.uploadPolicyPage.title, icon: IconUpload, group: t.navGroups.tools },
    { href: "/central/profile", label: t.me.profile, icon: IconUser, group: t.navGroups.tools },
  ];

  return (
    <PanelShell
      navItems={nav}
      panelTitle={t.nav.centralPanel}
      userName={data.user.name}
      userEmail={data.user.email}
      roleLabel={t.status.SUPER_ADMIN}
      accentLabel={t.nav.centralPanel}
    >
      {children}
    </PanelShell>
  );
}