import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { dataService } from '../services/dataService';
import { IWorkOrder, IAsset, IContract, IUser, IRole, IContractType, ITicket } from '../types';
import { ClipboardCheck, ClipboardList, Plus, Search, Calendar, User, Clock, CheckCircle2, AlertTriangle, FileText, Briefcase, Pencil, Trash2, Eye, ArrowUpDown, X } from 'lucide-react';
import Modal from '../components/Modal';
import { useUIStore } from '../store/useUIStore';
import { useAssetStore } from '../store/useAssetStore';
import { workOrderStatusVi, workOrderTypeVi, ticketPriorityVi, ticketStatusVi } from '../utils/displayVi';
import {
   filterActiveOmContractsForPickers,
   resolveUserAssigneeDisplay,
   resolveContractNumber,
   userHasRoleCode,
} from '../utils/omOperationsShared';
import {
   normalizeTicketIdRef,
   resolveTicketForWorkOrder,
   syncTicketStatusFromWorkOrder,
   syncTicketAssigneeFromWorkOrders,
   getLinkedWorkOrderProgressPercent,
} from '../utils/workOrderTicketSync';

const WorkOrders: React.FC = () => {
   const { selectedProjectId } = useAssetStore();
   const [workOrders, setWorkOrders] = useState<IWorkOrder[]>([]);
   const [assets, setAssets] = useState<IAsset[]>([]);
   const [contracts, setContracts] = useState<IContract[]>([]);
   const [contractTypes, setContractTypes] = useState<IContractType[]>([]);
   const [users, setUsers] = useState<IUser[]>([]);
   const [roles, setRoles] = useState<IRole[]>([]);
   const [tickets, setTickets] = useState<ITicket[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedWO, setSelectedWO] = useState<IWorkOrder | null>(null);
   const [editingWO, setEditingWO] = useState<(IWorkOrder & { executionDuration?: number; assignedTechnicianIds?: string[] }) | null>(null);
   const [deletingWOId, setDeletingWOId] = useState<string | null>(null);
   const { addNotification } = useUIStore();

   // Filter & Search State
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [sortField, setSortField] = useState<keyof IWorkOrder>('woCode');
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');

   // Form State
   const [formData, setFormData] = useState<Partial<IWorkOrder> & { executionDuration?: number; assignedTechnicianIds?: string[] }>({
      status: 'Draft',
      priority: 'Medium',
      workOrderType: 'CM',
      executionDuration: 1, // Default 1 day
      assignedTechnicianIds: []
   });

   useEffect(() => {
      if (selectedProjectId) {
         loadData();
      }
   }, [selectedProjectId]);

   const loadData = async () => {
      if (!selectedProjectId) return;
      setLoading(true);
      setError(null);
      try {
         const [wos, assetList, contractList, typesData, usersList, rolesList, ticketList] = await Promise.all([
            dataService.getWorkOrders(selectedProjectId),
            dataService.getAssets(selectedProjectId),
            dataService.getContracts(selectedProjectId),
            dataService.getContractTypes(),
            dataService.getUserDirectory(),
            dataService.getRoles(),
            dataService.getTickets(selectedProjectId),
         ]);
         setWorkOrders(wos);
         setTickets(ticketList);
         setAssets(assetList);
         setUsers(usersList);
         setRoles(rolesList);
         setContractTypes(typesData);
         setContracts(filterActiveOmContractsForPickers(contractList, typesData));
      } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Lỗi khi tải dữ liệu';
         setError(errorMessage);
         addNotification('error', errorMessage);
      } finally {
         setLoading(false);
      }
   };

   const handleCreate = async () => {
      if (!formData.title) {
         addNotification('error', 'Vui lòng nhập tiêu đề!');
         return;
      }

      try {
         const scheduledStart = formData.scheduledStart || formData.scheduledDate;
         const duration = formData.executionDuration || 1;
         const scheduledEnd = scheduledStart ? calculateEndDate(scheduledStart, duration) : undefined;

         // Handle multiple assigned users — store IDs (not names) so edit round-trips correctly
         const assignedTechnicianIds = formData.assignedTechnicianIds || [];
         const assignedTechnicianId = assignedTechnicianIds.length > 0 ? assignedTechnicianIds[0] : '';
         const assignedToValue = assignedTechnicianIds.length > 0
            ? assignedTechnicianIds.join(',')
            : '';

         const newWO: IWorkOrder = {
            _id: `wo${Date.now()}`,
            woCode: `WO-${new Date().getFullYear()}-${Math.floor(Math.random() * 10000)}`,
            projectId: selectedProjectId!,
            ticketId: formData.ticketId || undefined,
            assetId: formData.assetId || undefined,
            contractId: formData.contractId || undefined,
            workOrderType: formData.workOrderType || 'CM',
            title: formData.title,
            description: formData.description || '',
            status: formData.status || 'Draft',
            priority: formData.priority || 'Medium',
            scheduledStart: scheduledStart,
            scheduledEnd: scheduledEnd,
            scheduledDate: scheduledStart,
            assignedTechnicianId: assignedTechnicianId,
            assignedTo: assignedToValue ?? '',
            type: formData.workOrderType || 'CM',
            checklistProgress: 0,
            costLabor: 0,
            costMaterial: 0,
            costExternal: 0,
            totalCost: 0
         } as IWorkOrder;

         await dataService.createWorkOrder(newWO);
         try {
            const synced = await syncTicketStatusFromWorkOrder(newWO, tickets, selectedProjectId);
            if (synced) addNotification('info', 'Đã đồng bộ trạng thái phiếu sự cố với tiến độ công việc.');
         } catch {
            addNotification('warning', 'Đã tạo Work Order nhưng không đồng bộ được phiếu sự cố.');
         }
         // Sync assignee: update ticket.assignedTo = union of all workers in linked WOs
         if (newWO.ticketId) {
            try {
               await syncTicketAssigneeFromWorkOrders(newWO.ticketId, selectedProjectId, users);
            } catch (err: any) {
               addNotification('warning', 'Không đồng bộ được người thực hiện sang phiếu: ' + (err.message || 'Lỗi không xác định'));
            }
         }
         await loadData();
         setIsModalOpen(false);
         setFormData({ status: 'Draft', priority: 'Medium', workOrderType: 'CM', executionDuration: 1, assignedTechnicianIds: [], ticketId: undefined });
         addNotification('success', 'Đã tạo Work Order thành công');
      } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Lỗi khi tạo Work Order';
         addNotification('error', errorMessage);
      }
   };

   const handleUpdate = async () => {
      if (!editingWO) return;

      try {
         const scheduledStart = editingWO.scheduledStart || editingWO.scheduledDate;
         const duration = editingWO.executionDuration || 1;
         const scheduledEnd = scheduledStart ? calculateEndDate(scheduledStart, duration) : editingWO.scheduledEnd;

         // Handle multiple assigned users — store IDs (not names) so edit round-trips correctly
         const assignedTechnicianIds = editingWO.assignedTechnicianIds || [];
         const assignedTechnicianId = assignedTechnicianIds.length > 0 ? assignedTechnicianIds[0] : '';
         const assignedToValue = assignedTechnicianIds.length > 0
            ? assignedTechnicianIds.join(',')
            : '';

         let checklistProgress = editingWO.checklistProgress ?? 0;
         if (
            (editingWO.status === 'In Progress' || editingWO.status === 'InProgress') &&
            checklistProgress >= 100
         ) {
            checklistProgress = 50;
         }

         const updatedWO: IWorkOrder = {
            ...editingWO,
            ticketId: editingWO.ticketId || undefined,
            checklistProgress,
            scheduledStart: scheduledStart,
            scheduledEnd: scheduledEnd,
            scheduledDate: scheduledStart,
            assignedTechnicianId: assignedTechnicianId,
            assignedTo: assignedToValue ?? ''
         } as IWorkOrder;

         await dataService.updateWorkOrder(updatedWO);
         try {
            const synced = await syncTicketStatusFromWorkOrder(updatedWO, tickets, selectedProjectId);
            if (synced) addNotification('info', 'Đã đồng bộ trạng thái phiếu sự cố với tiến độ công việc.');
         } catch {
            addNotification('warning', 'Đã lưu Work Order nhưng không đồng bộ được phiếu sự cố.');
         }
         // Sync assignee: update ticket.assignedTo = union of all workers in linked WOs
         if (updatedWO.ticketId) {
            try {
               await syncTicketAssigneeFromWorkOrders(updatedWO.ticketId, selectedProjectId, users);
            } catch (err: any) {
               addNotification('warning', 'Không đồng bộ được người thực hiện sang phiếu: ' + (err.message || 'Lỗi không xác định'));
            }
         }
         addNotification('success', 'Đã cập nhật Work Order thành công');
         await loadData();
         setEditingWO(null);
      } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Lỗi khi cập nhật Work Order';
         addNotification('error', errorMessage);
      }
   };

   const handleDeleteConfirm = async () => {
      if (!deletingWOId) return;

      try {
         // Find which ticket this WO is linked to before deleting
         const deletingWO = workOrders.find(w => w._id === deletingWOId);
         await dataService.deleteWorkOrder(deletingWOId);
         addNotification('success', 'Đã xóa Work Order thành công');
         // Re-sync ticket assignee after deletion (may remove user if no other WO assigns them)
         if (deletingWO?.ticketId) {
            try {
               await syncTicketAssigneeFromWorkOrders(deletingWO.ticketId, selectedProjectId, users);
            } catch (err: any) {
               addNotification('warning', 'Không đồng bộ được người thực hiện sang phiếu sau khi xóa công việc: ' + (err.message || 'Lỗi không xác định'));
            }
         }
         await loadData();
         setDeletingWOId(null);
      } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Lỗi khi xóa Work Order';
         addNotification('error', errorMessage);
      }
   };

   const handleUpdateStatus = async (status: string) => {
      if (!selectedWO) return;

      let progress = selectedWO.checklistProgress || 0;
      if (status === 'Approved') progress = 0;
      if (status === 'In Progress' || status === 'InProgress') progress = 50;
      if (status === 'Completed') progress = 100;

      try {
         const updatedWO = { 
            ...selectedWO, 
            status: status as any, 
            checklistProgress: progress 
         };
         await dataService.updateWorkOrder(updatedWO as IWorkOrder);
         try {
            const synced = await syncTicketStatusFromWorkOrder(updatedWO as IWorkOrder, tickets, selectedProjectId);
            if (synced) addNotification('info', 'Đã đồng bộ trạng thái phiếu sự cố với tiến độ công việc.');
         } catch {
            addNotification('warning', 'Đã cập nhật Work Order nhưng không đồng bộ được phiếu sự cố.');
         }
         setSelectedWO(updatedWO as IWorkOrder);
         await loadData();
         addNotification('success', `Đã cập nhật trạng thái thành ${workOrderStatusVi(status)}`);
      } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Lỗi khi cập nhật trạng thái';
         addNotification('error', errorMessage);
      }
   };

   const getStatusColor = (status: string) => {
      switch (status) {
         case 'Draft': return 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300';
         case 'Approved': return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300';
         case 'In Progress':
         case 'InProgress': return 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-300';
         case 'Completed': return 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-300';
         case 'Verified': return 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-300';
         case 'Cancelled': return 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-300';
         default: return 'bg-slate-100 text-slate-600';
      }
   };

   const getAssetName = useCallback((assetRef: any) => {
      if (!assetRef) return 'Chưa chọn tài sản';
      
      // Handle populated asset object
      if (typeof assetRef === 'object' && assetRef !== null) {
         if (assetRef.name) {
            const nameStr = typeof assetRef.name === 'object' 
               ? (assetRef.name.vi || assetRef.name.en || JSON.stringify(assetRef.name))
               : String(assetRef.name);
            if (nameStr) return nameStr;
         }
         if (assetRef.code) return String(assetRef.code);
         const assetId = assetRef._id ? String(assetRef._id) : '';
         if (assetId) {
            const found = assets.find(a => String(a._id) === assetId);
            if (found) {
               return typeof found.name === 'object' && found.name !== null
                  ? (found.name.vi || found.name.en || JSON.stringify(found.name))
                  : String(found.name);
            }
         }
         return 'Chưa chọn tài sản';
      }

      // Otherwise assetRef is a string ID
      const assetId = String(assetRef);
      if (!assetId || assetId === '[object Object]') return 'Chưa chọn tài sản';

      const found = assets.find(a => String(a._id) === assetId);
      if (found) {
         return typeof found.name === 'object' && found.name !== null
            ? (found.name.vi || found.name.en || JSON.stringify(found.name))
            : String(found.name);
      }

      return assetId;
   }, [assets]);

   const ticketsNewestFirst = useMemo(() => {
      return [...tickets].sort((a, b) => {
         const ta = new Date(a.createdAt || 0).getTime();
         const tb = new Date(b.createdAt || 0).getTime();
         return tb - ta;
      });
   }, [tickets]);

   // Helper: Calculate end date from start date and duration (in days)
   const calculateEndDate = useCallback((startDate: string, durationDays: number): string => {
      if (!startDate) return '';
      const start = new Date(startDate);
      const end = new Date(start);
      end.setDate(start.getDate() + durationDays - 1); // -1 because we count the start day
      return end.toISOString().split('T')[0];
   }, []);

   // Helper: Calculate duration in days from start and end dates
   const calculateDuration = useCallback((startDate?: string, endDate?: string): number => {
      if (!startDate || !endDate) return 1;
      const start = new Date(startDate);
      const end = new Date(endDate);
      const diffTime = Math.abs(end.getTime() - start.getTime());
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 to include both start and end day
      return diffDays || 1;
   }, []);

   const getProgress = useCallback((wo: IWorkOrder) => getLinkedWorkOrderProgressPercent(wo), []);

   // Memoized statistics
   const stats = useMemo(() => {
      return {
         draft: workOrders.filter(w => w.status === 'Draft' || w.status === 'Approved').length,
         inProgress: workOrders.filter(w => w.status === 'In Progress' || w.status === 'InProgress').length,
         completed: workOrders.filter(w => w.status === 'Completed' || w.status === 'Verified').length,
         totalCost: workOrders.reduce((acc, w) => acc + (w.totalCost || (w.costLabor || 0) + (w.costMaterial || 0) + (w.costExternal || 0)), 0)
      };
   }, [workOrders]);

   // Memoized filtered and sorted work orders
   const filteredAndSortedWOs = useMemo(() => {
      let filtered = [...workOrders];

      // Apply search filter
      if (searchQuery.trim()) {
         const query = searchQuery.toLowerCase();
         filtered = filtered.filter(wo => {
            const assignedUserName = resolveUserAssigneeDisplay(wo.assignedTo || wo.assignedTechnicianId, users).toLowerCase();
            const assetName = getAssetName(wo.assetId).toLowerCase();
            const tk = resolveTicketForWorkOrder(wo.ticketId, tickets);
            const ticketBlob = tk ? `${tk.code} ${tk.title || ''}`.toLowerCase() : '';
            return (
               wo.woCode?.toLowerCase().includes(query) ||
               wo.title?.toLowerCase().includes(query) ||
               wo.description?.toLowerCase().includes(query) ||
               assignedUserName.includes(query) ||
               assetName.includes(query) ||
               ticketBlob.includes(query)
            );
         });
      }

      // Apply status filter
      if (statusFilter !== 'all') {
         filtered = filtered.filter(wo => {
            if (statusFilter === 'In Progress') {
               return wo.status === 'In Progress' || wo.status === 'InProgress';
            }
            return wo.status === statusFilter;
         });
      }

      // Apply sorting
      filtered.sort((a, b) => {
         let aValue: any = a[sortField];
         let bValue: any = b[sortField];

         // Handle date fields
         if (sortField === 'scheduledStart' || sortField === 'scheduledDate') {
            aValue = new Date(aValue || 0).getTime();
            bValue = new Date(bValue || 0).getTime();
         }

         // Handle string fields
         if (typeof aValue === 'string') {
            aValue = aValue.toLowerCase();
            bValue = (bValue || '').toLowerCase();
         }

         // Handle numeric fields
         if (typeof aValue === 'number' && typeof bValue === 'number') {
            if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
            if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
            return 0;
         }

         if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
         if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
         return 0;
      });

      return filtered;
   }, [workOrders, searchQuery, statusFilter, sortField, sortDirection, users, getAssetName, tickets]);

   // Sort handler
   const handleSort = useCallback((field: keyof IWorkOrder) => {
      if (sortField === field) {
         setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
      } else {
         setSortField(field);
         setSortDirection('desc');
      }
   }, [sortField, sortDirection]);

   const detailTicketInfo = useMemo(
      () => (selectedWO ? resolveTicketForWorkOrder(selectedWO.ticketId, tickets) : null),
      [selectedWO, tickets],
   );

   const detailLinkedTicket = useMemo(() => {
      if (!selectedWO) return null;
      const tid = normalizeTicketIdRef(selectedWO.ticketId);
      if (!tid) return null;
      return tickets.find((t) => String(t._id) === tid || t.code === tid) ?? null;
   }, [selectedWO, tickets]);

   const formatCurrency = (amount: number) => {
      if (amount >= 1000000) {
         return `${(amount / 1000000).toFixed(1)}M`;
      }
      if (amount >= 1000) {
         return `${(amount / 1000).toFixed(1)}K`;
      }
      return amount.toLocaleString('vi-VN');
   };

   const formatDate = (dateStr?: string) => {
      if (!dateStr) return 'N/A';
      try {
         return new Date(dateStr).toLocaleDateString('vi-VN');
      } catch {
         return 'N/A';
      }
   };

   if (loading) {
      return (
         <div className="flex items-center justify-center h-64">
            <div className="text-slate-500 dark:text-slate-400">Đang tải danh sách công việc...</div>
         </div>
      );
   }

   if (error) {
      return (
         <div className="flex items-center justify-center h-64">
            <div className="text-red-500 dark:text-red-400">Lỗi: {error}</div>
         </div>
      );
   }

   return (
      <div className="space-y-6">
         <div className="flex justify-between items-center">
            <div>
               <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Quản lý Công việc (Work Orders)</h1>
               <p className="text-sm text-slate-500 dark:text-slate-400">Chi tiết công việc, checklist và nghiệm thu.</p>
            </div>
            <button
               onClick={() => { setSelectedWO(null); setEditingWO(null); setIsModalOpen(true); }}
               className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium shadow-sm transition-colors"
            >
               <Plus size={18} /> Tạo Work Order
            </button>
         </div>

         {/* Statistics */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
               <div>
                  <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Chưa bắt đầu (Draft)</p>
                  <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.draft}</p>
               </div>
               <ClipboardCheck className="text-slate-500" size={24} />
            </div>
            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
               <div>
                  <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Đang thực hiện</p>
                  <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">{stats.inProgress}</p>
               </div>
               <Clock className="text-blue-500" size={24} />
            </div>
            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
               <div>
                  <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Hoàn thành</p>
                  <p className="text-2xl font-bold text-green-600 dark:text-green-400">{stats.completed}</p>
               </div>
               <CheckCircle2 className="text-green-500" size={24} />
            </div>
            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
               <div>
                  <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Tổng chi phí</p>
                  <p className="text-2xl font-bold text-slate-800 dark:text-white">{formatCurrency(stats.totalCost)}</p>
               </div>
               <Briefcase className="text-purple-500" size={24} />
            </div>
         </div>

         {/* List */}
         <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <div className="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-800/50">
               <h3 className="font-bold text-slate-700 dark:text-slate-200 flex items-center gap-2">
                  <ClipboardCheck size={18} /> Danh sách công việc
               </h3>
               <div className="flex items-center gap-2">
                  <div className="relative">
                     <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-slate-400">
                        <Search size={14} />
                     </span>
                     <input
                        type="text"
                        placeholder="Tìm mã WO, phiếu, tiêu đề, tài sản..."
                        className="pl-8 pr-4 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                     />
                  </div>
                  <select
                     className="border border-slate-300 dark:border-slate-600 rounded-md text-sm p-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     value={statusFilter}
                     onChange={(e) => setStatusFilter(e.target.value)}
                  >
                     <option value="all">Tất cả trạng thái</option>
                     <option value="Draft">{workOrderStatusVi('Draft')}</option>
                     <option value="Approved">{workOrderStatusVi('Approved')}</option>
                     <option value="In Progress">{workOrderStatusVi('In Progress')}</option>
                     <option value="Completed">{workOrderStatusVi('Completed')}</option>
                     <option value="Verified">{workOrderStatusVi('Verified')}</option>
                     <option value="Cancelled">{workOrderStatusVi('Cancelled')}</option>
                  </select>
               </div>
            </div>
            {searchQuery && (
               <div className="px-4 py-2 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700">
                  Tìm thấy {filteredAndSortedWOs.length} công việc
               </div>
            )}
            <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                  <thead className="bg-white dark:bg-slate-800">
                     <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                           <button onClick={() => handleSort('woCode')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                              Mã WO <ArrowUpDown size={12} />
                           </button>
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                           <button onClick={() => handleSort('title')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                              Tiêu đề & Tài sản <ArrowUpDown size={12} />
                           </button>
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Hợp đồng</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                           <span className="inline-flex items-center gap-1"><ClipboardList size={14} /> Phiếu sự cố</span>
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Loại</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Người thực hiện</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                           <button onClick={() => handleSort('scheduledDate')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                              Ngày thực hiện <ArrowUpDown size={12} />
                           </button>
                        </th>
                        <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Tiến độ</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                           <button onClick={() => handleSort('status')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                              Trạng thái <ArrowUpDown size={12} />
                           </button>
                        </th>
                        <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Thao tác</th>
                     </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                     {filteredAndSortedWOs.map(wo => (
                        <tr key={wo._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                           <td className="px-6 py-4 font-medium text-blue-600 dark:text-blue-400 text-sm whitespace-nowrap">
                              {wo.woCode}
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-semibold text-slate-900 dark:text-white">{wo.title}</div>
                              <div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
                                 <FileText size={10} /> {getAssetName(wo.assetId)}
                              </div>
                           </td>
                           <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300 whitespace-nowrap">
                              {resolveContractNumber(contracts, wo.contractId)}
                           </td>
                           <td className="px-6 py-4 text-sm whitespace-nowrap max-w-[200px]">
                              {(() => {
                                 const tk = resolveTicketForWorkOrder(wo.ticketId, tickets);
                                 if (!tk || !selectedProjectId) {
                                    return <span className="text-slate-400 dark:text-slate-500">—</span>;
                                 }
                                 return (
                                    <Link
                                       to={`/operations?project=${encodeURIComponent(selectedProjectId)}&ticket=${encodeURIComponent(tk.id)}`}
                                       className="text-amber-700 dark:text-amber-400 hover:underline font-medium"
                                       title={tk.title || tk.code}
                                       onClick={(e) => e.stopPropagation()}
                                    >
                                       {tk.code}
                                    </Link>
                                 );
                              })()}
                           </td>
                           <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300 whitespace-nowrap">
                              {(wo.workOrderType || wo.type)
                                 ? workOrderTypeVi(String(wo.workOrderType || wo.type))
                                 : ''}
                           </td>
                           <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300 flex items-center gap-2 whitespace-nowrap">
                              <User size={14} /> {resolveUserAssigneeDisplay(wo.assignedTo || wo.assignedTechnicianId, users)}
                           </td>
                           <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300 whitespace-nowrap">
                              <div className="flex items-center gap-1">
                                 <Calendar size={14} /> {formatDate(wo.scheduledDate || wo.scheduledStart)}
                              </div>
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap">
                              <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 max-w-[100px]">
                                 <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${getProgress(wo)}%` }}></div>
                              </div>
                              <span className="text-xs text-slate-500 mt-1 block">{getProgress(wo)}%</span>
                              {(() => {
                                 const tid = normalizeTicketIdRef(wo.ticketId);
                                 const tk = tid ? tickets.find((t) => String(t._id) === tid || t.code === tid) : undefined;
                                 if (!tk) return null;
                                 return (
                                    <span className="text-[10px] text-violet-600 dark:text-violet-400 mt-0.5 block leading-tight">
                                       Phiếu: {ticketStatusVi(String(tk.status))}
                                    </span>
                                 );
                              })()}
                           </td>
                           <td className="px-6 py-4">
                              <span className={`px-2 py-1 rounded text-xs font-bold ${getStatusColor(wo.status)}`}>
                                 {workOrderStatusVi(String(wo.status))}
                              </span>
                           </td>
                           <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                              <div className="flex justify-end space-x-2">
                                 <button
                                    onClick={(e) => { e.stopPropagation(); setSelectedWO(wo); }}
                                    className="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-700"
                                    title="Xem chi tiết"
                                 >
                                    <Eye size={16} />
                                 </button>
                                 <button
                                    onClick={(e) => { 
                                       e.stopPropagation(); 
                                       const duration = calculateDuration(wo.scheduledStart || wo.scheduledDate, wo.scheduledEnd);
                                       // Parse assignedTo (comma-separated IDs) or assignedTechnicianId into array
                                       let assignedTechnicianIds: string[] = [];
                                       if (wo.assignedTo && typeof wo.assignedTo === 'string') {
                                          // assignedTo stores comma-separated IDs
                                          const parts = wo.assignedTo.split(',').map(p => p.trim()).filter(Boolean);
                                          assignedTechnicianIds = parts.map(p => {
                                             // Validate that each part is an actual user ID; fall back to name lookup for legacy data
                                             const byId = users.find(u => u._id === p);
                                             if (byId) return byId._id;
                                             const byName = users.find(u => u.name === p);
                                             return byName ? byName._id : p;
                                          }).filter(Boolean);
                                       } else if (wo.assignedTechnicianId) {
                                          if (Array.isArray(wo.assignedTechnicianId)) {
                                             assignedTechnicianIds = wo.assignedTechnicianId;
                                          } else {
                                             assignedTechnicianIds = [wo.assignedTechnicianId];
                                          }
                                       }
                                       setEditingWO({
                                          ...wo,
                                          ticketId: normalizeTicketIdRef(wo.ticketId),
                                          executionDuration: duration,
                                          assignedTechnicianIds,
                                       }); 
                                    }}
                                    className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 p-1 rounded hover:bg-blue-50 dark:hover:bg-slate-700"
                                    title="Chỉnh sửa"
                                 >
                                    <Pencil size={16} />
                                 </button>
                                 <button
                                    onClick={(e) => { e.stopPropagation(); setDeletingWOId(wo._id); }}
                                    className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-1 rounded hover:bg-red-50 dark:hover:bg-slate-700"
                                    title="Xóa"
                                 >
                                    <Trash2 size={16} />
                                 </button>
                              </div>
                           </td>
                        </tr>
                     ))}
                     {filteredAndSortedWOs.length === 0 && (
                        <tr>
                           <td colSpan={10} className="text-center py-8 text-slate-500 dark:text-slate-400">
                              {searchQuery || statusFilter !== 'all' ? 'Không tìm thấy công việc nào phù hợp với bộ lọc.' : 'Chưa có dữ liệu.'}
                           </td>
                        </tr>
                     )}
                  </tbody>
               </table>
            </div>
         </div>

         {/* Create Modal */}
         <Modal
            isOpen={isModalOpen}
            onClose={() => setIsModalOpen(false)}
            title="Tạo Work Order mới"
            footer={
               <>
                  <button onClick={handleCreate} className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                     Tạo mới
                  </button>
                  <button onClick={() => setIsModalOpen(false)} className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white px-4 py-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">
                     Hủy
                  </button>
               </>
            }
         >
            <div className="space-y-4">
               <div>
                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                     Tiêu đề <span className="text-red-500">*</span>
                  </label>
                  <input
                     type="text"
                     className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     value={formData.title || ''}
                     onChange={e => setFormData({ ...formData, title: e.target.value })}
                     placeholder="Nhập tiêu đề công việc"
                  />
               </div>
               <div>
                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Tài sản liên quan</label>
                  <select
                     className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     value={formData.assetId || ''}
                     onChange={e => setFormData({ ...formData, assetId: e.target.value || undefined })}
                  >
                     <option value="">-- Chọn tài sản (tùy chọn) --</option>
                     {assets.map(a => (
                        <option key={a._id} value={a._id}>{a.name} ({a.assetType})</option>
                     ))}
                  </select>
               </div>
               <div>
                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Hợp đồng O&M</label>
                  <select
                     className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     value={formData.contractId || ''}
                     onChange={e => setFormData({ ...formData, contractId: e.target.value || undefined })}
                  >
                     <option value="">-- Chọn hợp đồng (tùy chọn) --</option>
                     {contracts.map(c => (
                        <option key={c._id} value={c._id}>
                           {c.contractNumber} {c.partyA ? `- ${c.partyA}` : ''} {c.capacityKWp ? `(${c.capacityKWp} kWp)` : ''}
                        </option>
                     ))}
                  </select>
                  {contracts.length === 0 && (
                     <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
                        Chưa có hợp đồng O&M nào. Vui lòng tạo hợp đồng trước.
                     </p>
                  )}
               </div>
               <div>
                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                     Phiếu sự cố liên quan <span className="text-slate-400 font-normal">(tùy chọn)</span>
                  </label>
                  <select
                     className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     value={formData.ticketId || ''}
                     onChange={(e) => {
                        const tid = e.target.value || undefined;
                        const ticket = tid ? tickets.find((t) => t._id === tid) : undefined;
                        setFormData((prev) => ({
                           ...prev,
                           ticketId: tid,
                           ...(ticket?.contractId && !prev.contractId ? { contractId: ticket.contractId } : {}),
                           ...(ticket?.assetId !== undefined &&
                           String(ticket.assetId).trim() !== '' &&
                           !prev.assetId
                              ? { assetId: String(ticket.assetId) }
                              : {}),
                        }));
                     }}
                  >
                     <option value="">— Không gắn phiếu —</option>
                     {ticketsNewestFirst.map((t) => (
                        <option key={t._id} value={t._id}>
                           {t.code} — {t.title}
                        </option>
                     ))}
                  </select>
                  <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                     Chọn phiếu để liên kết công việc xử lý sự cố; có thể tự điền hợp đồng/tài sản từ phiếu nếu đang để trống.
                  </p>
               </div>
               <div className="grid grid-cols-2 gap-4">
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Loại</label>
                     <select
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={formData.workOrderType || formData.type || 'CM'}
                        onChange={e => setFormData({ ...formData, workOrderType: e.target.value as any, type: e.target.value })}
                     >
                        <option value="CM">Khắc phục (CM)</option>
                        <option value="PM">Ngăn ngừa (PM)</option>
                        <option value="Cleaning">Vệ sinh</option>
                        <option value="Inspection">Kiểm tra</option>
                        <option value="Upgrade">Nâng cấp</option>
                     </select>
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Ngày bắt đầu dự kiến</label>
                     <input
                        type="date"
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={formData.scheduledDate || formData.scheduledStart || ''}
                        onChange={e => {
                           const startDate = e.target.value;
                           setFormData({ ...formData, scheduledDate: startDate, scheduledStart: startDate });
                        }}
                     />
                  </div>
               </div>
               <div className="grid grid-cols-2 gap-4">
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Số ngày thực hiện</label>
                     <input
                        type="number"
                        min="1"
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={formData.executionDuration || 1}
                        onChange={e => {
                           const duration = parseInt(e.target.value) || 1;
                           setFormData({ ...formData, executionDuration: duration });
                        }}
                        placeholder="Số ngày thực hiện"
                     />
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Ngày kết thúc dự kiến</label>
                     <input
                        type="date"
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={(formData.scheduledDate || formData.scheduledStart) && formData.executionDuration ? calculateEndDate(formData.scheduledDate || formData.scheduledStart || '', formData.executionDuration) : ''}
                        readOnly
                        disabled
                     />
                     <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Tự động tính từ ngày bắt đầu và thời gian thực hiện</p>
                  </div>
               </div>
               <div className="grid grid-cols-2 gap-4">
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mức độ ưu tiên</label>
                     <select
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={formData.priority || 'Medium'}
                        onChange={e => setFormData({ ...formData, priority: e.target.value as any })}
                     >
                        <option value="Low">Thấp</option>
                        <option value="Medium">Trung bình</option>
                        <option value="High">Cao</option>
                     </select>
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Người thực hiện</label>
                     <div className="w-full border border-slate-300 dark:border-slate-600 rounded-lg p-1.5 min-h-[48px] bg-white dark:bg-slate-700 focus-within:ring-2 focus-within:ring-blue-500">
                        {/* Selected Users as Tags */}
                        {formData.assignedTechnicianIds && formData.assignedTechnicianIds.length > 0 && (
                           <div className="flex flex-wrap gap-1.5 mb-1.5">
                              {formData.assignedTechnicianIds.map(userId => {
                                 const user = users.find(u => u._id === userId);
                                 if (!user) return null;
                                 return (
                                    <span
                                       key={userId}
                                       className="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs"
                                    >
                                       {user.name}
                                       <button
                                          type="button"
                                          onClick={() => {
                                             const newIds = formData.assignedTechnicianIds?.filter(id => id !== userId) || [];
                                             setFormData({ 
                                                ...formData, 
                                                assignedTechnicianIds: newIds,
                                                assignedTechnicianId: newIds.length > 0 ? newIds[0] : '',
                                                assignedTo: newIds.length > 0 ? newIds.map(id => resolveUserAssigneeDisplay(id, users)).join(', ') : ''
                                             });
                                          }}
                                          className="hover:bg-blue-200 dark:hover:bg-blue-900/50 rounded-full p-0.5 transition-colors"
                                       >
                                          <X size={12} />
                                       </button>
                                    </span>
                                 );
                              })}
                           </div>
                        )}
                        {/* Dropdown to select users */}
                        <select
                           className="w-full px-1.5 py-0.5 border-0 bg-transparent text-slate-900 dark:text-white focus:outline-none focus:ring-0 text-sm [&>option]:bg-white [&>option]:dark:bg-slate-800 [&>option]:text-slate-900 [&>option]:dark:text-white"
                           value=""
                           onChange={e => {
                              const selectedId = e.target.value;
                              if (selectedId && !formData.assignedTechnicianIds?.includes(selectedId)) {
                                 const newIds = [...(formData.assignedTechnicianIds || []), selectedId];
                                 setFormData({ 
                                    ...formData, 
                                    assignedTechnicianIds: newIds,
                                    assignedTechnicianId: newIds.length > 0 ? newIds[0] : '',
                                    assignedTo: newIds.length > 0 ? newIds.map(id => resolveUserAssigneeDisplay(id, users)).join(', ') : ''
                                 });
                              }
                              e.target.value = '';
                           }}
                        >
                           <option value="">-- Chọn người dùng --</option>
                           {users
                              .filter(u => {
                                 const isActive = u.status === 'Active' || u.active === true;
                                 if (!isActive) return false;
                                 return userHasRoleCode(u, roles, 'TECHNICIAN') || userHasRoleCode(u, roles, 'OM_MANAGER');
                              })
                              .filter(u => !formData.assignedTechnicianIds?.includes(u._id))
                              .map(user => (
                                 <option key={user._id} value={user._id} className="bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
                                    {user.name} ({user.role})
                                 </option>
                              ))}
                        </select>
                     </div>
                     {(!formData.assignedTechnicianIds || formData.assignedTechnicianIds.length === 0) && (
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                           Chọn người dùng từ danh sách (chỉ hiển thị O&M Manager và Technician)
                        </p>
                     )}
                  </div>
               </div>
               <div>
                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mô tả</label>
                  <textarea
                     className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                     rows={3}
                     value={formData.description || ''}
                     onChange={e => setFormData({ ...formData, description: e.target.value })}
                     placeholder="Nhập mô tả chi tiết công việc..."
                  />
               </div>
            </div>
         </Modal>

         {/* Edit Modal */}
         <Modal
            isOpen={!!editingWO}
            onClose={() => setEditingWO(null)}
            title="Chỉnh sửa Work Order"
            footer={
               <>
                  <button onClick={handleUpdate} className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                     Lưu thay đổi
                  </button>
                  <button onClick={() => setEditingWO(null)} className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white px-4 py-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">
                     Hủy
                  </button>
               </>
            }
         >
            {editingWO && (
               <div className="space-y-4">
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Tiêu đề</label>
                     <input
                        type="text"
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={editingWO.title}
                        onChange={e => setEditingWO({ ...editingWO, title: e.target.value })}
                     />
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mô tả</label>
                     <textarea
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        rows={3}
                        value={editingWO.description || ''}
                        onChange={e => setEditingWO({ ...editingWO, description: e.target.value })}
                     />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                     <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Trạng thái</label>
                        <select
                           className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                           value={editingWO.status}
                           onChange={e => setEditingWO({ ...editingWO, status: e.target.value as any })}
                        >
                           <option value="Draft">{workOrderStatusVi('Draft')}</option>
                           <option value="Approved">{workOrderStatusVi('Approved')}</option>
                           <option value="In Progress">{workOrderStatusVi('In Progress')}</option>
                           <option value="Completed">{workOrderStatusVi('Completed')}</option>
                           <option value="Verified">{workOrderStatusVi('Verified')}</option>
                           <option value="Cancelled">{workOrderStatusVi('Cancelled')}</option>
                        </select>
                     </div>
                     <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mức độ ưu tiên</label>
                        <select
                           className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                           value={editingWO.priority}
                           onChange={e => setEditingWO({ ...editingWO, priority: e.target.value as any })}
                        >
                           <option value="Low">Thấp</option>
                           <option value="Medium">Trung bình</option>
                           <option value="High">Cao</option>
                        </select>
                     </div>
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                        Phiếu sự cố liên quan <span className="text-slate-400 font-normal">(tùy chọn)</span>
                     </label>
                     <select
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={normalizeTicketIdRef(editingWO.ticketId) || ''}
                        onChange={(e) =>
                           setEditingWO({
                              ...editingWO,
                              ticketId: e.target.value || undefined,
                           })
                        }
                     >
                        <option value="">— Không gắn phiếu —</option>
                        {ticketsNewestFirst.map((t) => (
                           <option key={t._id} value={t._id}>
                              {t.code} — {t.title}
                           </option>
                        ))}
                     </select>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                     <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Ngày bắt đầu dự kiến</label>
                        <input
                           type="date"
                           className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                           value={editingWO.scheduledStart || editingWO.scheduledDate || ''}
                           onChange={e => {
                              const startDate = e.target.value;
                              const duration = editingWO.executionDuration || 1;
                              const endDate = startDate ? calculateEndDate(startDate, duration) : editingWO.scheduledEnd;
                              setEditingWO({ ...editingWO, scheduledStart: startDate, scheduledDate: startDate, scheduledEnd: endDate });
                           }}
                        />
                     </div>
                     <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Số ngày thực hiện</label>
                        <input
                           type="number"
                           min="1"
                           className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                           value={editingWO.executionDuration || 1}
                           onChange={e => {
                              const duration = parseInt(e.target.value) || 1;
                              const startDate = editingWO.scheduledStart || editingWO.scheduledDate;
                              const endDate = startDate ? calculateEndDate(startDate, duration) : editingWO.scheduledEnd;
                              setEditingWO({ ...editingWO, executionDuration: duration, scheduledEnd: endDate });
                           }}
                        />
                     </div>
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Ngày kết thúc dự kiến</label>
                     <input
                        type="date"
                        className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded mt-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                        value={editingWO.scheduledEnd || ''}
                        readOnly
                        disabled
                     />
                     <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Tự động tính từ ngày bắt đầu và thời gian thực hiện</p>
                  </div>
                  <div>
                     <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Người thực hiện</label>
                     <div className="w-full border border-slate-300 dark:border-slate-600 rounded-lg p-1.5 min-h-[48px] bg-white dark:bg-slate-700 focus-within:ring-2 focus-within:ring-blue-500">
                        {/* Selected Users as Tags */}
                        {editingWO.assignedTechnicianIds && editingWO.assignedTechnicianIds.length > 0 && (
                           <div className="flex flex-wrap gap-1.5 mb-1.5">
                              {editingWO.assignedTechnicianIds.map(userId => {
                                 const user = users.find(u => u._id === userId);
                                 if (!user) return null;
                                 return (
                                    <span
                                       key={userId}
                                       className="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs"
                                    >
                                       {user.name}
                                       <button
                                          type="button"
                                          onClick={() => {
                                             const newIds = editingWO.assignedTechnicianIds?.filter(id => id !== userId) || [];
                                             setEditingWO({ 
                                                ...editingWO, 
                                                assignedTechnicianIds: newIds,
                                                assignedTechnicianId: newIds.length > 0 ? newIds[0] : '',
                                                assignedTo: newIds.length > 0 ? newIds.map(id => resolveUserAssigneeDisplay(id, users)).join(', ') : ''
                                             });
                                          }}
                                          className="hover:bg-blue-200 dark:hover:bg-blue-900/50 rounded-full p-0.5 transition-colors"
                                       >
                                          <X size={12} />
                                       </button>
                                    </span>
                                 );
                              })}
                           </div>
                        )}
                        {/* Dropdown to select users */}
                        <select
                           className="w-full px-1.5 py-0.5 border-0 bg-transparent text-slate-900 dark:text-white focus:outline-none focus:ring-0 text-sm [&>option]:bg-white [&>option]:dark:bg-slate-800 [&>option]:text-slate-900 [&>option]:dark:text-white"
                           value=""
                           onChange={e => {
                              const selectedId = e.target.value;
                              if (selectedId && !editingWO.assignedTechnicianIds?.includes(selectedId)) {
                                 const newIds = [...(editingWO.assignedTechnicianIds || []), selectedId];
                                 setEditingWO({ 
                                    ...editingWO, 
                                    assignedTechnicianIds: newIds,
                                    assignedTechnicianId: newIds.length > 0 ? newIds[0] : '',
                                    assignedTo: newIds.length > 0 ? newIds.map(id => resolveUserAssigneeDisplay(id, users)).join(', ') : ''
                                 });
                              }
                              e.target.value = '';
                           }}
                        >
                           <option value="">-- Chọn người dùng --</option>
                           {users
                              .filter(u => {
                                 const isActive = u.status === 'Active' || u.active === true;
                                 if (!isActive) return false;
                                 return userHasRoleCode(u, roles, 'TECHNICIAN') || userHasRoleCode(u, roles, 'OM_MANAGER');
                              })
                              .filter(u => !editingWO.assignedTechnicianIds?.includes(u._id))
                              .map(user => (
                                 <option key={user._id} value={user._id} className="bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
                                    {user.name} ({user.role})
                                 </option>
                              ))}
                        </select>
                     </div>
                     {(!editingWO.assignedTechnicianIds || editingWO.assignedTechnicianIds.length === 0) && (
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                           Chọn người dùng từ danh sách (chỉ hiển thị O&M Manager và Technician)
                        </p>
                     )}
                  </div>
               </div>
            )}
         </Modal>

         {/* Detail Modal */}
         <Modal
            isOpen={!!selectedWO}
            onClose={() => setSelectedWO(null)}
            title="Chi tiết Work Order"
            footer={
               <div className="flex w-full gap-2">
                  {selectedWO?.status === 'Draft' && (
                     <button onClick={() => handleUpdateStatus('Approved')} className="flex-1 bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
                        Phê duyệt
                     </button>
                  )}
                  {(selectedWO?.status === 'Approved' || selectedWO?.status === 'Draft') && (
                     <button onClick={() => handleUpdateStatus('In Progress')} className="flex-1 bg-yellow-500 text-white px-4 py-2 rounded text-sm hover:bg-yellow-600 transition-colors">
                        Bắt đầu thực hiện
                     </button>
                  )}
                  {(selectedWO?.status === 'In Progress' || selectedWO?.status === 'InProgress') && (
                     <button onClick={() => handleUpdateStatus('Completed')} className="flex-1 bg-green-600 text-white px-4 py-2 rounded text-sm hover:bg-green-700 transition-colors">
                        Hoàn thành
                     </button>
                  )}
                  <button onClick={() => setSelectedWO(null)} className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white px-4 py-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">
                     Đóng
                  </button>
               </div>
            }
         >
            {selectedWO && (
               <div className="space-y-4">
                  <div className="flex justify-between items-start">
                     <div>
                        <h3 className="text-lg font-bold text-slate-900 dark:text-white">{selectedWO.title}</h3>
                        <p className="text-sm text-slate-500">{selectedWO.woCode}</p>
                     </div>
                     <span className={`px-2 py-1 rounded text-xs font-bold ${getStatusColor(selectedWO.status)}`}>
                        {workOrderStatusVi(String(selectedWO.status))}
                     </span>
                  </div>
                  {selectedWO.description && (
                     <div className="bg-slate-50 dark:bg-slate-900/50 p-4 rounded-lg border border-slate-100 dark:border-slate-700">
                        <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Mô tả chi tiết</h4>
                        <p className="text-sm text-slate-700 dark:text-slate-300 whitespace-pre-line">{selectedWO.description}</p>
                     </div>
                  )}
                  <div className="grid grid-cols-2 gap-4 text-sm text-slate-600 dark:text-slate-300">
                     <p className="col-span-2 flex flex-wrap items-center gap-x-2 gap-y-1">
                        <b>Phiếu sự cố:</b>{' '}
                        {selectedProjectId && detailTicketInfo ? (
                           <>
                              <Link
                                 to={`/operations?project=${encodeURIComponent(selectedProjectId)}&ticket=${encodeURIComponent(detailTicketInfo.id)}`}
                                 className="text-amber-700 dark:text-amber-400 hover:underline font-semibold"
                              >
                                 {detailTicketInfo.code}
                              </Link>
                              {detailTicketInfo.title ? (
                                 <span className="text-slate-500 dark:text-slate-400">
                                    — {detailTicketInfo.title}
                                 </span>
                              ) : null}
                              <span className="text-xs text-slate-400">(mở chi tiết phiếu)</span>
                              {detailLinkedTicket ? (
                                 <span className="text-xs font-medium text-violet-600 dark:text-violet-400">
                                    · Trạng thái phiếu: {ticketStatusVi(String(detailLinkedTicket.status))}
                                 </span>
                              ) : null}
                           </>
                        ) : (
                           <span className="text-slate-400">Không gắn phiếu</span>
                        )}
                     </p>
                     <p><b>Tài sản:</b> {getAssetName(selectedWO.assetId)}</p>
                     <p><b>Hợp đồng:</b> {resolveContractNumber(contracts, selectedWO.contractId)}</p>
                     <p><b>Loại:</b> {workOrderTypeVi(String(selectedWO.workOrderType || selectedWO.type || ''))}</p>
                     <p><b>Ngày bắt đầu:</b> {formatDate(selectedWO.scheduledDate || selectedWO.scheduledStart)}</p>
                     <p><b>Ngày kết thúc:</b> {selectedWO.scheduledEnd ? formatDate(selectedWO.scheduledEnd) : 'N/A'}</p>
                     <p><b>Thời gian thực hiện:</b> {selectedWO.scheduledStart || selectedWO.scheduledDate ? calculateDuration(selectedWO.scheduledStart || selectedWO.scheduledDate, selectedWO.scheduledEnd) : 1} ngày</p>
                     <p><b>Người làm:</b> {resolveUserAssigneeDisplay(selectedWO.assignedTo || selectedWO.assignedTechnicianId, users)}</p>
                     <p><b>Ưu tiên:</b> {ticketPriorityVi(String(selectedWO.priority))}</p>
                     {(selectedWO.costLabor || selectedWO.costMaterial || selectedWO.costExternal) > 0 && (
                        <>
                           <p><b>Chi phí nhân công:</b> {formatCurrency(selectedWO.costLabor || 0)}</p>
                           <p><b>Chi phí vật tư:</b> {formatCurrency(selectedWO.costMaterial || 0)}</p>
                           <p><b>Chi phí ngoài:</b> {formatCurrency(selectedWO.costExternal || 0)}</p>
                           <p><b>Tổng chi phí:</b> {formatCurrency(selectedWO.totalCost || (selectedWO.costLabor || 0) + (selectedWO.costMaterial || 0) + (selectedWO.costExternal || 0))}</p>
                        </>
                     )}
                  </div>
                  <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
                     <h4 className="font-bold mb-2">Tiến độ công việc</h4>
                     <p className="text-xs text-slate-500 dark:text-slate-400 mb-2">
                        Tiến độ hiển thị theo trạng thái và checklist của Work Order; phiếu liên kết được căn trạng thái qua đồng bộ khi lưu.
                     </p>
                     <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-4">
                        <div className="bg-blue-600 h-4 rounded-full flex items-center justify-center text-white text-xs font-medium" style={{ width: `${getProgress(selectedWO)}%` }}>
                           {getProgress(selectedWO)}%
                        </div>
                     </div>
                  </div>
                  <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
                     <h4 className="font-bold mb-2">Checklist công việc</h4>
                     <div className="space-y-2">
                        <div className="flex items-center gap-2">
                           <input type="checkbox" checked={selectedWO.checklistProgress && selectedWO.checklistProgress >= 50} readOnly className="rounded text-blue-600" />
                           <span className="text-sm">Kiểm tra an toàn điện</span>
                        </div>
                        <div className="flex items-center gap-2">
                           <input type="checkbox" checked={selectedWO.status === 'In Progress' || selectedWO.status === 'InProgress' || selectedWO.status === 'Completed' || (selectedWO.checklistProgress || 0) >= 50} readOnly className="rounded text-blue-600" />
                           <span className="text-sm">Thực hiện thay thế/bảo dưỡng</span>
                        </div>
                        <div className="flex items-center gap-2">
                           <input type="checkbox" checked={selectedWO.status === 'Completed' || (selectedWO.checklistProgress || 0) === 100} readOnly className="rounded text-blue-600" />
                           <span className="text-sm">Vệ sinh và thu dọn hiện trường</span>
                        </div>
                     </div>
                  </div>
               </div>
            )}
         </Modal>

         {/* Delete Modal */}
         <Modal
            isOpen={!!deletingWOId}
            onClose={() => setDeletingWOId(null)}
            title="Xóa Work Order"
            footer={
               <>
                  <button onClick={handleDeleteConfirm} className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 transition-colors">
                     Xóa
                  </button>
                  <button onClick={() => setDeletingWOId(null)} className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white px-4 py-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">
                     Hủy
                  </button>
               </>
            }
         >
            <div className="flex items-center space-x-3">
               <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/30 rounded-full p-2">
                  <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
               </div>
               <div>
                  <p className="text-sm text-slate-500 dark:text-slate-400">
                     Bạn có chắc chắn muốn xóa Work Order này không? Hành động này không thể hoàn tác.
                  </p>
               </div>
            </div>
         </Modal>
      </div>
   );
};

export default WorkOrders;