import { FormEventHandler, useEffect } 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 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 (
        <>
            <Head title="Log in" />
            <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">
                                    SELAMAT DATANG KEMBALI!
                                </h2>
                                <p className="text-sm mb-6 lg:mb-8 text-center px-4">
                                    Masuk untuk melanjutkan ke dashboard SKL
                                </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">
                                                    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>
                                    </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>
        </>
    );
}
