'use client';

import {
  Activity,
  Home,
  Users,
  Building2,
  ClipboardList,
  Wrench,
  FileText,
  Bell,
  BellRing,
  CreditCard,
  Settings,
  LogOut,
  Key,
  CheckCircle,
  BookOpen,
  UserCog,
  Shield,
  Layers,
  Sparkles,
  Mail,
  MailCheck,
  Share2,
  KeyRound,
  Smartphone,
  LayoutTemplate,
  UserCircle,
  Apple,
  Image,
  ImagePlus,
  Cog,
} from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { useAuthStore } from '@/store/auth';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar';
import { Button } from '@/components/ui/button';

const menuItems = [
  { title: 'Dashboard', url: '/', icon: Home },
  { title: 'Users', url: '/users', icon: Users },
  { title: 'User Profiles', url: '/user-profiles', icon: UserCircle },
  { title: 'Apple Sign In', url: '/apple-social-auth', icon: Apple },
  { title: 'Auth Tokens', url: '/auth-tokens', icon: Key },
  { title: 'Confirmation Codes', url: '/confirmation-codes', icon: Mail },
  { title: 'Password Resets', url: '/password-reset-codes', icon: KeyRound },
  { title: 'Residences', url: '/residences', icon: Building2 },
  { title: 'Share Codes', url: '/share-codes', icon: Share2 },
  { title: 'Tasks', url: '/tasks', icon: ClipboardList },
  { title: 'Completions', url: '/completions', icon: CheckCircle },
  { title: 'Completion Images', url: '/completion-images', icon: Image },
  { title: 'Contractors', url: '/contractors', icon: Wrench },
  { title: 'Documents', url: '/documents', icon: FileText },
  { title: 'Document Images', url: '/document-images', icon: ImagePlus },
  { title: 'Notifications', url: '/notifications', icon: Bell },
  { title: 'Notification Prefs', url: '/notification-prefs', icon: BellRing },
  { title: 'Onboarding Emails', url: '/onboarding-emails', icon: MailCheck },
  { title: 'Devices', url: '/devices', icon: Smartphone },
  { title: 'Subscriptions', url: '/subscriptions', icon: CreditCard },
];

const limitationsItems = [
  { title: 'Tier Limits', url: '/limitations', icon: Layers },
  { title: 'Upgrade Triggers', url: '/limitations/triggers', icon: Sparkles },
];

const settingsItems = [
  { title: 'Monitoring', url: '/monitoring', icon: Activity },
  { title: 'Automation Reference', url: '/automation-reference', icon: Cog },
  { title: 'Lookup Tables', url: '/lookups', icon: BookOpen },
  { title: 'Task Templates', url: '/task-templates', icon: LayoutTemplate },
  { title: 'Admin Users', url: '/admin-users', icon: UserCog },
  { title: 'Settings', url: '/settings', icon: Settings },
];

export function AppSidebar() {
  const router = useRouter();
  const pathname = usePathname();
  const { user, logout } = useAuthStore();

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

  return (
    <Sidebar>
      <SidebarHeader className="border-b px-6 py-4">
        <div className="flex items-center gap-2">
          <Building2 className="h-6 w-6" />
          <span className="font-semibold text-lg">honeyDue Admin</span>
        </div>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Management</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={pathname === item.url}
                  >
                    <a href={item.url}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Limitations</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {limitationsItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={pathname === item.url || (item.url !== '/limitations' && pathname.startsWith(item.url))}
                  >
                    <a href={item.url}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>System</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {settingsItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={pathname === item.url}
                  >
                    <a href={item.url}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="border-t p-4">
        <div className="flex flex-col gap-2">
          <div className="text-sm text-muted-foreground">
            Signed in as
          </div>
          <div className="font-medium truncate">
            {user?.email || 'Unknown'}
          </div>
          <div className="text-xs text-muted-foreground capitalize">
            {user?.role?.replace('_', ' ') || 'User'}
          </div>
          <Button
            variant="outline"
            size="sm"
            className="mt-2 w-full"
            onClick={handleLogout}
          >
            <LogOut className="h-4 w-4 mr-2" />
            Sign out
          </Button>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}
