import React, { useState } from 'react';
import { Head, useForm } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { 
    User, 
    CheckCircle2, 
    Save, 
    Building2, 
    Lock, 
    Bell, 
    ShieldCheck, 
    Mail, 
    Phone,
    Globe,
    CreditCard,
    ChevronRight,
    Camera,
    Home,
    Users,
    MapPin,
    History,
    Sparkles
} from 'lucide-react';
import { toast } from 'sonner';

export default function Profile({ employerProfile }) {
    const { data: profile, setData: setProfile, post, processing, errors } = useForm({
        name: employerProfile?.name || 'Fatima Al Mansoori',
        company_name: employerProfile?.company_name || 'Household Sponsor Account',
        email: employerProfile?.email || 'fatima.sponsor@marketplace.ae',
        phone: employerProfile?.phone || '+971 50 111 2222',
        language: employerProfile?.language || 'English',
        nationality: employerProfile?.nationality || 'UAE National',
        family_size: employerProfile?.family_size || '4 Members',
        accommodation: employerProfile?.accommodation || 'Villa',
        district: employerProfile?.district || 'Dubai Marina',
        notifications: employerProfile?.notifications ?? true,
        current_password: '',
        new_password: '',
        new_password_confirmation: '',
    });

    const [activeTab, setActiveTab] = useState('personal');
    const [saved, setSaved] = useState(false);

    const handleSave = (e) => {
        e.preventDefault();
        setSaved(true);
        toast.success("🛡️ Profile updated successfully", {
            description: "Household sponsor preferences and vetted credentials synchronized successfully."
        });
        setTimeout(() => setSaved(false), 3000);
    };

    const tabs = [
        { id: 'personal', label: 'Personal & Household', icon: User },
        { id: 'company', label: 'Verification & History', icon: ShieldCheck },
        { id: 'security', label: 'Security & Password', icon: Lock },
        { id: 'billing', label: 'Billing & Receipts', icon: CreditCard },
        { id: 'notifications', label: 'Notifications Hub', icon: Bell },
    ];

    const pastHires = [
        { id: 1, name: 'Rhea Joy', category: 'Childcare / Nanny', nationality: 'Philippines', date: 'Jan 15, 2025', status: 'Active Contract' },
        { id: 2, name: 'Priya Sharma', category: 'Housekeeper', nationality: 'India', date: 'Jul 10, 2024', status: 'Completed / Expiry' }
    ];

    return (
        <EmployerLayout title="Account Settings">
            <Head title="Profile - Employer Portal" />

            <div className="flex flex-col lg:flex-row gap-8 select-none w-full pb-16">
                {/* Left Side: Navigation Tabs */}
                <aside className="w-full lg:w-72 space-y-2 flex-shrink-0">
                    {tabs.map((tab) => {
                        const Icon = tab.icon;
                        return (
                            <button
                                key={tab.id}
                                onClick={() => setActiveTab(tab.id)}
                                className={`w-full flex items-center justify-between p-4 rounded-2xl text-xs font-black uppercase tracking-wider transition-all ${
                                    activeTab === tab.id
                                        ? 'bg-[#185FA5] text-white shadow-md shadow-blue-900/10'
                                        : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-100'
                                }`}
                            >
                                <div className="flex items-center space-x-3">
                                    <Icon className="w-5 h-5" />
                                    <span>{tab.label}</span>
                                </div>
                                <ChevronRight className={`w-4 h-4 transition-transform ${activeTab === tab.id ? 'rotate-90' : ''}`} />
                            </button>
                        );
                    })}
                </aside>

                {/* Right Side: Content Area */}
                <div className="flex-1 space-y-6">
                    {/* Header Info Card */}
                    <div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm relative overflow-hidden">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-16 -mt-16 opacity-50 pointer-events-none" />
                        
                        <div className="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 relative z-10">
                            <div className="relative group">
                                <div className="w-20 h-20 rounded-2xl bg-blue-100 text-[#185FA5] flex items-center justify-center font-black text-3xl border-2 border-blue-200 shadow-md">
                                    {profile.name?.charAt(0)}
                                </div>
                                <button type="button" className="absolute -bottom-1 -right-1 p-1.5 bg-white rounded-lg shadow-sm border border-slate-100 text-slate-600 hover:text-[#185FA5] transition-colors">
                                    <Camera className="w-3.5 h-3.5" />
                                </button>
                            </div>
                            
                            <div className="flex-1 text-center md:text-left">
                                <h2 className="text-xl font-black text-slate-900 leading-tight">{profile.name}</h2>
                                <p className="text-slate-500 font-bold text-xs mt-1">{profile.company_name}</p>
                                
                                <div className="flex flex-wrap justify-center md:justify-start gap-2.5 mt-4">
                                    <span className="bg-emerald-50 text-emerald-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-emerald-100">
                                        <ShieldCheck className="w-3.5 h-3.5" />
                                        <span>Emirates ID Vetted</span>
                                    </span>
                                    <span className="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-blue-100">
                                        <CheckCircle2 className="w-3.5 h-3.5" />
                                        <span>Direct Sponsor Portal</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Tab Specific Content */}
                    <div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                        <form onSubmit={handleSave} className="p-8 space-y-8">
                            {activeTab === 'personal' && (
                                <div className="space-y-6">
                                    <div className="border-b border-slate-100 pb-4">
                                        <h3 className="text-lg font-black text-slate-900">Personal & Household details</h3>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage sponsor bio and residence style</p>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Full Sponsor Name</label>
                                            <div className="relative">
                                                <User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <input
                                                    type="text"
                                                    value={profile.name}
                                                    onChange={(e) => setProfile({ ...profile, name: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Invoicing Email</label>
                                            <div className="relative">
                                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <input
                                                    type="email"
                                                    value={profile.email}
                                                    onChange={(e) => setProfile({ ...profile, email: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                                 />
                                             </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">UAE Mobile Contact</label>
                                            <div className="relative">
                                                <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <input
                                                    type="text"
                                                    value={profile.phone}
                                                    onChange={(e) => setProfile({ ...profile, phone: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Sponsor Nationality</label>
                                            <div className="relative">
                                                <Globe className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <select
                                                    value={profile.nationality}
                                                    onChange={(e) => setProfile({ ...profile, nationality: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
                                                >
                                                    <option>UAE National</option>
                                                    <option>Expat (UK / Europe)</option>
                                                    <option>Expat (USA / Canada)</option>
                                                    <option>Expat (Asia / GCC)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Family Members Size</label>
                                            <div className="relative">
                                                <Users className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <select
                                                    value={profile.family_size}
                                                    onChange={(e) => setProfile({ ...profile, family_size: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
                                                >
                                                    <option>1-2 Members</option>
                                                    <option>3-4 Members</option>
                                                    <option>5+ Members</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Accommodation Residence</label>
                                            <div className="relative">
                                                <Home className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <select
                                                    value={profile.accommodation}
                                                    onChange={(e) => setProfile({ ...profile, accommodation: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
                                                >
                                                    <option>Villa</option>
                                                    <option>Apartment (Penthouse)</option>
                                                    <option>Apartment (1-3 Bed)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div className="space-y-2 md:col-span-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">City District / Area</label>
                                            <div className="relative">
                                                <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                                                <input
                                                    type="text"
                                                    value={profile.district}
                                                    onChange={(e) => setProfile({ ...profile, district: e.target.value })}
                                                    className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {activeTab === 'company' && (
                                <div className="space-y-8">
                                    {/* Emirates ID Verification */}
                                    <div className="space-y-6">
                                        <div className="border-b border-slate-100 pb-4">
                                            <h3 className="text-lg font-black text-slate-900">Emirates ID Verification</h3>
                                            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Regulatory compliance credentials</p>
                                        </div>

                                        <div className="p-6 bg-slate-50 rounded-3xl border border-slate-150 flex items-start space-x-4">
                                            <div className="p-3 bg-emerald-100 text-emerald-600 rounded-2xl">
                                                <ShieldCheck className="w-6 h-6" />
                                            </div>
                                            <div>
                                                <h4 className="font-extrabold text-slate-900">Emirates ID Vetted Status</h4>
                                                <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">Reference: EID-9182-XJ</p>
                                                <p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
                                                    Your Emirates ID is active and fully validated under Ministry of Human Resources (MOHRE) guidelines. Direct hiring is legally enabled.
                                                </p>
                                                <div className="flex items-center space-x-2 mt-4 text-emerald-600 font-bold text-[10px] uppercase">
                                                    <CheckCircle2 className="w-4 h-4" />
                                                    <span>Verified on Jan 15, 2026</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Hiring History Logs */}
                                    <div className="space-y-4">
                                        <div className="flex items-center space-x-2 text-slate-800 font-bold">
                                            <History className="w-5 h-5 text-[#185FA5]" />
                                            <h3 className="font-extrabold text-sm uppercase">Sponsorship Hiring History Logs</h3>
                                        </div>

                                        <div className="bg-slate-50 rounded-2xl border border-slate-150 overflow-hidden divide-y divide-slate-150">
                                            {pastHires.map((hire) => (
                                                <div key={hire.id} className="p-4 flex items-center justify-between text-xs font-semibold text-slate-700">
                                                    <div className="space-y-0.5">
                                                        <div className="font-bold text-slate-800">{hire.name} ({hire.nationality})</div>
                                                        <div className="text-[9px] text-slate-400 uppercase">{hire.category} • Hired: {hire.date}</div>
                                                    </div>
                                                    <span className="px-2.5 py-0.5 bg-blue-50 border border-blue-100 text-[#185FA5] text-[9px] font-black rounded uppercase">
                                                        {hire.status}
                                                    </span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            )}

                            {activeTab === 'security' && (
                                <div className="space-y-6">
                                    <div className="border-b border-slate-100 pb-4">
                                        <h3 className="text-lg font-black text-slate-900">Security & Password</h3>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Keep your sponsor account secure</p>
                                    </div>

                                    <div className="space-y-4 max-w-md">
                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Current Password</label>
                                            <input
                                                type="password"
                                                placeholder="••••••••"
                                                value={profile.current_password}
                                                onChange={(e) => setProfile({ ...profile, current_password: e.target.value })}
                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                            />
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">New Password</label>
                                            <input
                                                type="password"
                                                placeholder="••••••••"
                                                value={profile.new_password}
                                                onChange={(e) => setProfile({ ...profile, new_password: e.target.value })}
                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                            />
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Confirm New Password</label>
                                            <input
                                                type="password"
                                                placeholder="••••••••"
                                                value={profile.new_password_confirmation}
                                                onChange={(e) => setProfile({ ...profile, new_password_confirmation: e.target.value })}
                                                className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
                                            />
                                        </div>
                                    </div>
                                </div>
                            )}

                            {activeTab === 'billing' && (
                                <div className="space-y-8">
                                    <div className="border-b border-slate-100 pb-4">
                                        <h3 className="text-lg font-black text-slate-900">Billing & Receipts</h3>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage active sponsorship access</p>
                                    </div>

                                    {/* Current Plan Card */}
                                    <div className="p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl text-white shadow-xl relative overflow-hidden">
                                        <div className="absolute top-0 right-0 w-48 h-48 bg-blue-500/10 rounded-full -mr-24 -mt-24 blur-3xl pointer-events-none" />
                                        <div className="relative z-10">
                                            <div className="flex items-center justify-between">
                                                <div>
                                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">Current Plan</span>
                                                    <h4 className="text-2xl font-black mt-1">Premium Employer</h4>
                                                </div>
                                                <div className="bg-white/10 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10">
                                                    <span className="text-sm font-black">Active</span>
                                                </div>
                                            </div>
                                            <div className="mt-8 flex items-end justify-between">
                                                <div className="space-y-1">
                                                    <div className="text-[10px] font-bold text-slate-400 uppercase">Next Payment</div>
                                                    <div className="text-sm font-bold italic">Jun 15, 2026</div>
                                                </div>
                                                <div className="text-3xl font-black tracking-tighter">
                                                    199 <span className="text-sm font-bold text-slate-400">AED/mo</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Transaction History */}
                                    <div className="space-y-4">
                                        <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">Recent Transactions</h4>
                                        <div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden">
                                            <table className="w-full text-left">
                                                <thead className="bg-slate-100/50">
                                                    <tr>
                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">Date</th>
                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">Description</th>
                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">Amount</th>
                                                        <th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter text-right">Receipt</th>
                                                    </tr>
                                                </thead>
                                                <tbody className="divide-y divide-slate-100">
                                                    {[
                                                        { date: 'May 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' },
                                                        { date: 'Apr 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' }
                                                    ].map((t, i) => (
                                                        <tr key={i}>
                                                            <td className="px-4 py-4 text-xs font-bold text-slate-600">{t.date}</td>
                                                            <td className="px-4 py-4 text-xs font-bold text-slate-900">{t.desc}</td>
                                                            <td className="px-4 py-4 text-xs font-black text-slate-900">{t.amount}</td>
                                                            <td className="px-4 py-4 text-right">
                                                                <button 
                                                                    type="button"
                                                                    onClick={() => toast.success("PDF Tax invoice receipt downloaded successfully")}
                                                                    className="p-2 text-slate-400 hover:text-[#185FA5] transition-colors"
                                                                >
                                                                    <CreditCard className="w-4 h-4" />
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    ))}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {activeTab === 'notifications' && (
                                <div className="space-y-6">
                                    <div className="border-b border-slate-100 pb-4">
                                        <h3 className="text-lg font-black text-slate-900">Notification Settings Hub</h3>
                                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Choose how you want to receive alerts</p>
                                    </div>

                                    <div className="space-y-4">
                                        {[
                                            { title: 'Email Alerts', desc: 'Receive vetted worker recommendations and visa updates.' },
                                            { title: 'SMS Instant Receipts', desc: 'Get SMS notifications for interview schedules.' },
                                            { title: 'Push Notifications', desc: 'Get desktop sound alerts for new direct messages.' }
                                        ].map((n, i) => (
                                            <div key={i} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                                <div className="space-y-0.5">
                                                    <div className="text-xs font-black text-slate-900">{n.title}</div>
                                                    <div className="text-[10px] font-bold text-slate-400 leading-tight">{n.desc}</div>
                                                </div>
                                                <button 
                                                    type="button"
                                                    onClick={() => setProfile({ ...profile, notifications: !profile.notifications })}
                                                    className={`w-10 h-6 rounded-full p-1 transition-all ${profile.notifications ? 'bg-[#185FA5]' : 'bg-slate-200'}`}
                                                >
                                                    <div className={`w-4 h-4 bg-white rounded-full transition-transform ${profile.notifications ? 'translate-x-4' : 'translate-x-0'}`} />
                                                </button>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            <div className="pt-8 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
                                {saved ? (
                                    <div className="flex items-center space-x-2 text-emerald-600 animate-in fade-in slide-in-from-left-4">
                                        <CheckCircle2 className="w-5 h-5" />
                                        <span className="text-xs font-black uppercase">Changes saved successfully</span>
                                    </div>
                                ) : (
                                    <p className="text-[10px] font-bold text-slate-400 max-w-xs text-center sm:text-left">
                                        Some updates may require Emirates ID re-verification.
                                    </p>
                                )}
                                
                                <button
                                    type="submit"
                                    className="w-full sm:w-auto bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-md shadow-blue-200/50"
                                >
                                    <Save className="w-4 h-4" />
                                    <span>Update Settings</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
