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 { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';

export default function TicketLogin({ status }: { status?: string }) {
    return (
        <>
            <Head title="Sign in" />

            <div className="mx-auto w-full max-w-md">
                <h1 className="text-2xl font-semibold tracking-tight">
                    Sign in to your ticket account
                </h1>
                <p className="mt-2 text-sm text-muted-foreground">
                    Your reports, your systems and the conversation with our
                    support team.
                </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/login"
                        method="post"
                        resetOnSuccess={['password']}
                        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"
                                        placeholder="you@example.com"
                                    />
                                    <InputError message={errors.email} />
                                </div>

                                <div className="grid gap-2">
                                    <div className="flex items-center justify-between">
                                        <Label htmlFor="password">
                                            Password
                                        </Label>
                                        <Link
                                            href="/ticket/forgot-password"
                                            className="text-xs text-muted-foreground underline-offset-4 hover:underline"
                                        >
                                            Forgot password?
                                        </Link>
                                    </div>
                                    <Input
                                        id="password"
                                        name="password"
                                        type="password"
                                        required
                                        autoComplete="current-password"
                                    />
                                    <InputError message={errors.password} />
                                </div>

                                <div className="flex items-center gap-2">
                                    <Checkbox id="remember" name="remember" />
                                    <Label htmlFor="remember">
                                        Keep me signed in on this device
                                    </Label>
                                </div>

                                <Button
                                    type="submit"
                                    className="mt-1 w-full"
                                    disabled={processing}
                                >
                                    {processing && <Spinner />}
                                    Sign in
                                </Button>
                            </>
                        )}
                    </Form>
                </TicketCard>

                <p className="mt-5 text-center text-sm text-muted-foreground">
                    Need an account?{' '}
                    <Link
                        href="/ticket/register"
                        className="font-medium text-foreground underline underline-offset-4"
                    >
                        Create one
                    </Link>
                </p>
            </div>
        </>
    );
}
