'use client';

import React, { useState } from 'react';
import { useStore } from '@/lib/store';
import { useTranslation } from '@/lib/i18n';
import {
  LayoutDashboard,
  Users,
  MapPin,
  Wrench,
  UserCog,
  Truck,
  BarChart3,
  Bell,
  FileBarChart,
  Download,
  Bot,
  GitBranch,
  Settings,
  Database,
  ChevronLeft,
  ChevronRight,
  Sun,
  Moon,
  Globe,
  LogOut,
  Menu,
  Shield,
  ChevronDown,
  Plus,
  Upload,
  Building2,
  Lock,
  Map,
  ListChecks,
  X,
  Radio,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

interface SubMenuItem {
  id: string;
  label: string;
  labelKey: string;
  icon?: React.ElementType;
}

interface MenuItem {
  id: string;
  label: string;
  labelKey: string;
  icon: React.ElementType;
  children?: SubMenuItem[];
}

const menuItems: MenuItem[] = [
  { id: 'dashboard', label: 'Dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard },
  {
    id: 'tasks-group', label: 'Task Management', labelKey: 'nav.complaints', icon: ListChecks,
    children: [
      { id: 'complaints', label: 'All Tasks', labelKey: 'nav.complaints' },
      { id: 'create-complaint', label: 'Create Task', labelKey: 'actions.create', icon: Plus },
      { id: 'bulk-upload', label: 'Bulk Upload', labelKey: 'actions.upload', icon: Upload },
      { id: 'my-tasks', label: 'My Tasks', labelKey: 'nav.dashboard' },
      { id: 'task-board', label: 'Task Board', labelKey: 'nav.dashboard' },
      { id: 'user-tasks', label: 'User-wise Tasks', labelKey: 'nav.users' },
      { id: 'task-statistics', label: 'Task Statistics', labelKey: 'nav.reports' },
      { id: 'task-timeline', label: 'Task Timeline', labelKey: 'nav.notifications' },
    ],
  },
  {
    id: 'users-group', label: 'User Management', labelKey: 'nav.users', icon: Users,
    children: [
      { id: 'users', label: 'Users', labelKey: 'nav.users' },
      { id: 'engineers', label: 'Service Engineers', labelKey: 'nav.engineers', icon: Wrench },
      { id: 'hod', label: 'HOD Management', labelKey: 'nav.hod', icon: UserCog },
      { id: 'vendors', label: 'Vendors', labelKey: 'nav.vendors', icon: Truck },
    ],
  },
  {
    id: 'role-group', label: 'Role & Permission', labelKey: 'nav.users', icon: Shield,
    children: [
      { id: 'user-roles', label: 'Role & Permission', labelKey: 'nav.hod', icon: Lock },
      { id: 'user-permissions', label: 'Permissions', labelKey: 'nav.settings' },
    ],
  },
  {
    id: 'area-group', label: 'GIS Tracking', labelKey: 'nav.areas', icon: MapPin,
    children: [
      { id: 'areas', label: 'Areas', labelKey: 'nav.areas' },
      { id: 'gis-map', label: 'GIS Map', labelKey: 'nav.areas', icon: Map },
    ],
  },
  {
    id: 'settings-group', label: 'Master Settings', labelKey: 'nav.settings', icon: Settings,
    children: [
      { id: 'master-settings', label: 'Dynamic Settings', labelKey: 'nav.settings' },
      { id: 'department-mapping', label: 'Department Mapping', labelKey: 'nav.hod', icon: Building2 },
      { id: 'workload', label: 'Workload Settings', labelKey: 'nav.workload', icon: BarChart3 },
      { id: 'workflow', label: 'Approval Workflow', labelKey: 'nav.approvalWorkflow', icon: GitBranch },
    ],
  },
  {
    id: 'reports-group', label: 'Reports & Analytics', labelKey: 'nav.reports', icon: FileBarChart,
    children: [
      { id: 'reports', label: 'MIS Reports', labelKey: 'nav.reports' },
      { id: 'export', label: 'Data Export', labelKey: 'nav.export' },
    ],
  },
  { id: 'notifications', label: 'Notifications', labelKey: 'nav.notifications', icon: Bell },
  { id: 'ai', label: 'AI Agent', labelKey: 'nav.aiAgent', icon: Bot },
  { id: 'omnichannel', label: 'Omnichannel', labelKey: 'nav.notifications', icon: Radio },
  { id: 'backup', label: 'Database Backup', labelKey: 'nav.backup', icon: Database },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const currentView = useStore((s) => s.currentView);
  const setView = useStore((s) => s.setView);
  const currentUser = useStore((s) => s.currentUser);
  const language = useStore((s) => s.language);
  const setLanguage = useStore((s) => s.setLanguage);
  const sidebarCollapsed = useStore((s) => s.sidebarCollapsed);
  const toggleSidebar = useStore((s) => s.toggleSidebar);
  const theme = useStore((s) => s.theme);
  const setTheme = useStore((s) => s.setTheme);
  const logout = useStore((s) => s.logout);
  const mobileSidebarOpen = useStore((s) => s.mobileSidebarOpen);
  const setMobileSidebarOpen = useStore((s) => s.setMobileSidebarOpen);
  const { t } = useTranslation();

  const unreadCount = useStore((s) => s.notifications.filter((n: { isRead: boolean }) => !n.isRead).length);
  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({
    'tasks-group': true,
    'users-group': false,
    'role-group': false,
    'area-group': false,
    'settings-group': false,
    'reports-group': false,
  });

  const getMenuItemLabel = (item: { labelKey: string; label: string }) => {
    try {
      const keys = item.labelKey.split('.');
      let val: unknown = t as unknown;
      for (const key of keys) {
        if (val && typeof val === 'object') {
          val = (val as Record<string, unknown>)[key];
        }
      }
      return typeof val === 'string' ? val : item.label;
    } catch {
      return item.label;
    }
  };

  const toggleGroup = (groupId: string) => {
    setExpandedGroups(prev => ({ ...prev, [groupId]: !prev[groupId] }));
  };

  const handleViewChange = (viewId: string) => {
    setView(viewId);
    setMobileSidebarOpen(false);
  };

  const renderMenuItems = (isCollapsed: boolean) => (
    <nav className="space-y-0.5 px-2">
      {menuItems.map((item) => {
        const Icon = item.icon;
        const isActive = currentView === item.id || (item.children && item.children.some(c => c.id === currentView));
        const label = getMenuItemLabel(item);

        if (item.children) {
          // Parent group item
          return (
            <div key={item.id}>
              {isCollapsed ? (
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button
                      onClick={() => toggleGroup(item.id)}
                      className={cn(
                        'w-full flex items-center justify-center h-10 rounded-lg transition-all duration-200',
                        isActive
                          ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/30'
                          : 'text-emerald-300 hover:bg-emerald-900/60 hover:text-white'
                      )}
                    >
                      <Icon className="w-5 h-5" />
                    </button>
                  </TooltipTrigger>
                  <TooltipContent side="right" className="bg-popover text-popover-foreground">
                    <p>{label}</p>
                  </TooltipContent>
                </Tooltip>
              ) : (
                <button
                  onClick={() => toggleGroup(item.id)}
                  className={cn(
                    'w-full flex items-center gap-3 px-3 h-10 rounded-lg transition-all duration-200 text-left',
                    isActive
                      ? 'bg-emerald-700/50 text-emerald-100'
                      : 'text-emerald-300 hover:bg-emerald-900/60 hover:text-white'
                  )}
                >
                  <Icon className="w-5 h-5 flex-shrink-0" />
                  <span className="text-sm font-medium truncate flex-1">{label}</span>
                  <ChevronDown
                    className={cn('w-3.5 h-3.5 transition-transform', expandedGroups[item.id] && 'rotate-180')}
                  />
                </button>
              )}

              {/* Submenu items */}
              {expandedGroups[item.id] && !isCollapsed && (
                <div className="ml-4 mt-0.5 space-y-0.5 border-l border-emerald-800/50 pl-2">
                  {item.children.map((child) => {
                    const ChildIcon = child.icon;
                    const isChildActive = currentView === child.id;
                    return (
                      <button
                        key={child.id}
                        onClick={() => handleViewChange(child.id)}
                        className={cn(
                          'w-full flex items-center gap-2.5 px-2.5 h-8 rounded-md transition-all duration-200 text-left',
                          isChildActive
                            ? 'bg-emerald-600 text-white shadow-sm'
                            : 'text-emerald-400 hover:bg-emerald-900/60 hover:text-white'
                        )}
                      >
                        {ChildIcon ? <ChildIcon className="w-3.5 h-3.5 flex-shrink-0" /> : <div className="w-1.5 h-1.5 rounded-full bg-emerald-500/50 flex-shrink-0" />}
                        <span className="text-xs font-medium truncate">{child.label}</span>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          );
        }

        // Single item (no children)
        if (isCollapsed) {
          return (
            <Tooltip key={item.id}>
              <TooltipTrigger asChild>
                <button
                  onClick={() => handleViewChange(item.id)}
                  className={cn(
                    'w-full flex items-center justify-center h-10 rounded-lg transition-all duration-200',
                    isActive
                      ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/30'
                      : 'text-emerald-300 hover:bg-emerald-900/60 hover:text-white'
                  )}
                >
                  <Icon className="w-5 h-5" />
                </button>
              </TooltipTrigger>
              <TooltipContent side="right" className="bg-popover text-popover-foreground">
                <p>{label}</p>
              </TooltipContent>
            </Tooltip>
          );
        }

        return (
          <button
            key={item.id}
            onClick={() => handleViewChange(item.id)}
            className={cn(
              'w-full flex items-center gap-3 px-3 h-10 rounded-lg transition-all duration-200 text-left',
              isActive
                ? 'bg-emerald-600 text-white shadow-md shadow-emerald-600/30'
                : 'text-emerald-300 hover:bg-emerald-900/60 hover:text-white'
            )}
          >
            <Icon className="w-5 h-5 flex-shrink-0" />
            <span className="text-sm font-medium truncate">{label}</span>
            {item.id === 'notifications' && unreadCount > 0 && (
              <Badge className="ml-auto bg-red-500 text-white text-[10px] h-5 min-w-5 flex items-center justify-center px-1.5">
                {unreadCount}
              </Badge>
            )}
          </button>
        );
      })}
    </nav>
  );

  return (
    <TooltipProvider delayDuration={200}>
      <div className="flex h-screen overflow-hidden bg-background">
        {/* Desktop Sidebar */}
        <aside
          className={cn(
            'hidden lg:flex flex-col h-screen overflow-hidden bg-emerald-950 text-emerald-50 transition-all duration-300 ease-in-out relative z-30',
            sidebarCollapsed ? 'w-[68px]' : 'w-64'
          )}
        >
          {/* Sidebar Header */}
          <div className="flex-shrink-0 bg-gradient-to-br from-emerald-800 via-emerald-900 to-emerald-950 p-4 border-b border-emerald-800/50">
            <div className="flex items-center gap-3">
              <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-emerald-500 flex items-center justify-center shadow-lg">
                <Shield className="w-5 h-5 text-white" />
              </div>
              {!sidebarCollapsed && (
                <div className="overflow-hidden animate-fade-in">
                  <h1 className="text-sm font-bold text-white leading-tight truncate">Universal</h1>
                  <p className="text-[11px] text-emerald-300 leading-tight truncate">Support Desk</p>
                </div>
              )}
            </div>
          </div>

          {/* Menu Items */}
          <ScrollArea className="flex-1 min-h-0 overflow-hidden py-2">
            {renderMenuItems(sidebarCollapsed)}
          </ScrollArea>

          {/* Collapse Toggle */}
          <div className="flex-shrink-0 p-2 border-t border-emerald-800/50">
            <Button
              variant="ghost"
              size="sm"
              onClick={toggleSidebar}
              className="w-full text-emerald-300 hover:text-white hover:bg-emerald-900/60 h-9"
            >
              {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
              {!sidebarCollapsed && <span className="ml-2 text-xs">{t.common.collapse}</span>}
            </Button>
          </div>
        </aside>

        {/* Mobile Sidebar Overlay */}
        {mobileSidebarOpen && (
          <div className="lg:hidden fixed inset-0 z-50">
            <div className="fixed inset-0 bg-black/50" onClick={() => setMobileSidebarOpen(false)} />
            <aside className="fixed left-0 top-0 bottom-0 w-72 bg-emerald-950 text-emerald-50 flex flex-col z-50 animate-fade-in">
              {/* Mobile Sidebar Header */}
              <div className="flex-shrink-0 bg-gradient-to-br from-emerald-800 via-emerald-900 to-emerald-950 p-4 border-b border-emerald-800/50 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-lg bg-emerald-500 flex items-center justify-center shadow-lg">
                    <Shield className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h1 className="text-sm font-bold text-white leading-tight">Universal</h1>
                    <p className="text-[11px] text-emerald-300 leading-tight">Support Desk</p>
                  </div>
                </div>
                <Button variant="ghost" size="icon" className="text-emerald-300 hover:text-white h-8 w-8" onClick={() => setMobileSidebarOpen(false)}>
                  <X className="w-4 h-4" />
                </Button>
              </div>

              {/* Mobile Menu Items */}
              <ScrollArea className="flex-1 min-h-0 overflow-hidden py-2">
                {renderMenuItems(false)}
              </ScrollArea>

              {/* Mobile User Info */}
              <div className="flex-shrink-0 p-3 border-t border-emerald-800/50">
                <div className="flex items-center gap-3 p-2">
                  <Avatar className="h-8 w-8">
                    <AvatarFallback className="bg-emerald-600 text-white text-xs">
                      {currentUser?.name?.charAt(0)?.toUpperCase() || 'A'}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-medium text-white truncate">{currentUser?.name}</p>
                    <p className="text-[10px] text-emerald-400 truncate">{currentUser?.email}</p>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        )}

        {/* Main Area */}
        <div className="flex-1 flex flex-col min-w-0">
          {/* Top Header Bar */}
          <header className="flex-shrink-0 h-14 border-b border-border bg-card/80 backdrop-blur-sm flex items-center justify-between px-3 sm:px-4 gap-2 z-20">
            {/* Left: Mobile menu + Title */}
            <div className="flex items-center gap-2 sm:gap-3">
              <Button
                variant="ghost"
                size="icon"
                className="lg:hidden h-9 w-9"
                onClick={() => setMobileSidebarOpen(true)}
              >
                <Menu className="w-5 h-5" />
              </Button>
              <div className="hidden sm:block">
                <h2 className="text-base font-semibold text-foreground">Universal Support Desk</h2>
              </div>
            </div>

            {/* Right: Actions */}
            <div className="flex items-center gap-1 sm:gap-1.5">
              {/* Language Switcher */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setLanguage(language === 'en' ? 'bn' : 'en')}
                    className="h-9 w-9 text-muted-foreground hover:text-foreground"
                  >
                    <Globe className="w-4 h-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{language === 'en' ? 'Switch to Bengali' : 'ইংরেজিতে পরিবর্তন করুন'}</p>
                </TooltipContent>
              </Tooltip>

              <span className="text-xs font-medium text-muted-foreground bg-muted rounded px-1.5 py-0.5 uppercase hidden sm:inline">
                {language}
              </span>

              <Separator orientation="vertical" className="h-6 mx-0.5 hidden sm:block" />

              {/* Theme Toggle */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
                    className="h-9 w-9 text-muted-foreground hover:text-foreground"
                  >
                    {theme === 'light' ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{theme === 'light' ? t.settings.darkMode : t.settings.lightMode}</p>
                </TooltipContent>
              </Tooltip>

              {/* Notification Bell */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setView('notifications')}
                    className="h-9 w-9 text-muted-foreground hover:text-foreground relative"
                  >
                    <Bell className="w-4 h-4" />
                    {unreadCount > 0 && (
                      <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{t.nav.notifications} ({unreadCount})</p>
                </TooltipContent>
              </Tooltip>

              <Separator orientation="vertical" className="h-6 mx-0.5" />

              {/* User Avatar Dropdown */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="h-9 px-2 gap-2 hover:bg-accent">
                    <Avatar className="h-7 w-7">
                      <AvatarFallback className="bg-emerald-600 text-white text-xs">
                        {currentUser?.name?.charAt(0)?.toUpperCase() || 'A'}
                      </AvatarFallback>
                    </Avatar>
                    <span className="hidden md:block text-sm font-medium text-foreground truncate max-w-[120px]">
                      {currentUser?.name || 'Admin'}
                    </span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                  <div className="px-2 py-1.5">
                    <p className="text-sm font-medium">{currentUser?.name || 'Admin'}</p>
                    <p className="text-xs text-muted-foreground">{currentUser?.email || 'admin@usd.com'}</p>
                  </div>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => setView('settings')}>
                    <Settings className="w-4 h-4 mr-2" />
                    {t.nav.settings}
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={logout} className="text-red-600 focus:text-red-600">
                    <LogOut className="w-4 h-4 mr-2" />
                    {t.nav.logout}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </header>

          {/* Main Content Area */}
          <main className="flex-1 overflow-y-auto">
            <div className="p-4 md:p-6 max-w-[1600px] mx-auto">
              {children}
            </div>
          </main>
        </div>
      </div>
    </TooltipProvider>
  );
}