import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { 
    Bookmark, 
    MessageSquare, 
    CalendarDays, 
    CreditCard, 
    Search, 
    ArrowRight, 
    CheckCircle2, 
    Info, 
    Clock, 
    ChevronRight,
    UserCircle2
} from 'lucide-react';

export default function Dashboard({ employer, stats, shortlisted_workers, recent_messages, announcements }) {
    return (
        <EmployerLayout title="Employer Dashboard">
            <Head title="Employer Dashboard - Marketplace Portal" />

            <div className="space-y-8">
                {/* Section 1: Welcome Banner */}
                <div className="bg-gradient-to-r from-[#185FA5] to-blue-700 rounded-2xl p-6 sm:p-8 text-white shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative overflow-hidden select-none">
                    <div className="absolute -right-10 -bottom-10 w-48 h-48 bg-white/10 rounded-full blur-2xl pointer-events-none" />
                    
                    <div className="space-y-3 z-10">
                        <div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold backdrop-blur-sm border border-white/10">
                            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                            <span>Subscription Active</span>
                            <span className="text-blue-200">|</span>
                            <span>{stats.days_remaining} days left</span>
                        </div>

                        <h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
                            Good morning, {employer.name}
                        </h1>

                        <p className="text-blue-100 text-sm max-w-xl font-medium">
                            Welcome to your employer control center. You have {stats.days_remaining} days remaining on your {employer.plan_name}.
                        </p>
                    </div>

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

                {/* Section 2: Stat Cards */}
                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    {/* Shortlisted */}
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
                        <div className="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
                            <Bookmark className="w-6 h-6" />
                        </div>
                        <div>
                            <div className="text-2xl font-bold text-slate-800">{stats.shortlisted_count}</div>
                            <div className="text-xs text-slate-500 font-medium">Workers Shortlisted</div>
                        </div>
                    </div>

                    {/* Messages Sent */}
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
                        <div className="w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0">
                            <MessageSquare className="w-6 h-6" />
                        </div>
                        <div>
                            <div className="text-2xl font-bold text-slate-800">{stats.messages_sent}</div>
                            <div className="text-xs text-slate-500 font-medium">Messages Sent</div>
                        </div>
                    </div>

                    {/* Days Remaining */}
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
                        <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
                            stats.days_remaining < 7 ? 'bg-red-50 text-red-600' : 'bg-amber-50 text-amber-600'
                        }`}>
                            <CalendarDays className="w-6 h-6" />
                        </div>
                        <div>
                            <div className={`text-2xl font-bold ${stats.days_remaining < 7 ? 'text-red-600' : 'text-slate-800'}`}>
                                {stats.days_remaining}
                            </div>
                            <div className="text-xs text-slate-500 font-medium">Days Remaining</div>
                        </div>
                    </div>

                    {/* Plan Name */}
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
                        <div className="w-12 h-12 rounded-xl bg-slate-100 text-slate-600 flex items-center justify-center flex-shrink-0">
                            <CreditCard className="w-6 h-6" />
                        </div>
                        <div className="truncate">
                            <div className="text-lg font-bold text-slate-800 truncate">{employer.plan_name}</div>
                            <div className="text-xs text-slate-500 font-medium">Current Plan</div>
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    {/* Main Content Column (Col 8) */}
                    <div className="lg:col-span-8 space-y-8">
                        {/* Section 3: My Shortlist */}
                        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden 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]" />
                                    <h2 className="text-lg font-bold text-slate-800">My Shortlist</h2>
                                </div>
                                <Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1">
                                    <span>View all</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-xl p-4 border border-slate-200 flex-shrink-0 space-y-3">
                                            <div className="flex items-center space-x-3">
                                                <div className="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-lg 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-xs text-slate-500 truncate">{worker.nationality}</div>
                                                </div>
                                            </div>

                                            <div className="space-y-1">
                                                <div className="text-[11px] font-semibold text-slate-500">Top Skill:</div>
                                                <div className="inline-block px-2.5 py-1 bg-white border border-slate-200 rounded-lg text-xs font-medium text-slate-700">
                                                    {worker.skills[0] || 'General Work'}
                                                </div>
                                            </div>

                                            <div className="pt-2 border-t border-slate-200 flex items-center justify-between text-xs">
                                                <span className="text-slate-500 font-medium">Availability:</span>
                                                <span className="font-bold text-[#185FA5] bg-blue-50 px-2 py-0.5 rounded border border-blue-100">
                                                    {worker.availability}
                                                </span>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center py-12 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200 space-y-2">
                                    <Bookmark className="w-8 h-8 text-slate-300 mx-auto" />
                                    <div className="text-sm font-semibold text-slate-600">Shortlist workers to see them here</div>
                                </div>
                            )}
                        </div>

                        {/* Section 4: Recent Messages */}
                        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden 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]" />
                                    <h2 className="text-lg font-bold text-slate-800">Recent Messages</h2>
                                </div>
                                <Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1">
                                    <span>View all messages</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            <div className="divide-y divide-slate-100">
                                {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-xl transition-colors group"
                                    >
                                        <div className="w-10 h-10 rounded-full 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-sm 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-[10px] font-medium text-slate-400">{msg.sent_at}</span>
                                                    {msg.unread && <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />}
                                                </div>
                                            </div>
                                            <p className="text-xs text-slate-600 truncate mt-0.5">{msg.last_message}</p>
                                        </div>
                                    </Link>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Right Column (Col 4) */}
                    <div className="lg:col-span-4 space-y-8">
                        {/* Section 5: Announcements */}
                        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 space-y-6">
                            <div className="flex items-center space-x-2">
                                <Info className="w-5 h-5 text-[#185FA5]" />
                                <h2 className="text-lg font-bold text-slate-800">Announcements</h2>
                            </div>

                            <div className="space-y-4">
                                {announcements?.map((ann) => (
                                    <div key={ann.id} className="p-4 bg-blue-50/70 border border-blue-100 rounded-xl space-y-2">
                                        <div className="flex items-center justify-between text-[10px] font-bold text-blue-600 uppercase tracking-wider">
                                            <span>System Alert</span>
                                            <span>{ann.created_at}</span>
                                        </div>
                                        <h3 className="font-bold text-xs text-slate-900 tracking-tight">{ann.title}</h3>
                                        <p className="text-xs text-slate-600 leading-relaxed">{ann.body}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
