import React from 'react';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm, usePage } from '@inertiajs/react';

interface LoginProps {
    status?: string;
    canResetPassword: boolean;
}

export default function Login({ status, canResetPassword }: LoginProps) {
    const { system_settings } = usePage().props as any;
    const isGoogleEnabled = system_settings?.oauth_google_enabled === '1' || system_settings?.oauth_google_enabled === true;
    const isGithubEnabled = system_settings?.oauth_github_enabled === '1' || system_settings?.oauth_github_enabled === true;

    const { data, setData, post, processing, errors, reset } = useForm({
        email: '',
        password: '',
        remember: false,
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('login'), { onFinish: () => reset('password') });
    };

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

            {/* Heading */}
            <div className="mb-8 anim-down">
                <h1 className="text-2xl font-bold text-[#1A2421] tracking-tight">Sign in</h1>
                <p className="mt-1.5 text-sm text-gray-400 font-medium">
                    Enter your credentials to access the dashboard.
                </p>
            </div>

            {/* Status message */}
            {status && (
                <div className="mb-6 px-4 py-3 rounded-xl bg-emerald-50 border border-emerald-100 text-sm font-semibold text-emerald-700 anim-fade">
                    {status}
                </div>
            )}

            {/* OAuth */}
            {(isGoogleEnabled || isGithubEnabled) && (
                <div className="mb-6 anim-up" style={{ animationDelay: '0.08s' }}>
                    <div className={`grid gap-3 ${isGoogleEnabled && isGithubEnabled ? 'grid-cols-2' : 'grid-cols-1'}`}>
                        {isGoogleEnabled && (
                            <a
                                href="/auth/google/redirect"
                                className="flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 transition-colors duration-200 text-sm font-semibold text-gray-700"
                            >
                                <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24">
                                    <path fill="#EA4335" d="M12 5c1.61 0 3.09.59 4.23 1.57l3.12-3.12C17.35 1.67 14.85 1 12 1 7.73 1 4.14 3.48 2.46 7.1l3.71 2.87C7.04 7.09 9.34 5 12 5z"/>
                                    <path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58l3.7 2.87c2.16-2 3.72-4.94 3.72-8.69z"/>
                                    <path fill="#FBBC05" d="M6.17 14.77l-3.71 2.87C4.14 21.27 7.73 23 12 23c2.97 0 5.48-1 7.37-2.69l-3.7-2.87c-1.03.69-2.35 1.11-3.67 1.11-2.66 0-4.96-2.09-5.83-4.78z"/>
                                    <path fill="#34A853" d="M12 19.45c1.32 0 2.64-.42 3.67-1.11l3.7 2.87C17.48 22 14.97 23 12 23 7.73 23 4.14 21.27 2.47 17.64l3.71-2.87c.86 2.69 3.16 4.68 5.82 4.68z"/>
                                </svg>
                                Google
                            </a>
                        )}
                        {isGithubEnabled && (
                            <a
                                href="/auth/github/redirect"
                                className="flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 transition-colors duration-200 text-sm font-semibold text-gray-700"
                            >
                                <svg className="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                                </svg>
                                GitHub
                            </a>
                        )}
                    </div>

                    <div className="relative my-6">
                        <div className="absolute inset-0 flex items-center">
                            <div className="w-full border-t border-gray-100" />
                        </div>
                        <div className="relative flex justify-center">
                            <span className="px-3 bg-white text-xs font-semibold text-gray-300 uppercase tracking-widest">or</span>
                        </div>
                    </div>
                </div>
            )}

            {/* Form */}
            <form onSubmit={submit} className="anim-up" style={{ animationDelay: '0.14s' }}>
                <div className="space-y-4">

                    {/* Email */}
                    <div>
                        <label htmlFor="email" className="block text-sm font-semibold text-gray-600 mb-1.5">
                            Email address
                        </label>
                        <input
                            id="email"
                            type="email"
                            autoComplete="email"
                            autoFocus
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            placeholder="you@company.com"
                            className={`auth-input${errors.email ? ' !border-red-300 !bg-red-50/50' : ''}`}
                        />
                        {errors.email && (
                            <p className="mt-1.5 text-xs font-semibold text-red-500">{errors.email}</p>
                        )}
                    </div>

                    {/* Password */}
                    <div>
                        <div className="flex items-center justify-between mb-1.5">
                            <label htmlFor="password" className="text-sm font-semibold text-gray-600">
                                Password
                            </label>
                            {canResetPassword && (
                                <Link
                                    href={route('password.request')}
                                    className="text-xs font-semibold text-[#D4A017] hover:text-[#B88B14] transition-colors duration-200"
                                >
                                    Forgot password?
                                </Link>
                            )}
                        </div>
                        <input
                            id="password"
                            type="password"
                            autoComplete="current-password"
                            value={data.password}
                            onChange={(e) => setData('password', e.target.value)}
                            placeholder="••••••••"
                            className={`auth-input${errors.password ? ' !border-red-300 !bg-red-50/50' : ''}`}
                        />
                        {errors.password && (
                            <p className="mt-1.5 text-xs font-semibold text-red-500">{errors.password}</p>
                        )}
                    </div>
                </div>

                {/* Remember me */}
                <label className="mt-4 flex items-center gap-2.5 cursor-pointer select-none group w-fit">
                    <input
                        type="checkbox"
                        checked={data.remember}
                        onChange={(e) => setData('remember', e.target.checked)}
                        className="sr-only"
                    />
                    <div className={`w-4 h-4 rounded-[5px] border flex items-center justify-center transition-colors duration-200 shrink-0 ${data.remember ? 'bg-[#3D4E4B] border-[#3D4E4B]' : 'bg-white border-gray-300'}`}>
                        {data.remember && (
                            <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3.5}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        )}
                    </div>
                    <span className="text-sm font-medium text-gray-500 group-hover:text-gray-700 transition-colors duration-200">
                        Keep me signed in
                    </span>
                </label>

                {/* Submit */}
                <button
                    type="submit"
                    disabled={processing}
                    className="mt-6 w-full h-11 rounded-xl bg-[#3D4E4B] hover:bg-[#2D3A38] text-white text-sm font-bold tracking-tight transition-colors duration-200 flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
                >
                    {processing ? (
                        <>
                            <svg className="w-4 h-4 animate-spin text-white/60" fill="none" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                            </svg>
                            Signing in…
                        </>
                    ) : (
                        'Sign in'
                    )}
                </button>
            </form>

            {/* Register link */}
            <p className="mt-7 text-center text-sm text-gray-400 font-medium anim-fade" style={{ animationDelay: '0.22s' }}>
                Don't have an account?{' '}
                <Link href={route('register')} className="text-[#3D4E4B] font-semibold hover:text-[#D4A017] transition-colors duration-200">
                    Create one
                </Link>
            </p>
        </GuestLayout>
    );
}
