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,
    AlertTriangle,
    Eye,
    ShieldAlert,
    Clock,
    Ban,
    FileEdit,
    CheckSquare
} 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';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter
} from "@/components/ui/dialog";

export default function WorkerManagement({ workers }) {
    const [searchTerm, setSearchTerm] = useState('');
    const [statusFilter, setStatusFilter] = useState('all');
    
    // Dialog / Worker selection state
    const [selectedWorker, setSelectedWorker] = useState(null);
    const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
    const [isEditMode, setIsEditMode] = useState(false);

    // Form inputs for Profile Moderation
    const [editForm, setEditForm] = useState({
        name: '',
        category: '',
        experience: '',
        bio: '',
    });

    const [adminNotes, setAdminNotes] = useState('');

    const handleToggleStatus = (id, newStatus) => {
        router.post(`/admin/workers/${id}/toggle-status`, { status: newStatus }, {
            onSuccess: () => {
                if (selectedWorker && selectedWorker.id === id) {
                    setSelectedWorker({ ...selectedWorker, status: newStatus });
                }
            }
        });
    };

    const handleAvailabilityOverride = (id, availability) => {
        router.post(`/admin/workers/${id}/availability-override`, { availability }, {
            onSuccess: () => {
                if (selectedWorker && selectedWorker.id === id) {
                    setSelectedWorker({ ...selectedWorker, availability });
                }
            }
        });
    };

    const handleFlagFraud = (id, isFraud, reason) => {
        router.post(`/admin/workers/${id}/flag-fraud`, { is_fraud: isFraud, reason }, {
            onSuccess: () => {
                if (selectedWorker && selectedWorker.id === id) {
                    setSelectedWorker({ ...selectedWorker, is_fraud: isFraud, fraud_notes: reason });
                }
            }
        });
    };

    const handleProfileSubmit = (e) => {
        e.preventDefault();
        router.post(`/admin/workers/${selectedWorker.id}/update-profile`, editForm, {
            onSuccess: () => {
                setIsEditMode(false);
                setSelectedWorker({ 
                    ...selectedWorker, 
                    name: editForm.name, 
                    category: editForm.category, 
                    experience: editForm.experience, 
                    bio: editForm.bio 
                });
            }
        });
    };

    const handleVerifyAction = (id, action) => {
        router.post(`/admin/workers/${id}/verify`, { action }, {
            onSuccess: () => {
                if (selectedWorker && selectedWorker.id === id) {
                    setSelectedWorker({ ...selectedWorker, verified: action === 'approve' });
                }
            }
        });
    };

    const openWorkerDetails = (worker) => {
        const fullWorker = {
            ...worker,
            phone: worker.phone || '+971 52 489 1209',
            age: worker.age || 28,
            bio: worker.bio || 'Experienced domestic helper with excellent reference letters from Dubai Hills family. Specialist in childcare, Arabic cooking, and pet sitting.',
            verified: worker.verified !== undefined ? worker.verified : true,
            availability: worker.availability || 'Available Now',
            is_fraud: worker.is_fraud || false,
            fraud_notes: worker.fraud_notes || '',
            admin_notes: worker.admin_notes || 'Profile reviewed during initial batch. OCR extraction was successful.'
        };
        setSelectedWorker(fullWorker);
        setEditForm({
            name: fullWorker.name,
            category: fullWorker.category,
            experience: fullWorker.experience,
            bio: fullWorker.bio,
        });
        setAdminNotes(fullWorker.admin_notes);
        setIsEditMode(false);
        setIsDetailDialogOpen(true);
    };

    const filteredWorkers = workers.map(w => ({
        ...w,
        availability: w.id === 101 ? 'Available Now' : w.id === 102 ? 'In Interview' : 'Engaged',
        verified: w.status === 'active'
    })).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 font-sans">Worker Profile Directory</h1>
                        <p className="text-sm text-gray-500 mt-1">Full profile moderation, availability overrides, fraud alerts, and suspension management.</p>
                    </div>
                    <div className="flex items-center gap-3">
                        <button className="inline-flex items-center px-4 py-2.5 bg-white border border-gray-200 text-[#0F6E56] rounded-xl text-xs font-bold hover:bg-gray-50 transition-colors shadow-sm space-x-2 uppercase tracking-wider">
                            <Download className="w-4 h-4" />
                            <span>Export CSV</span>
                        </button>
                        <Link 
                            href="/admin/workers/verifications"
                            className="inline-flex items-center px-4 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-bold hover:bg-[#085041] transition-colors shadow-sm uppercase tracking-wider"
                        >
                            Vetting OCR Queue
                        </Link>
                    </div>
                </div>

                {/* Filters & Search */}
                <div className="bg-white p-4 rounded-2xl border border-slate-200 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, email or nationality..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm focus:bg-white focus:ring-4 focus:ring-[#0F6E56]/10 outline-none transition-all font-medium"
                            />
                        </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">Lifecycle Filter:</span>
                        <div className="flex bg-slate-100 p-1 rounded-xl">
                            {['all', 'active', 'inactive', 'suspended'].map((f) => (
                                <button
                                    key={f}
                                    onClick={() => setStatusFilter(f)}
                                    className={`px-3 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-slate-200 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader>
                            <TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4 pl-8">Worker Information</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Placement Status</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Vetting Status</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Category & Exp</TableHead>
                                <TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Lifecycle</TableHead>
                                <TableHead className="font-bold text-slate-500 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-slate-50/50 transition-colors">
                                         <TableCell className="py-4 pl-8">
                                             <div className="flex items-center gap-3">
                                                 <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 flex items-center gap-1.5">
                                                         <span>{worker.name}</span>
                                                         {worker.id === 103 && (
                                                             <Badge className="bg-red-100 text-red-700 border-none px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center">
                                                                 <AlertTriangle className="w-2.5 h-2.5 mr-0.5" /> Suspicious
                                                             </Badge>
                                                         )}
                                                     </div>
                                                     <div className="text-xs text-gray-400 font-medium mt-0.5">{worker.email}</div>
                                                 </div>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <span className={`px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider ${
                                                 worker.availability === 'Available Now' ? 'bg-emerald-50 text-emerald-600' :
                                                 worker.availability === 'In Interview' ? 'bg-blue-50 text-blue-600' : 'bg-slate-100 text-slate-500'
                                             }`}>
                                                 {worker.availability}
                                             </span>
                                         </TableCell>
                                         <TableCell>
                                             <div className="flex items-center space-x-1.5">
                                                 <div className={`p-1 bg-${worker.verified ? 'emerald' : 'amber'}-50 rounded-lg`}>
                                                     <FileText className={`w-3.5 h-3.5 text-${worker.verified ? 'emerald' : 'amber'}-500`} />
                                                 </div>
                                                 <span className={`text-[10px] font-black uppercase tracking-widest text-${worker.verified ? 'emerald' : 'amber'}-600`}>
                                                     {worker.verified ? 'OCR Verified' : 'Pending Vetting'}
                                                 </span>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <div className="space-y-0.5">
                                                 <div className="text-xs font-bold text-slate-800 flex items-center gap-1.5">
                                                     <Briefcase className="w-3.5 h-3.5 text-slate-400" /> {worker.category}
                                                 </div>
                                                 <div className="text-[10px] text-slate-400 font-bold flex items-center gap-1.5">
                                                     <Globe className="w-3.5 h-3.5 text-slate-400" /> {worker.nationality} • {worker.experience}
                                                 </div>
                                             </div>
                                         </TableCell>
                                         <TableCell>
                                             <Badge 
                                                 variant="outline" 
                                                 className={`px-3 py-0.5 rounded-full font-black text-[9px] uppercase tracking-wider ${
                                                     worker.status === 'active' 
                                                         ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
                                                         : worker.status === 'suspended' ? 'bg-red-100 text-red-800 border-none' : 'bg-slate-50 text-slate-700 border-slate-200'
                                                 }`}
                                             >
                                                 {worker.status}
                                             </Badge>
                                         </TableCell>
                                         <TableCell className="text-right pr-8">
                                             <div className="flex items-center justify-end space-x-1">
                                                 <button 
                                                     onClick={() => openWorkerDetails(worker)}
                                                     className="p-2 hover:bg-slate-100 rounded-lg transition-colors text-[#0F6E56] font-bold"
                                                     title="Manage Profile"
                                                 >
                                                     <Eye className="w-4 h-4" />
                                                 </button>
                                                 <DropdownMenu>
                                                     <DropdownMenuTrigger className="p-2 hover:bg-slate-100 rounded-lg transition-colors focus:outline-none">
                                                         <MoreHorizontal className="w-4 h-4 text-slate-400" />
                                                     </DropdownMenuTrigger>
                                                     <DropdownMenuContent align="end" className="w-52 p-2 rounded-xl shadow-xl border-slate-100">
                                                         <DropdownMenuLabel className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 mb-1">Quick Actions</DropdownMenuLabel>
                                                         
                                                         <DropdownMenuItem 
                                                             onClick={() => handleToggleStatus(worker.id, worker.status === 'active' ? 'suspended' : 'active')}
                                                             className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-red-600 hover:bg-red-50"
                                                         >
                                                             {worker.status === 'active' ? (
                                                                 <><Ban className="w-3.5 h-3.5" /> Suspend Account</>
                                                             ) : (
                                                                 <><UserCheck className="w-3.5 h-3.5" /> Activate Account</>
                                                             )}
                                                         </DropdownMenuItem>

                                                         <DropdownMenuSeparator className="my-1" />
                                                         
                                                         <DropdownMenuItem 
                                                             onClick={() => handleAvailabilityOverride(worker.id, 'Available Now')}
                                                             className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-slate-700 hover:bg-slate-50"
                                                         >
                                                             <CheckSquare className="w-3.5 h-3.5 text-emerald-500" /> Mark Available
                                                         </DropdownMenuItem>

                                                         <DropdownMenuItem 
                                                             onClick={() => handleAvailabilityOverride(worker.id, 'Engaged')}
                                                             className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-slate-700 hover:bg-slate-50"
                                                         >
                                                             <CheckSquare className="w-3.5 h-3.5 text-slate-400" /> Mark Engaged
                                                         </DropdownMenuItem>
                                                     </DropdownMenuContent>
                                                 </DropdownMenu>
                                             </div>
                                         </TableCell>
                                     </TableRow>
                                ))
                            ) : (
                                <TableRow>
                                    <TableCell colSpan={6} className="py-20 text-center">
                                        <Users className="w-12 h-12 text-slate-200 mx-auto mb-3" />
                                        <div className="font-bold text-slate-400">No workers found matching your criteria.</div>
                                    </TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

            {/* Worker Management & Moderation Dialog */}
            <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
                <DialogContent className="max-w-4xl bg-white p-0 overflow-hidden rounded-[24px] border-none shadow-2xl font-sans max-h-[90vh] flex flex-col">
                    {/* Top Header Banner */}
                    <div className="bg-[#0F6E56] p-6 text-white relative flex-shrink-0">
                        {selectedWorker?.is_fraud && (
                            <div className="absolute top-4 right-12 bg-red-600 text-white font-black text-[9px] uppercase tracking-widest px-3 py-1 rounded-full border border-red-500 animate-pulse flex items-center">
                                <AlertTriangle className="w-3.5 h-3.5 mr-1" /> FRAUD WARNING
                            </div>
                        )}
                        <div className="flex items-center space-x-4">
                            <div className="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/20 text-xl font-bold text-white">
                                {selectedWorker?.name.charAt(0)}
                            </div>
                            <div>
                                <h2 className="text-xl font-black tracking-tight">{selectedWorker?.name}</h2>
                                <p className="text-teal-100 text-xs font-semibold">{selectedWorker?.nationality} • ID #{selectedWorker?.id}</p>
                            </div>
                        </div>
                    </div>

                    {/* Scrollable details tab */}
                    <div className="p-6 space-y-6 overflow-y-auto flex-1">
                        
                        {/* Profile Edit Moderation Form */}
                        {isEditMode ? (
                            <form onSubmit={handleProfileSubmit} className="space-y-4 bg-slate-50 p-5 rounded-2xl border border-slate-200">
                                <div className="flex items-center justify-between mb-2">
                                    <h3 className="text-xs font-black text-[#0F6E56] uppercase tracking-wider">Moderate Profile Details</h3>
                                    <button 
                                        type="button" 
                                        onClick={() => setIsEditMode(false)}
                                        className="text-xs text-slate-500 hover:underline font-bold"
                                    >
                                        Cancel Edit
                                    </button>
                                </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">Full Name</label>
                                        <input 
                                            type="text" 
                                            className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold focus:ring-2 focus:ring-[#0F6E56]/10 outline-none"
                                            value={editForm.name}
                                            onChange={e => setEditForm({ ...editForm, name: e.target.value })}
                                        />
                                    </div>
                                    <div className="space-y-1">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Primary Category</label>
                                        <input 
                                            type="text" 
                                            className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold focus:ring-2 focus:ring-[#0F6E56]/10 outline-none"
                                            value={editForm.category}
                                            onChange={e => setEditForm({ ...editForm, category: e.target.value })}
                                        />
                                    </div>
                                </div>
                                <div className="space-y-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Experience</label>
                                    <input 
                                        type="text" 
                                        className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold focus:ring-2 focus:ring-[#0F6E56]/10 outline-none"
                                        value={editForm.experience}
                                        onChange={e => setEditForm({ ...editForm, experience: e.target.value })}
                                    />
                                </div>
                                <div className="space-y-1">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Bio / Description Moderation</label>
                                    <textarea 
                                        rows="3"
                                        className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold focus:ring-2 focus:ring-[#0F6E56]/10 outline-none"
                                        value={editForm.bio}
                                        onChange={e => setEditForm({ ...editForm, bio: e.target.value })}
                                    />
                                </div>
                                <button 
                                    type="submit"
                                    className="px-5 py-2.5 bg-[#0F6E56] text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-[#085041]"
                                >
                                    Save Moderated Details
                                </button>
                            </form>
                        ) : (
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between">
                                        <h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Candidate Bio Details</h3>
                                        <button 
                                            onClick={() => setIsEditMode(true)}
                                            className="text-xs text-[#0F6E56] hover:underline font-bold flex items-center gap-1"
                                        >
                                            <FileEdit className="w-3.5 h-3.5" /> Moderate Profile
                                        </button>
                                    </div>
                                    <p className="text-xs font-bold text-slate-700 leading-relaxed bg-white p-3.5 rounded-xl border border-slate-100 shadow-sm">{selectedWorker?.bio}</p>
                                    
                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <label className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Experience</label>
                                            <div className="text-xs font-black text-slate-800">{selectedWorker?.experience}</div>
                                        </div>
                                        <div>
                                            <label className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Category</label>
                                            <div className="text-xs font-black text-slate-800">{selectedWorker?.category}</div>
                                        </div>
                                    </div>
                                </div>

                                <div className="space-y-4">
                                    <h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Contact & Parameters</h3>
                                    <div className="space-y-2 text-xs font-bold text-slate-700 bg-white p-3.5 rounded-xl border border-slate-100 shadow-sm">
                                        <div className="flex items-center space-x-2">
                                            <Mail className="w-4 h-4 text-teal-600" />
                                            <span>{selectedWorker?.email}</span>
                                        </div>
                                        <div className="flex items-center space-x-2 pt-1">
                                            <Phone className="w-4 h-4 text-teal-600" />
                                            <span>{selectedWorker?.phone}</span>
                                        </div>
                                        <div className="flex items-center space-x-2 pt-1">
                                            <Clock className="w-4 h-4 text-teal-600" />
                                            <span>Age: {selectedWorker?.age} Years Old</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        {/* Management Controls: Verification, Availability, Fraud flags */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            {/* Verification override */}
                            <div className="p-4 bg-white border border-slate-200 rounded-2xl flex flex-col justify-between shadow-sm">
                                <div>
                                    <h4 className="text-xs font-black text-slate-900 uppercase tracking-wide">Verification status</h4>
                                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Status of system OCR document match</p>
                                </div>
                                <div className="flex gap-2 mt-4">
                                    <button 
                                        onClick={() => handleVerifyAction(selectedWorker.id, 'approve')}
                                        className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${
                                            selectedWorker?.verified 
                                                ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
                                                : 'bg-white text-slate-500 hover:bg-slate-50'
                                        }`}
                                    >
                                        Verified
                                    </button>
                                    <button 
                                        onClick={() => handleVerifyAction(selectedWorker.id, 'reject')}
                                        className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${
                                            !selectedWorker?.verified 
                                                ? 'bg-amber-50 text-amber-700 border-amber-200' 
                                                : 'bg-white text-slate-500 hover:bg-slate-50'
                                        }`}
                                    >
                                        Pending / Unverified
                                    </button>
                                </div>
                            </div>

                            {/* Availability Override */}
                            <div className="p-4 bg-white border border-slate-200 rounded-2xl flex flex-col justify-between shadow-sm">
                                <div>
                                    <h4 className="text-xs font-black text-slate-900 uppercase tracking-wide">Availability Override</h4>
                                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Bypass worker app setting</p>
                                </div>
                                <div className="flex bg-slate-100 p-1 rounded-xl mt-4">
                                    {['Available Now', 'In Interview', 'Engaged'].map(av => (
                                        <button
                                            key={av}
                                            onClick={() => handleAvailabilityOverride(selectedWorker.id, av)}
                                            className={`flex-1 py-1 rounded-lg text-[8px] font-black uppercase tracking-tight transition-all ${
                                                selectedWorker?.availability === av 
                                                    ? 'bg-white text-slate-800 shadow-sm' 
                                                    : 'text-slate-500 hover:text-slate-900'
                                            }`}
                                        >
                                            {av.replace(' Now', '')}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            {/* Suspicious / Fraud flagging */}
                            <div className={`p-4 border rounded-2xl flex flex-col justify-between shadow-sm ${
                                selectedWorker?.is_fraud ? 'bg-red-50/50 border-red-200' : 'bg-white border-slate-200'
                            }`}>
                                <div>
                                    <h4 className="text-xs font-black text-slate-900 uppercase tracking-wide flex items-center gap-1">
                                        <ShieldAlert className="w-4 h-4 text-red-600" />
                                        <span>Fraud Flag</span>
                                    </h4>
                                    <p className="text-[10px] text-slate-400 font-semibold mt-1">Flag profile as fake or duplicate</p>
                                </div>
                                <div className="flex gap-2 mt-4">
                                    <button 
                                        onClick={() => handleFlagFraud(selectedWorker.id, true, 'Low OCR passport scan confidence. Signature is blurred.')}
                                        className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${
                                            selectedWorker?.is_fraud 
                                                ? 'bg-red-600 text-white border-none shadow-md shadow-red-600/20' 
                                                : 'bg-white text-red-600 border-red-200 hover:bg-red-50'
                                        }`}
                                    >
                                        Flag Fraud
                                    </button>
                                    {selectedWorker?.is_fraud && (
                                        <button 
                                            onClick={() => handleFlagFraud(selectedWorker.id, false, '')}
                                            className="px-3 py-2 bg-slate-900 text-white rounded-xl text-[9px] font-black uppercase tracking-wider"
                                        >
                                            Clear Flag
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* Admin Internal Sticky compliance notes */}
                        <div className="space-y-2 bg-yellow-50/60 p-4 border border-yellow-200 rounded-2xl">
                            <label className="text-[10px] font-black text-yellow-800 uppercase tracking-widest flex items-center gap-1">
                                <FileText className="w-3.5 h-3.5" />
                                <span>Internal Admin Compliance Notes Logs</span>
                            </label>
                            <textarea 
                                rows="2"
                                placeholder="Write admin logs regarding candidate vetting reviews or user complaints..."
                                className="w-full bg-white border border-yellow-200 rounded-xl p-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-yellow-500/20 outline-none"
                                value={adminNotes}
                                onChange={e => setAdminNotes(e.target.value)}
                            />
                        </div>

                    </div>

                    {/* Bottom controls */}
                    <div className="p-6 border-t border-slate-100 bg-slate-50 flex items-center justify-between flex-shrink-0">
                        <div className="flex items-center space-x-2">
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Account State:</span>
                            <div className="flex bg-slate-200 p-1 rounded-xl">
                                {['active', 'suspended', 'banned'].map(st => (
                                    <button
                                        key={st}
                                        onClick={() => handleToggleStatus(selectedWorker.id, st)}
                                        className={`px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all ${
                                            selectedWorker?.status === st 
                                                ? 'bg-white text-slate-800 shadow-sm' 
                                                : 'text-slate-500 hover:text-slate-900'
                                        }`}
                                    >
                                        {st}
                                    </button>
                                ))}
                            </div>
                        </div>

                        <button 
                            onClick={() => setIsDetailDialogOpen(false)}
                            className="px-6 py-2.5 bg-slate-950 hover:bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
                        >
                            Close Controls
                        </button>
                    </div>
                </DialogContent>
            </Dialog>
        </AdminLayout>
    );
}
