import React, { useState } from 'react';
import { useForm, Head, Link } from '@inertiajs/react';
import { 
    CheckCircle, 
    Camera, 
    Eye, 
    EyeOff, 
    X, 
    Loader2, 
    FileText, 
    AlertCircle,
    CreditCard,
    ShieldCheck,
    ChevronRight,
    Lock,
    User,
    Mail,
    Phone as PhoneIcon,
    ArrowRight,
    ArrowLeft,
    Check,
    Briefcase
} from 'lucide-react';

export default function Register() {
    const [step, setStep] = useState(1);
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        email: '',
        phone: '',
        password: '',
        password_confirmation: '',
        emirates_id_front: null,
        emirates_id_back: null,
        selected_plan: 'premium',
        card_number: '',
        expiry: '',
        cvc: '',
    });

    const [showPassword, setShowPassword] = useState(false);
    const [frontFileName, setFrontFileName] = useState(null);
    const [backFileName, setBackFileName] = useState(null);

    const plans = [
        { id: 'basic', name: 'Basic Search', price: '99', features: ['Browse 500+ workers', 'Shortlist up to 10', 'Standard vetting'] },
        { id: 'premium', name: 'Premium Pass', price: '199', features: ['Unlimited shortlisting', 'Direct messaging', 'Priority scheduling'], popular: true },
        { id: 'vip', name: 'VIP Concierge', price: '499', features: ['Assigned manager', 'Medical guarantee', 'Free replacements'] },
    ];

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

    const handleFileChange = (e, field) => {
        const file = e.target.files[0];
        if (file) {
            setData(field, file);
            const sizeMb = (file.size / (1024 * 1024)).toFixed(1);
            if (field === 'emirates_id_front') {
                setFrontFileName(`${file.name} (${sizeMb} MB)`);
            } else {
                setBackFileName(`${file.name} (${sizeMb} MB)`);
            }
        }
    };

    const removeFile = (field) => {
        setData(field, null);
        if (field === 'emirates_id_front') {
            setFrontFileName(null);
        } else {
            setBackFileName(null);
        }
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        post('/employer/register');
    };

    const renderStepIndicator = () => (
        <div className="flex items-center justify-between mb-12 relative max-w-md mx-auto px-4">
            <div className="absolute top-1/2 left-0 w-full h-0.5 bg-slate-100 -translate-y-1/2 -z-10" />
            <div className="absolute top-1/2 left-0 h-0.5 bg-[#185FA5] -translate-y-1/2 -z-10 transition-all duration-500" style={{ width: `${(step - 1) * 33.33}%` }} />
            
            {[1, 2, 3, 4].map((s) => (
                <div key={s} className="flex flex-col items-center">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-sm transition-all duration-500 border-4 ${
                        step >= s ? 'bg-[#185FA5] text-white border-blue-100 scale-110 shadow-lg' : 'bg-white text-slate-400 border-slate-50'
                    }`}>
                        {step > s ? <Check className="w-5 h-5" /> : s}
                    </div>
                </div>
            ))}
        </div>
    );

    return (
        <div className="min-h-screen grid grid-cols-1 lg:grid-cols-12 bg-[#F8FAFC] font-sans selection:bg-blue-100 selection:text-[#185FA5]">
            <Head title="Employer Registration - Secure Portal" />

            {/* Left Brand Panel */}
            <div className="hidden lg:flex lg:col-span-4 bg-[#185FA5] p-16 flex-col justify-between text-white relative overflow-hidden select-none sticky top-0 h-screen">
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.1),transparent)] pointer-events-none" />
                <div className="absolute bottom-0 left-0 right-0 h-64 bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
                
                <div className="relative z-10 space-y-10">
                    <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 bg-white text-[#185FA5] rounded-2xl flex items-center justify-center font-black text-2xl shadow-2xl">
                            M
                        </div>
                        <span className="font-black text-2xl tracking-tighter uppercase">Marketplace</span>
                    </div>

                    <div className="space-y-6 pt-10">
                        <h1 className="text-5xl font-black tracking-tighter leading-[1.1] drop-shadow-sm">
                            The Secure Hub for Direct Hiring.
                        </h1>
                        <p className="text-blue-100 text-lg font-medium leading-relaxed opacity-90">
                            Join 12,000+ employers hiring domestic workers directly with verified documentation.
                        </p>
                    </div>

                    <div className="space-y-6 pt-12 border-t border-white/10">
                        {[
                            { title: 'Verified Profiles', desc: 'Every worker is OCR vetted and legally checked.', icon: ShieldCheck },
                            { title: 'Instant Access', desc: 'Connect with candidates in seconds after verification.', icon: ArrowRight },
                            { title: 'Zero Fees', desc: 'No recruitment agency commissions, ever.', icon: CheckCircle }
                        ].map((feat, i) => (
                            <div key={i} className="flex items-start space-x-4 group">
                                <div className="p-2.5 bg-white/10 rounded-xl group-hover:bg-white/20 transition-colors">
                                    <feat.icon className="w-6 h-6 text-emerald-300" />
                                </div>
                                <div>
                                    <h3 className="font-black text-base uppercase tracking-wider">{feat.title}</h3>
                                    <p className="text-sm text-blue-100 font-medium opacity-80">{feat.desc}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="relative z-10 text-[10px] font-black uppercase tracking-[0.3em] text-blue-300 opacity-60">
                    Empowering Household Recruitment Since 2024
                </div>
            </div>

            {/* Right Registration Content */}
            <div className="col-span-1 lg:col-span-8 flex flex-col items-center py-12 px-6 sm:px-12 overflow-y-auto">
                <div className="w-full max-w-2xl">
                    <div className="text-center mb-10">
                        <h2 className="text-3xl font-black text-slate-900 tracking-tight uppercase">Employer Enrollment</h2>
                        <p className="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">Step {step} of 4: {
                            step === 1 ? 'Account Security' : 
                            step === 2 ? 'Identity Verification' : 
                            step === 3 ? 'Choose Your Plan' : 'Secure Payment'
                        }</p>
                    </div>

                    {renderStepIndicator()}

                    <div className="bg-white rounded-[40px] shadow-[0_20px_50px_rgba(0,0,0,0.04)] border border-slate-100 p-8 sm:p-12 transition-all duration-500 animate-in fade-in slide-in-from-bottom-4">
                        <form onSubmit={handleSubmit} className="space-y-8">
                            
                            {/* Step 1: Account Creation */}
                            {step === 1 && (
                                <div className="space-y-6">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div className="md:col-span-2 space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Full Legal Name</label>
                                            <div className="relative group">
                                                <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                                                <input
                                                    type="text"
                                                    value={data.name}
                                                    onChange={(e) => setData('name', e.target.value)}
                                                    placeholder="e.g. Abdullah Bin Ahmed"
                                                    className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                    required
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Work Email</label>
                                            <div className="relative group">
                                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                                                <input
                                                    type="email"
                                                    value={data.email}
                                                    onChange={(e) => setData('email', e.target.value)}
                                                    placeholder="employer@domain.com"
                                                    className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                    required
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Mobile Access</label>
                                            <div className="relative group">
                                                <PhoneIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                                                <input
                                                    type="text"
                                                    value={data.phone}
                                                    onChange={(e) => setData('phone', e.target.value)}
                                                    placeholder="+971 XX XXX XXXX"
                                                    className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                    required
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Secure Password</label>
                                            <div className="relative group">
                                                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                                                <input
                                                    type={showPassword ? 'text' : 'password'}
                                                    value={data.password}
                                                    onChange={(e) => setData('password', e.target.value)}
                                                    placeholder="••••••••"
                                                    className="w-full pl-12 pr-12 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                    required
                                                />
                                                <button
                                                    type="button"
                                                    onClick={() => setShowPassword(!showPassword)}
                                                    className="absolute right-4 top-1/2 -translate-y-1/2 p-2 text-slate-400 hover:text-slate-600"
                                                >
                                                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                                                </button>
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Confirm Access</label>
                                            <input
                                                type={showPassword ? 'text' : 'password'}
                                                value={data.password_confirmation}
                                                onChange={(e) => setData('password_confirmation', e.target.value)}
                                                placeholder="••••••••"
                                                className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                required
                                            />
                                        </div>
                                    </div>
                                    <button
                                        type="button"
                                        onClick={nextStep}
                                        className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2 mt-8"
                                    >
                                        <span>Verify Identity</span>
                                        <ArrowRight className="w-4 h-4" />
                                    </button>
                                </div>
                            )}

                            {/* Step 2: Emirates ID */}
                            {step === 2 && (
                                <div className="space-y-8">
                                    <div className="bg-amber-50 border border-amber-100 p-6 rounded-3xl flex items-start space-x-4">
                                        <AlertCircle className="w-6 h-6 text-amber-600 shrink-0" />
                                        <p className="text-[11px] font-bold text-amber-800 leading-relaxed uppercase tracking-wider">
                                            In compliance with UAE Labor Law, all employers must verify their identity using a valid Emirates ID before accessing the marketplace.
                                        </p>
                                    </div>

                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                        {[
                                            { field: 'emirates_id_front', label: 'Emirates ID Front', file: frontFileName },
                                            { field: 'emirates_id_back', label: 'Emirates ID Back', file: backFileName }
                                        ].map((slot) => (
                                            <div key={slot.field} className="space-y-2">
                                                <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">{slot.label}</label>
                                                {slot.file ? (
                                                    <div className="relative aspect-[1.6/1] bg-slate-50 rounded-[32px] border-2 border-[#185FA5] flex flex-col items-center justify-center p-6 text-center shadow-lg shadow-blue-500/5">
                                                        <FileText className="w-10 h-10 text-[#185FA5] mb-2" />
                                                        <span className="text-[10px] font-black text-slate-900 uppercase truncate max-w-full px-4">{slot.file}</span>
                                                        <button
                                                            type="button"
                                                            onClick={() => removeFile(slot.field)}
                                                            className="absolute -top-2 -right-2 bg-rose-500 text-white p-2 rounded-full shadow-lg hover:bg-rose-600 transition-colors"
                                                        >
                                                            <X className="w-4 h-4" />
                                                        </button>
                                                    </div>
                                                ) : (
                                                    <label className="relative aspect-[1.6/1] bg-slate-50 rounded-[32px] border-4 border-dashed border-slate-200 flex flex-col items-center justify-center p-8 text-center cursor-pointer hover:border-[#185FA5] hover:bg-blue-50 transition-all group">
                                                        <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-md mb-4 group-hover:scale-110 transition-transform">
                                                            <Camera className="w-8 h-8 text-slate-300 group-hover:text-[#185FA5]" />
                                                        </div>
                                                        <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-[#185FA5]">Tap to upload</span>
                                                        <input
                                                            type="file"
                                                            accept=".jpg,.jpeg,.png,.pdf"
                                                            className="hidden"
                                                            onChange={(e) => handleFileChange(e, slot.field)}
                                                        />
                                                    </label>
                                                )}
                                            </div>
                                        ))}
                                    </div>

                                    <div className="flex gap-4 pt-6">
                                        <button
                                            type="button"
                                            onClick={prevStep}
                                            className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
                                        >
                                            <ArrowLeft className="w-4 h-4" />
                                            <span>Back</span>
                                        </button>
                                        <button
                                            type="button"
                                            onClick={nextStep}
                                            disabled={!frontFileName || !backFileName}
                                            className="flex-[2] bg-[#185FA5] hover:bg-[#144f8a] disabled:opacity-50 text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2"
                                        >
                                            <span>Select Plan</span>
                                            <ArrowRight className="w-4 h-4" />
                                        </button>
                                    </div>
                                </div>
                            )}

                            {/* Step 3: Plan Selection */}
                            {step === 3 && (
                                <div className="space-y-8">
                                    <div className="grid grid-cols-1 gap-4">
                                        {plans.map((p) => (
                                            <button
                                                key={p.id}
                                                type="button"
                                                onClick={() => setData('selected_plan', p.id)}
                                                className={`p-6 rounded-[32px] border-4 text-left transition-all relative overflow-hidden flex items-center justify-between group ${
                                                    data.selected_plan === p.id 
                                                        ? 'bg-blue-50 border-[#185FA5] shadow-xl shadow-blue-500/10' 
                                                        : 'bg-white border-slate-50 hover:border-slate-200'
                                                }`}
                                            >
                                                <div className="space-y-1">
                                                    <div className="flex items-center space-x-3">
                                                        <h4 className="text-lg font-black text-slate-900 uppercase tracking-tight">{p.name}</h4>
                                                        {p.popular && <span className="bg-emerald-500 text-white px-2 py-0.5 rounded-full text-[9px] font-black uppercase">Most Popular</span>}
                                                    </div>
                                                    <div className="flex items-center space-x-4">
                                                        {p.features.slice(0, 2).map((f, i) => (
                                                            <div key={i} className="flex items-center space-x-1.5 text-[10px] font-bold text-slate-500">
                                                                <CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
                                                                <span>{f}</span>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                                <div className="text-right">
                                                    <div className="text-2xl font-black text-[#185FA5]">{p.price} <span className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">AED</span></div>
                                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-1">One Time Access</div>
                                                </div>
                                            </button>
                                        ))}
                                    </div>

                                    <div className="flex gap-4 pt-6">
                                        <button
                                            type="button"
                                            onClick={prevStep}
                                            className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
                                        >
                                            <ArrowLeft className="w-4 h-4" />
                                            <span>Back</span>
                                        </button>
                                        <button
                                            type="button"
                                            onClick={nextStep}
                                            className="flex-[2] bg-[#185FA5] hover:bg-[#144f8a] text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-2"
                                        >
                                            <span>Pay & Register</span>
                                            <CreditCard className="w-4 h-4" />
                                        </button>
                                    </div>
                                </div>
                            )}

                            {/* Step 4: Secure Payment */}
                            {step === 4 && (
                                <div className="space-y-8 animate-in zoom-in-95 duration-500">
                                    <div className="bg-slate-900 rounded-[32px] p-8 text-white relative overflow-hidden shadow-2xl">
                                        <div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl -mr-32 -mt-32" />
                                        <div className="flex justify-between items-start mb-12 relative z-10">
                                            <div className="w-12 h-10 bg-slate-800 rounded-lg border border-slate-700 flex items-center justify-center">
                                                <div className="w-8 h-6 bg-gradient-to-br from-amber-200 to-amber-500 rounded" />
                                            </div>
                                            <CreditCard className="w-10 h-10 text-white/20" />
                                        </div>
                                        <div className="space-y-4 relative z-10">
                                            <div className="text-xl font-medium tracking-[0.2em] h-8 font-mono">
                                                {data.card_number || '•••• •••• •••• ••••'}
                                            </div>
                                            <div className="flex justify-between items-end">
                                                <div>
                                                    <div className="text-[10px] font-black text-white/40 uppercase tracking-widest mb-1">Card Holder</div>
                                                    <div className="text-sm font-bold uppercase tracking-widest">{data.name || 'Your Name'}</div>
                                                </div>
                                                <div className="text-right">
                                                    <div className="text-[10px] font-black text-white/40 uppercase tracking-widest mb-1">Expires</div>
                                                    <div className="text-sm font-bold uppercase tracking-widest">{data.expiry || 'MM/YY'}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="space-y-4">
                                        <div className="space-y-2">
                                            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Card Number</label>
                                            <div className="relative group">
                                                <CreditCard className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#185FA5] transition-colors" />
                                                <input
                                                    type="text"
                                                    maxLength="19"
                                                    value={data.card_number}
                                                    onChange={(e) => setData('card_number', e.target.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim())}
                                                    placeholder="4242 4242 4242 4242"
                                                    className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                                    required
                                                />
                                            </div>
                                        </div>

                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="space-y-2">
                                                <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Expiry Date</label>
                                                <input
                                                    type="text"
                                                    maxLength="5"
                                                    value={data.expiry}
                                                    onChange={(e) => setData('expiry', e.target.value.replace(/^(\d{2})/, '$1/'))}
                                                    placeholder="MM/YY"
                                                    className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center"
                                                    required
                                                />
                                            </div>
                                            <div className="space-y-2">
                                                <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Security Code</label>
                                                <input
                                                    type="password"
                                                    maxLength="4"
                                                    value={data.cvc}
                                                    onChange={(e) => setData('cvc', e.target.value)}
                                                    placeholder="CVC"
                                                    className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center"
                                                    required
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div className="p-6 bg-blue-50 rounded-3xl border border-blue-100 flex items-center justify-between">
                                        <div>
                                            <div className="text-[10px] font-black text-blue-600 uppercase tracking-widest">Total Amount</div>
                                            <div className="text-xl font-black text-slate-900">{plans.find(p => p.id === data.selected_plan)?.price} AED</div>
                                        </div>
                                        <ShieldCheck className="w-8 h-8 text-[#185FA5] opacity-20" />
                                    </div>

                                    <div className="flex gap-4 pt-4">
                                        <button
                                            type="button"
                                            onClick={prevStep}
                                            className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-600 py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center space-x-2"
                                        >
                                            <ArrowLeft className="w-4 h-4" />
                                            <span>Back</span>
                                        </button>
                                        <button
                                            type="submit"
                                            disabled={processing}
                                            className="flex-[2] bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white py-5 rounded-[24px] font-black text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-emerald-500/20 flex items-center justify-center space-x-2"
                                        >
                                            {processing ? <Loader2 className="w-5 h-5 animate-spin mr-2" /> : (
                                                <>
                                                    <span>Complete & Pay</span>
                                                    <Lock className="w-4 h-4" />
                                                </>
                                            )}
                                        </button>
                                    </div>
                                    <p className="text-[10px] text-slate-400 text-center font-bold uppercase tracking-widest">
                                        Secured by 256-bit AES encryption
                                    </p>
                                </div>
                            )}

                        </form>
                    </div>

                    <div className="mt-12 text-center">
                        <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">
                            Already part of the network?{' '}
                            <Link href="/employer/login" className="text-[#185FA5] hover:underline">
                                Authorize Account
                            </Link>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}
