import {
  Menu,
  UnstyledButton,
  Text,
  Group,
  rem,
  useMantineColorScheme,
  useComputedColorScheme,
} from '@mantine/core';
import {
  IconSun,
  IconMoon,
  IconDeviceDesktop,
  IconCheck,
} from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';

export function ColorSchemeToggle() {
  const { t } = useTranslation();
  const { colorScheme, setColorScheme } = useMantineColorScheme();
  const computed = useComputedColorScheme('light', { getInitialValueInEffect: true });
  const isDark = computed === 'dark';

  const themes = [
    {
      value: 'light' as const,
      label: t('profile.appearance.light', 'Light'),
      icon: IconSun,
      color: '#e67e22',
    },
    {
      value: 'dark' as const,
      label: t('profile.appearance.dark', 'Dark'),
      icon: IconMoon,
      color: '#9b59b6',
    },
    {
      value: 'auto' as const,
      label: t('profile.appearance.system', 'System'),
      icon: IconDeviceDesktop,
      color: '#3498db',
    },
  ];

  const CurrentIcon = colorScheme === 'auto' ? IconDeviceDesktop : isDark ? IconMoon : IconSun;

  return (
    <Menu shadow="lg" width={170} position="bottom-end" withinPortal transitionProps={{ transition: 'pop-top-right', duration: 150 }}>
      <Menu.Target>
        <UnstyledButton
          aria-label={t('common.toggleTheme', 'Toggle light / dark mode')}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: rem(38),
            height: rem(38),
            borderRadius: rem(12),
            background: 'var(--mantine-color-body)',
            color: isDark ? 'var(--mantine-color-yellow-4)' : 'var(--mantine-color-blue-6)',
            boxShadow: '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)',
            transition: 'all 200ms ease',
            cursor: 'pointer',
            border: 'none',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-1px)';
            e.currentTarget.style.boxShadow =
              '0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px var(--mantine-primary-color-3)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow =
              '0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.08)';
          }}
        >
          <CurrentIcon size={19} stroke={1.8} />
        </UnstyledButton>
      </Menu.Target>

      <Menu.Dropdown
        style={{
          borderRadius: rem(14),
          padding: rem(6),
          boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
          backdropFilter: 'blur(8px)',
        }}
      >
        <Menu.Label style={{ fontWeight: 600, fontSize: rem(11), letterSpacing: '0.5px', textTransform: 'uppercase' }}>
          {t('profile.appearance.title', 'Appearance')}
        </Menu.Label>
        {themes.map((theme) => {
          const Icon = theme.icon;
          const isSelected = colorScheme === theme.value;
          return (
            <Menu.Item
              key={theme.value}
              onClick={() => setColorScheme(theme.value)}
              leftSection={<Icon size={16} stroke={1.8} style={{ color: isSelected ? 'var(--mantine-primary-color-filled)' : 'currentColor' }} />}
              rightSection={
                isSelected ? <IconCheck size={16} stroke={2.4} style={{ color: 'var(--mantine-primary-color-filled)' }} /> : undefined
              }
              style={{
                borderRadius: rem(8),
                fontWeight: isSelected ? 600 : 400,
                backgroundColor: isSelected ? 'var(--mantine-primary-color-light)' : undefined,
                color: isSelected ? 'var(--mantine-primary-color-filled)' : undefined,
              }}
            >
              <Text size="sm">{theme.label}</Text>
            </Menu.Item>
          );
        })}
      </Menu.Dropdown>
    </Menu>
  );
}

