import { Form, Head } from '@inertiajs/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';

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

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

            <div className="flex flex-col gap-3 mb-3">
                <Button
                    variant="outline"
                    type="button"
                    className="w-full h-11 rounded-xl flex items-center justify-center gap-2 border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 font-medium text-sm transition-all"
                    onClick={() => window.location.href = '/auth/google'}
                >
                    <svg className="h-5 w-5" viewBox="0 0 24 24">
                        <path
                            fill="#EA4335"
                            d="M12 5.04c1.62 0 3.08.56 4.22 1.65l3.15-3.15C17.45 1.76 14.96 1 12 1 7.37 1 3.39 3.65 1.39 7.56l3.8 2.94c.89-2.67 3.39-4.46 6.81-4.46z"
                        />
                        <path
                            fill="#4285F4"
                            d="M23.49 12.27c0-.81-.07-1.59-.2-2.35H12v4.46h6.46c-.28 1.48-1.12 2.73-2.38 3.58l3.7 2.87c2.16-1.99 3.41-4.92 3.41-8.56z"
                        />
                        <path
                            fill="#FBBC05"
                            d="M5.19 10.5c-.23-.69-.36-1.43-.36-2.2s.13-1.51.36-2.2L1.39 3.16C.5 4.93 0 6.9 0 9s.5 4.07 1.39 5.84l3.8-2.94-.01-.4z"
                        />
                        <path
                            fill="#34A853"
                            d="M12 23c3.24 0 5.97-1.08 7.96-2.92l-3.7-2.87c-1.03.69-2.35 1.1-3.9 1.1-3.42 0-5.92-2.28-6.81-5.38l-3.8 2.94C3.39 20.35 7.37 23 12 23z"
                        />
                    </svg>
                    Masuk dengan Google
                </Button>
            </div>
            <div className="relative my-3">
                <div className="absolute inset-0 flex items-center">
                    <div className="w-full border-t border-gray-100" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                    <span className="bg-white px-2 text-gray-400">atau masuk dengan email</span>
                </div>
            </div>

            {status && (
                <div className="mb-5 rounded-xl border px-4 py-3 text-center text-sm font-medium text-green-700" style={{ backgroundColor: '#E8FFF9', borderColor: '#06D6A0' }}>
                    {status}
                </div>
            )}

            <Form
                {...store.form()}
                resetOnSuccess={['password']}
                className="flex flex-col gap-5"
            >
                {({ processing, errors }) => (
                    <>
                        <div className="grid gap-4">
                            <div className="grid gap-1.5">
                                <Label htmlFor="email" className="text-sm font-medium" style={{ color: '#1A1A1A' }}>
                                    Alamat Email
                                </Label>
                                <Input
                                    id="email"
                                    type="email"
                                    name="email"
                                    required
                                    autoFocus
                                    tabIndex={1}
                                    autoComplete="email"
                                    placeholder="email@contoh.com"
                                    className="h-11 rounded-xl"
                                />
                                <InputError message={errors.email} />
                            </div>

                            <div className="grid gap-1.5">
                                <div className="flex items-center justify-between">
                                    <Label htmlFor="password" className="text-sm font-medium" style={{ color: '#1A1A1A' }}>
                                        Kata Sandi
                                    </Label>
                                    {canResetPassword && (
                                        <TextLink
                                            href={request()}
                                            className="text-xs"
                                            tabIndex={5}
                                        >
                                            Lupa kata sandi?
                                        </TextLink>
                                    )}
                                </div>
                                <PasswordInput
                                    id="password"
                                    name="password"
                                    required
                                    tabIndex={2}
                                    autoComplete="current-password"
                                    placeholder="Kata sandi"
                                    className="h-11 rounded-xl"
                                />
                                <InputError message={errors.password} />
                            </div>

                            <div className="flex items-center gap-2.5">
                                <Checkbox id="remember" name="remember" tabIndex={3} />
                                <Label htmlFor="remember" className="text-sm font-normal cursor-pointer" style={{ color: '#555555' }}>
                                    Ingat saya
                                </Label>
                            </div>

                            <Button
                                type="submit"
                                className="mt-1 h-11 w-full rounded-xl text-sm font-semibold"
                                tabIndex={4}
                                disabled={processing}
                                data-test="login-button"
                                style={{ backgroundColor: '#118AB2' }}
                            >
                                {processing && <Spinner />}
                                Masuk
                            </Button>
                        </div>

                        <div className="text-center text-sm" style={{ color: '#555555' }}>
                            Belum punya akun?{' '}
                            <TextLink href={register()} tabIndex={6} className="font-semibold">
                                Daftar Gratis
                            </TextLink>
                        </div>
                    </>
                )}
            </Form>
        </>
    );
}

Login.layout = {
    title: 'Selamat Datang Kembali',
    description: 'Masukkan email dan kata sandi Anda untuk melanjutkan',
};
