import {
  Accordion,
  Group,
  Paper,
  SimpleGrid,
  Stack,
  Text,
  ThemeIcon,
  Title,
} from '@mantine/core';
import {
  IconPhone,
  IconMail,
  IconMapPin,
  IconClock,
} from '@tabler/icons-react';
import type { Icon } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '@ema-platform/ui';

const FAQ_KEYS = ['1', '2', '3', '4'] as const;

export function SupportPage() {
  const { t } = useTranslation();

  const contacts: { icon: Icon; label: string; value: string }[] = [
    { icon: IconPhone, label: t('support.phone'), value: '+251 11 551 7170' },
    { icon: IconMail, label: t('support.email'), value: 'info@maritime.gov.et' },
    { icon: IconMapPin, label: t('support.office'), value: t('support.officeValue') },
    { icon: IconClock, label: t('support.hours'), value: t('support.hoursValue') },
  ];

  return (
    <Stack gap="lg">
      <PageHeader title={t('support.title')} subtitle={t('support.subtitle')} />

      <Paper p="lg" shadow="sm" radius="md" withBorder>
        <Title order={4} mb="md">
          {t('support.contact')}
        </Title>
        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
          {contacts.map((c) => (
            <Group key={c.label} gap="sm" wrap="nowrap">
              <ThemeIcon variant="light" color="emaPrimary" size={42} radius="md">
                <c.icon size={22} />
              </ThemeIcon>
              <div>
                <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
                  {c.label}
                </Text>
                <Text size="sm">{c.value}</Text>
              </div>
            </Group>
          ))}
        </SimpleGrid>
      </Paper>

      <Paper p="lg" shadow="sm" radius="md" withBorder>
        <Title order={4} mb="md">
          {t('support.faq')}
        </Title>
        <Accordion variant="separated" radius="md">
          {FAQ_KEYS.map((k) => (
            <Accordion.Item key={k} value={k}>
              <Accordion.Control>{t(`support.faqs.q${k}`)}</Accordion.Control>
              <Accordion.Panel>
                <Text size="sm" c="dimmed">
                  {t(`support.faqs.a${k}`)}
                </Text>
              </Accordion.Panel>
            </Accordion.Item>
          ))}
        </Accordion>
      </Paper>
    </Stack>
  );
}
