"use client";

import type React from "react";
import { redirect } from "next/navigation";
import { AdminSidebar } from "@/components/layout/admin-sidebar";
import { HeaderProfileMenu } from "@/components/layout/header-profile-menu";
import { LanguageSwitcher } from "@/components/language-switcher";
import { useAuth } from "@/lib/auth-context";
import { formatToday as formatCurrentToday } from "@/lib/format-today";
import { useLanguage } from "@/lib/i18n";
import { Button } from "@/components/ui/button";
import { Bell } from "lucide-react";

function formatToday(language: "en" | "hi") {
  const today = new Date();

  if (language === "hi") {
    const formattedDate = new Intl.DateTimeFormat("hi-IN", {
      weekday: "long",
      day: "2-digit",
      month: "long",
      year: "numeric",
    }).format(today);

    return `आज ${formattedDate} है`;
  }

  const formattedDate = new Intl.DateTimeFormat("en-GB", {
    weekday: "long",
    day: "2-digit",
    month: "long",
    year: "numeric",
  }).format(today);

  return `Today is ${formattedDate}`;
}

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { user, isAuthenticated, isLoading } = useAuth();
  const { language, t } = useLanguage();

  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center bg-[var(--theme-surface)]">
        <div className="h-10 w-10 animate-spin rounded-full border-4 border-[var(--theme-secondary)]/25 border-t-[var(--theme-primary)]" />
      </div>
    );
  }

  if (!isAuthenticated || user?.role !== "admin") {
    redirect("/auth/login");
  }

  return (
    <div className="min-h-screen bg-[var(--theme-surface)]">
      <AdminSidebar />
      <main className="flex min-h-screen flex-col pt-16 lg:ml-64 lg:pt-0">
        <header className="flex min-h-16 flex-col gap-2 border-b border-[var(--theme-border)] bg-white/95 px-4 py-2 shadow-sm backdrop-blur-xl sm:h-[65px] sm:flex-row sm:items-center sm:justify-between sm:py-0">
          <div>
            <h1 className="text-xl font-black tracking-tight text-foreground sm:text-2xl">
              {t("admin.welcomeBack")},
              <span className="text-[var(--theme-primary)] ml-1">
                {user?.name || "Admin User"}!
              </span>
            </h1>
            <p className="mt-0.5 text-sm font-medium text-muted-foreground">
              {formatCurrentToday(language)}
            </p>
          </div>

          <div className="flex items-center gap-2">
            <LanguageSwitcher />
            <Button
              variant="outline"
              size="icon"
              className="relative h-11 w-11 rounded-full border-[var(--theme-border-strong)] bg-white"
              aria-label="Notifications"
            >
              <Bell className="h-5 w-5 text-[var(--theme-primary)]" />
              <span className="absolute right-2.5 top-2.5 h-2.5 w-2.5 rounded-full border-2 border-white bg-[var(--theme-accent)]" />
            </Button>

            <HeaderProfileMenu fallbackName="Admin User" initial="A" />
          </div>
        </header>

        <div className="flex-1 px-3 py-4 sm:px-4">{children}</div>

        <footer className="border-t border-[var(--theme-border)] bg-white/80 px-4 py-3 text-center text-sm text-muted-foreground">
          &copy; {new Date().getFullYear()}
          <span className="ml-1">{t("common.copyright")}</span>
        </footer>
      </main>
    </div>
  );
}