import React, { useState } from 'react';
import { Shield, Eye, EyeOff, Loader2, UserCircle, Globe, Smartphone } from 'lucide-react';
import { useForm, Head, Link } from '@inertiajs/react';

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

    const [showPassword, setShowPassword] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();
        post('/admin/login');
    };

    return (
        <div className="min-h-screen flex flex-col justify-center items-center px-4 relative overflow-hidden bg-slate-50 font-sans">
            <Head title="Admin Portal - Login" />

            {/* Subtle animated diagonal grid background */}
            <div
                className="absolute inset-[-50%] z-0 opacity-40 pointer-events-none"
                style={{
                    backgroundImage: `
                        linear-gradient(to right, rgba(15, 110, 86, 0.08) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(15, 110, 86, 0.08) 1px, transparent 1px)
                    `,
                    backgroundSize: '48px 48px',
                    transform: 'rotate(-20deg)',
                    animation: 'diagonalGrid 30s linear infinite',
                }}
            />
            <style>{`
                @keyframes diagonalGrid {
                    0% { background-position: 0 0; }
                    100% { background-position: 48px 48px; }
                }
            `}</style>

            {/* Login Card */}
            <div className="w-full max-w-md bg-white rounded-xl shadow-sm border border-slate-200 p-8 z-10 relative">
                {/* Header / Logo */}
                <div className="flex flex-col items-center mb-6 text-center">
                    <div className="w-16 h-16 bg-[#0F6E56]/10 rounded-2xl flex items-center justify-center mb-4 shadow-inner">
                        <Shield className="w-10 h-10 text-[#0F6E56]" />
                    </div>
                    <h1 className="text-2xl font-semibold text-gray-800 tracking-tight">Admin Portal</h1>
                    <p className="text-sm text-gray-500 mt-1">Domestic Worker Marketplace</p>
                </div>

                <hr className="border-slate-100 mb-6" />

                {/* Form */}
                <form onSubmit={handleSubmit} className="space-y-5">
                    <div>
                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1.5">
                            Email Address
                        </label>
                        <input
                            id="email"
                            type="email"
                            autoFocus
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            placeholder="admin@example.com"
                            className="w-full px-3.5 py-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] text-gray-800 placeholder-slate-400 text-sm transition-colors"
                        />
                        {errors.email && (
                            <p className="mt-1.5 text-sm text-red-500 font-medium">{errors.email}</p>
                        )}
                    </div>

                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1.5">
                            Password
                        </label>
                        <div className="relative">
                            <input
                                id="password"
                                type={showPassword ? 'text' : 'password'}
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                placeholder="••••••••"
                                className="w-full pl-3.5 pr-10 py-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] text-gray-800 placeholder-slate-400 text-sm transition-colors"
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-600 transition-colors focus:outline-none"
                            >
                                {showPassword ? (
                                    <EyeOff className="w-5 h-5" />
                                ) : (
                                    <Eye className="w-5 h-5" />
                                )}
                            </button>
                        </div>
                        {errors.password && (
                            <p className="mt-1.5 text-sm text-red-500 font-medium">{errors.password}</p>
                        )}
                    </div>

                    <div className="flex items-center">
                        <input
                            id="remember"
                            type="checkbox"
                            checked={data.remember}
                            onChange={(e) => setData('remember', e.target.checked)}
                            className="w-4 h-4 rounded border-slate-300 text-[#0F6E56] focus:ring-[#0F6E56]"
                        />
                        <label htmlFor="remember" className="ml-2.5 text-sm text-gray-600 select-none">
                            Remember me
                        </label>
                    </div>

                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full bg-[#0F6E56] hover:bg-[#085041] active:bg-[#063c31] text-white rounded-lg h-11 flex items-center justify-center font-medium text-sm transition-colors shadow-sm disabled:opacity-70 disabled:cursor-not-allowed"
                    >
                        {processing ? (
                            <>
                                <Loader2 className="w-5 h-5 animate-spin mr-2" />
                                Signing in...
                            </>
                        ) : (
                            'Sign in to Admin'
                        )}
                    </button>
                    <Link
                        href="/employer/login"
                        className="w-full h-11 flex items-center justify-center text-sm font-medium text-slate-500 hover:text-[#0F6E56] transition-colors"
                    >
                        Sign in as Employer
                    </Link>
                </form>
            </div>


        </div>
    );
}
