'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import {
  Briefcase,
  Building2,
  ChevronDown,
  FileText,
  Gem,
  Home,
  LogOut,
  Map,
  MessageCircle,
  Package2,
  PanelLeft,
  Settings,
  Star,
  Tag,
  User,
  Users,
  Globe,
  Languages,
  AppWindow,
  Loader,
} from 'lucide-react';
import * as Collapsible from '@radix-ui/react-collapsible';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import React, { useState, useEffect } from 'react';
import { useAuth, useUser, useFirestore, useDoc, useMemoFirebase, FirebaseClientProvider } from '@/firebase';
import { signOut } from 'firebase/auth';
import { doc } from 'firebase/firestore';
import type { User as UserType } from '@/lib/types';


const adminNavItems = [
  { href: '/admin/dashboard', label: 'Dashboard', icon: Home },
  { href: '/admin/businesses', label: 'Businesses', icon: Briefcase },
  { href: '/admin/users', label: 'Users', icon: Users },
  { href: '/admin/reviews', label: 'Reviews', icon: Star },
  { href: '/admin/messages', label: 'Messages', icon: MessageCircle },
  { 
    label: 'Subscriptions', 
    icon: Gem,
    href: '/admin/subscriptions',
    subItems: [
        { href: '/admin/plans', label: 'Plans', icon: FileText }
    ]
  },
  {
    label: 'Categories',
    icon: Tag,
    href: '/admin/categories',
    subItems: [{ href: '/admin/services', label: 'Services', icon: Building2 }],
  },
  {
    label: 'Locations',
    icon: Map,
    href: '/admin/countries',
    subItems: [{ href: '/admin/cities', label: 'Cities', icon: Building2 }],
  },
  {
    label: 'Settings',
    icon: Settings,
    subItems: [
        { href: '/admin/settings/app', label: 'App Settings', icon: AppWindow },
        { href: '/admin/settings/languages', label: 'Languages', icon: Languages }
    ]
  }
];

