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

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

import { useAuth } from '../auth/context';
import { ADMIN_HOME_PATH } from '../constants';

interface LocationState {
  from?: Location;
}

const featureIcons = [Sparkles, ShieldCheck, Images];

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');

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

  const redirectTarget = React.useMemo(() => {
    const state = location.state as LocationState | null;
    if (state?.from) {
      const from = state.from;
      const search = from.search ?? '';
      const hash = from.hash ?? '';
      return `${from.pathname}${search}${hash}`;
    }
    return ADMIN_HOME_PATH;
  }, [location.state]);

  const featureList = React.useMemo(() => {
    const raw = t('login.features', { returnObjects: true }) as unknown;
    if (!Array.isArray(raw)) {
      return [] as Array<{ text: string; Icon: typeof Sparkles }>;
    }
    return (raw as string[]).map((entry, index) => ({
      text: entry,
      Icon: featureIcons[index % featureIcons.length],
    }));
  }, [t]);

  const heroTagline = t('login.hero_tagline', 'Stay in control, stay relaxed');
  const heroTitle = t('login.hero_title', 'Your cockpit for every Fotospiel event');
  const heroSubtitle = t('login.hero_subtitle', 'Moderation, uploads, and communication come together in one calm workspace — on desktop and mobile.');
  const panelTitle = t('login.panel_title', t('login.title', 'Event Admin'));
  const leadCopy = t('login.lead', 'Use our secure OAuth login and land directly in the event dashboard.');
  const panelCopy = t('login.panel_copy', 'Sign in with your Fotospiel admin access. OAuth 2.1 and clear role permissions keep your account protected.');
  const supportCopy = t('login.support', "Need access? Contact your event team or email support@fotospiel.de — we're happy to help.");

  const isLoading = status === 'loading';

  return (
    <div className="relative min-h-svh overflow-hidden bg-slate-950 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 flex min-h-svh flex-col">
        <header className="mx-auto flex w-full max-w-5xl items-center justify-between px-4 pt-10 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3">
            <span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/15 shadow-lg shadow-black/10 backdrop-blur">
              <AppLogoIcon className="h-7 w-7 text-white" />
            </span>
            <div className="space-y-1">
              <p className="text-xs uppercase tracking-[0.35em] text-white/70">{t('login.badge', 'Fotospiel Event Admin')}</p>
              <p className="text-lg font-semibold">Fotospiel</p>
            </div>
          </div>
          <AppearanceToggleDropdown />
        </header>

        <main className="mx-auto flex w-full max-w-5xl flex-1 flex-col px-4 pb-16 pt-12 sm:px-6 lg:px-8">
          <div className="mb-10 space-y-5 text-center md:hidden">
            <span className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
              <Sparkles className="h-3.5 w-3.5" aria-hidden />
              {heroTagline}
            </span>
            <h1 className="text-3xl font-semibold leading-tight sm:text-4xl">{heroTitle}</h1>
            <p className="mx-auto max-w-xl text-sm text-white/80 sm:text-base">{heroSubtitle}</p>
          </div>

          <div className="grid flex-1 gap-10 md:grid-cols-[1.08fr_1fr]" data-testid="tenant-login-layout">
            <section className="relative hidden h-full flex-col justify-between gap-10 overflow-hidden rounded-3xl border border-white/15 bg-gradient-to-br from-[#1d1937] via-[#2a1134] to-[#ff5f87] p-10 md:flex">
              <div aria-hidden className="pointer-events-none absolute inset-0 opacity-40">
                <div className="absolute -inset-16 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.5),_transparent_55%),radial-gradient(circle_at_bottom_left,_rgba(236,72,153,0.35),_transparent_60%)]" />
              </div>

              <div className="relative z-10 flex flex-col gap-6">
                <div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.45em] text-white/70">
                  <Sparkles className="h-4 w-4" aria-hidden />
                  <span className="font-sans-marketing">{heroTagline}</span>
                </div>

                <div className="space-y-4">
                  <h2 className="font-display text-3xl leading-tight sm:text-4xl">{heroTitle}</h2>
                  <p className="text-sm text-white/80 sm:text-base">{heroSubtitle}</p>
                </div>

                {featureList.length ? (
                  <ul className="space-y-4">
                    {featureList.map(({ text, Icon }, index) => (
                      <li key={`login-feature-desktop-${index}`} className="flex items-start gap-3">
                        <span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/15 backdrop-blur">
                          <Icon className="h-4 w-4" aria-hidden />
                        </span>
                        <span className="space-y-1">
                          <p className="text-sm font-semibold tracking-tight sm:text-base">{text}</p>
                        </span>
                      </li>
                    ))}
                  </ul>
                ) : null}
              </div>

              <p className="relative z-10 flex items-center gap-2 text-xs font-medium text-white/75">
                <ArrowRight className="h-4 w-4" aria-hidden />
                {leadCopy}
              </p>
            </section>

            <section className="relative">
              <div className="absolute inset-0 -translate-y-4 translate-x-4 scale-95 rounded-3xl bg-white/20 opacity-45 blur-2xl" aria-hidden />
              <div className="relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-3xl border border-white/15 bg-white/95 p-8 text-slate-900 shadow-2xl shadow-rose-400/20 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-50">
                <div className="space-y-3">
                  <span className="inline-flex items-center gap-2 rounded-full border border-rose-200/50 bg-rose-50/70 px-3 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-rose-500/80 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-200/80">
                    {t('login.badge', 'Fotospiel Event Admin')}
                  </span>
                  <div className="space-y-1">
                    <h2 className="text-2xl font-semibold">{panelTitle}</h2>
                    <p className="text-sm text-slate-600 dark:text-slate-300">{panelCopy}</p>
                  </div>
                </div>

                {oauthError ? (
                  <Alert className="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>{t('login.oauth_error', { message: oauthError })}</AlertDescription>
                  </Alert>
                ) : null}

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

                <div className="space-y-2 text-xs leading-relaxed text-slate-500 dark:text-slate-300">
                  <p>{leadCopy}</p>
                  <p>{supportCopy}</p>
                </div>
              </div>
            </section>
          </div>

          {featureList.length ? (
            <div className="mt-10 grid gap-4 md:hidden">
              {featureList.map(({ text, Icon }, index) => (
                <div
                  key={`login-feature-mobile-${index}`}
                  className="flex items-start gap-3 rounded-2xl border border-white/15 bg-white/10 p-4 text-sm text-white/85 shadow-lg shadow-black/15 backdrop-blur"
                >
                  <span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/15">
                    <Icon className="h-4 w-4" aria-hidden />
                  </span>
                  <p>{text}</p>
                </div>
              ))}
            </div>
          ) : null}
        </main>
      </div>
    </div>
  );
}