import { FormEventHandler, useEffect } from "react";
import GuestLayout from "@/layouts/guest-layout";
import { Head, Link, useForm } from "@inertiajs/react";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} 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 Login({
    status,
    canResetPassword,
}: {
    status?: string;
    canResetPassword: boolean;
}) {
    const { data, setData, post, processing, errors, reset } = useForm({
        email: "",
        password: "",
        remember: false,
    });

    useEffect(() => {
        return () => {
            reset("password");
        };
    }, []);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route("login"));
    };

    return (
        // <GuestLayout>
        //     <Head title="Log in" />

        //     <form onSubmit={submit}>
        //         <Card className="mx-auto max-w-sm">
        //             <CardHeader>
        //                 <CardTitle className="text-2xl">Login</CardTitle>
        //                 <CardDescription>
        //                     Enter your email below to login to your account
        //                 </CardDescription>
        //             </CardHeader>
        //             <CardContent>
        //                 {status && (
        //                     <div className="mb-4 font-medium text-sm text-green-600">
        //                         {status}
        //                     </div>
        //                 )}

        //                 <div className="grid gap-4">
        //                     <div className="grid gap-2">
        //                         <Label htmlFor="email">Email</Label>
        //                         <Input
        //                             id="email"
        //                             type="email"
        //                             placeholder="m@example.com"
        //                             value={data.email}
        //                             onChange={(e) =>
        //                                 setData("email", e.target.value)
        //                             }
        //                             required
        //                         />
        //                         <InputError message={errors.email} />
        //                     </div>
        //                     <div className="grid gap-2">
        //                         <div className="flex items-center">
        //                             <Label htmlFor="password">Password</Label>
        //                             <Link
        //                                 href={route("password.request")}
        //                                 className="ml-auto inline-block text-sm underline"
        //                             >
        //                                 Forgot your password?
        //                             </Link>
        //                         </div>
        //                         <Input
        //                             id="password"
        //                             type="password"
        //                             value={data.password}
        //                             onChange={(e) =>
        //                                 setData("password", e.target.value)
        //                             }
        //                             required
        //                         />
        //                         <InputError message={errors.password} />
        //                     </div>
        //                     <Button type="submit" className="w-full">
        //                         Login
        //                     </Button>
        //                 </div>
        //                 <div className="mt-4 text-center text-sm">
        //                     Don&apos;t have an account?{" "}
        //                     <Link href="/register" className="underline">
        //                         Sign up
        //                     </Link>
        //                 </div>
        //             </CardContent>
        //         </Card>
        //     </form>
        // </GuestLayout>
        <>
            <Head title="Log in" />
            <form onSubmit={submit}>
                <div className="w-full">
                    <div className="flex justify-center items-center h-screen">
                        <div className="w-5/12">
                            <div className="flex flex-col justify-center items-center">
                                <Link href="/" className="">
                                    <img
                                        src="/assets/logo_skl.svg"
                                        alt="Logo SKL"
                                        className="w-24 h-24"
                                    />
                                </Link>

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

                                <h2 className="text-lg font-bold mt-8 text-[#0DAB19]">
                                    SELAMAT DATANG KEMBALI!
                                </h2>
                                <p className="text-sm mb-8">
                                    Masuk untuk melanjutkan ke dashboard SKL
                                </p>
                                <Card className="mx-auto max-w-sm">
                                    {/* <CardHeader>
                                        <CardTitle className="text-2xl">
                                            Login
                                        </CardTitle>
                                        <CardDescription>
                                            Masuk untuk melanjutkan ke dashboard
                                            SKL
                                        </CardDescription>
                                    </CardHeader> */}
                                    <CardContent 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">
                                                    Nama Pengguna
                                                </Label>
                                                <Input
                                                    id="email"
                                                    type="email"
                                                    placeholder="m@example.com"
                                                    value={data.email}
                                                    onChange={(e) =>
                                                        setData(
                                                            "email",
                                                            e.target.value
                                                        )
                                                    }
                                                    required
                                                />
                                                <InputError
                                                    message={errors.email}
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <div className="flex items-center">
                                                    <Label htmlFor="password">
                                                        Kata Sandi
                                                    </Label>
                                                    <Link
                                                        href={route(
                                                            "password.request"
                                                        )}
                                                        className="ml-auto inline-block text-sm underline"
                                                    >
                                                        Lupa Kata Sandi?
                                                    </Link>
                                                </div>
                                                <Input
                                                    id="password"
                                                    type="password"
                                                    value={data.password}
                                                    onChange={(e) =>
                                                        setData(
                                                            "password",
                                                            e.target.value
                                                        )
                                                    }
                                                    required
                                                />
                                                <InputError
                                                    message={errors.password}
                                                />
                                            </div>
                                            <Button
                                                type="submit"
                                                className="w-full bg-[#0DAB19] hover:bg-[#04770D] text-white"
                                            >
                                                Login
                                            </Button>
                                        </div>
                                        {/* <div className="mt-4 text-center text-sm">
                                            Don&apos;t have an account?{" "}
                                            <Link
                                                href="/register"
                                                className="underline"
                                            >
                                                Sign up
                                            </Link>
                                        </div> */}
                                    </CardContent>
                                </Card>
                                <div className="flex flex-col">
                                    <div className="mt-4 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>
                        <div className="w-7/12 bg-[#29752F] bg-[url('/assets/bg-login.svg')] h-full pt-10 bg-cover bg-top bg-no-repeat"></div>
                    </div>
                </div>
            </form>
        </>
    );
}