function AdminLayoutContent({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const auth = useAuth();
  const { user, isUserLoading } = useUser();
  const firestore = useFirestore();

  const userDocRef = useMemoFirebase(() => user ? doc(firestore, 'users', user.uid) : null, [user, firestore]);
  const { data: currentUser, isLoading: isCurrentUserLoading } = useDoc<UserType>(userDocRef);
  
  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
    Subscriptions: pathname.startsWith('/admin/subscriptions') || pathname.startsWith('/admin/plans'),
    Categories: pathname.startsWith('/admin/categories') || pathname.startsWith('/admin/services'),
    Locations: pathname.startsWith('/admin/countries') || pathname.startsWith('/admin/cities'),
    Settings: pathname.startsWith('/admin/settings'),
  });
  
  useEffect(() => {
    if (!isUserLoading && !user) {
      router.push('/admin/auth/login');
    }
  }, [isUserLoading, user, router]);

  useEffect(() => {
    if (!isCurrentUserLoading && currentUser && !currentUser.isAdmin) {
      alert('You are not authorized to view this page.');
      router.push('/home');
    }
  }, [isCurrentUserLoading, currentUser, router]);


  const handleLogout = async () => {
    await signOut(auth);
    router.push('/admin/auth/login');
  };

  const toggleSection = (section: string) => {
    setOpenSections(prev => ({...prev, [section]: !prev[section]}));
  }

  const renderNavItem = (item: any, isMobile = false) => {
    const isActive = pathname === item.href;
    const isSectionActive = item.subItems?.some((sub: any) => pathname.startsWith(sub.href)) || (item.href && pathname.startsWith(item.href));

    if (item.subItems) {
      return (
        <Collapsible.Root key={item.label} open={openSections[item.label]} onOpenChange={() => toggleSection(item.label)}>
          <Collapsible.Trigger className="w-full">
            <div
              className={cn(
                'flex items-center justify-between rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
                isSectionActive ? 'bg-muted text-primary' : ''
              )}
            >
              <div className='flex items-center gap-3'>
                <item.icon className="h-4 w-4" />
                {item.label}
              </div>
              <ChevronDown
                className={cn('h-4 w-4 transition-transform', openSections[item.label] && 'rotate-180')}
              />
            </div>
          </Collapsible.Trigger>
          <Collapsible.Content className="space-y-1 py-1 pl-8 pr-2">
            {item.href && (
              <Link
                  href={item.href}
                  className={cn(
                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-primary',
                      pathname === item.href ? 'text-primary' : ''
                  )}
              >
                  {item.label}
              </Link>
            )}
            {item.subItems.map((subItem: any) => (
              <Link
                key={subItem.label}
                href={subItem.href}
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-primary',
                  pathname.startsWith(subItem.href) ? 'text-primary' : ''
                )}
              >
                <subItem.icon className="h-4 w-4" />
                {subItem.label}
              </Link>
            ))}
          </Collapsible.Content>
        </Collapsible.Root>
      );
    }

    return (
      <Link
        key={item.label}
        href={item.href}
        className={cn(
          isMobile
            ? 'flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground'
            : 'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
          isActive ? (isMobile ? 'text-foreground' : 'bg-muted text-primary') : ''
        )}
      >
        <item.icon className={cn('h-5 w-5', !isMobile && 'h-4 w-4')} />
        {item.label}
      </Link>
    );
  };
  
  if (isUserLoading || isCurrentUserLoading) {
    return (
        <div className="flex h-screen w-full items-center justify-center">
            <Loader className="h-8 w-8 animate-spin text-primary" />
        </div>
    );
  }

  if (!user || !currentUser?.isAdmin) {
    return null; // Or a more specific "Access Denied" component
  }

  return (
    <div className="flex min-h-screen w-full bg-muted/40">
      <aside className="fixed inset-y-0 left-0 z-10 hidden w-64 flex-col border-r bg-background sm:flex">
        <nav className="flex flex-col gap-2 p-4">
          <Link
            href="/admin/dashboard"
            className="mb-4 flex items-center gap-2 text-lg font-semibold text-primary"
          >
            <Package2 className="h-6 w-6" />
            <span>BizAround Admin</span>
          </Link>
          {adminNavItems.map((item) => renderNavItem(item))}
        </nav>
      </aside>
      <div className="flex flex-1 flex-col sm:pl-64">
        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
          <Sheet>
            <SheetTrigger asChild>
              <Button size="icon" variant="outline" className="sm:hidden">
                <PanelLeft className="h-5 w-5" />
                <span className="sr-only">Toggle Menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="sm:max-w-xs">
              <nav className="grid gap-6 text-lg font-medium">
                <Link
                  href="/admin/dashboard"
                  className="group mb-4 flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
                >
                  <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
                  <span className="sr-only">BizAround Admin</span>
                </Link>
                {adminNavItems.map((item) => renderNavItem(item, true))}
              </nav>
            </SheetContent>
          </Sheet>
          <div className="relative ml-auto flex-1 md:grow-0" />
            <Button variant="outline" size="sm" asChild>
                <Link href="/home">
                  <Home className="mr-2 h-4 w-4" />
                  View Site
                </Link>
            </Button>
            <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-10 w-10 rounded-full">
                <Avatar className="h-10 w-10">
                    <AvatarImage src={currentUser.avatarUrl || "https://picsum.photos/seed/admin/100/100"} alt="Admin" />
                    <AvatarFallback>
                      {currentUser.name ? currentUser.name.charAt(0) : <User />}
                    </AvatarFallback>
                </Avatar>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{currentUser.name || 'Admin'}</p>
                    <p className="text-xs leading-none text-muted-foreground">{currentUser.email}</p>
                </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                <Settings className="mr-2 h-4 w-4" />
                <span>Settings</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout}>
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Log out</span>
                </DropdownMenuItem>
            </DropdownMenuContent>
            </DropdownMenu>
        </header>
        <main className="flex-1 items-start gap-4 p-4 sm:px-6 sm:py-4 md:gap-8">
          {children}
        </main>
      </div>
    </div>
  );
}


export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <FirebaseClientProvider>
      <AdminLayoutContent>{children}</AdminLayoutContent>
    </FirebaseClientProvider>
  );
}