import React, { useState, useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    ArrowLeft, 
    Loader2, 
    Smartphone
} from 'lucide-react';

export default function EmployerOTP() {
    const [otp, setOtp] = useState(['', '', '', '']);
    const [timer, setTimer] = useState(59);
    const [processing, setProcessing] = useState(false);

    useEffect(() => {
        const interval = setInterval(() => {
            if (timer > 0) setTimer(timer - 1);
        }, 1000);
        return () => clearInterval(interval);
    }, [timer]);

    const handleChange = (index, value) => {
        if (value.length <= 1 && /^\d*$/.test(value)) {
            const newOtp = [...otp];
            newOtp[index] = value;
            setOtp(newOtp);
            
            if (value && index < 3) {
                document.getElementById(`otp-${index + 1}`).focus();
            }
        }
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        setProcessing(true);
        setTimeout(() => {
            window.location.href = '/mobile/employer/home';
        }, 1500);
    };

    return (
        <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto">
            <Head title="OTP Verification" />
            
            <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 space-y-10">
                <div className="space-y-2">
                    <h1 className="text-3xl font-bold tracking-tight">Verify email</h1>
                    <p className="text-slate-500 text-sm">Enter the code sent to your email address</p>
                </div>

                <form onSubmit={handleSubmit} className="space-y-10">
                    <div className="flex justify-between space-x-4">
                        {otp.map((digit, i) => (
                            <input
                                key={i}
                                id={`otp-${i}`}
                                type="text"
                                value={digit}
                                onChange={(e) => handleChange(i, e.target.value)}
                                className="w-16 h-18 bg-slate-50 border border-slate-200 rounded-2xl text-center text-2xl font-bold text-slate-900 focus:bg-white focus:ring-2 focus:ring-[#185FA5]/10 focus:border-[#185FA5] outline-none transition-all"
                                maxLength={1}
                                required
                            />
                        ))}
                    </div>

                    <div className="space-y-6">
                        <button
                            type="submit"
                            disabled={processing || otp.join('').length < 4}
                            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 active:scale-[0.98] transition-all disabled:opacity-50"
                        >
                            {processing ? <Loader2 className="w-6 h-6 animate-spin" /> : <span>Verify</span>}
                        </button>

                        <div className="text-center">
                            <p className="text-sm text-slate-500">
                                Didn't receive code? {timer > 0 ? (
                                    <span className="text-[#185FA5] font-medium ml-1">00:{timer < 10 ? `0${timer}` : timer}</span>
                                ) : (
                                    <button type="button" onClick={() => setTimer(59)} className="text-[#185FA5] font-bold hover:underline ml-1">Resend now</button>
                                )}
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}
