import { Head, useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';

import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export default function AdminLogin({ errors: serverErrors }: { errors?: Record<string, string> }) {
    const { data, setData, post, processing, errors } = useForm({
        email: '',
        password: '',
        remember: false,
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('admin.login.post'));
    };

    return (
        <div className="flex min-h-screen items-center justify-center bg-slate-900">
            <Head title="Admin Login" />

            <div className="w-full max-w-sm space-y-6 rounded-2xl bg-slate-800 p-8 shadow-xl">
                <div className="text-center">
                    <div className="text-3xl font-bold text-white">⚡</div>
                    <h1 className="mt-2 text-xl font-bold text-white">Kapor Bikreta</h1>
                    <p className="mt-1 text-sm text-slate-400">Admin Panel</p>
                </div>

                {serverErrors?.email && (
                    <div className="rounded-lg bg-red-900/30 px-4 py-3 text-sm text-red-400">{serverErrors.email}</div>
                )}

                <form onSubmit={submit} className="space-y-4">
                    <div className="space-y-1.5">
                        <Label className="text-slate-300" htmlFor="email">
                            Email
                        </Label>
                        <Input
                            id="email"
                            type="email"
                            autoComplete="email"
                            autoFocus
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            className="border-slate-600 bg-slate-700 text-white placeholder:text-slate-400"
                            placeholder="admin@example.com"
                        />
                        <InputError message={errors.email} />
                    </div>

                    <div className="space-y-1.5">
                        <Label className="text-slate-300" htmlFor="password">
                            Password
                        </Label>
                        <Input
                            id="password"
                            type="password"
                            autoComplete="current-password"
                            value={data.password}
                            onChange={(e) => setData('password', e.target.value)}
                            className="border-slate-600 bg-slate-700 text-white"
                        />
                        <InputError message={errors.password} />
                    </div>

                    <div className="flex items-center gap-2">
                        <Checkbox
                            id="remember"
                            checked={data.remember}
                            onCheckedChange={(v) => setData('remember', Boolean(v))}
                        />
                        <Label htmlFor="remember" className="text-sm text-slate-400">
                            Remember me
                        </Label>
                    </div>

                    <Button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700" disabled={processing}>
                        {processing && <LoaderCircle className="animate-spin" size={16} />}
                        Sign In
                    </Button>
                </form>
            </div>
        </div>
    );
}
