import { Form, Head } from '@inertiajs/react';
import InputError from '@/components/input-error';
import { TicketCard } from '@/components/ticket/ticket-ui';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';

export default function CustomerResetPassword({
    token,
    email,
    passwordRules,
}: {
    token: string;
    email: string;
    passwordRules?: string;
}) {
    return (
        <>
            <Head title="Set a new password" />

            <div className="mx-auto w-full max-w-md">
                <h1 className="text-2xl font-semibold tracking-tight">
                    Set a new password
                </h1>
                <p className="mt-2 text-sm text-muted-foreground">
                    Choose a password you do not use anywhere else.
                </p>

                <TicketCard className="mt-6">
                    <Form
                        action="/ticket/reset-password"
                        method="post"
                        className="flex flex-col gap-4"
                    >
                        {({ processing, errors }) => (
                            <>
                                <input
                                    type="hidden"
                                    name="token"
                                    value={token}
                                />

                                <div className="grid gap-2">
                                    <Label htmlFor="email">
                                        Email address
                                    </Label>
                                    <Input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        defaultValue={email}
                                        autoComplete="email"
                                    />
                                    <InputError message={errors.email} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="password">
                                        New password
                                    </Label>
                                    <Input
                                        id="password"
                                        name="password"
                                        type="password"
                                        required
                                        autoFocus
                                        autoComplete="new-password"
                                        passwordrules={passwordRules}
                                    />
                                    <InputError message={errors.password} />
                                </div>

                                <div className="grid gap-2">
                                    <Label htmlFor="password_confirmation">
                                        Confirm new password
                                    </Label>
                                    <Input
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        type="password"
                                        required
                                        autoComplete="new-password"
                                    />
                                    <InputError
                                        message={errors.password_confirmation}
                                    />
                                </div>

                                <Button type="submit" disabled={processing}>
                                    {processing && <Spinner />}
                                    Set password and sign in
                                </Button>
                            </>
                        )}
                    </Form>
                </TicketCard>
            </div>
        </>
    );
}
