import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
import {
    User,
    Settings,
    CreditCard,
    Shield,
    Bell,
    HelpCircle,
    LogOut,
    ChevronRight,
    Camera,
    CheckCircle2,
    Briefcase,
    Building2,
    Smartphone,
    Globe
} from 'lucide-react';

export default function EmployerProfile() {
    const sections = [
        {
            title: 'Account Settings',
            items: [
                { label: 'Personal Information', icon: User, href: '/mobile/employer/profile/edit', color: 'text-blue-500 bg-blue-50' },
                { label: 'Subscription Plan', icon: CreditCard, href: '/mobile/employer/subscription', badge: 'Premium', color: 'text-indigo-500 bg-indigo-50' },
                { label: 'Security & Password', icon: Shield, href: '/mobile/employer/profile/security', color: 'text-emerald-500 bg-emerald-50' },
            ]
        },
        {
            title: 'Preferences',
            items: [
                { label: 'Notification Settings', icon: Bell, href: '/mobile/employer/profile/notifications', color: 'text-orange-500 bg-orange-50' },
                { label: 'Language', icon: Globe, href: '#', detail: 'English (US)', color: 'text-purple-500 bg-purple-50' },
            ]
        },
        {
            title: 'Support',
            items: [
                { label: 'Help & Support', icon: HelpCircle, href: '/mobile/employer/support', color: 'text-slate-500 bg-slate-50' },
            ]
        }
    ];

    return (
        <EmployerMobileLayout>
            <Head title="My Profile" />

            <div className="flex flex-col h-full bg-[#F8F9FA]">
                {/* Profile Hero Card */}
                <div className="bg-white px-6 pt-10 pb-8 flex flex-col items-center text-center space-y-5 border-b border-slate-100 relative shadow-sm">
                    <div className="absolute top-0 left-0 w-full h-32 bg-[#141B34] -z-10" />

                    <div className="relative">
                        <div className="w-32 h-32 rounded-full bg-slate-100 border-4 border-white flex items-center justify-center text-[#141B34] font-black text-4xl shadow-xl overflow-hidden">
                            JD
                        </div>
                        <button className="absolute bottom-1 right-1 w-10 h-10 bg-[#141B34] text-white rounded-full flex items-center justify-center border-4 border-white shadow-lg active:scale-95 transition-all">
                            <Camera className="w-5 h-5" />
                        </button>
                    </div>

                    <div className="space-y-1">
                        <div className="flex items-center justify-center space-x-1.5">
                            <h2 className="text-2xl font-black text-slate-900 uppercase tracking-tight">John Doe</h2>
                            <CheckCircle2 className="w-5 h-5 text-blue-500 fill-blue-50" />
                        </div>
                        <div className="flex items-center justify-center space-x-2 text-slate-400 font-bold text-xs uppercase tracking-widest">
                            <Building2 className="w-3.5 h-3.5" />
                            <span>Al Mansoor Household</span>
                        </div>
                    </div>

                    <div className="flex items-center space-x-3 w-full max-w-[300px] pt-2">
                        <div className="flex-1 bg-slate-50 p-3 rounded-2xl border border-slate-100">
                            <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Plan</div>
                            <div className="text-[11px] font-black text-[#141B34] uppercase tracking-widest">Premium</div>
                        </div>
                        <div className="flex-1 bg-slate-50 p-3 rounded-2xl border border-slate-100">
                            <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Verified</div>
                            <div className="text-[11px] font-black text-emerald-500 uppercase tracking-widest">Yes</div>
                        </div>
                    </div>
                </div>

                {/* Settings Menu Sections */}
                <div className="p-6 space-y-8 pb-32">
                    {sections.map((section, idx) => (
                        <div key={idx} className="space-y-4">
                            <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">{section.title}</h3>
                            <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm overflow-hidden">
                                {section.items.map((item, i) => (
                                    <Link
                                        key={i}
                                        href={item.href}
                                        className={`flex items-center justify-between p-5 hover:bg-slate-50 transition-all ${i !== section.items.length - 1 ? 'border-b border-slate-50' : ''
                                            }`}
                                    >
                                        <div className="flex items-center space-x-4">
                                            <div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${item.color} shadow-sm`}>
                                                <item.icon className="w-5 h-5" />
                                            </div>
                                            <span className="text-[13px] font-bold text-slate-900 uppercase tracking-tight">{item.label}</span>
                                        </div>
                                        <div className="flex items-center space-x-3">
                                            {item.badge && (
                                                <span className="px-3 py-1 bg-blue-50 text-blue-600 text-[9px] font-black uppercase tracking-widest rounded-lg border border-blue-100">
                                                    {item.badge}
                                                </span>
                                            )}
                                            {item.detail && (
                                                <span className="text-[11px] font-bold text-slate-400">{item.detail}</span>
                                            )}
                                            <ChevronRight className="w-4 h-4 text-slate-300" />
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        </div>
                    ))}

                    <button className="w-full p-6 bg-white text-rose-500 rounded-[32px] font-black text-xs uppercase tracking-[0.2em] flex items-center justify-center space-x-3 active:scale-[0.98] transition-all border border-rose-100 shadow-sm mt-4">
                        <LogOut className="w-5 h-5" />
                        <span>Sign Out Account</span>
                    </button>

                    <div className="text-center pt-4">
                        <p className="text-[9px] font-black text-slate-300 uppercase tracking-[0.3em]">Version 2.4.1 (Stable Build)</p>
                    </div>
                </div>
            </div>
        </EmployerMobileLayout>
    );
}
