import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import { 
    Plus, 
    Search, 
    GripVertical, 
    Edit2, 
    Trash2, 
    Check, 
    X,
    LayoutGrid,
    Info,
    ChevronRight,
    ArrowUp,
    ArrowDown
} from 'lucide-react';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog";

export default function WorkerCategories({ categories: initialCategories }) {
    const [categories, setCategories] = useState(initialCategories || [
        { id: 1, name: 'Electrician', worker_count: 142, status: 'Active', order: 1 },
        { id: 2, name: 'Mason', worker_count: 89, status: 'Active', order: 2 },
        { id: 3, name: 'Plumber', worker_count: 67, status: 'Active', order: 3 },
        { id: 4, name: 'Site Supervisor', worker_count: 34, status: 'Active', order: 4 },
        { id: 5, name: 'Helper', worker_count: 256, status: 'Active', order: 5 },
    ]);

    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [editingCategory, setEditingCategory] = useState(null);

    const handleDelete = (id) => {
        if (confirm('Delete this category? This might affect job postings.')) {
            setCategories(categories.filter(c => c.id !== id));
        }
    };

    return (
        <AdminLayout title="Worker Categories">
            <Head title="Master Data - Categories" />

            <div className="max-w-4xl mx-auto space-y-6">
                {/* Header Actions */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div className="relative flex-1 max-w-sm">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                        <input 
                            type="text" 
                            placeholder="Find category..." 
                            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"
                        />
                    </div>
                    <button 
                        onClick={() => { setEditingCategory(null); setIsDialogOpen(true); }}
                        className="bg-[#0F6E56] text-white px-6 py-2.5 rounded-xl text-sm font-bold flex items-center justify-center space-x-2 hover:bg-[#085041] transition-all shadow-lg shadow-teal-500/10"
                    >
                        <Plus className="w-4 h-4" />
                        <span>Add Category</span>
                    </button>
                </div>

                {/* Categories Card */}
                <div className="bg-white rounded-[24px] border border-slate-200 shadow-sm overflow-hidden">
                    <div className="p-6 border-b border-slate-50 bg-slate-50/30">
                        <div className="flex items-center space-x-3">
                            <div className="p-2 bg-teal-50 rounded-lg">
                                <LayoutGrid className="w-5 h-5 text-[#0F6E56]" />
                            </div>
                            <div>
                                <h2 className="text-sm font-black text-slate-900 uppercase tracking-tight">Worker Classifications</h2>
                                <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-0.5">Manage job categories for the entire platform</p>
                            </div>
                        </div>
                    </div>

                    <Table>
                        <TableHeader>
                            <TableRow className="bg-white hover:bg-white">
                                <TableHead className="w-12"></TableHead>
                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12">Category Name</TableHead>
                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12">Worker Count</TableHead>
                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12">Status</TableHead>
                                <TableHead className="font-bold text-slate-400 text-[10px] uppercase tracking-widest h-12 text-right pr-6">Action</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {categories.map((cat) => (
                                <TableRow key={cat.id} className="hover:bg-slate-50/50 transition-colors group">
                                    <TableCell className="pl-4">
                                        <GripVertical className="w-4 h-4 text-slate-300 cursor-grab active:cursor-grabbing" />
                                    </TableCell>
                                    <TableCell className="py-4 font-bold text-slate-900 text-sm">
                                        {cat.name}
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center space-x-2">
                                            <span className="text-sm font-black text-slate-600">{cat.worker_count}</span>
                                            <span className="text-[10px] font-bold text-slate-400 uppercase">Workers</span>
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <span className="inline-flex items-center px-2 py-0.5 bg-emerald-50 text-emerald-600 rounded text-[10px] font-black uppercase tracking-tight">
                                            {cat.status}
                                        </span>
                                    </TableCell>
                                    <TableCell className="text-right pr-6">
                                        <div className="flex items-center justify-end space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                            <button 
                                                onClick={() => { setEditingCategory(cat); setIsDialogOpen(true); }}
                                                className="p-2 text-slate-400 hover:text-[#0F6E56] hover:bg-teal-50 rounded-lg transition-all"
                                            >
                                                <Edit2 className="w-4 h-4" />
                                            </button>
                                            <button 
                                                onClick={() => handleDelete(cat.id)}
                                                className="p-2 text-slate-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all"
                                            >
                                                <Trash2 className="w-4 h-4" />
                                            </button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    <div className="p-6 bg-slate-50/50 border-t border-slate-100">
                        <div className="flex items-start space-x-3 text-slate-400">
                            <Info className="w-4 h-4 shrink-0 mt-0.5" />
                            <p className="text-[10px] font-bold uppercase tracking-wide leading-relaxed">
                                Tip: You can reorder categories by dragging the handle. The order will reflect in job posting screens and filter menus for both employers and workers.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* Category Modal */}
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                <DialogContent className="sm:max-w-[400px] rounded-[24px]">
                    <DialogHeader>
                        <DialogTitle className="text-xl font-black text-slate-900 tracking-tight">
                            {editingCategory ? 'Edit Category' : 'New Category'}
                        </DialogTitle>
                    </DialogHeader>
                    
                    <div className="py-4 space-y-4">
                        <div className="space-y-2">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Category Name</label>
                            <input className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none" placeholder="e.g. Electrician" />
                        </div>
                        <div className="space-y-2">
                            <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Icon Style (Optional)</label>
                            <div className="grid grid-cols-5 gap-2">
                                {['⚡', '🏗️', '🔧', '🧹', '🛡️'].map(emoji => (
                                    <button key={emoji} className="h-10 bg-slate-50 rounded-lg flex items-center justify-center border border-slate-100 hover:bg-white transition-colors">{emoji}</button>
                                ))}
                            </div>
                        </div>
                    </div>

                    <DialogFooter className="sm:justify-end gap-3 pt-4">
                        <button 
                            onClick={() => setIsDialogOpen(false)}
                            className="px-6 py-2.5 rounded-xl text-sm font-bold text-slate-400 uppercase tracking-widest hover:bg-slate-50 transition-colors"
                        >
                            Cancel
                        </button>
                        <button 
                            className="bg-[#0F6E56] text-white px-8 py-2.5 rounded-xl text-sm font-bold uppercase tracking-widest shadow-lg shadow-teal-500/20 active:scale-95 transition-all"
                        >
                            {editingCategory ? 'Update' : 'Add Category'}
                        </button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </AdminLayout>
    );
}
