import React, { useState, useEffect } from 'react';
import { Head, router, Link } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import { 
    Search, 
    Filter, 
    Download, 
    Users, 
    Mail, 
    MapPin, 
    Calendar,
    CheckCircle,
    Clock,
    XCircle,
    ExternalLink,
    MoreVertical,
    BadgeDollarSign,
    ShieldAlert,
    TrendingUp,
    AlertOctagon,
    Award,
    Edit2,
    Trash2,
    Check,
    Phone,
    ShieldCheck,
    Eye
} from 'lucide-react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from '@/components/ui/badge';

export default function EmployersIndex({ employers: initialEmployers, sponsors, filters = {} }) {
    const employers = initialEmployers || sponsors || { data: [], total: 0 };
    const [searchTerm, setSearchTerm] = useState(filters.search || '');
    const [statusFilter, setStatusFilter] = useState(filters.status || 'All');
    const [locationFilter, setLocationFilter] = useState(filters.location || 'All');
    const [sortField, setSortField] = useState(filters.sort_field || 'created_at');
    const [sortOrder, setSortOrder] = useState(filters.sort_order || 'desc');
    
    const formatDate = (dateStr) => {
        if (!dateStr) return 'N/A';
        try {
            return new Date(dateStr).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        } catch (e) {
            return dateStr;
        }
    };
    
    const [selectedEmployer, setSelectedEmployer] = useState(null);
    const [isDetailsOpen, setIsDetailsOpen] = useState(false);
    const [isEditOpen, setIsEditOpen] = useState(false);
    const [editForm, setEditForm] = useState({
        id: '',
        name: '',
        email: '',
        company_name: '',
        phone: '',
        country: '',
        subscription_status: 'none'
    });

    // Handle search/filter queries
    const triggerSearch = (searchVal, statusVal, locationVal, sortF, sortO) => {
        router.get('/admin/employers', {
            search: searchVal,
            status: statusVal,
            location: locationVal,
            sort_field: sortF,
            sort_order: sortO
        }, {
            preserveState: true,
            preserveScroll: true,
            replace: true
        });
    };

    useEffect(() => {
        const delayDebounceFn = setTimeout(() => {
            if (searchTerm !== (filters.search || '')) {
                triggerSearch(searchTerm, statusFilter, locationFilter, sortField, sortOrder);
            }
        }, 500);

        return () => clearTimeout(delayDebounceFn);
    }, [searchTerm]);

    const handleFilterChange = (status, location) => {
        setStatusFilter(status);
        setLocationFilter(location);
        triggerSearch(searchTerm, status, location, sortField, sortOrder);
    };

    const handleSort = (field) => {
        const order = sortField === field && sortOrder === 'desc' ? 'asc' : 'desc';
        setSortField(field);
        setSortOrder(order);
        triggerSearch(searchTerm, statusFilter, locationFilter, field, order);
    };

    const handleApprove = (id) => {
        router.post(`/admin/employers/${id}/verify`, {}, {
            onSuccess: () => {
                setIsDetailsOpen(false);
            }
        });
    };

    const handleSuspend = (id) => {
        router.post(`/admin/employers/${id}/suspend`, {}, {
            onSuccess: () => {
                setIsDetailsOpen(false);
            }
        });
    };

    const handleActivate = (id) => {
        router.post(`/admin/employers/${id}/activate`, {}, {
            onSuccess: () => {
                setIsDetailsOpen(false);
            }
        });
    };

    const handleDelete = (id) => {
        if (confirm('Are you absolutely sure you want to permanently delete this employer?')) {
            router.delete(`/admin/employers/${id}`);
        }
    };

    const handleEditClick = (employer) => {
        setEditForm({
            id: employer.id,
            name: employer.name,
            email: employer.email,
            company_name: employer.employer_profile?.company_name || '',
            phone: employer.employer_profile?.phone || '',
            country: employer.employer_profile?.country || 'UAE',
            subscription_status: employer.subscription_status || 'none'
        });
        setIsEditOpen(true);
    };

    const handleEditSubmit = (e) => {
        e.preventDefault();
        router.post(`/admin/employers/${editForm.id}/update`, editForm, {
            onSuccess: () => {
                setIsEditOpen(false);
            }
        });
    };

    const handleExport = () => {
        const params = new URLSearchParams({
            search: searchTerm,
            status: statusFilter,
            location: locationFilter,
            sort_field: sortField,
            sort_order: sortOrder
        });
        window.location.href = `/admin/employers/export?${params.toString()}`;
    };

    const viewDetails = (employer) => {
        setSelectedEmployer(employer);
        setIsDetailsOpen(true);
    };

    return (
        <AdminLayout title="Employers">
            <Head title="Employers" />

            <div className="space-y-6 font-sans">
                {/* Statistics Ribbons */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-5">
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                        <div>
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Total Employers</span>
                            <h3 className="text-2xl font-black text-slate-900">{employers.total || 0}</h3>
                        </div>
                        <div className="p-3 bg-teal-50 rounded-xl">
                            <Users className="w-6 h-6 text-teal-600" />
                        </div>
                    </div>
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                        <div>
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Active Plans</span>
                            <h3 className="text-2xl font-black text-blue-600">
                                {employers.data.filter(e => e.subscription_status === 'active').length}
                            </h3>
                        </div>
                        <div className="p-3 bg-blue-50 rounded-xl">
                            <BadgeDollarSign className="w-6 h-6 text-blue-600" />
                        </div>
                    </div>
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                        <div>
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Pending Approval</span>
                            <h3 className="text-2xl font-black text-amber-500">
                                {employers.data.filter(e => e.employer_profile?.verification_status !== 'approved').length}
                            </h3>
                        </div>
                        <div className="p-3 bg-amber-50 rounded-xl">
                            <Clock className="w-6 h-6 text-amber-500" />
                        </div>
                    </div>
                    <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
                        <div>
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Suspended Accounts</span>
                            <h3 className="text-2xl font-black text-rose-600">
                                {employers.data.filter(e => e.status === 'suspended').length}
                            </h3>
                        </div>
                        <div className="p-3 bg-rose-50 rounded-xl">
                            <ShieldAlert className="w-6 h-6 text-rose-600" />
                        </div>
                    </div>
                </div>

                {/* Search and Filters */}
                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                    <div className="flex flex-1 items-center space-x-3">
                        <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-slate-400" />
                            <input 
                                type="text" 
                                placeholder="Search by name, company, email..." 
                                className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm font-medium focus:ring-4 focus:ring-teal-500/10 outline-none transition-all"
                                value={searchTerm}
                                onChange={e => setSearchTerm(e.target.value)}
                            />
                        </div>
                        
                        <div className="flex items-center space-x-2">
                            <select 
                                className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-600 outline-none focus:ring-2 focus:ring-teal-500/10 transition-all cursor-pointer"
                                value={statusFilter}
                                onChange={e => handleFilterChange(e.target.value, locationFilter)}
                            >
                                <option value="All">All Statuses</option>
                                <option value="Active">Active</option>
                                <option value="Suspended">Suspended</option>
                            </select>
                        </div>
                    </div>
                    <div className="flex items-center space-x-2">
                        <button
                            onClick={handleExport}
                            className="px-4 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-black uppercase tracking-wider flex items-center gap-2 hover:bg-[#0c5945] transition-all shadow-md shadow-teal-900/10 cursor-pointer"
                        >
                            <Download className="w-4 h-4" />
                            <span>Export Employers</span>
                        </button>
                    </div>
                </div>

                {/* Table */}
                <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader>
                            <TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
                                <TableHead onClick={() => handleSort('name')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 pl-8 cursor-pointer select-none">
                                    Employer {sortField === 'name' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Company Name</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Subscription Plan</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Verification Status</TableHead>
                                <TableHead onClick={() => handleSort('status')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 cursor-pointer select-none">
                                    Status {sortField === 'status' && (sortOrder === 'desc' ? '↓' : '↑')}
                                </TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 text-right pr-8">Action</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {employers.data.length > 0 ? (
                                employers.data.map((emp) => (
                                    <TableRow key={emp.id} className="hover:bg-slate-50/50 transition-colors">
                                        <TableCell className="py-5 pl-8">
                                            <div className="flex items-center space-x-4">
                                                <div className="w-10 h-10 rounded-xl bg-[#0F6E56]/10 text-[#0F6E56] flex items-center justify-center border border-[#0F6E56]/20 font-bold text-sm">
                                                    {emp.name?.charAt(0)}
                                                </div>
                                                <div>
                                                    <h4 className="text-sm font-bold text-slate-900 leading-none mb-1">{emp.name}</h4>
                                                    <p className="text-xs text-slate-500 font-medium">{emp.email}</p>
                                                </div>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="text-xs font-bold text-slate-700">
                                                {emp.employer_profile?.company_name || 'N/A'}
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <span className={`px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-tight ${
                                                emp.subscription_status === 'active' ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-slate-100 text-slate-500'
                                            }`}>
                                                {emp.subscription_status || 'none'}
                                            </span>
                                        </TableCell>
                                        <TableCell>
                                            <span className={`text-xs font-bold uppercase ${
                                                emp.employer_profile?.verification_status === 'approved' ? 'text-emerald-600' : 'text-amber-500'
                                            }`}>
                                                {emp.employer_profile?.verification_status || 'pending'}
                                            </span>
                                        </TableCell>
                                        <TableCell>
                                            <span className={`text-[10px] font-black uppercase tracking-widest ${
                                                emp.status === 'active' ? 'text-emerald-600' : 'text-rose-600'
                                            }`}>
                                                {emp.status}
                                            </span>
                                        </TableCell>
                                        <TableCell className="text-right pr-8">
                                            <div className="flex items-center justify-end space-x-1">
                                                <button 
                                                    onClick={() => viewDetails(emp)}
                                                    className="p-2 hover:bg-slate-100 rounded-lg text-[#0F6E56] font-bold"
                                                    title="View Details"
                                                >
                                                    <Eye className="w-4.5 h-4.5" />
                                                </button>
                                                <DropdownMenu>
                                                    <DropdownMenuTrigger asChild>
                                                        <button className="p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-all outline-none">
                                                            <MoreVertical className="w-5 h-5" />
                                                        </button>
                                                    </DropdownMenuTrigger>
                                                    <DropdownMenuContent align="end" className="w-48 p-2 rounded-xl">
                                                        <DropdownMenuLabel className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 py-2">Quick Actions</DropdownMenuLabel>
                                                        <DropdownMenuSeparator />
                                                        <DropdownMenuItem 
                                                            className="p-3 rounded-lg focus:bg-blue-50 cursor-pointer text-blue-600 font-bold" 
                                                            onClick={() => handleEditClick(emp)}
                                                        >
                                                            <div className="flex items-center space-x-3">
                                                                <Edit2 className="w-4 h-4" />
                                                                <span className="text-xs font-bold">Edit Employer</span>
                                                            </div>
                                                        </DropdownMenuItem>
                                                        {emp.employer_profile?.verification_status !== 'approved' && (
                                                            <DropdownMenuItem className="p-3 rounded-lg focus:bg-emerald-50 cursor-pointer text-emerald-600 font-bold" onClick={() => handleApprove(emp.id)}>
                                                                <div className="flex items-center space-x-3">
                                                                    <CheckCircle className="w-4 h-4" />
                                                                    <span className="text-xs font-bold">Verify Employer</span>
                                                                </div>
                                                            </DropdownMenuItem>
                                                        )}
                                                        {emp.status === 'active' ? (
                                                            <DropdownMenuItem 
                                                                onClick={() => handleSuspend(emp.id)}
                                                                className="p-3 rounded-lg focus:bg-rose-50 cursor-pointer text-rose-600 font-bold"
                                                            >
                                                                <div className="flex items-center space-x-3">
                                                                    <XCircle className="w-4 h-4" />
                                                                    <span className="text-xs font-bold">Suspend Employer</span>
                                                                </div>
                                                            </DropdownMenuItem>
                                                        ) : (
                                                            <DropdownMenuItem 
                                                                onClick={() => handleActivate(emp.id)}
                                                                className="p-3 rounded-lg focus:bg-emerald-50 cursor-pointer text-emerald-600 font-bold"
                                                            >
                                                                <div className="flex items-center space-x-3">
                                                                    <CheckCircle className="w-4 h-4" />
                                                                    <span className="text-xs font-bold">Activate Employer</span>
                                                                </div>
                                                            </DropdownMenuItem>
                                                        )}
                                                        <DropdownMenuSeparator />
                                                        <DropdownMenuItem 
                                                            onClick={() => handleDelete(emp.id)}
                                                            className="p-3 rounded-lg focus:bg-red-50 cursor-pointer text-red-600 font-bold"
                                                        >
                                                            <div className="flex items-center space-x-3">
                                                                <Trash2 className="w-4 h-4" />
                                                                <span className="text-xs font-bold">Delete Employer</span>
                                                            </div>
                                                        </DropdownMenuItem>
                                                    </DropdownMenuContent>
                                                </DropdownMenu>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell colSpan={6} className="py-12 text-center text-slate-400 font-semibold text-sm">
                                        No employers found.
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>

                    {/* Pagination */}
                    <div className="p-5 border-t border-slate-100 flex items-center justify-between bg-slate-50/50">
                        <span className="text-xs text-slate-500 font-bold">
                            {employers.total > 0 ? (
                                `Showing ${employers.from || 0} to ${employers.to || 0} of ${employers.total} employers`
                            ) : (
                                'No employers found'
                            )}
                        </span>
                        {employers.last_page > 1 && (
                            <div className="flex items-center space-x-2">
                                <Link 
                                    href={employers.prev_page_url || '#'} 
                                    only={['employers']}
                                    preserveScroll
                                    className={`px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-700 shadow-xs hover:bg-slate-50 transition-colors ${
                                        !employers.prev_page_url && 'opacity-50 pointer-events-none'
                                    }`}
                                >
                                    Previous
                                </Link>
                                <Link 
                                    href={employers.next_page_url || '#'} 
                                    only={['employers']}
                                    preserveScroll
                                    className={`px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-700 shadow-xs hover:bg-slate-50 transition-colors ${
                                        !employers.next_page_url && 'opacity-50 pointer-events-none'
                                    }`}
                                >
                                    Next
                                </Link>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Employer Detail Modal */}
            <Dialog open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
                <DialogContent className="sm:max-w-xl w-full bg-white p-0 overflow-hidden rounded-[24px] max-h-[85vh] flex flex-col">
                    <div className="bg-gradient-to-r from-[#0F6E56] to-[#085041] p-6 text-white flex-shrink-0">
                        <div className="flex items-center space-x-4">
                            <div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center border border-white/20 font-black text-xl">
                                {selectedEmployer?.name?.charAt(0)}
                            </div>
                            <div>
                                <h2 className="text-xl font-black tracking-tight">{selectedEmployer?.name}</h2>
                                <p className="text-teal-100/80 text-xs font-semibold mt-1">📍 Registered {new Date(selectedEmployer?.created_at).toLocaleDateString()}</p>
                            </div>
                        </div>
                    </div>

                    <div className="p-6 space-y-6 overflow-y-auto flex-1 bg-slate-50/50">
                        {/* Employer Info Card */}
                        <div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
                            <h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
                                <Users className="w-4 h-4 text-[#0F6E56]" />
                                Employer Profile
                            </h3>
                            <div className="grid grid-cols-2 gap-4 text-xs">
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Company / Household</span>
                                    <span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.company_name || 'N/A'}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Email Address</span>
                                    <span className="font-bold text-slate-800">{selectedEmployer?.email || 'N/A'}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Phone Number</span>
                                    <span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.phone || 'N/A'}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Country / Location</span>
                                    <span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.country || 'United Arab Emirates'}</span>
                                </div>
                            </div>
                        </div>

                        {/* Subscription Plan Card */}
                        <div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
                            <h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
                                <BadgeDollarSign className="w-4 h-4 text-[#0F6E56]" />
                                Chosen Subscription Plan
                            </h3>
                            <div className="grid grid-cols-2 gap-4 text-xs">
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Current Plan</span>
                                    <span className={`inline-block px-2 py-0.5 rounded-md text-[10px] font-black uppercase tracking-tight ${
                                        selectedEmployer?.subscription_status === 'active' 
                                            ? 'bg-blue-50 text-blue-600 border border-blue-100' 
                                            : 'bg-slate-100 text-slate-500'
                                    }`}>
                                        {selectedEmployer?.subscription_status === 'active' 
                                            ? (selectedEmployer?.sponsor?.subscription_plan || 'Active Premium Plan') 
                                            : 'No Active Plan'}
                                    </span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Payment Status</span>
                                    <span className="font-bold text-slate-800 uppercase">{selectedEmployer?.sponsor?.payment_status || 'N/A'}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Plan Starts</span>
                                    <span className="font-bold text-slate-800">{formatDate(selectedEmployer?.sponsor?.subscription_start_date)}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Plan Expires</span>
                                    <span className="font-bold text-slate-800">{formatDate(selectedEmployer?.sponsor?.subscription_end_date)}</span>
                                </div>
                            </div>
                        </div>

                        {/* Document Verification & OCR Extracted Details */}
                        <div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
                            <h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
                                <ShieldCheck className="w-4 h-4 text-[#0F6E56]" />
                                Emirates ID & Document Extracted Details
                            </h3>
                            <div className="grid grid-cols-2 gap-4 text-xs">
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Emirates ID Number</span>
                                    <span className="font-mono font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_number || 'Not Extracted / Pending'}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Emirates ID Expiry</span>
                                    <span className="font-bold text-slate-800">{formatDate(selectedEmployer?.employer_profile?.emirates_id_expiry)}</span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Verification Status</span>
                                    <span className={`font-bold uppercase ${
                                        selectedEmployer?.employer_profile?.verification_status === 'approved' ? 'text-emerald-600' : 'text-amber-500'
                                    }`}>
                                        {selectedEmployer?.employer_profile?.verification_status || 'Pending'}
                                    </span>
                                </div>
                                <div>
                                    <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Trade License Expiry</span>
                                    <span className="font-bold text-slate-800">{formatDate(selectedEmployer?.sponsor?.license_expiry)}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="p-6 border-t border-slate-100 bg-slate-50 flex items-center justify-end gap-3 flex-shrink-0">
                        <button 
                            onClick={() => setIsDetailsOpen(false)}
                            className="px-5 py-2.5 bg-slate-200 text-slate-700 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-300 transition-colors"
                        >
                            Close
                        </button>
                    </div>
                </DialogContent>
            </Dialog>

            {/* Edit Dialog */}
            <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
                <DialogContent className="sm:max-w-xl w-full bg-white p-6 rounded-[24px]">
                    <DialogHeader>
                        <DialogTitle className="text-lg font-black text-slate-800 uppercase tracking-wide">Edit Employer Details</DialogTitle>
                    </DialogHeader>
                    <form onSubmit={handleEditSubmit} className="space-y-4 mt-4">
                        <div className="space-y-1">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Full Name</label>
                            <input 
                                type="text"
                                className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
                                value={editForm.name}
                                onChange={e => setEditForm({ ...editForm, name: e.target.value })}
                                required
                            />
                        </div>
                        <div className="space-y-1">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Company Name</label>
                            <input 
                                type="text"
                                className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
                                value={editForm.company_name}
                                onChange={e => setEditForm({ ...editForm, company_name: e.target.value })}
                            />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <div className="space-y-1">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Email Address</label>
                                <input 
                                    type="email"
                                    className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
                                    value={editForm.email}
                                    onChange={e => setEditForm({ ...editForm, email: e.target.value })}
                                    required
                                />
                            </div>
                            <div className="space-y-1">
                                <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Phone Number</label>
                                <input 
                                    type="text"
                                    className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
                                    value={editForm.phone}
                                    onChange={e => setEditForm({ ...editForm, phone: e.target.value })}
                                />
                            </div>
                        </div>

                        <div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-100">
                            <button 
                                type="button" 
                                onClick={() => setIsEditOpen(false)}
                                className="px-4 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200"
                            >
                                Cancel
                            </button>
                             <button 
                                type="submit" 
                                className="px-5 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-black uppercase tracking-wider"
                            >
                                Save Changes
                            </button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>
        </AdminLayout>
    );
}