import { Form } from '@inertiajs/react';
import InputError from '@/components/input-error';
import PasswordInput from '@/components/password-input';
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 { Spinner } from '@/components/ui/spinner';
import { cn } from '@/lib/utils';
import { register } from '@/routes';
import { store } from '@/routes/login';
import { request } from '@/routes/password';

/**
 * The sign-in form itself.
 *
 * It appears in two places — on the landing page, where it is the first thing a
 * member of staff needs, and on the login screen — so it lives here once rather
 * than being written twice and drifting apart.
 */
export function SignInForm({
    canResetPassword = true,
    showRegister = false,
    autoFocus = true,
    className,
}: {
    canResetPassword?: boolean;
    showRegister?: boolean;
    autoFocus?: boolean;
    className?: string;
}) {
    return (
        <Form
            {...store.form()}
            resetOnSuccess={['password']}
            className={cn('flex flex-col gap-6', className)}
        >
            {({ processing, errors }) => (
                <>
                    <div className="grid gap-6">
                        <div className="grid gap-2">
                            <Label htmlFor="email">Email address</Label>
                            <Input
                                id="email"
                                type="email"
                                name="email"
                                required
                                autoFocus={autoFocus}
                                tabIndex={1}
                                autoComplete="email"
                                placeholder="name@company.com.au"
                            />
                            <InputError message={errors.email} />
                        </div>

                        <div className="grid gap-2">
                            <div className="flex items-center">
                                <Label htmlFor="password">Password</Label>
                                {canResetPassword && (
                                    <TextLink
                                        href={request()}
                                        className="ml-auto text-sm"
                                        tabIndex={5}
                                    >
                                        Forgot your password?
                                    </TextLink>
                                )}
                            </div>
                            <PasswordInput
                                id="password"
                                name="password"
                                required
                                tabIndex={2}
                                autoComplete="current-password"
                                placeholder="Password"
                            />
                            <InputError message={errors.password} />
                        </div>

                        <div className="flex items-center space-x-3">
                            <Checkbox
                                id="remember"
                                name="remember"
                                tabIndex={3}
                            />
                            <Label htmlFor="remember">Remember me</Label>
                        </div>

                        <Button
                            type="submit"
                            className="mt-4 w-full"
                            tabIndex={4}
                            disabled={processing}
                            data-test="login-button"
                        >
                            {processing && <Spinner />}
                            Sign in
                        </Button>
                    </div>

                    {showRegister ? (
                        <div className="text-center text-sm text-muted-foreground">
                            Don't have an account?{' '}
                            <TextLink href={register()} tabIndex={5}>
                                Sign up
                            </TextLink>
                        </div>
                    ) : null}
                </>
            )}
        </Form>
    );
}

/**
 * The card the form is usually shown in, so the landing page and the login
 * screen frame it the same way.
 */
export function SignInCard({ children }: { children: React.ReactNode }) {
    return (
        <div className="rounded-2xl bg-card p-6 text-card-foreground shadow-card ring-1 ring-hairline sm:p-7">
            {children}
        </div>
    );
}