import { FormEventHandler } from "react";
import { Head, Link, useForm } from "@inertiajs/react";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { InputError } from "@/components/ui/input-error";

export default function ForgotPassword({ status }: { status?: string }) {
    const { data, setData, post, processing, errors } = useForm({
        email: "",
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route("password.email"));
    };

    return (
        <>
            <Head title="Forgot Password" />
            <form onSubmit={submit}>
                <div className="w-full">
                    <div className="flex flex-col lg:flex-row min-h-screen">
                        {/* Left Section - Form */}
                        <div className="w-full lg:w-5/12 px-4 lg:px-0 py-8 lg:py-0">
                            <div className="flex flex-col justify-center items-center h-full max-w-md mx-auto">
                                <Link href="/" className="mb-4">
                                    <img
                                        src="/assets/logo_skl.svg"
                                        alt="Logo SKL"
                                        className="w-20 h-20 lg:w-24 lg:h-24"
                                    />
                                </Link>

                                <h1 className="text-xl lg:text-2xl font-bold mt-2 text-center">
                                    Status Ketaatan Lingkungan
                                </h1>

                                <h2 className="text-base lg:text-lg font-bold mt-6 lg:mt-8 text-[#0DAB19] text-center">
                                    LUPA KATA SANDI?
                                </h2>
                                <p className="text-sm mb-6 lg:mb-8 text-center px-4">
                                    Masukkan email terdaftar untuk <br />
                                    kami kirimkan link atur ulang kata sandi
                                </p>

                                <Card className="w-full mx-4 lg:mx-auto lg:max-w-sm">
                                    <CardContent className="pt-4">
                                        {status && (
                                            <div className="mb-4 font-medium text-sm text-green-600">
                                                {status}
                                            </div>
                                        )}

                                        <div className="grid gap-4 mt-6">
                                            <div className="grid gap-2">
                                                <Label htmlFor="email">
                                                    Email
                                                </Label>
                                                <Input
                                                    id="email"
                                                    type="email"
                                                    name="email"
                                                    placeholder="m@example.com"
                                                    value={data.email}
                                                    onChange={(e) =>
                                                        setData(
                                                            "email",
                                                            e.target.value
                                                        )
                                                    }
                                                    required
                                                />
                                                <InputError
                                                    message={errors.email}
                                                />
                                            </div>

                                            <Button
                                                type="submit"
                                                disabled={processing}
                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
                                            >
                                                Kirim Link Reset Password
                                            </Button>

                                            <div className="text-center">
                                                <Link
                                                    href={route("login")}
                                                    className="text-sm text-gray-600 hover:text-[#0DAB19]"
                                                >
                                                    Kembali ke halaman login
                                                </Link>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>

                                <div className="flex flex-col mt-6 lg:mt-4">
                                    <div className="text-center text-sm">
                                        © 2025
                                    </div>
                                    <span className="text-center text-bold text-sm">
                                        Dinas Lingkungan Hidup Provinsi DKI
                                        Jakarta
                                    </span>
                                    <span className="text-center text-bold text-sm">
                                        Bidang Tata Lingkungan dan Kebersihan
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Right Section - Background */}
                        <div className="hidden lg:block lg:w-7/12 bg-[#29752F] bg-[url('/assets/bg-login.svg')] bg-cover bg-top bg-no-repeat"></div>
                    </div>
                </div>
            </form>
        </>
    );
}
