import { Stack, Group, Text, NavLink, ThemeIcon, Button, Box } from '@mantine/core';
import {
  IconLayoutDashboard,
  IconUsers,
  IconShieldCheck,
  IconLifebuoy,
} from '@tabler/icons-react';
import { useNavigate, useLocation } from 'react-router-dom';

const NAV_ITEMS = [
  { label: 'Dashboard', icon: IconLayoutDashboard, path: '/dashboard' },
  { label: 'User Management', icon: IconUsers, path: '/um/user-management/dashboard' },
];

export function AppSidebar() {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  return (
    <Stack h="100%" justify="space-between" p="md" gap="lg">
      <Stack gap="lg">
        {/* brand */}
        <Group gap="sm" px={4} wrap="nowrap">
          <ThemeIcon size={42} radius="md" variant="gradient" gradient={{ from: 'blue', to: 'indigo', deg: 135 }}>
            <IconShieldCheck size={22} />
          </ThemeIcon>
          <div>
            <Text fw={700} lh={1.1}>
              EMA Admin
            </Text>
            <Text size="xs" c="dimmed">
              Control Center
            </Text>
          </div>
        </Group>

        {/* menu */}
        <div>
          <Text size="xs" fw={700} c="dimmed" px="xs" mb={8} style={{ letterSpacing: 1 }}>
            MENU
          </Text>
          <Stack gap={4}>
            {NAV_ITEMS.map(({ label, icon: Icon, path }) => (
              <NavLink
                key={path}
                label={label}
                leftSection={<Icon size={19} />}
                active={pathname.startsWith(path)}
                onClick={() => navigate(path)}
                variant="light"
                color="blue"
                styles={{ root: { borderRadius: 10 }, label: { fontWeight: 500 } }}
              />
            ))}
          </Stack>
        </div>
      </Stack>

      {/* help card */}
      <Box
        style={{
          borderRadius: 16,
          padding: 18,
          color: '#fff',
          background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
        }}
      >
        <Box
          w={36}
          h={36}
          style={{
            borderRadius: 10,
            background: 'rgba(255,255,255,0.18)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <IconLifebuoy size={20} />
        </Box>
        <Text fw={700} mt="sm">
          Need help?
        </Text>
        <Text size="xs" mt={4} style={{ opacity: 0.85 }}>
          Browse guides or contact support.
        </Text>
        <Button fullWidth mt="md" size="xs" radius="md" variant="white" color="blue">
          Open Help Center
        </Button>
      </Box>
    </Stack>
  );
}