import React from 'react';
import { Location, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowRight, Loader2 } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import AppLogoIcon from '@/components/app-logo-icon';

import { useAuth } from '../auth/context';
import { ADMIN_DEFAULT_AFTER_LOGIN_PATH } from '../constants';
import { buildAdminOAuthStartPath, buildMarketingLoginUrl, encodeReturnTo, resolveReturnTarget, storeLastDestination } from '../lib/returnTo';

interface LocationState {
  from?: Location;
}

export default function LoginPage(): JSX.Element {
  const { status, login } = useAuth();
  const { t } = useTranslation('auth');
  const location = useLocation();
  const navigate = useNavigate();
  const searchParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]);

  const oauthError = searchParams.get('error');
  const oauthErrorDescription = searchParams.get('error_description');
  const rawReturnTo = searchParams.get('return_to');
  const { finalTarget, encodedFinal } = React.useMemo(
    () => resolveReturnTarget(rawReturnTo, ADMIN_DEFAULT_AFTER_LOGIN_PATH),
    [rawReturnTo]
  );

  const resolvedErrorMessage = React.useMemo(() => {
    if (!oauthError) {
      return null;
    }

    const errorMap: Record<string, string> = {
      login_required: t('login.oauth_errors.login_required'),
      invalid_request: t('login.oauth_errors.invalid_request'),
      invalid_client: t('login.oauth_errors.invalid_client'),
      invalid_redirect: t('login.oauth_errors.invalid_redirect'),
      invalid_scope: t('login.oauth_errors.invalid_scope'),
      tenant_mismatch: t('login.oauth_errors.tenant_mismatch'),
      google_failed: t('login.oauth_errors.google_failed'),
      google_no_match: t('login.oauth_errors.google_no_match'),
    };

    return errorMap[oauthError] ?? oauthErrorDescription ?? oauthError;
  }, [oauthError, oauthErrorDescription, t]);

  React.useEffect(() => {
    if (status === 'authenticated') {
      navigate(finalTarget, { replace: true });
    }
  }, [finalTarget, navigate, status]);

  const redirectTarget = React.useMemo(() => {
    if (finalTarget) {
      return finalTarget;
    }

    const state = location.state as LocationState | null;
    if (state?.from) {
      const from = state.from;
      const search = from.search ?? '';
      const hash = from.hash ?? '';
      const path = `${from.pathname}${search}${hash}`;

      return path.startsWith('/') ? path : `/${path}`;
    }

    return ADMIN_DEFAULT_AFTER_LOGIN_PATH;
  }, [finalTarget, location.state]);

  const shouldOpenAccountLogin = oauthError === 'login_required';
  const isLoading = status === 'loading';
  const hasAutoStartedRef = React.useRef(false);
  const oauthStartPath = React.useMemo(
    () => buildAdminOAuthStartPath(redirectTarget, encodedFinal),
    [encodedFinal, redirectTarget]
  );
  const marketingLoginUrl = React.useMemo(() => buildMarketingLoginUrl(oauthStartPath), [oauthStartPath]);

  const hasRedirectedRef = React.useRef(false);
  React.useEffect(() => {
    if (!shouldOpenAccountLogin || hasRedirectedRef.current) {
      return;
    }

    hasRedirectedRef.current = true;
    window.location.replace(marketingLoginUrl);
  }, [marketingLoginUrl, shouldOpenAccountLogin]);

  React.useEffect(() => {
    if (status !== 'unauthenticated' || oauthError || hasAutoStartedRef.current) {
      return;
    }

    hasAutoStartedRef.current = true;
    storeLastDestination(redirectTarget);
    login(redirectTarget);
  }, [login, oauthError, redirectTarget, status]);

  const googleHref = React.useMemo(() => {
    const target = new URL('/event-admin/auth/google', window.location.origin);
    target.searchParams.set('return_to', encodeReturnTo(oauthStartPath));

    return target.toString();
  }, [oauthStartPath]);

  return (
    <div className="relative min-h-svh overflow-hidden bg-slate-950 px-4 py-16 text-white">
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.35),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.35),_transparent_55%)] blur-3xl"
      />
      <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-gray-950/70 to-[#1a0f1f]" aria-hidden />

      <div className="relative z-10 mx-auto flex w-full max-w-md flex-col items-center gap-8">
        <div className="flex flex-col items-center gap-3 text-center">
          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/15 shadow-lg shadow-black/20">
            <AppLogoIcon className="h-7 w-7 text-white" />
          </span>
          <h1 className="text-2xl font-semibold">{t('login.panel_title', t('login.title', 'Event Admin'))}</h1>
          <p className="max-w-sm text-sm text-white/70">
            {t('login.panel_copy', 'Sign in with your Fotospiel admin access. OAuth 2.1 and clear role permissions keep your account protected.')}
          </p>
        </div>

        {resolvedErrorMessage ? (
          <Alert className="w-full border-red-400/40 bg-red-50/80 text-red-800 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-100">
            <AlertTitle>{t('login.oauth_error_title')}</AlertTitle>
            <AlertDescription>{resolvedErrorMessage}</AlertDescription>
          </Alert>
        ) : null}

        <div className="w-full space-y-4 rounded-3xl border border-white/10 bg-white/95 p-8 text-slate-900 shadow-2xl shadow-rose-400/10 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-50">
          <div className="space-y-2 text-left">
            <h2 className="text-xl font-semibold">{t('login.actions_title', 'Choose your sign-in method')}</h2>
            <p className="text-sm text-slate-500 dark:text-slate-300">
              {t('login.actions_copy', 'Access the tenant dashboard securely with OAuth or your Google account.')}
            </p>
          </div>

          <div className="space-y-3">
            <Button
              size="lg"
              className="group flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] px-8 py-3 text-base font-semibold text-white shadow-lg shadow-rose-400/30 transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5] focus-visible:ring-4 focus-visible:ring-rose-400/40"
              disabled={isLoading}
              onClick={() => {
                if (shouldOpenAccountLogin) {
                  window.location.href = marketingLoginUrl;
                  return;
                }

                storeLastDestination(redirectTarget);
                login(redirectTarget);
              }}
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-5 w-5 animate-spin" />
                  {t('login.loading', 'Signing you in …')}
                </>
              ) : (
                <>
                  {shouldOpenAccountLogin
                    ? t('login.open_account_login')
                    : t('login.cta', 'Continue with Fotospiel login')}
                  <ArrowRight className="h-5 w-5 transition group-hover:translate-x-1" />
                </>
              )}
            </Button>

            <Button
              variant="outline"
              size="lg"
              className="flex w-full items-center justify-center gap-3 rounded-full border-slate-200 bg-white text-slate-900 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50 dark:hover:bg-slate-800"
              onClick={() => {
                window.location.href = googleHref;
              }}
            >
              <GoogleIcon className="h-5 w-5" />
              {t('login.google_cta', 'Continue with Google')}
            </Button>
          </div>

          <p className="text-xs text-slate-500 dark:text-slate-300">
            {t('login.support', "Need access? Contact your event team or email support@fotospiel.de — we're happy to help.")}
          </p>
        </div>

        {redirectTarget !== ADMIN_DEFAULT_AFTER_LOGIN_PATH ? (
          <p className="text-center text-xs text-white/50">{t('login.return_hint')}</p>
        ) : null}
      </div>
    </div>
  );
}

function GoogleIcon({ className }: { className?: string }): JSX.Element {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden>
      <path
        fill="#4285F4"
        d="M23.52 12.272c0-.851-.076-1.67-.217-2.455H12v4.639h6.44a5.51 5.51 0 0 1-2.393 3.622v3.01h3.88c2.271-2.093 3.593-5.18 3.593-8.816Z"
      />
      <path
        fill="#34A853"
        d="M12 24c3.24 0 5.957-1.073 7.943-2.912l-3.88-3.01c-1.073.72-2.446 1.147-4.063 1.147-3.124 0-5.773-2.111-6.717-4.954H1.245v3.11C3.221 21.64 7.272 24 12 24Z"
      />
      <path
        fill="#FBBC05"
        d="M5.283 14.27a7.2 7.2 0 0 1 0-4.54V6.62H1.245a11.996 11.996 0 0 0 0 10.76l4.038-3.11Z"
      />
      <path
        fill="#EA4335"
        d="M12 4.75c1.761 0 3.344.606 4.595 1.794l3.447-3.447C17.957 1.012 15.24 0 12 0 7.272 0 3.221 2.36 1.245 6.62l4.038 3.11C6.227 6.861 8.876 4.75 12 4.75Z"
      />
    </svg>
  );
}