import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../../Layouts/EmployerLayout';
import { 
    CheckCircle2, 
    Globe2, 
    Briefcase, 
    DollarSign, 
    Calendar, 
    HeartHandshake, 
    Languages, 
    MessageSquare, 
    Bookmark, 
    ArrowLeft,
    Sparkles,
    FileText,
    ShieldCheck,
    Search
} from 'lucide-react';

export default function Show({ worker }) {
    return (
        <EmployerLayout title="Worker Profile">
            <Head title={`${worker.name} - Worker Profile`} />

            <div className="space-y-6 select-none w-full">
                <Link
                    href="/employer/workers"
                    className="inline-flex items-center space-x-2 text-xs font-bold text-slate-600 hover:text-[#185FA5] transition-colors"
                >
                    <ArrowLeft className="w-4 h-4" />
                    <span>Back to Find Workers</span>
                </Link>

                <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                    {/* Header Card */}
                    <div className="bg-gradient-to-r from-[#185FA5] to-blue-700 p-8 text-white flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 relative overflow-hidden">
                        <div className="absolute -right-10 -bottom-10 w-48 h-48 bg-white/10 rounded-full blur-2xl pointer-events-none" />

                        <div className="flex items-center space-x-5 z-10">
                            <div className="w-20 h-20 rounded-full bg-white text-[#185FA5] flex items-center justify-center font-bold text-3xl shadow-md border-2 border-white flex-shrink-0">
                                {worker.name.charAt(0)}
                            </div>
                            <div className="space-y-1">
                                <div className="flex items-center space-x-2">
                                    <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight">{worker.name}</h1>
                                    {worker.verified && (
                                        <span className="bg-emerald-500 text-white p-0.5 rounded-full shadow-sm" title="OCR Verified">
                                            <CheckCircle2 className="w-4 h-4" />
                                        </span>
                                    )}
                                </div>
                                <div className="flex items-center space-x-2 text-blue-100 text-sm font-medium">
                                    <Globe2 className="w-4 h-4" />
                                    <span>{worker.nationality}</span>
                                    <span>•</span>
                                    <span>{worker.age} Years Old</span>
                                </div>
                            </div>
                        </div>

                        <div className="flex items-center space-x-3 z-10 w-full sm:w-auto justify-end">
                            <button
                                type="button"
                                className="bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white p-3 rounded-xl shadow-sm transition-colors"
                                title="Shortlist Worker"
                            >
                                <Bookmark className="w-5 h-5" />
                            </button>
                            <Link
                                href={`/employer/workers/${worker.id}/hire`}
                                className="bg-[#185FA5] text-white hover:bg-[#144f8a] px-8 py-3 rounded-xl font-bold text-sm shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center space-x-2 flex-1 sm:flex-initial scale-105 active:scale-100"
                            >
                                <Sparkles className="w-4 h-4" />
                                <span>Hire Now</span>
                            </Link>
                            <Link
                                href="/employer/messages"
                                className="bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 px-6 py-3 rounded-xl font-bold text-sm shadow-sm transition-colors flex items-center justify-center space-x-2 flex-1 sm:flex-initial"
                            >
                                <MessageSquare className="w-4 h-4" />
                                <span>Message</span>
                            </Link>
                        </div>
                    </div>

                    {/* Main Details Grid */}
                    <div className="p-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {/* Left Column: Quick Stats */}
                        <div className="space-y-6">
                            <div className="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4">
                                <h3 className="font-bold text-sm text-slate-800 uppercase tracking-wider">Verification & Cost</h3>

                                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
                                    <div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
                                        <DollarSign className="w-4 h-4 text-emerald-600" />
                                        <span>Monthly Salary</span>
                                    </div>
                                    <span className="font-bold text-slate-900 text-sm">{worker.salary} AED</span>
                                </div>

                                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
                                    <div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
                                        <Calendar className="w-4 h-4 text-[#185FA5]" />
                                        <span>Availability</span>
                                    </div>
                                    <span className="font-bold text-[#185FA5] bg-blue-50 px-2 py-0.5 rounded text-xs">
                                        {worker.availability}
                                    </span>
                                </div>

                                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
                                    <div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
                                        <Briefcase className="w-4 h-4 text-amber-600" />
                                        <span>Experience</span>
                                    </div>
                                    <span className="font-bold text-slate-900 text-xs">{worker.experience}</span>
                                </div>

                                <div className="flex items-center justify-between pb-3 border-b border-slate-200">
                                    <div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
                                        <HeartHandshake className="w-4 h-4 text-purple-600" />
                                        <span>Religion</span>
                                    </div>
                                    <span className="font-bold text-slate-900 text-xs">{worker.religion}</span>
                                </div>

                                <div className="flex items-center justify-between">
                                    <div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
                                        <ShieldCheck className="w-4 h-4 text-emerald-600" />
                                        <span>Medical Cert</span>
                                    </div>
                                    <span className="font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded text-xs">
                                        Passed
                                    </span>
                                </div>
                            </div>

                            {/* Languages Spoken */}
                            <div className="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-3">
                                <div className="flex items-center space-x-2 font-bold text-sm text-slate-800">
                                    <Languages className="w-4 h-4 text-[#185FA5]" />
                                    <span>Languages Spoken</span>
                                </div>
                                <div className="flex flex-wrap gap-2">
                                    {worker.languages.map(lang => (
                                        <span key={lang} className="bg-white border border-slate-200 text-slate-800 px-3 py-1 rounded-xl text-xs font-bold shadow-sm">
                                            {lang}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        </div>

                        {/* Right Column: Bio & Skills */}
                        <div className="lg:col-span-2 space-y-8">
                            {/* Professional Summary */}
                            <div className="space-y-3">
                                <h3 className="font-bold text-base text-slate-900">Professional Summary</h3>
                                <p className="text-sm text-slate-600 leading-relaxed bg-slate-50 p-6 rounded-2xl border border-slate-200 italic">
                                    "{worker.bio}"
                                </p>
                            </div>

                            {/* Verified Skills & Competencies */}
                            <div className="space-y-4">
                                <h3 className="font-bold text-base text-slate-900">Verified Skills & Competencies</h3>
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    {worker.skills.map(skill => (
                                        <div key={skill} className="flex items-center space-x-3 p-3.5 bg-white border border-slate-200 rounded-xl shadow-sm">
                                            <CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0" />
                                            <span className="font-bold text-xs text-slate-800">{skill}</span>
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* Verified Documents Section */}
                            <div className="space-y-4">
                                <h3 className="font-bold text-base text-slate-900 flex items-center space-x-2">
                                    <ShieldCheck className="w-5 h-5 text-emerald-600" />
                                    <span>Verified Legal Documents</span>
                                </h3>
                                
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    {/* Document Card: Passport */}
                                    <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                                        <div className="bg-slate-50 px-4 py-3 border-b border-slate-100 flex items-center justify-between">
                                            <span className="text-[11px] font-black text-slate-500 uppercase tracking-widest">Passport (Verified)</span>
                                            <FileText className="w-4 h-4 text-slate-400" />
                                        </div>
                                        <div className="p-4 flex space-x-4">
                                            {/* Document Thumbnail Placeholder */}
                                            <div className="w-24 h-32 bg-slate-100 rounded-lg flex-shrink-0 border border-slate-200 flex flex-col items-center justify-center p-2 relative group cursor-zoom-in">
                                                <div className="w-full h-full bg-blue-50/50 rounded flex items-center justify-center">
                                                    <Search className="w-6 h-6 text-blue-200 group-hover:text-blue-400 transition-colors" />
                                                </div>
                                                <div className="absolute inset-0 bg-slate-900/0 group-hover:bg-slate-900/5 transition-colors" />
                                                <span className="absolute bottom-2 text-[8px] font-bold text-slate-400 uppercase">Click to view</span>
                                            </div>
                                            
                                            {/* Extracted Data */}
                                            <div className="flex-1 space-y-3">
                                                <div>
                                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Document Number</div>
                                                    <div className="text-xs font-bold text-slate-800">L82739102-UAE</div>
                                                </div>
                                                <div className="grid grid-cols-2 gap-2">
                                                    <div>
                                                        <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Issue Date</div>
                                                        <div className="text-xs font-bold text-slate-800">12 Jan 2021</div>
                                                    </div>
                                                    <div>
                                                        <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Expiry Date</div>
                                                        <div className="text-xs font-bold text-emerald-600">11 Jan 2031</div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">OCR Match Accuracy</div>
                                                    <div className="flex items-center space-x-2 mt-1">
                                                        <div className="flex-1 h-1 bg-slate-100 rounded-full overflow-hidden">
                                                            <div className="h-full bg-emerald-500 w-[98%]" />
                                                        </div>
                                                        <span className="text-[10px] font-black text-emerald-600">98%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Document Card: Visa */}
                                    <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                                        <div className="bg-slate-50 px-4 py-3 border-b border-slate-100 flex items-center justify-between">
                                            <span className="text-[11px] font-black text-slate-500 uppercase tracking-widest">Entry Visa (Verified)</span>
                                            <ShieldCheck className="w-4 h-4 text-emerald-500" />
                                        </div>
                                        <div className="p-4 flex space-x-4">
                                            {/* Document Thumbnail Placeholder */}
                                            <div className="w-24 h-32 bg-slate-100 rounded-lg flex-shrink-0 border border-slate-200 flex flex-col items-center justify-center p-2 relative group cursor-zoom-in">
                                                <div className="w-full h-full bg-blue-50/50 rounded flex items-center justify-center">
                                                    <Search className="w-6 h-6 text-blue-200 group-hover:text-blue-400 transition-colors" />
                                                </div>
                                                <div className="absolute inset-0 bg-slate-900/0 group-hover:bg-slate-900/5 transition-colors" />
                                                <span className="absolute bottom-2 text-[8px] font-bold text-slate-400 uppercase">Click to view</span>
                                            </div>
                                            
                                            {/* Extracted Data */}
                                            <div className="flex-1 space-y-3">
                                                <div>
                                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Visa Reference</div>
                                                    <div className="text-xs font-bold text-slate-800">UAE-2024-918273</div>
                                                </div>
                                                <div className="grid grid-cols-2 gap-2">
                                                    <div>
                                                        <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Visa Type</div>
                                                        <div className="text-xs font-bold text-slate-800">Employment</div>
                                                    </div>
                                                    <div>
                                                        <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Expiry Date</div>
                                                        <div className="text-xs font-bold text-amber-600">30 Dec 2026</div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Background Check</div>
                                                    <div className="flex items-center space-x-1.5 mt-1">
                                                        <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
                                                        <span className="text-[10px] font-bold text-slate-700">No Criminal Record Found</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
