import { FormEvent, useEffect, useMemo, useState } from 'react';
import type { ReactNode } from 'react';
import { Head, useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import InputError from '@/components/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth-layout';
import AppLayout from '@/layouts/app/AppLayout';
import { request } from '@/routes/password';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { LoaderCircle } from 'lucide-react';
import toast from 'react-hot-toast';

interface LoginProps {
    status?: string;
    canResetPassword: boolean;
}

export default function Login({ status, canResetPassword }: LoginProps) {
    const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
    const [rawReturnTo, setRawReturnTo] = useState<string | null>(null);
    const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
    const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
    const { t } = useTranslation('auth');
    const page = usePage<{ flash?: { verification?: { status: string; title?: string; message?: string } } }>();
    const verificationFlash = page.props.flash?.verification;
    const { localizedPath } = useLocalizedRoutes();

    const { data, setData, post, processing, errors, clearErrors } = useForm({
        login: '',
        password: '',
        remember: false,
        return_to: '',
    });

    const submit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setHasTriedSubmit(true);
        post(window.location.pathname, {
            preserveScroll: true,
        });
    };

    const errorKeys = Object.keys(errors);
    const hasErrors = errorKeys.length > 0;

    useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }

        const searchParams = new URLSearchParams(window.location.search);
        setRawReturnTo(searchParams.get('return_to'));

        if (searchParams.get('verified') === '1') {
            toast.success(t('verification.toast_success', 'Email verified successfully.'));
            searchParams.delete('verified');
            const nextQuery = searchParams.toString();
            const nextUrl = `${window.location.pathname}${nextQuery ? `?${nextQuery}` : ''}`;
            window.history.replaceState({}, '', nextUrl);
        }
    }, [t]);

    useEffect(() => {
        setData('return_to', rawReturnTo ?? '');
    }, [rawReturnTo, setData]);

    useEffect(() => {
        if (!hasTriedSubmit) {
            return;
        }

        const keys = Object.keys(errors);
        if (keys.length === 0) {
            return;
        }

        const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${keys[0]}"]`);

        if (field) {
            field.scrollIntoView({ behavior: 'smooth', block: 'center' });
            field.focus();
        }
    }, [errors, hasTriedSubmit]);

    const googleHref = useMemo(() => {
        if (!rawReturnTo) {
            return '/event-admin/auth/google';
        }

        const params = new URLSearchParams({
            return_to: rawReturnTo,
        });

        return `/event-admin/auth/google?${params.toString()}`;
    }, [rawReturnTo]);

    const facebookHref = useMemo(() => {
        if (!rawReturnTo) {
            return '/event-admin/auth/facebook';
        }

        const params = new URLSearchParams({
            return_to: rawReturnTo,
        });

        return `/event-admin/auth/facebook?${params.toString()}`;
    }, [rawReturnTo]);

    const handleGoogleLogin = () => {
        if (typeof window === 'undefined') {
            return;
        }

        setIsRedirectingToGoogle(true);
        window.location.href = googleHref;
    };

    const handleFacebookLogin = () => {
        if (typeof window === 'undefined') {
            return;
        }

        setIsRedirectingToFacebook(true);
        window.location.href = facebookHref;
    };

    return (
        <AuthLayout
            title={t('login.title')}
            description={t('login.description')}
            name={t('login.brand', t('login.title'))}
            logoSrc="/logo-transparent-lg.png"
            logoAlt={t('login.logo_alt', 'Die Fotospiel App')}
        >
            <Head title={t('login.title')} />

            <form
                onSubmit={submit}
                className="relative flex flex-col gap-6 overflow-hidden rounded-3xl border border-gray-200/70 bg-white/80 p-6 shadow-xl shadow-rose-200/40 backdrop-blur-sm transition dark:border-gray-800/80 dark:bg-gray-900/70"
            >
                <input type="hidden" name="return_to" value={data.return_to ?? ''} />
                <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pink-400/80 via-rose-400/70 to-sky-400/70" aria-hidden />

                <div className="grid gap-6 pt-2 sm:pt-4">
                    <div className="grid gap-2">
                        <Label htmlFor="login" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
                            {t('login.email')}
                        </Label>
                        <Input
                            id="login"
                            type="text"
                            name="login"
                            required
                            autoFocus
                            tabIndex={1}
                            autoComplete="username"
                            placeholder={t('login.email_placeholder')}
                            value={data.login}
                            onChange={(e) => {
                                setData('login', e.target.value);
                                if (errors.login) {
                                    clearErrors('login');
                                }
                            }}
                            className="h-12 rounded-xl border-gray-200/80 bg-white/90 px-4 text-base shadow-inner shadow-gray-200/40 focus-visible:ring-[#ff8bb1]/40 dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100"
                        />
                        <InputError
                            key={`error-login`}
                            message={errors.login}
                            className="text-sm font-medium text-rose-600 dark:text-rose-400"
                        />
                    </div>

                    <div className="grid gap-2">
                        <div className="flex items-center">
                            <Label htmlFor="password" className="text-sm font-semibold text-gray-700 dark:text-gray-200">
                                {t('login.password')}
                            </Label>
                            {canResetPassword && (
                                <TextLink
                                    href={request()}
                                    className="ml-auto text-sm font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
                                    tabIndex={5}
                                >
                                    {t('login.forgot')}
                                </TextLink>
                            )}
                        </div>
                        <Input
                            id="password"
                            type="password"
                            name="password"
                            required
                            tabIndex={2}
                            autoComplete="current-password"
                            placeholder={t('login.password_placeholder')}
                            value={data.password}
                            onChange={(e) => {
                                setData('password', e.target.value);
                                if (errors.password) {
                                    clearErrors('password');
                                }
                            }}
                            className="h-12 rounded-xl border-gray-200/80 bg-white/90 px-4 text-base shadow-inner shadow-gray-200/40 focus-visible:ring-[#ff8bb1]/40 dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100"
                        />
                        <InputError
                            key={`error-password`}
                            message={errors.password}
                            className="text-sm font-medium text-rose-600 dark:text-rose-400"
                        />
                    </div>

                    <div className="flex items-center gap-3 rounded-2xl border border-gray-200/60 bg-gray-50/70 px-4 py-3 text-sm font-medium text-gray-600 shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-200">
                        <Checkbox
                            id="remember"
                            name="remember"
                            tabIndex={3}
                            checked={data.remember}
                            className="size-5 rounded-lg border-gray-300 bg-white/90 data-[state=checked]:border-transparent data-[state=checked]:bg-[#ff5f87] data-[state=checked]:text-white dark:border-gray-700 dark:bg-gray-900/70"
                            onCheckedChange={(checked) => setData('remember', Boolean(checked))}
                        />
                        <Label htmlFor="remember" className="cursor-pointer select-none font-semibold text-gray-700 dark:text-gray-200">
                            {t('login.remember')}
                        </Label>
                    </div>
                </div>

                <Button
                    type="submit"
                    className="mt-2 h-12 w-full justify-center rounded-xl bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
                    tabIndex={4}
                    disabled={processing}
                >
                    {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
                    {t('login.submit')}
                </Button>

                <div className="space-y-4 text-sm">
                    {status && (
                        <div className="rounded-2xl border border-emerald-200/70 bg-emerald-50/90 p-3 text-center font-medium text-emerald-700 shadow-sm">
                            {status}
                        </div>
                    )}

                    {verificationFlash && (
                        <div
                            className={[
                                'rounded-2xl border p-3 text-center font-medium shadow-sm',
                                verificationFlash.status === 'success'
                                    ? 'border-emerald-200/70 bg-emerald-50/90 text-emerald-700'
                                    : 'border-rose-200/70 bg-rose-50/90 text-rose-700',
                            ].join(' ')}
                        >
                            <div className="font-semibold">{verificationFlash.title ?? ''}</div>
                            <div className="text-sm">{verificationFlash.message}</div>
                        </div>
                    )}

                    {hasErrors && (
                        <div
                            key={`general-errors-${errorKeys.join('-')}`}
                            role="alert"
                            className="rounded-2xl border border-rose-200/80 bg-rose-50/90 p-3 text-center font-medium text-rose-700 shadow-sm dark:border-rose-900/50 dark:bg-rose-900/40 dark:text-rose-100"
                        >
                            {Object.values(errors).join(' ')}
                        </div>
                    )}
                </div>

                <div className="space-y-3">
                    <div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
                        <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
                        {t('login.oauth_divider', 'oder')}
                        <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
                    </div>

                    <Button
                        type="button"
                        variant="outline"
                        onClick={handleGoogleLogin}
                        disabled={processing || isRedirectingToGoogle}
                        className="flex h-12 w-full items-center justify-center gap-3 rounded-xl border-gray-200/80 bg-white/90 text-sm font-semibold text-gray-700 shadow-inner shadow-gray-200/40 transition hover:bg-white dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80"
                    >
                        {isRedirectingToGoogle ? (
                            <LoaderCircle className="h-5 w-5 animate-spin" aria-hidden />
                        ) : (
                            <GoogleIcon className="h-5 w-5" />
                        )}
                        <span>{t('login.google_cta')}</span>
                    </Button>

                    <Button
                        type="button"
                        variant="outline"
                        onClick={handleFacebookLogin}
                        disabled={processing || isRedirectingToFacebook}
                        className="flex h-12 w-full items-center justify-center gap-3 rounded-xl border-gray-200/80 bg-white/90 text-sm font-semibold text-gray-700 shadow-inner shadow-gray-200/40 transition hover:bg-white dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80"
                    >
                        {isRedirectingToFacebook ? (
                            <LoaderCircle className="h-5 w-5 animate-spin" aria-hidden />
                        ) : (
                            <FacebookIcon className="h-5 w-5" />
                        )}
                        <span>{t('login.facebook_cta')}</span>
                    </Button>
                    <p className="text-center text-xs text-muted-foreground dark:text-gray-300">
                        {t('login.google_helper', 'Nutze dein Google-Konto, um dich sicher bei der Eventverwaltung anzumelden.')}
                    </p>
                    <p className="text-center text-xs text-muted-foreground dark:text-gray-300">
                        {t('login.facebook_helper', 'Melde dich schnell mit deinem Facebook-Konto an.')}
                    </p>
                </div>

                <div className="rounded-2xl border border-gray-200/60 bg-gray-50/80 p-4 text-center text-sm text-muted-foreground shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60">
                    {t('login.no_account')}{' '}
                    <TextLink
                        href={localizedPath('/packages')}
                        tabIndex={5}
                        className="font-semibold text-[#ff5f87] transition hover:text-[#ff3b6d]"
                    >
                        {t('login.sign_up')}
                    </TextLink>
                </div>
            </form>
        </AuthLayout>
    );
}

Login.layout = (page: ReactNode) => <AppLayout header={<></>}>{page}</AppLayout>;

function GoogleIcon({ className }: { className?: string }) {
    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>
    );
}

function FacebookIcon({ className }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" aria-hidden>
            <path
                fill="#1877F2"
                d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
            />
        </svg>
    );
}