import { Form, Head } from "@inertiajs/react";
import {
    ArrowRight,
    CheckCircle2,
    LockKeyhole,
    Mail,
    ShieldCheck,
} from "lucide-react";
import InputError from "@/components/input-error";
import PasswordInput from "@/components/password-input";
import TextLink from "@/components/text-link";
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";
import { register } from "@/routes";
import { store } from "@/routes/login";
import { request } from "@/routes/password";
import PasskeyVerify from "@/components/passkey-verify";

type Props = { status?: string; canResetPassword: boolean };

export default function Login({ status, canResetPassword }: Props) {
    return (
        <>
            <Head title="Masuk" />
            <PasskeyVerify />

            <Form
                {...store.form()}
                resetOnSuccess={["password"]}
                className="space-y-5"
            >
                {({ processing, errors }) => (
                    <>
                        {status && (
                            <div className="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                                <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
                                <span>{status}</span>
                            </div>
                        )}

                        <div className="space-y-5">
                            <div className="space-y-2">
                                <Label htmlFor="email">Email bisnis</Label>
                                <div className="relative">
                                    <Mail className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
                                    <Input
                                        id="email"
                                        type="email"
                                        name="email"
                                        required
                                        autoFocus
                                        autoComplete="email"
                                        placeholder="nama@perusahaan.com"
                                        className="h-12 rounded-xl border-slate-200 bg-slate-50/60 pl-10 shadow-none transition focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-800/60"
                                    />
                                </div>
                                <InputError message={errors.email} />
                            </div>

                            <div className="space-y-2">
                                <div className="flex items-center justify-between">
                                    <Label htmlFor="password">Password</Label>
                                    {canResetPassword && (
                                        <TextLink
                                            href={request()}
                                            className="text-xs font-semibold text-blue-600 hover:text-blue-700"
                                        >
                                            Lupa password?
                                        </TextLink>
                                    )}
                                </div>
                                <div className="relative">
                                    <LockKeyhole className="pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-400" />
                                    <PasswordInput
                                        id="password"
                                        name="password"
                                        required
                                        autoComplete="current-password"
                                        placeholder="Masukkan password Anda"
                                        className="h-12 rounded-xl border-slate-200 bg-slate-50/60 pl-10 shadow-none transition focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-800/60"
                                    />
                                </div>
                                <InputError message={errors.password} />
                            </div>

                            <div className="flex items-center gap-2.5">
                                <Checkbox id="remember" name="remember" />
                                <Label
                                    htmlFor="remember"
                                    className="cursor-pointer text-sm font-normal text-slate-600 dark:text-slate-400"
                                >
                                    Ingat saya di perangkat ini
                                </Label>
                            </div>

                            <Button
                                type="submit"
                                className="h-12 w-full rounded-xl bg-[#1769e0] font-semibold shadow-lg shadow-blue-500/20 transition-all hover:-translate-y-0.5 hover:bg-[#1258bd] hover:shadow-xl hover:shadow-blue-500/20"
                                disabled={processing}
                            >
                                {processing ? (
                                    <Spinner />
                                ) : (
                                    <ArrowRight className="size-4" />
                                )}
                                {processing
                                    ? "Memproses..."
                                    : "Masuk ke Dashboard"}
                            </Button>
                        </div>

                        <div className="flex items-center justify-center gap-2 pt-1 text-[11px] text-slate-400">
                            <ShieldCheck className="size-3.5" />
                            Data akun dan aktivitas Anda terlindungi.
                        </div>

                        <div className="relative py-1">
                            <div className="absolute inset-0 flex items-center">
                                <span className="w-full border-t border-slate-200 dark:border-slate-800" />
                            </div>
                            <div className="relative flex justify-center">
                                <span className="bg-white px-3 text-xs text-slate-400 dark:bg-slate-900">
                                    BELUM PUNYA AKUN?
                                </span>
                            </div>
                        </div>

                        <TextLink
                            href={register()}
                            className="flex h-11 w-full items-center justify-center rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 transition hover:border-blue-200 hover:bg-blue-50/50 hover:text-blue-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
                        >
                            Daftarkan perusahaan
                        </TextLink>
                    </>
                )}
            </Form>
        </>
    );
}

Login.layout = {
    title: "Selamat datang kembali",
    description: "Masuk untuk melanjutkan ke CRM perusahaan Anda.",
};
