import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { 
    Bookmark, 
    MessageSquare, 
    CalendarDays, 
    CreditCard, 
    Search, 
    ArrowRight, 
    Heart, 
    CheckCircle2, 
    Info, 
    Clock, 
    ChevronRight,
    UserCircle2,
    Sparkles,
    Plus,
    Activity,
    TrendingUp,
    ShieldCheck,
    AlertTriangle,
    Star,
    Send,
    HelpCircle,
    UserCheck,
    Lock
} from 'lucide-react';

export default function Dashboard({ 
    employer, 
    stats, 
    shortlisted_workers, 
    recent_messages, 
    announcements, 
    recommended_workers = [], 
    saved_searches = [] 
}) {
    const isSubActive = employer.subscription_status === 'active';
    const isExpiringSoon = stats.days_remaining <= 7;

    return (
        <EmployerLayout title="Sponsor Control Center">
            <Head title="Sponsor Dashboard - Verified UAE Domestic Workers" />

            <div className="space-y-8 pb-12">
                {/* 1. Alerts & Warning Banners */}
                {!isSubActive && (
                    <div className="bg-gradient-to-r from-rose-500/10 to-red-500/10 border border-rose-300 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between shadow-sm animate-pulse gap-4">
                        <div className="flex items-center space-x-4">
                            <div className="w-12 h-12 rounded-2xl bg-rose-500/15 flex items-center justify-center text-rose-600 flex-shrink-0">
                                <Lock className="w-6 h-6" />
                            </div>
                            <div>
                                <h4 className="font-black text-sm text-slate-900">Your Sponsor Subscription Pass Has Expired!</h4>
                                <p className="text-xs text-slate-500 font-bold mt-1">Direct communication, candidate dossiers, and messaging are locked. Renew your annual sponsor subscription now to resume hiring.</p>
                            </div>
                        </div>
                        <Link 
                            href="/employer/subscription"
                            className="bg-rose-600 hover:bg-rose-700 text-white px-5 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all shadow-md shadow-rose-600/20 flex items-center space-x-1.5 shrink-0"
                        >
                            <span>Renew Subscription</span>
                            <ArrowRight className="w-4 h-4" />
                        </Link>
                    </div>
                )}

                {isExpiringSoon && isSubActive && (
                    <div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-300 rounded-2xl p-4 flex items-center justify-between shadow-xs">
                        <div className="flex items-center space-x-3">
                            <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center text-amber-600 flex-shrink-0">
                                <AlertTriangle className="w-5 h-5 animate-pulse" />
                            </div>
                            <div>
                                <h4 className="font-bold text-sm text-slate-800">Your Premium Sponsor Pass is expiring soon!</h4>
                                <p className="text-xs text-slate-500 font-medium">Only {stats.days_remaining} days left. Renew now to avoid losing contact access to 500+ verified candidates.</p>
                            </div>
                        </div>
                        <Link 
                            href="/employer/subscription"
                            className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center space-x-1"
                        >
                            <span>Renew Now</span>
                            <ArrowRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>
                )}

                {/* Welcome Banner */}
                <div className="bg-gradient-to-br from-[#185FA5] via-[#104D89] to-blue-950 rounded-3xl p-6 sm:p-8 text-white shadow-md flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 relative overflow-hidden select-none border border-blue-800">
                    <div className="absolute -right-10 -bottom-10 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
                    <div className="absolute left-1/3 top-1/4 w-32 h-32 bg-sky-400/10 rounded-full blur-2xl pointer-events-none" />
                    
                    <div className="space-y-4 z-10 max-w-2xl">
                        <div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold backdrop-blur-md border border-white/10">
                            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                            <span>Subscription Status: <span className="text-emerald-300 font-bold uppercase">{employer.subscription_status}</span></span>
                            <span className="text-blue-300">|</span>
                            <span>{stats.days_remaining} Days Left</span>
                        </div>

                        <h1 className="text-3xl sm:text-4xl font-black tracking-tight">
                            Welcome Back, {employer.name}
                        </h1>

                        <p className="text-blue-100 text-sm leading-relaxed font-medium">
                            Hire direct, MOHRE-compliant domestic workers with zero middleman commissions. Browse our updated database of candidates with OCR passport checks.
                        </p>
                    </div>

                    <div className="z-10 flex flex-wrap gap-3 flex-shrink-0">
                        <Link
                            href="/employer/workers"
                            className="bg-white text-[#185FA5] hover:bg-slate-100 px-6 py-3.5 rounded-xl font-bold text-xs shadow-md transition-all flex items-center justify-center space-x-2 group"
                        >
                            <Search className="w-4 h-4 text-[#185FA5] group-hover:scale-110 transition-transform" />
                            <span>Browse 500+ Verified Workers</span>
                            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </Link>
                    </div>
                </div>

                {/* 2. Top-level Stats & Analytics Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {/* Subscription Pass status card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center flex-shrink-0 border border-blue-100 group-hover:scale-105 transition-transform">
                                <CreditCard className="w-6 h-6" />
                            </div>
                            <span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
                                ACTIVE BILLING
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">Sponsor Pass Tier</div>
                            <div className="text-lg font-bold text-slate-800 mt-1">{employer.plan_name}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">Renews: {employer.subscription_expires_at}</div>
                        </div>
                        <Link href="/employer/subscription" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>Manage billing & invoices</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Pending Offers Stat Card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center flex-shrink-0 border border-amber-100 group-hover:scale-105 transition-transform">
                                <Send className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md border border-amber-100">
                                OUTSTANDING
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">Pending Job Offers</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.pending_offers}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">Direct recruitment proposals</div>
                        </div>
                        <Link href="/employer/candidates" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>View hiring workflow</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Hired Count Stat Card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform">
                                <UserCheck className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
                                HIRED SECURELY
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">Total Hired Workers</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.hired_count}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">Direct contracts initiated</div>
                        </div>
                        <Link href="/employer/candidates" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>Track active staff</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Shortlist Counter */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center flex-shrink-0 border border-purple-100 group-hover:scale-105 transition-transform">
                                <Bookmark className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-purple-600 bg-purple-50 px-2 py-0.5 rounded-md border border-purple-100">
                                SAVED LIST
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">Shortlisted Candidates</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.shortlisted_count}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">Bookmark list for interviews</div>
                        </div>
                        <Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>Open shortlist book</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>
                </div>

                {/* 3. Analytics & Quick Action Section */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    {/* Worker Activity Analytics Module (Col 8) */}
                    <div className="lg:col-span-8 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm space-y-6">
                        <div className="pb-3 border-b border-slate-100">
                            <div className="flex items-center space-x-2">
                                <Activity className="w-5 h-5 text-[#185FA5]" />
                                <h3 className="font-extrabold text-base text-slate-900">Discover Insights & Market Stats</h3>
                            </div>
                        </div>

                        <div className="space-y-6">
                            {/* Dubai General Market Stats */}
                            <div className="space-y-3">
                                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">Dubai General Market Insights</div>
                                <div className="grid grid-cols-3 gap-4 text-center">
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xl font-black text-slate-900">1,284</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Hired using app in Dubai</div>
                                    </div>
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xs font-black text-[#185FA5] uppercase leading-snug">Cooking, Care, Driving</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Top Skills Hired</div>
                                    </div>
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xl font-black text-emerald-600">1.4%</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Turnover rate</div>
                                    </div>
                                </div>
                            </div>

                            {/* Your own activity */}
                            <div className="space-y-3">
                                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">Your Sponsor Activity Stats</div>
                                <div className="grid grid-cols-3 gap-4 text-center">
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-slate-800">14</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Workers Contacted</div>
                                    </div>
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-slate-800">{stats.shortlisted_count}</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Shortlisted</div>
                                    </div>
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-emerald-600">{stats.hired_count}</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">Secure Hires</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Quick Actions Panel (Col 4) */}
                    <div className="lg:col-span-4 bg-white p-6 rounded-3xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-6">
                        <div className="space-y-1">
                            <h3 className="font-bold text-base text-slate-900">Quick Actions</h3>
                            <p className="text-xs text-slate-500 font-medium">Speed up your sponsorship process.</p>
                        </div>

                        <div className="space-y-2.5 flex-1 py-2">
                            <Link 
                                href="/employer/workers?category=Childcare" 
                                className="w-full p-3.5 bg-slate-50 hover:bg-blue-50/50 border border-slate-200 hover:border-[#185FA5]/40 rounded-2xl transition-all flex items-center space-x-3 text-left group"
                            >
                                <div className="w-9 h-9 rounded-xl bg-purple-100/50 text-purple-600 flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                                    <Star className="w-4 h-4" />
                                </div>
                                <div className="truncate">
                                    <div className="text-xs font-bold text-slate-800 group-hover:text-[#185FA5] transition-colors">Find Baby Care & Nannies</div>
                                    <div className="text-[10px] text-slate-500 truncate">Browse premium verified nannies</div>
                                </div>
                            </Link>

                            <a 
                                href="https://wa.me/971501112222" 
                                target="_blank"
                                rel="noreferrer"
                                className="w-full p-3.5 bg-slate-50 hover:bg-emerald-50/30 border border-slate-200 hover:border-emerald-500/40 rounded-2xl transition-all flex items-center space-x-3 text-left group"
                            >
                                <div className="w-9 h-9 rounded-xl bg-emerald-100/50 text-emerald-600 flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                                    <MessageSquare className="w-4 h-4" />
                                </div>
                                <div className="truncate">
                                    <div className="text-xs font-bold text-slate-800 group-hover:text-emerald-700 transition-colors flex items-center space-x-1">
                                        <span>Direct WhatsApp Support</span>
                                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                                    </div>
                                    <div className="text-[10px] text-slate-500 truncate">Chat with a recruitment manager</div>
                                </div>
                            </a>
                        </div>

                        <div className="p-3 bg-emerald-50 border border-emerald-100 rounded-2xl text-[10px] text-emerald-800 font-bold flex items-center space-x-2">
                            <ShieldCheck className="w-4 h-4 text-emerald-600 flex-shrink-0" />
                            <span>100% Legal UAE Agency-Free Platform</span>
                        </div>
                    </div>
                </div>

                {/* 4. Detailed Workspace Rows (Col 12 Grid) */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    {/* Left Column: Recommended Workers, Shortlist, Chats */}
                    <div className="lg:col-span-8 space-y-8">
                        {/* Recommended Workers Module */}
                        <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Sparkles className="w-5 h-5 text-amber-500 animate-pulse" />
                                    <h3 className="font-bold text-base text-slate-900">Recommended for You</h3>
                                </div>
                                <Link href="/employer/workers" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
                                    <span>Browse all</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                {recommended_workers.length > 0 ? (
                                    recommended_workers.map((worker) => (
                                        <div key={worker.id} className="bg-slate-50 border border-slate-200/80 rounded-2xl p-4 flex flex-col justify-between space-y-4 hover:border-[#185FA5] hover:bg-white transition-all group relative">
                                            {/* Top info */}
                                            <div className="space-y-3">
                                                <div className="flex items-center justify-between">
                                                    <div className="w-10 h-10 rounded-full bg-blue-100 text-[#185FA5] font-black text-sm flex items-center justify-center border border-blue-200">
                                                        {worker.name.charAt(0)}
                                                    </div>
                                                    {worker.verified && (
                                                        <span className="px-2 py-0.5 bg-emerald-100 text-emerald-800 text-[8px] font-black uppercase rounded border border-emerald-200">
                                                            VERIFIED
                                                        </span>
                                                    )}
                                                </div>
                                                <div>
                                                    <div className="font-bold text-sm text-slate-900 group-hover:text-[#185FA5] transition-colors truncate">
                                                        {worker.name}
                                                    </div>
                                                    <div className="text-[10px] text-slate-500 font-bold truncate">
                                                        {worker.nationality} • {worker.category}
                                                    </div>
                                                </div>
                                                <div className="flex items-center space-x-1 text-xs text-amber-500 font-bold">
                                                    <Star className="w-3.5 h-3.5 fill-amber-500" />
                                                    <span>{worker.rating}</span>
                                                    <span className="text-[10px] text-slate-400 font-medium">({Math.floor(Math.random() * 15) + 3} reviews)</span>
                                                </div>
                                            </div>

                                            {/* Action buttons */}
                                            <div className="pt-3 border-t border-slate-200/60 flex items-center justify-between gap-2">
                                                <div className="text-[11px] font-black text-slate-700">
                                                    {worker.salary} AED<span className="text-[9px] font-bold text-slate-400">/mo</span>
                                                </div>
                                                <Link 
                                                    href={`/employer/workers/${worker.id}`}
                                                    className="px-3 py-1.5 bg-[#185FA5] hover:bg-[#144f8a] text-white text-[10px] font-black rounded-lg transition-colors shadow-xs"
                                                >
                                                    View Profile
                                                </Link>
                                            </div>
                                        </div>
                                    ))
                                ) : (
                                    <div className="col-span-3 text-center py-8 bg-slate-50 rounded-2xl border border-dashed border-slate-200 text-slate-400 text-xs">
                                        No workers currently recommended. Update profile details.
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* My Shortlist Module */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Bookmark className="w-5 h-5 text-[#185FA5]" />
                                    <h3 className="font-bold text-base text-slate-900">Active Shortlist ({shortlisted_workers.length})</h3>
                                </div>
                                <Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
                                    <span>View book</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            {shortlisted_workers?.length > 0 ? (
                                <div className="flex space-x-4 overflow-x-auto pb-2 scrollbar-thin">
                                    {shortlisted_workers.map((worker) => (
                                        <div key={worker.id} className="w-56 bg-slate-50 rounded-2xl p-4 border border-slate-200/70 flex-shrink-0 space-y-3 relative hover:border-[#185FA5] hover:bg-white transition-all">
                                            <div className="flex items-center space-x-3">
                                                <div className="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-base flex-shrink-0 border border-blue-200">
                                                    {worker.name.charAt(0)}
                                                </div>
                                                <div className="truncate">
                                                    <div className="font-bold text-sm text-slate-800 truncate flex items-center space-x-1">
                                                        <span>{worker.name}</span>
                                                        {worker.verified && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" />}
                                                    </div>
                                                    <div className="text-[10px] text-slate-500 truncate font-semibold">{worker.nationality}</div>
                                                </div>
                                            </div>

                                            <div className="space-y-1">
                                                <div className="text-[10px] font-semibold text-slate-400 uppercase tracking-tighter">Category:</div>
                                                <div className="inline-block px-2 py-0.5 bg-white border border-slate-200 rounded-md text-xs font-semibold text-slate-700">
                                                    {worker.category || 'General Helper'}
                                                </div>
                                            </div>

                                            <div className="pt-2 border-t border-slate-200/80 flex items-center justify-between text-xs">
                                                <span className="text-[10px] text-slate-400 font-bold uppercase">AVAILABILITY:</span>
                                                <span className="font-bold text-[#185FA5] bg-blue-50 px-2 py-0.5 rounded text-[10px] border border-blue-100">
                                                    {worker.availability}
                                                </span>
                                            </div>

                                            <Link 
                                                href={`/employer/workers/${worker.id}`}
                                                className="w-full mt-2 bg-white hover:bg-slate-50 text-[#185FA5] border border-slate-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center transition-colors"
                                            >
                                                Open Profile
                                            </Link>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center py-10 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 space-y-2">
                                    <Bookmark className="w-8 h-8 text-slate-300 mx-auto" />
                                    <div className="text-xs font-bold text-slate-500">Shortlist candidates to compare their documents side-by-side</div>
                                </div>
                            )}
                        </div>

                        {/* Recent Chats / Message Center */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <MessageSquare className="w-5 h-5 text-[#185FA5]" />
                                    <h3 className="font-bold text-base text-slate-900">Recent Chats</h3>
                                </div>
                                <Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
                                    <span>All channels</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            <div className="divide-y divide-slate-100">
                                {recent_messages?.length > 0 ? (
                                    recent_messages.map((msg) => (
                                        <Link
                                            key={msg.id}
                                            href={`/employer/messages/${msg.id}`}
                                            className="flex items-start space-x-4 py-4 hover:bg-slate-50 px-3 rounded-2xl transition-colors group"
                                        >
                                            <div className="w-10 h-10 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold text-sm flex-shrink-0 border border-blue-100">
                                                {msg.worker_name.charAt(0)}
                                            </div>
                                            <div className="flex-1 min-w-0">
                                                <div className="flex items-center justify-between">
                                                    <div className="font-bold text-xs text-slate-800 group-hover:text-[#185FA5] transition-colors truncate">
                                                        {msg.worker_name}
                                                    </div>
                                                    <div className="flex items-center space-x-2">
                                                        <span className="text-[9px] font-semibold text-slate-400">{msg.sent_at}</span>
                                                        {msg.unread && (
                                                            <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse border border-white" />
                                                        )}
                                                    </div>
                                                </div>
                                                <p className="text-xs text-slate-600 truncate mt-0.5 font-medium">
                                                    {msg.last_message}
                                                </p>
                                            </div>
                                        </Link>
                                    ))
                                ) : (
                                    <div className="text-center py-8 text-xs text-slate-400">
                                        No recent chat logs found. Find workers to start conversing.
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Right Column: Saved Searches, Announcements, Regulatory details */}
                    <div className="lg:col-span-4 space-y-8">
                        {/* Charity Events Module */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Heart className="w-5 h-5 text-rose-500 fill-rose-500/20" />
                                    <h3 className="font-extrabold text-base text-slate-900">Community Charity Drives</h3>
                                </div>
                                <span className="text-[9px] font-black bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full uppercase tracking-wider">
                                    Live Events
                                </span>
                            </div>

                            <div className="space-y-4">
                                {announcements?.map((ann) => (
                                    <div key={ann.id} className="p-4 bg-rose-50/20 border border-rose-100/70 rounded-2xl space-y-3 relative group hover:border-rose-300 hover:bg-white transition-all">
                                        <div className="flex items-center justify-between text-[9px] font-bold text-rose-600 uppercase tracking-wider">
                                            <span>❤️ Charity Drive</span>
                                            <span>{ann.created_at}</span>
                                        </div>
                                        <div>
                                            <h4 className="font-black text-xs text-slate-900 tracking-tight group-hover:text-rose-600 transition-colors">{ann.title}</h4>
                                            <p className="text-[11px] text-slate-500 font-medium leading-relaxed mt-1">{ann.body}</p>
                                        </div>

                                        {/* Metas */}
                                        <div className="grid grid-cols-2 gap-2 text-[10px] bg-slate-50/60 p-2.5 rounded-xl border border-slate-100 font-bold text-slate-600">
                                            <div className="flex items-center space-x-1 truncate">
                                                <span>🎁</span>
                                                <span className="truncate">{ann.provided_items}</span>
                                            </div>
                                            <div className="flex items-center space-x-1 truncate">
                                                <span>📅</span>
                                                <span className="truncate">{ann.event_date}</span>
                                            </div>
                                        </div>

                                        {ann.location_pin && (
                                            <a
                                                href={ann.location_pin}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="w-full bg-white hover:bg-rose-50 text-rose-600 border border-rose-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center space-x-1 transition-colors"
                                            >
                                                <span>📍 Open Google Maps Location Pin</span>
                                            </a>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* Direct Sponsorship Compliance card */}
                        <div className="bg-gradient-to-br from-indigo-950 to-blue-900 rounded-3xl p-6 text-white border border-indigo-900 shadow-sm relative overflow-hidden space-y-4">
                            <div className="absolute right-0 top-0 w-24 h-24 bg-white/5 rounded-full blur-xl pointer-events-none" />
                            <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center border border-white/10 text-white">
                                <ShieldCheck className="w-6 h-6 text-emerald-400" />
                            </div>
                            <div className="space-y-2">
                                <h4 className="font-bold text-sm tracking-tight text-white">UAE Tadbeer & MOHRE Compliant</h4>
                                <p className="text-[11px] text-blue-200 leading-relaxed font-medium">
                                    Our direct contract system aligns automatically with the Ministry of Human Resources and Emiratisation guidelines. Fully legal, zero agent fees, complete transparency.
                                </p>
                            </div>
                            <div className="pt-2">
                                <a 
                                    href="https://www.mohre.gov.ae/" 
                                    target="_blank" 
                                    rel="noreferrer" 
                                    className="text-xs font-bold text-emerald-400 hover:text-emerald-300 flex items-center space-x-1"
                                >
                                    <span>Visit MOHRE UAE website</span>
                                    <ArrowRight className="w-3.5 h-3.5" />
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
