import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Card } from '@tamagui/card';
import { YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Spinner } from 'tamagui';
import { useAuth } from '../auth/context';
import { ADMIN_DEFAULT_AFTER_LOGIN_PATH } from '../constants';
import { decodeReturnTo, resolveReturnTarget } from '../lib/returnTo';
import { useAdminTheme } from './theme';
import { useDocumentTitle } from './hooks/useDocumentTitle';

export default function AuthCallbackPage(): React.ReactElement {
  const { status } = useAuth();
  const navigate = useNavigate();
  const { t } = useTranslation('auth');
  const [redirected, setRedirected] = React.useState(false);
  const { textStrong, muted, border, surface, shadow, appBackground } = useAdminTheme();
  const safeAreaStyle: React.CSSProperties = {
    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
  };

  useDocumentTitle(t('processing.title', 'Signing you in …'));

  const searchParams = React.useMemo(() => new URLSearchParams(window.location.search), []);
  const rawReturnTo = searchParams.get('return_to');

  const fallback = ADMIN_DEFAULT_AFTER_LOGIN_PATH;
  const destination = React.useMemo(() => {
    if (rawReturnTo) {
      const decoded = decodeReturnTo(rawReturnTo);
      if (decoded) {
        return decoded;
      }
    }

    return resolveReturnTarget(null, fallback).finalTarget;
  }, [fallback, rawReturnTo]);

  React.useEffect(() => {
    if (status !== 'authenticated' || redirected) {
      return;
    }

    setRedirected(true);
    navigate(destination, { replace: true });
  }, [destination, navigate, redirected, status]);

  return (
    <YStack
      alignItems="center"
      justifyContent="center"
      padding="$4"
      style={{ minHeight: '100vh', backgroundImage: appBackground, ...safeAreaStyle }}
      backgroundColor={surface}
    >
      <Card
        borderRadius={22}
        borderWidth={2}
        borderColor={border}
        backgroundColor={surface}
        padding="$3"
        shadowColor={shadow}
        shadowOpacity={0.16}
        shadowRadius={16}
        shadowOffset={{ width: 0, height: 10 }}
      >
        <YStack alignItems="center" space="$2">
          <Spinner size="small" color={textStrong} />
          <Text fontSize="$md" fontWeight="800" color={textStrong}>
            {t('processing.title', 'Signing you in …')}
          </Text>
          <Text fontSize="$xs" color={muted} textAlign="center">
            {t('processing.copy', 'One moment please while we prepare your dashboard.')}
          </Text>
        </YStack>
      </Card>
    </YStack>
  );
}