import React, { useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import { 
    Users, 
    Search, 
    Filter, 
    MoreHorizontal, 
    CheckCircle2, 
    XCircle, 
    UserCheck, 
    UserX,
    Mail,
    Globe,
    Briefcase,
    Download,
    Phone,
    FileText
} from 'lucide-react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export default function WorkerManagement({ workers }) {
    const [searchTerm, setSearchTerm] = useState('');
    const [statusFilter, setStatusFilter] = useState('all');

    const handleToggleStatus = (id, currentStatus) => {
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        router.post(`/admin/workers/${id}/toggle-status`, { status: newStatus });
    };

    const filteredWorkers = workers.filter(worker => {
        const matchesSearch = worker.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
                            worker.email.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesStatus = statusFilter === 'all' || worker.status === statusFilter;
        return matchesSearch && matchesStatus;
    });

    return (
        <AdminLayout title="Worker Management">
            <Head title="Worker Management - Admin Portal" />

            <div className="font-sans max-w-7xl mx-auto space-y-6">
                {/* Header Section */}
                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Worker Management</h1>
                        <p className="text-sm text-gray-500 mt-1">View and manage worker availability and account status.</p>
                    </div>
                    <div className="flex items-center gap-3">
                        <button className="inline-flex items-center px-4 py-2 bg-white border border-gray-200 text-[#0F6E56] rounded-xl text-sm font-bold hover:bg-gray-50 transition-colors shadow-sm space-x-2">
                            <Download className="w-4 h-4" />
                            <span>Export Data</span>
                        </button>
                        <Link 
                            href="/admin/workers/verifications"
                            className="inline-flex items-center px-4 py-2 bg-[#0F6E56] text-white rounded-xl text-sm font-bold hover:bg-[#085041] transition-colors shadow-sm"
                        >
                            View Verifications
                        </Link>
                    </div>
                </div>

                {/* Filters & Search */}
                <div className="bg-white p-4 rounded-2xl border border-gray-100 shadow-sm flex flex-col md:flex-row gap-4 items-center justify-between">
                    <div className="flex flex-1 items-center space-x-4 w-full md:w-auto">
                        <div className="relative flex-1 max-w-md">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                            <input 
                                type="text" 
                                placeholder="Search by name or email..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-transparent rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] transition-all"
                            />
                        </div>
                        <button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-400 hover:bg-slate-50 transition-colors">
                            <Filter className="w-4 h-4" />
                        </button>
                    </div>
                    
                    <div className="flex items-center gap-2 w-full md:w-auto">
                        <span className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mr-2">Status:</span>
                        <div className="flex bg-gray-100 p-1 rounded-xl">
                            {['all', 'active', 'inactive'].map((f) => (
                                <button
                                    key={f}
                                    onClick={() => setStatusFilter(f)}
                                    className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${
                                        statusFilter === f 
                                            ? 'bg-white text-[#0F6E56] shadow-sm' 
                                            : 'text-gray-500 hover:text-gray-900'
                                    }`}
                                >
                                    {f}
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Workers Table */}
                <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader>
                            <TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4 pl-8">Worker Information</TableHead>
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Contact Info</TableHead>
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Category & Exp</TableHead>
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Documents</TableHead>
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Status</TableHead>
                                <TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4 text-right pr-8">Actions</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {filteredWorkers.length > 0 ? (
                                filteredWorkers.map((worker) => (
                                    <TableRow key={worker.id} className="group hover:bg-gray-50/50 transition-colors">
                                         <TableCell className="py-4">
                                             <div className="flex items-center gap-3 pl-4">
                                                 <div className="w-10 h-10 rounded-full bg-[#0F6E56]/10 flex items-center justify-center text-[#0F6E56] font-bold text-sm">
                                                     {worker.name.charAt(0)}
                                                 </div>
                                                 <div>
                                                     <div className="font-bold text-gray-900 text-sm">{worker.name}</div>
                                                     <div className="text-xs text-gray-400 font-medium mt-0.5">{worker.email}</div>
                                                 </div>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <div className="flex items-center space-x-2 text-slate-600">
                                                 <Phone className="w-3.5 h-3.5 text-slate-400" />
                                                 <span className="text-xs font-bold">{worker.phone || '+971 50 000 0000'}</span>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <div className="space-y-1">
                                                 <div className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
                                                     <Briefcase className="w-3.5 h-3.5 text-gray-400" /> {worker.category}
                                                 </div>
                                                 <div className="text-xs text-gray-500 flex items-center gap-1.5">
                                                     <Globe className="w-3.5 h-3.5 text-gray-400" /> {worker.nationality} • {worker.experience}
                                                 </div>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <div className="flex items-center space-x-1.5">
                                                 <div className="p-1.5 bg-emerald-50 rounded-lg">
                                                     <FileText className="w-4 h-4 text-emerald-500" />
                                                 </div>
                                                 <span className="text-[10px] font-black text-emerald-600 uppercase">Verified</span>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <Badge 
                                                 variant="outline" 
                                                 className={`px-3 py-1 rounded-full font-bold text-[10px] uppercase tracking-wider ${
                                                     worker.status === 'active' 
                                                         ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
                                                         : 'bg-red-50 text-red-700 border-red-200'
                                                 }`}
                                             >
                                                 {worker.status === 'active' ? (
                                                     <CheckCircle2 className="w-3 h-3 mr-1" />
                                                 ) : (
                                                     <XCircle className="w-3 h-3 mr-1" />
                                                 )}
                                                 {worker.status}
                                             </Badge>
                                         </TableCell>
                                         <TableCell className="text-right pr-8">
                                            <DropdownMenu>
                                                <DropdownMenuTrigger className="p-2 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none">
                                                    <MoreHorizontal className="w-5 h-5 text-gray-400" />
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end" className="w-48 p-2 rounded-xl shadow-xl border-gray-100">
                                                    <DropdownMenuLabel className="text-[10px] font-bold text-gray-400 uppercase px-2 mb-1">Account Actions</DropdownMenuLabel>
                                                    <DropdownMenuItem 
                                                        onClick={() => handleToggleStatus(worker.id, worker.status)}
                                                        className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs ${
                                                            worker.status === 'active' 
                                                                ? 'text-red-600 hover:bg-red-50' 
                                                                : 'text-emerald-600 hover:bg-emerald-50'
                                                        }`}
                                                    >
                                                        {worker.status === 'active' ? (
                                                            <><UserX className="w-4 h-4" /> Deactivate Account</>
                                                        ) : (
                                                            <><UserCheck className="w-4 h-4" /> Activate Account</>
                                                        )}
                                                    </DropdownMenuItem>
                                                    <DropdownMenuSeparator className="my-1" />
                                                    <DropdownMenuItem className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs text-gray-600 hover:bg-gray-50">
                                                        <Mail className="w-4 h-4" /> Send Message
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs text-gray-600 hover:bg-gray-50">
                                                        <Users className="w-4 h-4" /> View Full Profile
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell colSpan={5} className="py-20 text-center">
                                        <Users className="w-12 h-12 text-gray-200 mx-auto mb-3" />
                                        <div className="font-bold text-gray-400">No workers found matching your criteria.</div>
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </AdminLayout>
    );
}
