import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    ChevronLeft, 
    Share2, 
    CheckCircle2, 
    Globe, 
    Briefcase, 
    Calendar, 
    Heart, 
    Sparkles, 
    DollarSign,
    MessageSquare,
    Bookmark,
    Phone,
    FileText,
    ShieldCheck,
    Languages,
    Info,
    ArrowRight
} from 'lucide-react';

export default function WorkerDetail({ id }) {
    // Mock data for the worker detail
    const worker = {
        id: id,
        name: 'Maria Santos',
        role: 'Childcare / Nanny',
        salary: '1800 AED / mo',
        nationality: 'Philippines',
        initial: 'M',
        online: true,
        bio: 'Experienced and dedicated nanny with over 6 years of experience working with expatriate families in Dubai. Certified in pediatric first aid and CPR. I love working with children and I am skilled in early childhood development activities, meal preparation, and maintaining a clean environment for the kids.',
        exp: '6 Years',
        avail: 'Immediate',
        religion: 'Christian',
        age: '32 Years',
        languages: ['English (Fluent)', 'Tagalog (Native)'],
        education: 'Bachelors in Education',
        status: 'Verified',
        skills: ['Pediatric First Aid', 'Newborn Care', 'Cooking', 'Housekeeping', 'Storytelling'],
        documents: [
            { name: 'Emirates ID', status: 'Verified' },
            { name: 'Medical Certificate', status: 'Vetted' },
            { name: 'Criminal Record Check', status: 'Clean' }
        ]
    };

    return (
        <div className="min-h-screen bg-[#F8FAFC] flex flex-col max-w-md mx-auto relative font-sans text-slate-900 overflow-x-hidden">
            <Head title={`${worker.name} - Profile`} />

            {/* Header */}
            <div className="fixed top-0 left-0 right-0 max-w-md mx-auto z-50 px-6 py-12 flex items-center justify-between pointer-events-none">
                <Link 
                    href="/mobile/employer/workers" 
                    className="p-3 bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl text-slate-400 pointer-events-auto shadow-sm active:scale-95 transition-all"
                >
                    <ChevronLeft className="w-5 h-5" />
                </Link>
                <div className="flex space-x-2 pointer-events-auto">
                    <button className="p-3 bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl text-slate-400 shadow-sm active:scale-95 transition-all">
                        <Bookmark className="w-5 h-5" />
                    </button>
                </div>
            </div>

            {/* Profile Hero */}
            <div className="bg-white pt-32 pb-10 px-6 rounded-b-[48px] shadow-sm relative">
                <div className="flex flex-col items-center text-center space-y-4">
                    <div className="relative">
                        <div className="w-32 h-32 rounded-full bg-[#D8F3FF] flex items-center justify-center text-[#185FA5] font-black text-4xl shadow-inner border-4 border-white">
                            {worker.initial}
                        </div>
                        <div className="absolute bottom-1 right-1 w-8 h-8 bg-emerald-500 border-4 border-white rounded-full flex items-center justify-center text-white">
                            <CheckCircle2 className="w-4 h-4" />
                        </div>
                    </div>
                    
                    <div className="space-y-1">
                        <h1 className="text-2xl font-bold tracking-tight">{worker.name}</h1>
                        <div className="flex items-center justify-center space-x-2 text-slate-400 font-bold text-xs uppercase tracking-widest">
                            <Globe className="w-3.5 h-3.5 text-[#185FA5]" />
                            <span>{worker.nationality}</span>
                        </div>
                    </div>

                    <div className="flex items-center space-x-2 pt-2">
                        <div className="px-4 py-2 bg-[#F0F7FF] text-[#185FA5] rounded-xl text-[10px] font-black uppercase tracking-widest border border-[#E1EFFF]">
                            {worker.role}
                        </div>
                    </div>
                </div>

                {/* Key Stats Grid */}
                <div className="grid grid-cols-2 gap-3 mt-10">
                    <div className="bg-slate-50/50 p-4 rounded-3xl border border-slate-50 flex items-center space-x-3">
                        <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-[#185FA5] shadow-sm">
                            <DollarSign className="w-5 h-5" />
                        </div>
                        <div className="space-y-0.5">
                            <div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Salary</div>
                            <div className="text-[13px] font-black">{worker.salary}</div>
                        </div>
                    </div>
                    <div className="bg-slate-50/50 p-4 rounded-3xl border border-slate-50 flex items-center space-x-3">
                        <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-emerald-500 shadow-sm">
                            <Briefcase className="w-5 h-5" />
                        </div>
                        <div className="space-y-0.5">
                            <div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Experience</div>
                            <div className="text-[13px] font-black">{worker.exp}</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Profile Content */}
            <div className="p-6 space-y-10 pb-32">
                {/* About Section */}
                <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                        <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
                        <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Professional Bio</h3>
                    </div>
                    <div className="bg-white p-6 rounded-[32px] border border-slate-50 shadow-sm">
                        <p className="text-[14px] text-slate-600 font-medium leading-relaxed italic">
                            {worker.bio}
                        </p>
                    </div>
                </div>

                {/* Detailed Information */}
                <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                        <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
                        <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Candidate Overview</h3>
                    </div>
                    <div className="bg-white rounded-[32px] border border-slate-50 shadow-sm overflow-hidden divide-y divide-slate-50">
                        <div className="flex items-center justify-between p-5">
                            <div className="flex items-center space-x-3">
                                <Calendar className="w-5 h-5 text-slate-300" />
                                <span className="text-xs font-bold text-slate-500">Availability</span>
                            </div>
                            <span className="text-xs font-black text-[#185FA5] uppercase tracking-widest">{worker.avail}</span>
                        </div>
                        <div className="flex items-center justify-between p-5">
                            <div className="flex items-center space-x-3">
                                <Heart className="w-5 h-5 text-slate-300" />
                                <span className="text-xs font-bold text-slate-500">Religion</span>
                            </div>
                            <span className="text-xs font-black text-slate-700 uppercase tracking-widest">{worker.religion}</span>
                        </div>
                        <div className="flex items-center justify-between p-5">
                            <div className="flex items-center space-x-3">
                                <Sparkles className="w-5 h-5 text-slate-300" />
                                <span className="text-xs font-bold text-slate-500">Age</span>
                            </div>
                            <span className="text-xs font-black text-slate-700 uppercase tracking-widest">{worker.age}</span>
                        </div>
                        <div className="flex items-center justify-between p-5">
                            <div className="flex items-center space-x-3">
                                <Languages className="w-5 h-5 text-slate-300" />
                                <span className="text-xs font-bold text-slate-500">Languages</span>
                            </div>
                            <span className="text-[10px] font-black text-slate-700 uppercase tracking-widest">{worker.languages.join(' · ')}</span>
                        </div>
                    </div>
                </div>

                {/* Vetted Documents */}
                <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                        <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
                        <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Identity & Verification</h3>
                    </div>
                    <div className="grid grid-cols-1 gap-3">
                        {worker.documents.map((doc, idx) => (
                            <div key={idx} className="bg-white p-5 rounded-[24px] border border-slate-50 shadow-sm flex items-center justify-between group active:bg-slate-50 transition-colors">
                                <div className="flex items-center space-x-4">
                                    <div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-300 group-active:text-[#185FA5] transition-colors">
                                        <FileText className="w-5 h-5" />
                                    </div>
                                    <span className="text-xs font-bold text-slate-700">{doc.name}</span>
                                </div>
                                <div className="flex items-center space-x-1.5 text-[9px] font-black text-emerald-500 uppercase tracking-widest bg-emerald-50 px-2.5 py-1 rounded-lg">
                                    <ShieldCheck className="w-3 h-3" />
                                    <span>{doc.status}</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Skills Section */}
                <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                        <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
                        <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Skills & Expertise</h3>
                    </div>
                    <div className="flex flex-wrap gap-2.5">
                        {worker.skills.map((skill) => (
                            <span key={skill} className="px-4 py-2 bg-white text-slate-500 text-[11px] font-bold rounded-xl border border-slate-50 shadow-sm">
                                {skill}
                            </span>
                        ))}
                    </div>
                </div>
            </div>

            {/* Floating Action Bar */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-6 bg-white/80 backdrop-blur-xl border-t border-slate-100 flex items-center space-x-4 z-50">
                <Link 
                    href={`/mobile/employer/chat/${worker.id}`}
                    className="w-16 h-16 bg-slate-50 text-[#185FA5] rounded-[24px] flex items-center justify-center border border-slate-100 shadow-sm active:scale-95 transition-all"
                >
                    <MessageSquare className="w-6 h-6" />
                </Link>
                <button className="flex-1 h-16 bg-[#185FA5] text-white rounded-[24px] font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/30 active:scale-[0.98] transition-all flex items-center justify-center space-x-3">
                    <span>Initiate Hiring</span>
                    <ArrowRight className="w-4 h-4" />
                </button>
            </div>
        </div>
    );
}
