import { Form, Head, Link } 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 TicketForgotPassword({ status }: { status?: string }) {
    return (
        <>
            <Head title="Forgot password" />

            <div className="mx-auto w-full max-w-md">
                <h1 className="text-2xl font-semibold tracking-tight">
                    Reset your password
                </h1>
                <p className="mt-2 text-sm text-muted-foreground">
                    Enter the email address on your account and we will send a
                    link to set a new password.
                </p>

                {status ? (
                    <p className="mt-4 rounded-lg bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 ring-1 ring-emerald-500/20 dark:text-emerald-300">
                        {status}
                    </p>
                ) : null}

                <TicketCard className="mt-6">
                    <Form
                        action="/ticket/forgot-password"
                        method="post"
                        className="flex flex-col gap-4"
                    >
                        {({ processing, errors }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label htmlFor="email">
                                        Email address
                                    </Label>
                                    <Input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        autoFocus
                                        autoComplete="email"
                                    />
                                    <InputError message={errors.email} />
                                </div>

                                <Button type="submit" disabled={processing}>
                                    {processing && <Spinner />}
                                    Email me a reset link
                                </Button>
                            </>
                        )}
                    </Form>
                </TicketCard>

                <p className="mt-5 text-center text-sm text-muted-foreground">
                    <Link
                        href="/ticket/login"
                        className="font-medium text-foreground underline underline-offset-4"
                    >
                        Back to sign in
                    </Link>
                </p>
            </div>
        </>
    );
}
