import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { AppShell, Burger, Group, Text, NavLink, Button, Avatar, Stack, Badge } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { 
  IconDashboard, 
  IconUsers, 
  IconWebhook, 
  IconBrandWhatsapp, 
  IconFileText, 
  IconLogout 
} from '@tabler/icons-react';
import { useAuthStore } from '../stores/authStore';

export default function DashboardLayout() {
  const { user, logout } = useAuthStore();
  const navigate = useNavigate();
  const location = useLocation();
  const [opened, { toggle }] = useDisclosure();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  const isActive = (path: string) => {
    return location.pathname === path;
  };

  const navItems = [
    { path: '/dashboard', label: 'Dashboard', icon: IconDashboard },
    { path: '/users', label: 'Users', icon: IconUsers },
    { path: '/hooks', label: 'Hooks', icon: IconWebhook },
    { path: '/accounts', label: 'WhatsApp Accounts', icon: IconBrandWhatsapp },
    { path: '/event-logs', label: 'Event Logs', icon: IconFileText },
  ];

  return (
    <AppShell
      header={{ height: 60 }}
      navbar={{
        width: 280,
        breakpoint: 'sm',
        collapsed: { mobile: !opened },
      }}
      padding="md"
    >
      <AppShell.Header>
        <Group h="100%" px="md" justify="space-between">
          <Group>
            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
            <Text size="xl" fw={700}>WhatsHooked</Text>
            <Badge color="blue" variant="light">Admin</Badge>
          </Group>
          <Group>
            <Text size="sm" c="dimmed">{user?.username || 'User'}</Text>
            <Avatar color="blue" radius="xl" size="sm">
              {user?.username?.[0]?.toUpperCase() || 'U'}
            </Avatar>
          </Group>
        </Group>
      </AppShell.Header>

      <AppShell.Navbar p="md">
        <AppShell.Section grow>
          <Stack gap="xs">
            {navItems.map((item) => (
              <NavLink
                key={item.path}
                href={item.path}
                label={item.label}
                leftSection={<item.icon size={20} stroke={1.5} />}
                active={isActive(item.path)}
                onClick={(e) => {
                  e.preventDefault();
                  navigate(item.path);
                  if (opened) toggle();
                }}
              />
            ))}
          </Stack>
        </AppShell.Section>

        <AppShell.Section>
          <Stack gap="xs">
            <Group justify="space-between" px="sm">
              <div>
                <Text size="sm" fw={500}>{user?.username || 'User'}</Text>
                <Text size="xs" c="dimmed">{user?.role || 'user'}</Text>
              </div>
            </Group>
            <Button
              leftSection={<IconLogout size={16} />}
              variant="light"
              color="red"
              fullWidth
              onClick={handleLogout}
            >
              Logout
            </Button>
          </Stack>
        </AppShell.Section>
      </AppShell.Navbar>

      <AppShell.Main>
        <Outlet />
      </AppShell.Main>
    </AppShell>
  );
}
