import BackToHomeLink from '@/Components/BackToHomeLink';
import { Button, Checkbox, Field } from '@/Components/ui';
import { useForceLightTheme } from '@/lib/theme';
import { CrossMark } from '@/marketing/shared';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import type { SubmitEvent as ReactSubmitEvent } from 'react';

type LoginForm = {
    email: string;
    password: string;
    remember: boolean;
};

type Props = {
    googleEnabled?: boolean;
    githubEnabled?: boolean;
};

export default function Login({ googleEnabled = false, githubEnabled = false }: Props) {
    useForceLightTheme();
    const flash = (usePage().props.flash as { error?: string } | undefined);
    const { data, setData, post, processing, errors, reset } = useForm<LoginForm>({
        email: '',
        password: '',
        remember: false,
    });

    const submit = (e: ReactSubmitEvent) => {
        e.preventDefault();
        post('/login', {
            onFinish: () => reset('password'),
        });
    };

    return (
        <>
            <Head title="Sign in">
            </Head>
            <main className="min-h-screen bg-background font-sans text-foreground antialiased overflow-hidden">
                <div className="relative mx-auto min-h-screen max-w-6xl border-x border-border/60">
                    <CrossMark className="left-0 top-0" />
                    <CrossMark className="left-full top-0" />
                    <CrossMark className="left-0 top-full" />
                    <CrossMark className="left-full top-full" />
                    <div className="mx-auto flex min-h-screen max-w-md flex-col justify-center px-6 py-10">
                        <BackToHomeLink />

                        <div className="ms-card rounded-2xl border border-border bg-card p-6 shadow-sm sm:p-8">
                            <h1 className="font-display text-3xl font-medium leading-[1.1] tracking-tight text-foreground sm:text-4xl">
                                Welcome <em className="italic text-accent">back</em>.
                            </h1>
                            <p className="mt-5 text-base leading-relaxed text-muted-foreground">
                                Sign in to pick up where you left off.
                            </p>

                            {flash?.error && (
                                <div className="mt-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-3 text-[13px] text-destructive">
                                    {flash.error}
                                </div>
                            )}

                            {(googleEnabled || githubEnabled) && (
                                <div className="mt-5 space-y-2">
                                    {googleEnabled && (
                                        <a
                                            href="/auth/google"
                                            className="flex h-10 w-full items-center justify-center gap-2.5 rounded-md border border-border bg-card px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted"
                                        >
                                            <GoogleIcon />
                                            Continue with Google
                                        </a>
                                    )}
                                    {githubEnabled && (
                                        <a
                                            href="/auth/github"
                                            className="flex h-10 w-full items-center justify-center gap-2.5 rounded-md border border-border bg-card px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted"
                                        >
                                            <GitHubIcon />
                                            Continue with GitHub
                                        </a>
                                    )}
                                    <div className="relative mt-2 flex items-center gap-3">
                                        <div className="h-px flex-1 bg-border" />
                                        <span className="text-xs text-muted-foreground">or</span>
                                        <div className="h-px flex-1 bg-border" />
                                    </div>
                                </div>
                            )}

                            <form onSubmit={submit} className="mt-4 space-y-4">
                                <Field
                                    id="email"
                                    label="Email"
                                    type="email"
                                    autoComplete="email"
                                    value={data.email}
                                    onChange={(e) => setData('email', e.target.value)}
                                    error={errors.email}
                                    maxLength={191}
                                    required
                                    autoFocus
                                />
                                <Field
                                    id="password"
                                    label="Password"
                                    type="password"
                                    autoComplete="current-password"
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    error={errors.password}
                                    required
                                />

                                <div className="flex items-center justify-between">
                                    <label className="flex items-center gap-2 text-sm text-foreground/70">
                                        <Checkbox
                                            checked={data.remember}
                                            onChange={(e) => setData('remember', e.target.checked)}
                                        />
                                        Remember me
                                    </label>
                                    <Link
                                        href="/forgot-password"
                                        className="text-sm font-medium text-muted-foreground hover:text-accent"
                                    >
                                        Forgot password?
                                    </Link>
                                </div>

                                <Button type="submit" disabled={processing} size="lg" className="w-full">
                                    {processing ? 'Signing in…' : 'Sign in'}
                                </Button>
                            </form>

                            <p className="mt-6 text-sm text-muted-foreground">
                                New here?{' '}
                                <Link href="/register" className="font-medium text-accent hover:underline">
                                    Create an account
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}

function GoogleIcon() {
    return (
        <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
            <path
                d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615Z"
                fill="#4285F4"
            />
            <path
                d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18Z"
                fill="#34A853"
            />
            <path
                d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332Z"
                fill="#FBBC05"
            />
            <path
                d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58Z"
                fill="#EA4335"
            />
        </svg>
    );
}

function GitHubIcon() {
    return (
        <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M9 0C4.025 0 0 4.025 0 9c0 3.977 2.578 7.349 6.154 8.539.45.082.614-.196.614-.43 0-.214-.008-.921-.012-1.668-2.503.544-3.031-1.074-3.031-1.074-.41-1.04-1-1.317-1-1.317-.816-.558.062-.547.062-.547.903.064 1.379.927 1.379.927.802 1.375 2.104.977 2.617.748.08-.581.314-.977.571-1.202-2-.227-4.102-1-4.102-4.449 0-.983.351-1.786.927-2.416-.093-.226-.402-1.142.088-2.381 0 0 .756-.242 2.475.923A8.617 8.617 0 0 1 9 4.25c.765.003 1.535.103 2.254.302 1.718-1.165 2.472-.923 2.472-.923.492 1.239.183 2.155.09 2.381.577.63.926 1.433.926 2.416 0 3.458-2.106 4.22-4.112 4.442.323.279.611.829.611 1.671 0 1.206-.011 2.18-.011 2.476 0 .236.161.516.618.429C15.425 16.347 18 12.976 18 9c0-4.975-4.025-9-9-9Z"
                fill="currentColor"
            />
        </svg>
    );
}
