import { Form, Head } from "@inertiajs/react";
import { Mail } from "lucide-react";
import InputError from "@/components/input-error";
import TextLink from "@/components/text-link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { login } from "@/routes";
import { email } from "@/routes/password";

export default function ForgotPassword({ status }: { status?: string }) {
    return (
        <>
            <Head title="Lupa Password" />
            <div className="space-y-6">
                <div className="flex size-12 items-center justify-center rounded-2xl bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300">
                    <Mail className="size-6" />
                </div>
                {status && (
                    <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm font-medium text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-300">
                        {status}
                    </div>
                )}
                <Form {...email.form()}>
                    {({ processing, errors }) => (
                        <div className="space-y-5">
                            <div className="grid gap-2">
                                <Label htmlFor="email">Alamat email</Label>
                                <Input
                                    id="email"
                                    type="email"
                                    name="email"
                                    autoComplete="email"
                                    autoFocus
                                    required
                                    placeholder="nama@perusahaan.com"
                                />
                                <InputError message={errors.email} />
                            </div>
                            <Button
                                className="h-11 w-full rounded-xl"
                                disabled={processing}
                            >
                                {processing
                                    ? "Mengirim..."
                                    : "Kirim Link Reset Password"}
                            </Button>
                        </div>
                    )}
                </Form>
                <div className="text-center text-sm text-muted-foreground">
                    Ingat password?{" "}
                    <TextLink href={login()}>Kembali ke login</TextLink>
                </div>
            </div>
        </>
    );
}

ForgotPassword.layout = {
    title: "Lupa password?",
    description:
        "Masukkan email akun Anda. Kami akan mengirimkan link untuk membuat password baru.",
};
