"use client";

import { useEffect } from "react";
import {
  Bell,
  Building2,
  FileText,
  Flag,
  LayoutDashboard,
  LogOut,
  MessageSquare,
  Plug,
  Settings2,
  Wallet,
  Globe,
  MessagesSquare,
  CalendarCheck,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { Link, usePathname, useRouter } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { useAdminAuthStore } from "@/lib/stores/admin-auth.store";
import { Button } from "@/components/ui/button";

const nav = [
  { key: "dashboard", href: "/admin", icon: LayoutDashboard },
  { key: "plans", href: "/admin/plans", icon: Wallet },
  { key: "integrations", href: "/admin/integrations", icon: Plug },
  { key: "notifications", href: "/admin/notifications", icon: Bell },
  { key: "settings", href: "/admin/settings", icon: Settings2 },
  { key: "features", href: "/admin/features", icon: Flag },
  { key: "cafes", href: "/admin/cafes", icon: Building2 },
  { key: "tickets", href: "/admin/tickets", icon: MessageSquare },
] as const;

const websiteNav = [
  { key: "websiteBlog", href: "/admin/website/blog", icon: FileText },
  { key: "websiteComments", href: "/admin/website/comments", icon: MessagesSquare },
  { key: "websiteDemoRequests", href: "/admin/website/demo-requests", icon: CalendarCheck },
] as const;

export function AdminShell({ children }: { children: React.ReactNode }) {
  const t = useTranslations("admin.nav");
  const pathname = usePathname();
  const router = useRouter();
  const user = useAdminAuthStore((s) => s.user);
  const clearAuth = useAdminAuthStore((s) => s.clearAuth);

  useEffect(() => {
    if (!user?.accessToken) router.replace("/admin/login");
  }, [user, router]);

  return (
    <div className="flex min-h-screen bg-muted/30" dir="rtl">
      <aside className="flex w-56 shrink-0 flex-col border-s border-border bg-card">
        <div className="border-b border-border px-4 py-4">
          <p className="text-xs font-medium uppercase tracking-[0.06em] text-muted-foreground">
            Meezi
          </p>
          <p className="text-base font-semibold text-primary">{t("title")}</p>
        </div>
        <nav className="flex-1 overflow-y-auto p-3">
          <div className="space-y-1">
            {nav.map(({ key, href, icon: Icon }) => {
              const active =
                href === "/admin"
                  ? pathname === "/admin"
                  : pathname === href || pathname.startsWith(`${href}/`);
              return (
                <Link
                  key={key}
                  href={href}
                  className={cn(
                    "flex items-center rounded-md px-3 py-2 text-sm transition",
                    active
                      ? "border border-primary/20 bg-[#E1F5EE] font-medium text-[#0F6E56]"
                      : "text-muted-foreground hover:border-primary/30 hover:bg-accent"
                  )}
                >
                  <Icon className="size-4 me-3 shrink-0" />
                  {t(key)}
                </Link>
              );
            })}
          </div>

          {/* Website section */}
          <div className="mt-4 border-t border-border/60 pt-4">
            <p className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60">
              <Globe className="me-1 inline h-3 w-3" />
              {t("websiteSection")}
            </p>
            <div className="space-y-1">
              {websiteNav.map(({ key, href, icon: Icon }) => {
                const active = pathname === href || pathname.startsWith(`${href}/`);
                return (
                  <Link
                    key={key}
                    href={href}
                    className={cn(
                      "flex items-center rounded-md px-3 py-2 text-sm transition",
                      active
                        ? "border border-primary/20 bg-[#E1F5EE] font-medium text-[#0F6E56]"
                        : "text-muted-foreground hover:border-primary/30 hover:bg-accent"
                    )}
                  >
                    <Icon className="size-4 me-3 shrink-0" />
                    {t(key)}
                  </Link>
                );
              })}
            </div>
          </div>
        </nav>
        <div className="border-t border-border p-3">
          <Button
            variant="ghost"
            size="sm"
            className="w-full justify-start"
            onClick={() => {
              clearAuth();
              router.replace("/admin/login");
            }}
          >
            <LogOut className="size-4 me-2" />
            {t("logout")}
          </Button>
        </div>
      </aside>
      <main className="min-w-0 flex-1 overflow-auto p-6">{children}</main>
    </div>
  );
}
