import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    User, 
    Phone, 
    MapPin, 
    ChevronRight, 
    CheckCircle2, 
    ArrowLeft,
    Camera,
    Briefcase,
    ShieldCheck,
    Globe
} from 'lucide-react';

export default function WorkerRegister() {
    const [step, setStep] = useState(1);
    const [formData, setFormData] = useState({
        name: '',
        phone: '',
        nationality: 'Kenya',
        role: 'Cleaner',
    });

    const nextStep = () => setStep(prev => prev + 1);

    const nationalities = [
        { name: 'Kenya', flag: '🇰🇪' },
        { name: 'Philippines', flag: '🇵🇭' },
        { name: 'India', flag: '🇮🇳' },
        { name: 'Pakistan', flag: '🇵🇰' },
        { name: 'Nepal', flag: '🇳🇵' },
        { name: 'Other', flag: '🌍' }
    ];

    const roles = [
        { name: 'Cleaner', icon: '🧼' },
        { name: 'Driver', icon: '🚗' },
        { name: 'Mason', icon: '🏗️' },
        { name: 'Electrician', icon: '⚡' },
        { name: 'Plumber', icon: '🔧' },
        { name: 'Helper', icon: '📦' }
    ];

    return (
        <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
            <Head title="Join as Worker" />
            
            {/* Top Bar */}
            <div className="px-6 pt-12 pb-6 flex items-center justify-between sticky top-0 bg-white z-50">
                <button onClick={() => step > 1 ? setStep(step - 1) : window.history.back()} className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-900 border border-slate-100 active:scale-95 transition-all">
                    <ArrowLeft className="w-6 h-6" />
                </button>
                <div className="flex items-center space-x-1.5">
                    {[1, 2, 3].map((i) => (
                        <div key={i} className={`h-1.5 rounded-full transition-all duration-500 ${step === i ? 'w-8 bg-[#185FA5]' : 'w-2 bg-slate-100'}`} />
                    ))}
                </div>
                <div className="w-12" />
            </div>

            <div className="flex-1 px-8 py-4 overflow-y-auto pb-32">
                {step === 1 && (
                    <div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
                        <div className="space-y-2">
                            <h1 className="text-3xl font-black tracking-tight leading-tight">Your basic info.</h1>
                            <p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Step 1 of 3</p>
                        </div>

                        <div className="space-y-6">
                            <div className="space-y-3">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Full Name</label>
                                <div className="relative">
                                    <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                                    <input
                                        type="text"
                                        placeholder="Enter your name"
                                        className="w-full pl-12 pr-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                        value={formData.name}
                                        onChange={e => setFormData({...formData, name: e.target.value})}
                                    />
                                </div>
                            </div>

                            <div className="space-y-3">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Phone Number</label>
                                <div className="relative">
                                    <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
                                    <input
                                        type="text"
                                        placeholder="+971 XX XXX XXXX"
                                        className="w-full pl-12 pr-6 py-5 bg-slate-50 border-none rounded-3xl text-sm font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                        value={formData.phone}
                                        onChange={e => setFormData({...formData, phone: e.target.value})}
                                    />
                                </div>
                            </div>

                            <div className="space-y-3">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Where are you from?</label>
                                <div className="grid grid-cols-3 gap-3">
                                    {nationalities.map((nat) => (
                                        <button
                                            key={nat.name}
                                            onClick={() => setFormData({...formData, nationality: nat.name})}
                                            className={`p-4 rounded-3xl border-2 flex flex-col items-center justify-center space-y-2 transition-all active:scale-95 ${
                                                formData.nationality === nat.name ? 'border-[#185FA5] bg-blue-50' : 'border-slate-50 bg-slate-50 text-slate-400'
                                            }`}
                                        >
                                            <span className="text-2xl">{nat.flag}</span>
                                            <span className="text-[9px] font-black uppercase tracking-tight">{nat.name}</span>
                                        </button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {step === 2 && (
                    <div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
                        <div className="space-y-2">
                            <h1 className="text-3xl font-black tracking-tight leading-tight">What do you do?</h1>
                            <p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Step 2 of 3</p>
                        </div>

                        <div className="grid grid-cols-2 gap-3">
                            {roles.map(role => (
                                <button
                                    key={role.name}
                                    onClick={() => setFormData({...formData, role: role.name})}
                                    className={`p-6 rounded-[32px] border-2 text-center transition-all flex flex-col items-center space-y-4 active:scale-95 ${
                                        formData.role === role.name ? 'border-[#185FA5] bg-blue-50 shadow-xl shadow-blue-500/5' : 'border-slate-50 bg-slate-50 text-slate-400'
                                    }`}
                                >
                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl ${formData.role === role.name ? 'bg-white shadow-md' : 'bg-white/50'}`}>
                                        {role.icon}
                                    </div>
                                    <span className={`font-black text-[11px] uppercase tracking-[0.1em] ${formData.role === role.name ? 'text-slate-900' : ''}`}>{role.name}</span>
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                {step === 3 && (
                    <div className="space-y-8 animate-in fade-in slide-in-from-right-6 duration-500">
                        <div className="space-y-2">
                            <h1 className="text-3xl font-black tracking-tight leading-tight">Verify Identity.</h1>
                            <p className="text-slate-400 font-bold text-xs uppercase tracking-[0.2em]">Final Step</p>
                        </div>

                        <div className="space-y-6">
                            <div className="p-10 border-4 border-dashed border-slate-100 rounded-[40px] bg-slate-50 flex flex-col items-center justify-center text-center space-y-6 active:scale-95 transition-all cursor-pointer hover:border-blue-200">
                                <div className="w-24 h-24 bg-white rounded-[32px] flex items-center justify-center shadow-xl">
                                    <Camera className="w-12 h-12 text-[#185FA5]" />
                                </div>
                                <div className="space-y-2">
                                    <h3 className="font-black text-sm uppercase tracking-tight">Upload Passport</h3>
                                    <p className="text-[10px] font-black text-slate-300 uppercase tracking-widest">TAP TO OPEN CAMERA</p>
                                </div>
                            </div>

                            <div className="p-6 bg-emerald-50 rounded-3xl border border-emerald-100 flex items-start space-x-4">
                                <ShieldCheck className="w-6 h-6 text-emerald-600 shrink-0" />
                                <p className="text-[9px] font-black text-emerald-800 uppercase tracking-widest leading-relaxed">
                                    Your data is 100% secure. We only show documents to verified employers.
                                </p>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Bottom Button */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-8 bg-white/90 backdrop-blur-xl border-t border-slate-50 z-50">
                {step < 3 ? (
                    <button 
                        onClick={nextStep}
                        className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[11px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all"
                    >
                        Next Step
                    </button>
                ) : (
                    <Link 
                        href="/mobile/worker/home"
                        className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[11px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all flex items-center justify-center"
                    >
                        Join Marketplace
                    </Link>
                )}
            </div>
        </div>
    );
}
