import { ArrowLeft, Search, Shield } from 'lucide-react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react';

import { Link, router, usePage } from '@inertiajs/react';

import { AdminCommandPalette } from '@/Components/admin/AdminCommandPalette';
import { AdminPageErrorBoundary } from '@/Components/admin/AdminPageErrorBoundary';
import SidebarLayout from '@/Components/sidebar/sidebar-layout';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import { getVisibleAdminGroups } from '@/config/admin-navigation';
import type { PageProps } from '@/types';

const COLLAPSED_GROUPS_KEY = 'admin_nav_collapsed_groups';

export default function AdminLayout({ children }: PropsWithChildren) {
  const { auth, features, admin_failed_job_count } = usePage<PageProps>().props;
  const [searchOpen, setSearchOpen] = useState(false);
  const [navSearch, setNavSearch] = useState('');

  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
    try {
      const stored = localStorage.getItem(COLLAPSED_GROUPS_KEY);
      return stored ? (JSON.parse(stored) as Record<string, boolean>) : {};
    } catch {
      return {};
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(COLLAPSED_GROUPS_KEY, JSON.stringify(collapsedGroups));
    } catch {
      // localStorage may be unavailable (private mode, quota exceeded)
    }
  }, [collapsedGroups]);

  const handleGroupToggle = useCallback((label: string) => {
    setCollapsedGroups((prev) => ({ ...prev, [label]: !prev[label] }));
  }, []);

  const filteredGroups = useMemo(() => {
    const groups = getVisibleAdminGroups(features, auth.user?.admin_role).map((group) => ({
      ...group,
      items: group.items.map((item) =>
        item.href === '/admin/system' && admin_failed_job_count && admin_failed_job_count > 0
          ? { ...item, badge: admin_failed_job_count }
          : item,
      ),
    }));

    if (!navSearch) return groups;

    return groups
      .map((group) => ({
        ...group,
        items: group.items.filter((item) =>
          item.label.toLowerCase().includes(navSearch.toLowerCase()),
        ),
      }))
      .filter((group) => group.items.length > 0);
  }, [features, auth.user?.admin_role, admin_failed_job_count, navSearch]);

  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      setSearchOpen((prev) => !prev);
    }
  }, []);

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [handleKeyDown]);

  useEffect(() => {
    NProgress.configure({ showSpinner: false });
    const removeStart = router.on('start', () => NProgress.start());
    const removeFinish = router.on('finish', () => NProgress.done());
    return () => {
      removeStart();
      removeFinish();
      NProgress.done();
    };
  }, []);

  return (
    <SidebarLayout
      navigationGroups={filteredGroups}
      logoHref="/admin"
      groupCollapsedState={collapsedGroups}
      onGroupToggle={handleGroupToggle}
      navTopContent={
        <Input
          type="search"
          placeholder="Filter nav…"
          value={navSearch}
          onChange={(e) => setNavSearch(e.target.value)}
          className="h-7 text-xs"
          aria-label="Filter navigation"
        />
      }
      headerExtra={
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            className="hidden md:flex items-center gap-2 text-muted-foreground"
            onClick={() => setSearchOpen(true)}
          >
            <Search className="h-3.5 w-3.5" />
            <span className="text-xs">Search...</span>
            <kbd className="pointer-events-none ml-1 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground sm:flex">
              <span className="text-xs">⌘</span>K
            </kbd>
          </Button>
          <Badge variant="outline" className="border-destructive/50 text-destructive text-xs">
            <Shield className="h-3 w-3 mr-1" />
            Admin
          </Badge>
        </div>
      }
      footerExtra={
        <Button variant="ghost" size="sm" className="w-full justify-start" asChild>
          <Link href="/dashboard">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to App
          </Link>
        </Button>
      }
    >
      <AdminPageErrorBoundary>{children}</AdminPageErrorBoundary>
      <AdminCommandPalette open={searchOpen} onOpenChange={setSearchOpen} />
    </SidebarLayout>
  );
}