import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { Input } from '@tamagui/input';
import { Card } from '@tamagui/card';
import { useTranslation } from '@/guest/i18n/useTranslation';
import { useEventData } from '../context/EventDataContext';
import { useGuestIdentity } from '../context/GuestIdentityContext';
import EventLogo from '../components/EventLogo';
import { useGuestThemeVariant } from '../lib/guestTheme';

export default function ProfileSetupScreen() {
  const { token } = useParams<{ token: string }>();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { event, status } = useEventData();
  const identity = useGuestIdentity();
  const { isDark } = useGuestThemeVariant();
  const primaryText = isDark ? '#F8FAFF' : '#0F172A';
  const mutedText = isDark ? 'rgba(226, 232, 240, 0.7)' : 'rgba(15, 23, 42, 0.6)';
  const cardBackground = isDark ? 'rgba(15, 23, 42, 0.75)' : 'rgba(255, 255, 255, 0.9)';
  const cardBorder = isDark ? 'rgba(148, 163, 184, 0.18)' : 'rgba(15, 23, 42, 0.12)';
  const [nameDraft, setNameDraft] = React.useState(identity.name ?? '');
  const [saving, setSaving] = React.useState(false);

  React.useEffect(() => {
    if (identity.hydrated) {
      setNameDraft(identity.name ?? '');
    }
  }, [identity.hydrated, identity.name]);

  const handleSubmit = React.useCallback(() => {
    if (!token) {
      return;
    }
    const trimmed = nameDraft.trim();
    if (!trimmed) {
      return;
    }
    setSaving(true);
    identity.setName(trimmed);
    navigate(`/e/${encodeURIComponent(token)}`);
  }, [identity, nameDraft, navigate, token]);

  if (status === 'loading' || status === 'idle') {
    return (
      <YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
        <Text color={mutedText}>{t('profileSetup.loading')}</Text>
      </YStack>
    );
  }

  if (!event) {
    return (
      <YStack flex={1} minHeight="100vh" justifyContent="center" padding="$5" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
        <Text color="#FCA5A5">{t('profileSetup.error.default')}</Text>
        <Button onPress={() => navigate('/event')} marginTop="$3">
          {t('profileSetup.error.backToStart')}
        </Button>
      </YStack>
    );
  }

  return (
    <YStack flex={1} minHeight="100vh" padding="$5" justifyContent="center" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
      <YStack gap="$5" maxWidth={420} width="100%" alignSelf="center">
        <YStack gap="$2">
          <XStack alignItems="center" gap="$3">
            <EventLogo name={event.name} icon={event.type?.icon ?? null} size="m" />
            <Text fontSize="$7" fontFamily="$display" fontWeight="$9" color={primaryText}>
              {event.name}
            </Text>
          </XStack>
          <Text color={mutedText}>
            {t('profileSetup.card.description')}
          </Text>
        </YStack>

        <Card padding="$4" backgroundColor={cardBackground} borderColor={cardBorder} borderWidth={1}>
          <YStack gap="$3">
            <Text color={mutedText} fontSize="$3">
              {t('profileSetup.form.label')}
            </Text>
            <Input
              value={nameDraft}
              onChangeText={setNameDraft}
              placeholder={t('profileSetup.form.placeholder')}
              backgroundColor={isDark ? 'rgba(15, 23, 42, 0.6)' : 'rgba(15, 23, 42, 0.05)'}
              borderColor={cardBorder}
              color={primaryText}
            />
            <Button
              onPress={handleSubmit}
              disabled={!nameDraft.trim() || saving}
              backgroundColor="$primary"
              color="#FFFFFF"
            >
              {saving ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
            </Button>
          </YStack>
        </Card>
      </YStack>
    </YStack>
  );
}