import Checkbox from '@/Components/Checkbox';
import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import FormInput from '@/Components/UI/FormInput';
import Button from '@/Components/UI/Button';
import AuthLayout from '@/Layouts/AuthLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

export default function Login({
    status,
    canResetPassword,
}: {
    status?: string;
    canResetPassword: boolean;
}) {
    const { data, setData, post, processing, errors, reset } = useForm({
        email: '',
        password: '',
        remember: false as boolean,
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('login'), {
            onFinish: () => reset('password'),
        });
    };

    return (
        <AuthLayout title="Sign In" subtitle="Access your executive learning dashboard.">
            <Head title="Log in" />

            {status && (
                <div className="mb-4 rounded bg-status-published/10 px-4 py-2 text-sm font-medium text-status-published">
                    {status}
                </div>
            )}

            <form onSubmit={submit} className="space-y-5">
                <div>
                    <InputLabel htmlFor="email" value="Email" />
                    <FormInput
                        id="email"
                        type="email"
                        name="email"
                        value={data.email}
                        className="mt-1"
                        autoComplete="username"
                        isFocused={true}
                        onChange={(e) => setData('email', e.target.value)}
                    />
                    <InputError message={errors.email} className="mt-1" />
                </div>

                <div>
                    <InputLabel htmlFor="password" value="Password" />
                    <FormInput
                        id="password"
                        type="password"
                        name="password"
                        value={data.password}
                        className="mt-1"
                        autoComplete="current-password"
                        onChange={(e) => setData('password', e.target.value)}
                    />
                    <InputError message={errors.password} className="mt-1" />
                </div>

                <div className="flex items-center justify-between">
                    <label className="flex items-center">
                        <Checkbox
                            name="remember"
                            checked={data.remember}
                            onChange={(e) => setData('remember', (e.target.checked || false) as false)}
                        />
                        <span className="ms-2 text-sm text-on-surface-variant">Remember me</span>
                    </label>

                    {canResetPassword && (
                        <Link href={route('password.request')} className="text-sm text-jgcp-navy hover:underline">
                            Forgot your password?
                        </Link>
                    )}
                </div>

                <Button type="submit" variant="primary" className="w-full" disabled={processing}>
                    Sign In
                </Button>
            </form>

            <p className="mt-8 text-center text-sm text-on-surface-variant">
                Not yet enrolled?{' '}
                <Link href={route('register')} className="font-medium text-jgcp-navy hover:underline">
                    Create an account
                </Link>
            </p>
        </AuthLayout>
    );
}
