import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '@/Layouts/EmployerLayout';
import { 
    ArrowLeft, 
    MessageSquare, 
    CheckCircle2, 
    XCircle, 
    Globe2, 
    Briefcase, 
    DollarSign,
    MoreHorizontal,
    Search,
    Filter,
    ShieldCheck,
    Star
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export default function Applicants({ job, applicants: initialApplicants }) {
    const [searchTerm, setSearchTerm] = useState('');
    const [applicants, setApplicants] = useState(initialApplicants || [
        { id: 101, name: 'Anjali Sharma', nationality: 'Indian', category: 'Nanny', salary: 2500, experience: '5 Years', status: 'Reviewing', match_score: 95 },
        { id: 102, name: 'Siti Rahma', nationality: 'Indonesian', category: 'Housemaid', salary: 1800, experience: '3 Years', status: 'Hired', match_score: 88 },
        { id: 103, name: 'Maricel Cruz', nationality: 'Filipino', category: 'Domestic Helper', salary: 2200, experience: '7 Years', status: 'Rejected', match_score: 72 },
        { id: 104, name: 'Bebeth Santos', nationality: 'Filipino', category: 'Cook', salary: 3000, experience: '10 Years', status: 'Reviewing', match_score: 98 },
    ]);

    const filteredApplicants = applicants.filter(a => 
        a.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        a.nationality.toLowerCase().includes(searchTerm.toLowerCase())
    );

    return (
        <EmployerLayout title="Job Applicants">
            <Head title={`Applicants for ${job?.title || 'Job'}`} />

            <div className="space-y-8 select-none pb-12">
                {/* Job Header Info */}
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div className="space-y-2">
                        <Link
                            href="/employer/jobs"
                            className="inline-flex items-center space-x-2 text-[10px] font-black text-[#185FA5] uppercase tracking-widest hover:translate-x-[-4px] transition-transform"
                        >
                            <ArrowLeft className="w-3.5 h-3.5" />
                            <span>Back to My Jobs</span>
                        </Link>
                        <h1 className="text-2xl font-black text-slate-900 tracking-tight">
                            Applicants for <span className="text-[#185FA5]">{job?.title || 'Senior Mason Project'}</span>
                        </h1>
                        <div className="flex items-center space-x-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            <span className="flex items-center"><Briefcase className="w-3 h-3 mr-1" /> {job?.category || 'Mason'}</span>
                            <span className="w-1 h-1 bg-slate-200 rounded-full" />
                            <span className="flex items-center"><DollarSign className="w-3 h-3 mr-1" /> {job?.salary || '2800'} AED</span>
                        </div>
                    </div>
                    
                    <div className="bg-white px-6 py-4 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4 flex-shrink-0">
                        <div className="text-right">
                            <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Hiring Progress</div>
                            <div className="text-lg font-black text-slate-900 tracking-tight">{applicants.filter(a => a.status === 'Hired').length} / 5 <span className="text-slate-300 text-sm">Positions</span></div>
                        </div>
                        <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                            <Star className="w-6 h-6 text-[#185FA5]" />
                        </div>
                    </div>
                </div>

                {/* Filters */}
                <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row gap-4">
                    <div className="relative flex-1">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                        <input 
                            type="text" 
                            placeholder="Find applicant by name or nationality..."
                            className="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
                            value={searchTerm}
                            onChange={e => setSearchTerm(e.target.value)}
                        />
                    </div>
                    <button className="flex items-center justify-center space-x-2 px-6 py-2.5 bg-white border border-slate-200 rounded-xl text-[10px] font-black text-slate-600 hover:bg-slate-50 transition-colors uppercase tracking-widest">
                        <Filter className="w-3.5 h-3.5" />
                        <span>Filter Matches</span>
                    </button>
                </div>

                {/* Applicants List */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {filteredApplicants.length > 0 ? (
                        filteredApplicants.map((applicant) => (
                            <div key={applicant.id} className="bg-white rounded-[24px] border border-slate-200 shadow-sm overflow-hidden flex flex-col group hover:shadow-md transition-all">
                                <div className="p-6 space-y-5">
                                    {/* Applicant Header */}
                                    <div className="flex items-start justify-between">
                                        <div className="flex items-center space-x-3">
                                            <div className="w-12 h-12 rounded-full bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold text-lg border-2 border-white shadow-sm ring-1 ring-slate-100">
                                                {applicant.name.charAt(0)}
                                            </div>
                                            <div>
                                                <h3 className="font-bold text-slate-900 group-hover:text-[#185FA5] transition-colors line-clamp-1">{applicant.name}</h3>
                                                <div className="flex items-center space-x-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">
                                                    <Globe2 className="w-3 h-3" />
                                                    <span>{applicant.nationality}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="flex flex-col items-end space-y-1">
                                            <div className="flex items-center space-x-1 text-emerald-600 font-black text-[10px] bg-emerald-50 px-2 py-0.5 rounded-full">
                                                <ShieldCheck className="w-3 h-3" />
                                                <span>{applicant.match_score}% Match</span>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Stats Grid */}
                                    <div className="grid grid-cols-2 gap-3 p-4 bg-slate-50/50 rounded-2xl border border-slate-50">
                                        <div className="space-y-1">
                                            <div className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Experience</div>
                                            <div className="text-[11px] font-bold text-slate-700">{applicant.experience}</div>
                                        </div>
                                        <div className="space-y-1">
                                            <div className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Expected Pay</div>
                                            <div className="text-[11px] font-bold text-slate-700">{applicant.salary} AED</div>
                                        </div>
                                    </div>

                                    {/* Current Status Badge */}
                                    <div className="flex items-center justify-between">
                                        <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${
                                            applicant.status === 'Hired' ? 'bg-emerald-100 text-emerald-700' :
                                            applicant.status === 'Rejected' ? 'bg-rose-100 text-rose-700' :
                                            'bg-amber-100 text-amber-700'
                                        }`}>
                                            {applicant.status}
                                        </span>
                                        <div className="flex items-center space-x-1 text-[10px] font-bold text-slate-400">
                                            <Link href={`/employer/workers/${applicant.id}`} className="hover:text-[#185FA5] flex items-center underline underline-offset-2">
                                                View Full Profile
                                            </Link>
                                        </div>
                                    </div>
                                </div>

                                {/* Actions Bar */}
                                <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center space-x-2">
                                    <button className="flex-1 bg-white border border-slate-200 text-[#185FA5] hover:bg-blue-50 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center space-x-2">
                                        <MessageSquare className="w-3.5 h-3.5" />
                                        <span>Chat</span>
                                    </button>
                                    <button className="p-2.5 bg-[#185FA5] text-white hover:bg-[#144f8a] rounded-xl transition-all shadow-sm shadow-blue-500/10">
                                        <CheckCircle2 className="w-4 h-4" />
                                    </button>
                                    <button className="p-2.5 bg-white border border-slate-200 text-rose-500 hover:bg-rose-50 rounded-xl transition-all">
                                        <XCircle className="w-4 h-4" />
                                    </button>
                                </div>
                            </div>
                        ))
                    ) : (
                        <div className="col-span-full py-20 text-center">
                            <Users className="w-12 h-12 text-slate-200 mx-auto mb-3" />
                            <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">No applicants found for this job yet.</p>
                        </div>
                    )}
                </div>
            </div>
        </EmployerLayout>
    );
}
