import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { HelpCircle, Mail, ShieldCheck } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { ADMIN_LOGIN_PATH } from '../constants';
import { MobileCard, CTAButton } from './components/Primitives';
import { ADMIN_GRADIENTS, useAdminTheme } from './theme';
import { useDocumentTitle } from './hooks/useDocumentTitle';

type FaqItem = {
  question: string;
  answer: string;
};

export default function PublicHelpPage() {
  const { t } = useTranslation('auth');
  const navigate = useNavigate();
  const { text, muted, surface, border, accentSoft, primary } = useAdminTheme();
  const faqItems = t('login.help_faq_items', {
    returnObjects: true,
    defaultValue: [
      {
        question: 'I did not receive an invite.',
        answer: 'Please check spam and ask your event team to resend the invitation.',
      },
      {
        question: 'I cannot sign in.',
        answer: 'Sign-in works only with your email address. Your username equals your email.',
      },
      {
        question: 'My event is not visible.',
        answer: 'Make sure the event is published. Ask the owner to adjust the status.',
      },
      {
        question: 'Uploads are slow or stuck.',
        answer: 'Wait a moment and check the connection. If it persists, contact support.',
      },
    ],
  }) as FaqItem[];
  const safeAreaStyle: React.CSSProperties = {
    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
  };

  useDocumentTitle(t('login.help_title', 'Help for event admins'));

  return (
    <YStack
      minHeight="100vh"
      paddingHorizontal="$4"
      paddingVertical="$4"
      style={{ ...safeAreaStyle, background: ADMIN_GRADIENTS.loginBackground }}
    >
      <YStack width="100%" maxWidth={680} alignSelf="center" space="$4">
        <MobileCard backgroundColor="rgba(15, 23, 42, 0.55)" borderColor="rgba(255,255,255,0.08)">
          <YStack space="$3">
            <XStack alignItems="center" space="$2">
              <XStack
                width={42}
                height={42}
                borderRadius={12}
                alignItems="center"
                justifyContent="center"
                backgroundColor="rgba(255,255,255,0.12)"
              >
                <HelpCircle size={20} color="white" />
              </XStack>
              <Text fontSize="$lg" fontWeight="800" color="white">
                {t('login.help_title', 'Hilfe fuer Event-Admins')}
              </Text>
            </XStack>
            <Text fontSize="$sm" color="rgba(255,255,255,0.7)">
              {t(
                'login.help_intro',
                'Hier findest du schnelle Antworten rund um Login, Zugriff und erste Schritte - auch ohne Anmeldung.',
              )}
            </Text>
          </YStack>
        </MobileCard>

        <MobileCard backgroundColor={surface} borderColor={border}>
          <YStack space="$3">
            <XStack alignItems="center" space="$2">
              <XStack
                width={36}
                height={36}
                borderRadius={12}
                alignItems="center"
                justifyContent="center"
                backgroundColor={accentSoft}
              >
                <ShieldCheck size={18} color={primary} />
              </XStack>
              <Text fontSize="$md" fontWeight="800" color={text}>
                {t('login.help_faq_title', 'Haeufige Fragen vor dem Login')}
              </Text>
            </XStack>
            <YStack space="$2">
              {faqItems.map((item, index) => (
                <YStack
                  key={`${item.question}-${index}`}
                  padding="$2.5"
                  borderRadius={14}
                  borderWidth={1}
                  borderColor={border}
                  backgroundColor="rgba(255,255,255,0.6)"
                  space="$1"
                >
                  <Text fontSize="$sm" fontWeight="700" color={text}>
                    {item.question}
                  </Text>
                  <Text fontSize="$xs" color={muted}>
                    {item.answer}
                  </Text>
                </YStack>
              ))}
            </YStack>
          </YStack>
        </MobileCard>

        <MobileCard backgroundColor={surface} borderColor={border}>
          <YStack space="$3">
            <XStack alignItems="center" space="$2">
              <XStack
                width={36}
                height={36}
                borderRadius={12}
                alignItems="center"
                justifyContent="center"
                backgroundColor={accentSoft}
              >
                <Mail size={18} color={primary} />
              </XStack>
              <Text fontSize="$md" fontWeight="800" color={text}>
                {t('login.help_support_title', 'Support kontaktieren')}
              </Text>
            </XStack>
            <Text fontSize="$sm" color={muted}>
              {t('login.help_support_copy', 'Schreib uns bei Fragen an')}{' '}
              <Text fontWeight="700" color={text}>
                support@fotospiel.app
              </Text>
            </Text>
            <CTAButton
              label={t('login.help_support_cta', 'E-Mail an Support senden')}
              onPress={() => {
                window.location.href = 'mailto:support@fotospiel.app';
              }}
            />
          </YStack>
        </MobileCard>

        <Button
          onPress={() => navigate(ADMIN_LOGIN_PATH)}
          backgroundColor="transparent"
          borderColor="rgba(255,255,255,0.4)"
          borderWidth={1}
          color="white"
          height={44}
          borderRadius={14}
        >
          {t('login.help_back', 'Back to login')}
        </Button>
      </YStack>
    </YStack>
  );
}