import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
import { 
    Bookmark, 
    MessageSquare, 
    X, 
    Briefcase, 
    DollarSign, 
    Star, 
    Globe2,
    ArrowRight 
} from 'lucide-react';

export default function EmployerShortlist() {
    const savedWorkers = [
        { id: 1, name: 'Maria Santos', role: 'Housemaid', rating: '4.9', salary: '1,800 AED', nationality: 'Philippines', img: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Maria', exp: '8 Years' },
        { id: 2, name: 'Elena Gilbert', role: 'Nanny', rating: '4.8', salary: '2,500 AED', nationality: 'Kenya', img: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Elena', exp: '5 Years' },
    ];

    return (
        <EmployerMobileLayout>
            <Head title="Shortlist" />
            
            <div className="p-6 space-y-8">
                {/* Header */}
                <div className="space-y-1">
                    <h1 className="text-2xl font-bold tracking-tight">Shortlist</h1>
                    <p className="text-sm text-slate-500 font-medium">Quick access to your saved candidates</p>
                </div>

                {savedWorkers.length > 0 ? (
                    <div className="space-y-4 pb-10">
                        <div className="flex items-center justify-between px-1">
                            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{savedWorkers.length} Saved Profiles</span>
                            <button className="text-[10px] font-bold text-rose-500 uppercase tracking-widest">Clear All</button>
                        </div>

                        {savedWorkers.map((worker) => (
                            <div key={worker.id} className="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm space-y-5">
                                <div className="flex items-start justify-between">
                                    <div className="flex items-center space-x-4">
                                        <div className="w-16 h-16 rounded-2xl bg-slate-50 overflow-hidden border border-slate-200">
                                            <img src={worker.img} alt="worker" className="w-full h-full object-cover" />
                                        </div>
                                        <div className="space-y-1">
                                            <h4 className="font-bold text-slate-900 text-base">{worker.name}</h4>
                                            <div className="flex items-center space-x-2 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
                                                <Globe2 className="w-3 h-3" />
                                                <span>{worker.nationality}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <button className="w-9 h-9 rounded-xl bg-slate-50 flex items-center justify-center text-slate-300 hover:text-rose-500 transition-colors border border-slate-100">
                                        <X className="w-4 h-4" />
                                    </button>
                                </div>

                                <div className="grid grid-cols-2 gap-3">
                                    <div className="flex items-center space-x-2 text-[11px] font-bold text-slate-600 bg-slate-50 px-3 py-2.5 rounded-xl border border-slate-100">
                                        <Briefcase className="w-3.5 h-3.5 text-slate-400" />
                                        <span>{worker.exp}</span>
                                    </div>
                                    <div className="flex items-center space-x-2 text-[11px] font-bold text-slate-600 bg-slate-50 px-3 py-2.5 rounded-xl border border-slate-100">
                                        <DollarSign className="w-3.5 h-3.5 text-emerald-500" />
                                        <span>{worker.salary}</span>
                                    </div>
                                </div>

                                <div className="flex items-center space-x-3 pt-2">
                                    <Link 
                                        href={`/mobile/employer/workers/${worker.id}`}
                                        className="flex-1 py-4 bg-[#141B34] text-white rounded-2xl font-bold text-sm shadow-xl shadow-slate-900/10 active:scale-95 transition-all text-center"
                                    >
                                        View Profile
                                    </Link>
                                    <div className="flex items-center space-x-1 px-4 py-4 bg-amber-50 rounded-2xl border border-amber-100">
                                        <Star className="w-4 h-4 text-amber-500 fill-amber-500" />
                                        <span className="text-sm font-bold text-amber-700">{worker.rating}</span>
                                    </div>
                                </div>
                            </div>
                        ))}

                        <div className="pt-4">
                            <button className="w-full h-16 bg-white border-2 border-slate-100 text-[#141B34] rounded-2xl font-bold text-sm flex items-center justify-center space-x-2 shadow-sm active:scale-95 transition-all">
                                <MessageSquare className="w-5 h-5" />
                                <span>Message All</span>
                            </button>
                        </div>
                    </div>
                ) : (
                    <div className="flex-1 flex flex-col items-center justify-center space-y-6 pt-20">
                        <div className="w-24 h-24 bg-white border border-slate-100 rounded-[40px] flex items-center justify-center shadow-sm">
                            <Bookmark className="w-10 h-10 text-slate-100" />
                        </div>
                        <div className="text-center space-y-2 px-10">
                            <h3 className="text-lg font-bold tracking-tight">Your Shortlist is Empty</h3>
                            <p className="text-sm text-slate-400 font-medium">Save profiles to compare and hire faster.</p>
                        </div>
                        <Link href="/mobile/employer/workers" className="px-10 py-4 bg-[#141B34] text-white rounded-2xl font-bold text-sm shadow-lg active:scale-95 transition-all">
                            Browse Workers
                        </Link>
                    </div>
                )}
            </div>
        </EmployerMobileLayout>
    );
}
