import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    ArrowLeft, 
    Loader2, 
    Mail,
    ArrowRight,
    CheckCircle2
} from 'lucide-react';

export default function EmployerForgotPassword() {
    const [email, setEmail] = useState('');
    const [isSent, setIsSent] = useState(false);
    const [processing, setProcessing] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();
        setProcessing(true);
        setTimeout(() => {
            setIsSent(true);
            setProcessing(false);
        }, 1500);
    };

    return (
        <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto">
            <Head title="Forgot Password" />
            
            <div className="px-6 pt-12 pb-6">
                <button onClick={() => window.history.back()} className="p-2 -ml-2 text-slate-600">
                    <ArrowLeft className="w-6 h-6" />
                </button>
            </div>

            <div className="flex-1 px-8 pt-4">
                {!isSent ? (
                    <div className="space-y-10">
                        <div className="space-y-2">
                            <h1 className="text-3xl font-bold tracking-tight">Forgot password</h1>
                            <p className="text-slate-500 text-sm">No worries, we'll send you reset instructions</p>
                        </div>

                        <form onSubmit={handleSubmit} className="space-y-8">
                            <div className="space-y-1.5">
                                <label className="text-sm font-semibold text-slate-700 ml-1">Email</label>
                                <div className="relative">
                                    <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
                                    <input
                                        type="email"
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                        placeholder="Enter your email"
                                        className="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm focus:bg-white focus:ring-2 focus:ring-[#185FA5]/10 focus:border-[#185FA5] outline-none transition-all"
                                        required
                                    />
                                </div>
                            </div>

                            <button
                                type="submit"
                                disabled={processing}
                                className="w-full h-16 bg-[#185FA5] text-white rounded-2xl font-bold text-base shadow-lg shadow-blue-500/20 flex items-center justify-center space-x-2 active:scale-[0.98] transition-all"
                            >
                                {processing ? <Loader2 className="w-6 h-6 animate-spin" /> : (
                                    <>
                                        <span>Reset password</span>
                                        <ArrowRight className="w-5 h-5" />
                                    </>
                                )}
                            </button>
                        </form>
                    </div>
                ) : (
                    <div className="space-y-8 text-center py-10">
                        <div className="flex justify-center">
                            <div className="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center text-[#185FA5]">
                                <CheckCircle2 className="w-10 h-10" />
                            </div>
                        </div>
                        <div className="space-y-2">
                            <h2 className="text-2xl font-bold tracking-tight">Check your email</h2>
                            <p className="text-sm text-slate-500 leading-relaxed">
                                We've sent a password reset link to <br />
                                <span className="font-bold text-slate-900">{email}</span>
                            </p>
                        </div>
                        <div className="pt-4">
                            <Link 
                                href="/mobile/employer/login"
                                className="font-bold text-[#185FA5] hover:text-[#144f8a] underline underline-offset-4 text-sm"
                            >
                                Back to login
                            </Link>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}
