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

type Props = {
    token: string;
    email: string;
    role: 'editor' | 'viewer' | string;
    /** 'account' = operator-created account (registration framing); 'invite' =
     *  team invite. Defaults to 'invite' for older payloads. */
    purpose?: 'account' | 'invite';
};

type AcceptForm = {
    token: string;
    password: string;
    password_confirmation: string;
};

export default function AcceptInvite({
    token,
    email,
    role,
    purpose = 'invite',
}: Props) {
    useForceLightTheme();
    const isAccount = purpose === 'account';
    const { data, setData, post, processing, errors, reset } = useForm<AcceptForm>({
        token,
        password: '',
        password_confirmation: '',
    });

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

    return (
        <>
            <Head title={isAccount ? 'Set your password' : 'Accept your invitation'} />
            <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">
                                Set your <em className="italic text-accent">password</em>.
                            </h1>
                            <p className="mt-5 text-base leading-relaxed text-muted-foreground">
                                {isAccount ? (
                                    <>
                                        Your account is ready. Choose a password
                                        to sign in and get started.
                                    </>
                                ) : (
                                    <>
                                        You've been invited as a{' '}
                                        <strong className="text-foreground">
                                            {role === 'viewer'
                                                ? 'viewer'
                                                : 'editor'}
                                        </strong>
                                        . Choose a password to accept and sign
                                        in.
                                    </>
                                )}
                            </p>

                            <form onSubmit={submit} className="mt-6 space-y-4">
                                <Field
                                    id="email"
                                    label="Email"
                                    type="email"
                                    value={email}
                                    readOnly
                                    disabled
                                />
                                {errors.token && (
                                    <p
                                        className="text-sm text-destructive"
                                        data-testid="accept-invite-token-error"
                                    >
                                        {errors.token}
                                    </p>
                                )}
                                <Field
                                    id="password"
                                    label="Password"
                                    type="password"
                                    autoComplete="new-password"
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    error={errors.password}
                                    required
                                    autoFocus
                                />
                                <Field
                                    id="password_confirmation"
                                    label="Confirm password"
                                    type="password"
                                    autoComplete="new-password"
                                    value={data.password_confirmation}
                                    onChange={(e) =>
                                        setData('password_confirmation', e.target.value)
                                    }
                                    required
                                />

                                <Button
                                    type="submit"
                                    disabled={processing}
                                    size="lg"
                                    className="w-full"
                                    data-testid="accept-invite-submit"
                                >
                                    {processing
                                        ? 'Setting up…'
                                        : isAccount
                                          ? 'Set password'
                                          : 'Accept invitation'}
                                </Button>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
}
