import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import { dataService } from '../services/dataService';
import { ITicket, TicketStatus, TicketType, IAsset, ITicketActivity, IContract, IUser, IRole, IContractType } from '../types';
import { ClipboardList, AlertOctagon, Clock, CheckCircle, Trash2, Pencil, AlertTriangle, Eye, Plus, MapPin, User, Tag, Calendar, Briefcase, Search, Filter, ArrowUpDown, X } from 'lucide-react';
import { useAssetStore } from '../store/useAssetStore';
import { useAuthStore } from '../store/useAuthStore';
import { useUIStore } from '../store/useUIStore';
import Modal from '../components/Modal';
import { ticketPriorityVi, ticketStatusVi, ticketTypeVi } from '../utils/displayVi';
import {
  filterActiveOmContractsForPickers,
  resolveUserAssigneeDisplay,
  resolveContractNumber,
  pickDefaultOmTechnicianAssignee,
  isActiveOmAssignableUser,
} from '../utils/omOperationsShared';
import { ticketBelongsToSelectedProject } from '../utils/ticketSerialize';

const Operations: React.FC = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const { selectedProjectId, setSelectedProjectId } = useAssetStore();
  const { user: currentUser } = useAuthStore();
  const { addNotification } = useUIStore();
  const [tickets, setTickets] = useState<ITicket[]>([]);
  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 [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  // Modal State
  const [editingTicket, setEditingTicket] = useState<(ITicket & { assignedTechnicianIds?: string[] }) | null>(null);
  const [deletingTicketId, setDeletingTicketId] = useState<string | null>(null);

  // Create Ticket State
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [createFormData, setCreateFormData] = useState<Partial<ITicket> & { assignedTechnicianIds?: string[] }>({
    ticketType: TicketType.CM,
    priority: 'Medium',
    status: TicketStatus.OPEN,
    assignedTechnicianIds: []
  });

  // Track recently created tickets that might not be returned by backend
  const [recentlyCreatedTicketIds, setRecentlyCreatedTicketIds] = useState<Set<string>>(new Set());

  /** Phiếu vừa cập nhật trong phiên — merge giữ lại nếu GET danh sách chưa trả về kịp sau PUT */
  const recentlyUpdatedTicketIdsRef = useRef<Set<string>>(new Set());

  // View Ticket State
  const [viewingTicket, setViewingTicket] = useState<ITicket | null>(null);
  const [ticketActivities, setTicketActivities] = useState<ITicketActivity[]>([]);
  /** Mở phiếu sau khi chọn đúng dự án từ query (?project=&ticket=) */
  const [pendingFocusTicketId, setPendingFocusTicketId] = useState<string | null>(null);

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

  useEffect(() => {
    recentlyUpdatedTicketIdsRef.current = new Set();
    setRecentlyCreatedTicketIds(new Set());
  }, [selectedProjectId]);

  useEffect(() => {
    const projectId = searchParams.get('project');
    const ticketId = searchParams.get('ticket');
    if (!projectId) return;

    setSelectedProjectId(projectId);
    if (ticketId) {
      setPendingFocusTicketId(ticketId);
    }

    setSearchParams(
      (prev) => {
        const next = new URLSearchParams(prev);
        next.delete('project');
        next.delete('ticket');
        return next;
      },
      { replace: true }
    );
  }, [searchParams, setSearchParams, setSelectedProjectId]);

  const loadTicketHistory = useCallback(async (ticketId: string) => {
    try {
      const activities = await dataService.getTicketActivities(ticketId);
      setTicketActivities(activities);
    } catch (err) {
      console.error('Error loading ticket history:', err);
      setTicketActivities([]);
    }
  }, []);

  const handleViewClick = useCallback(
    async (ticket: ITicket) => {
      setViewingTicket(ticket);
      await loadTicketHistory(ticket._id);
    },
    [loadTicketHistory]
  );

  useEffect(() => {
    if (!pendingFocusTicketId || loading) return;

    // Wait for tickets to be populated. If tickets is empty, it might be 
    // because it hasn't updated yet or the project actually has no tickets.
    // We only perform the search if we have tickets or if we've finished loading.
    const want = String(pendingFocusTicketId);
    const t = tickets.find(
      (x) => String(x._id) === want || (x.code && String(x.code) === want)
    );

    if (t) {
      void handleViewClick(t);
      setPendingFocusTicketId(null);
    } else if (tickets.length > 0) {
      // Only show warning if we have tickets but none match the ID
      addNotification('warning', 'Không tìm thấy phiếu trong dự án đã chọn. Thử làm mới danh sách.');
      setPendingFocusTicketId(null);
    }
    // If tickets.length === 0 and loading is false, we might still be in the middle 
    // of a state transition from a previous project. We wait for the next render.
  }, [pendingFocusTicketId, loading, tickets, handleViewClick, addNotification]);

  const loadData = async () => {
    if (!selectedProjectId) return;
    setLoading(true);
    setError(null);
    try {
      const [tix, assetList, contractList, typesData, usersList, rolesList] = await Promise.all([
        dataService.getTickets(selectedProjectId),
        dataService.getAssets(selectedProjectId),
        dataService.getContracts(selectedProjectId),
        dataService.getContractTypes(),
        dataService.getUserDirectory(),
        dataService.getRoles()
      ]);



      // Merge with existing tickets to preserve tickets with empty assetId that backend might not return
      // Backend seems to filter out tickets with empty assetId, so we need to keep them in state
      setTickets(prevTickets => {
        // Create a map of tickets from backend
        const backendMap = new Map<string, ITicket>();
        tix.forEach(t => {
          backendMap.set(t._id, t);
          if (t.code) backendMap.set(t.code, t);
        });

        // Keep tickets that are not in backend response AND have empty assetId
        // This is important because backend filters them out
        const ticketsToKeep: ITicket[] = [];
        prevTickets.forEach(t => {
          const inBackend = backendMap.has(t._id) || (t.code && backendMap.has(t.code));
          const hasEmptyAssetId = !t.assetId || t.assetId === '';
          const isRecent = recentlyCreatedTicketIds.has(t._id) || recentlyCreatedTicketIds.has(t.code || '');
          const isRecentlyUpdated =
            recentlyUpdatedTicketIdsRef.current.has(t._id) ||
            (!!t.code && recentlyUpdatedTicketIdsRef.current.has(t.code));

          const belongs = ticketBelongsToSelectedProject(t, selectedProjectId);

          if (
            !inBackend &&
            belongs &&
            (hasEmptyAssetId || isRecent || isRecentlyUpdated)
          ) {
            ticketsToKeep.push(t);
          }
        });

        // Combine backend tickets with kept tickets
        const merged = [...tix, ...ticketsToKeep];

        // Remove duplicates by _id
        const uniqueMap = new Map<string, ITicket>();
        merged.forEach(t => {
          if (!uniqueMap.has(t._id)) {
            uniqueMap.set(t._id, t);
          }
        });

        const result = Array.from(uniqueMap.values());



        return result;
      });
      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 getStatusColor = (status: TicketStatus) => {
    switch (status) {
      case TicketStatus.OPEN: return 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300';
      case TicketStatus.ASSIGNED: return 'bg-violet-100 dark:bg-violet-900/30 text-violet-800 dark:text-violet-300';
      case TicketStatus.IN_PROGRESS: return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300';
      case TicketStatus.PENDING_PARTS: return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300';
      case TicketStatus.RESOLVED: return 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300';
      case TicketStatus.CLOSED: return 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300';
      default: return 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300';
    }
  };

  const getPriorityColor = (p: string) => {
    return p === 'High' || p === 'Critical' ? 'text-red-600 dark:text-red-400 font-bold' : 'text-slate-600 dark:text-slate-300';
  };

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

    try {
      const assignedTechnicianIds = createFormData.assignedTechnicianIds || [];
      const assignedUserId = assignedTechnicianIds.length > 0 
        ? assignedTechnicianIds.join(',') 
        : defaultOmAssigneeId || '';

      const newTicket: ITicket = {
        _id: `t${Date.now()}`,
        code: `TK-${new Date().getFullYear()}-${Math.floor(Math.random() * 1000)}`,
        projectId: selectedProjectId!,
        assetId: createFormData.assetId || '', // Optional field - use empty string if not provided
        contractId: createFormData.contractId || undefined, // Optional Contract ID
        title: createFormData.title,
        description: createFormData.description || '',
        ticketType: createFormData.ticketType || TicketType.CM,
        priority: createFormData.priority || 'Medium',
        status: TicketStatus.OPEN,
        assignedTo: assignedUserId,
        createdAt: new Date().toISOString(),
        slaDeadline: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // +24h
        reportedBy: createFormData.reportedBy || currentUser?._id || assignedUserId // Use current user, or assigned user as fallback
      };

      await dataService.createTicket(newTicket);

      // Mark this ticket as recently created
      setRecentlyCreatedTicketIds(prev => {
        const newSet = new Set(prev);
        newSet.add(newTicket._id);
        if (newTicket.code) newSet.add(newTicket.code);
        return newSet;
      });

      // Add the new ticket to state immediately (optimistic update)
      // This ensures it shows up right away
      setTickets(prevTickets => {
        // Check if ticket already exists to avoid duplicates
        const exists = prevTickets.some(t => t._id === newTicket._id || t.code === newTicket.code);
        if (exists) {
          return prevTickets;
        }
        return [newTicket, ...prevTickets];
      });

      addNotification('success', 'Tạo phiếu thành công!');

      // Reset filters and search to ensure new ticket is visible
      setSearchQuery('');
      setStatusFilter('all');

      // Close modal first
      setIsCreateModalOpen(false);
      setCreateFormData({ ticketType: TicketType.CM, priority: 'Medium', status: TicketStatus.OPEN, assignedTechnicianIds: [] });

      // Don't reload immediately - backend filters out tickets with empty assetId
      // Only reload if user manually refreshes or navigates away
      // The ticket will stay in state with the empty assetId
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi tạo phiếu';
      addNotification('error', errorMessage);
    }
  };

  const handleEditSave = async () => {
    if (editingTicket) {
      try {
        const assignedTechnicianIds = editingTicket.assignedTechnicianIds || [];
        const assignedUserId = assignedTechnicianIds.length > 0
          ? assignedTechnicianIds.join(',')
          : '';

        // Map UI-only status values to backend-compatible values
        const backendStatusMap: Record<string, TicketStatus> = {
          [TicketStatus.ASSIGNED]: TicketStatus.OPEN,
          [TicketStatus.PENDING_PARTS]: TicketStatus.IN_PROGRESS,
        };

        const statusToSave = backendStatusMap[editingTicket.status] || editingTicket.status;

        // Only allow backend-supported statuses
        const validStatuses = [TicketStatus.OPEN, TicketStatus.IN_PROGRESS, TicketStatus.RESOLVED, TicketStatus.CLOSED];
        if (!validStatuses.includes(statusToSave)) {
          addNotification('error', `Trạng thái "${editingTicket.status}" không hợp lệ. Vui lòng chọn trạng thái khác.`);
          return;
        }

        const ticketToUpdate = { 
          ...editingTicket, 
          status: statusToSave,
          assignedTo: assignedUserId
        };
        recentlyUpdatedTicketIdsRef.current.add(editingTicket._id);
        if (editingTicket.code) recentlyUpdatedTicketIdsRef.current.add(editingTicket.code);
        await dataService.updateTicket(ticketToUpdate);
        addNotification('success', 'Cập nhật phiếu thành công!');
        await loadData();
        setEditingTicket(null);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : 'Lỗi khi cập nhật phiếu';
        addNotification('error', errorMessage);
      }
    }
  };

  const handleDeleteConfirm = async () => {
    if (deletingTicketId) {
      try {
        await dataService.deleteTicket(deletingTicketId);
        addNotification('success', 'Xóa phiếu thành công!');
        await loadData();
        setDeletingTicketId(null);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : 'Lỗi khi xóa phiếu';
        addNotification('error', errorMessage);
      }
    }
  };

  const getAssetDisplayName = (assetRef?: any) => {
    if (!assetRef) return 'Chưa chọn tài sản';

    // Handle populated asset object from backend.
    if (typeof assetRef === 'object' && assetRef !== null) {
      const name = assetRef.name && typeof assetRef.name === 'object'
        ? (assetRef.name.vi || assetRef.name.en || JSON.stringify(assetRef.name))
        : assetRef.name;
      
      const code = assetRef.code;
      if (name && code) return `${name} (${code})`;
      return name || code || assetRef._id || 'Chưa chọn tài sản';
    }

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

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

  const getAssigneeId = (assignedTo: any): string => {
    if (!assignedTo) return '';
    if (typeof assignedTo === 'object' && assignedTo !== null && '_id' in assignedTo) {
      return String(assignedTo._id);
    }
    return String(assignedTo);
  };

  // Memoized statistics
  const stats = useMemo(() => {
    const now = new Date();
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

    return {
      open: tickets.filter(t => t.status === TicketStatus.OPEN).length,
      inProgress: tickets.filter(t => t.status === TicketStatus.IN_PROGRESS).length,
      pendingParts: tickets.filter(t => t.status === TicketStatus.PENDING_PARTS).length,
      closedThisMonth: tickets.filter(t => {
        if (t.status !== TicketStatus.CLOSED && t.status !== TicketStatus.RESOLVED) return false;
        const closedDate = t.closedAt || t.resolvedAt || t.createdAt;
        return closedDate && new Date(closedDate) >= startOfMonth;
      }).length
    };
  }, [tickets]);

  const defaultOmAssigneeId = useMemo(
    () => pickDefaultOmTechnicianAssignee(users, roles),
    [users, roles],
  );

  // Memoized filtered and sorted tickets
  const filteredAndSortedTickets = useMemo(() => {
    let filtered = [...tickets];

    // Apply search filter
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(ticket => {
        const assignedUserName = resolveUserAssigneeDisplay(ticket.assignedTo, users).toLowerCase();
        return (
          ticket.code?.toLowerCase().includes(query) ||
          ticket.title?.toLowerCase().includes(query) ||
          ticket.description?.toLowerCase().includes(query) ||
          assignedUserName.includes(query)
        );
      });
    }

    // Apply status filter
    if (statusFilter !== 'all') {
      filtered = filtered.filter(ticket => ticket.status === statusFilter);
    }

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

      // Handle date fields
      if (sortField === 'createdAt' || sortField === 'slaDeadline' || sortField === 'resolvedAt' || sortField === 'closedAt') {
        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();
      }

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

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

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

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-slate-500 dark:text-slate-400">Đang tải dữ liệu...</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">
        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Vận hành & Bảo trì (O&M)</h1>
        <button
          onClick={() => setIsCreateModalOpen(true)}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm shadow-sm hover:bg-blue-700 transition-colors flex items-center gap-2"
        >
          <Plus size={18} /> Tạo phiếu mới
        </button>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
          <div>
            <p className="text-slate-500 dark:text-slate-400 text-sm">Phiếu mở</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.open}</p>
          </div>
          <AlertOctagon className="text-red-500" />
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
          <div>
            <p className="text-slate-500 dark:text-slate-400 text-sm">Đang xử lý</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.inProgress}</p>
          </div>
          <Clock className="text-blue-500" />
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
          <div>
            <p className="text-slate-500 dark:text-slate-400 text-sm">Chờ vật tư</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.pendingParts}</p>
          </div>
          <ClipboardList className="text-yellow-500" />
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
          <div>
            <p className="text-slate-500 dark:text-slate-400 text-sm">Đã đóng (Tháng)</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.closedThisMonth}</p>
          </div>
          <CheckCircle className="text-green-500" />
        </div>
      </div>

      {/* Kanban / List Board */}
      <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 bg-slate-50 dark:bg-slate-800/50">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-bold text-slate-700 dark:text-slate-200">Danh sách ticket</h3>
            <div className="flex items-center gap-2">
              <div className="relative">
                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-slate-400" size={16} />
                <input
                  type="text"
                  placeholder="Tìm kiếm phiếu..."
                  className="pl-8 pr-3 py-1.5 border border-slate-300 dark:border-slate-600 rounded text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <select
                className="border-slate-300 dark:border-slate-600 rounded text-sm p-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 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={TicketStatus.OPEN}>Mở</option>
                <option value={TicketStatus.IN_PROGRESS}>Đang xử lý</option>
                <option value={TicketStatus.PENDING_PARTS}>Chờ vật tư</option>
                <option value={TicketStatus.RESOLVED}>Đã giải quyết</option>
                <option value={TicketStatus.CLOSED}>Đã đóng</option>
              </select>
            </div>
          </div>
          {searchQuery && (
            <div className="text-sm text-slate-500 dark:text-slate-400">
              Tìm thấy {filteredAndSortedTickets.length} phiếu
            </div>
          )}
        </div>

        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
            <thead className="bg-slate-50 dark:bg-slate-700/50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  <button onClick={() => handleSort('code')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Mã phiếu <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 tracking-wider">
                  <button onClick={() => handleSort('title')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Tiêu đề <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 tracking-wider">Loại</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  <button onClick={() => handleSort('priority')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Mức độ <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 tracking-wider">
                  <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-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Được giao</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                  <button onClick={() => handleSort('slaDeadline')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Hạn SLA <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 tracking-wider">Thao tác</th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700">
              {filteredAndSortedTickets.map((ticket) => (
                <tr key={ticket._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 dark:text-blue-400">{ticket.code}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white">
                    <div className="font-medium">{ticket.title}</div>
                    <div className="text-xs text-slate-500 dark:text-slate-400 truncate max-w-xs">{ticket.description}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">{ticketTypeVi(ticket.ticketType)}</td>
                  <td className={`px-6 py-4 whitespace-nowrap text-sm ${getPriorityColor(ticket.priority)}`}>{ticketPriorityVi(String(ticket.priority))}</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(ticket.status)}`}>
                      {ticketStatusVi(String(ticket.status))}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-300">
                    <div className="flex items-center gap-1">
                      <User size={14} className="text-purple-500" />
                      <span>{resolveUserAssigneeDisplay(ticket.assignedTo, users)}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
                    {new Date(ticket.slaDeadline).toLocaleDateString('vi-VN')}
                  </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={() => handleViewClick(ticket)}
                        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={() => {
                          let assignedTechnicianIds: string[] = [];
                          if (ticket.assignedTo && typeof ticket.assignedTo === 'string') {
                            const parts = ticket.assignedTo.split(',').map(p => p.trim()).filter(Boolean);
                            assignedTechnicianIds = parts.map(p => {
                              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 (ticket.assignedTo) {
                            assignedTechnicianIds = [ticket.assignedTo];
                          }
                          setEditingTicket({
                            ...ticket,
                            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={() => setDeletingTicketId(ticket._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>
              ))}
              {filteredAndSortedTickets.length === 0 && (
                <tr>
                  <td colSpan={8} className="px-6 py-10 text-center text-slate-500 dark:text-slate-400">
                    {searchQuery || statusFilter !== 'all' ? 'Không tìm thấy phiếu nào phù hợp với bộ lọc.' : 'Không tìm thấy phiếu nào.'}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* CREATE TICKET MODAL */}
      <Modal
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        title="Tạo phiếu sự cố mới"
        maxWidth="lg"
        footer={
          <>
            <button onClick={handleCreateTicket} className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
              Tạo phiếu
            </button>
            <button onClick={() => setIsCreateModalOpen(false)} className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
              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 đề phiếu <span className="text-red-500">*</span></label>
            <input
              type="text"
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={createFormData.title || ''}
              onChange={(e) => setCreateFormData({ ...createFormData, title: e.target.value })}
              placeholder="Ví dụ: Lỗi Inverter 05 quá nhiệt"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Tài sản liên quan <span className="text-red-500">*</span> <span className="text-xs text-slate-500 dark:text-slate-400 font-normal">(Tùy chọn)</span></label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={createFormData.assetId || ''}
                onChange={(e) => setCreateFormData({ ...createFormData, assetId: e.target.value || undefined })}
              >
                <option value="">-- Chọn tài sản (tùy chọn) --</option>
                {assets.map(asset => (
                  <option key={asset._id} value={asset._id}>{asset.name} ({asset.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="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={createFormData.contractId || ''}
                onChange={(e) => setCreateFormData({ ...createFormData, contractId: e.target.value || undefined })}
              >
                <option value="">-- Chọn hợp đồng (tùy chọn) --</option>
                {contracts.map(contract => (
                  <option key={contract._id} value={contract._id}>
                    {contract.contractNumber} {contract.partyA ? `- ${contract.partyA}` : ''} {contract.capacityKWp ? `(${contract.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>
          <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 phiếu</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={createFormData.ticketType}
                onChange={(e) => setCreateFormData({ ...createFormData, ticketType: e.target.value as TicketType })}
              >
                {Object.values(TicketType).map(t => <option key={t} value={t}>{ticketTypeVi(t)}</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="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={createFormData.priority}
                onChange={(e) => setCreateFormData({ ...createFormData, priority: e.target.value as any })}
              >
                <option value="Low">{ticketPriorityVi('Low')}</option>
                <option value="Medium">{ticketPriorityVi('Medium')}</option>
                <option value="High">{ticketPriorityVi('High')}</option>
                <option value="Critical">{ticketPriorityVi('Critical')}</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
              Người được gán
              <span className="text-xs text-slate-500 dark:text-slate-400 ml-2 font-normal">(Để trống để tự động gán)</span>
            </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 mt-1 focus-within:ring-2 focus-within:ring-blue-500">
              {/* Selected Users as Tags */}
              {createFormData.assignedTechnicianIds && createFormData.assignedTechnicianIds.length > 0 && (
                <div className="flex flex-wrap gap-1.5 mb-1.5">
                  {createFormData.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 = createFormData.assignedTechnicianIds?.filter(id => id !== userId) || [];
                            setCreateFormData({ 
                              ...createFormData, 
                              assignedTechnicianIds: newIds
                            });
                          }}
                          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 border-none outline-none ring-0 focus:ring-0"
                value=""
                onChange={e => {
                  const selectedId = e.target.value;
                  if (selectedId && !createFormData.assignedTechnicianIds?.includes(selectedId)) {
                    const newIds = [...(createFormData.assignedTechnicianIds || []), selectedId];
                    setCreateFormData({ 
                      ...createFormData, 
                      assignedTechnicianIds: newIds
                    });
                  }
                  e.target.value = '';
                }}
              >
                <option value="">-- Chọn người dùng --</option>
                {users
                  .filter((u) => isActiveOmAssignableUser(u, roles))
                  .filter(u => !createFormData.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>
            {(!createFormData.assignedTechnicianIds || createFormData.assignedTechnicianIds.length === 0) && defaultOmAssigneeId && (
              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                Sẽ tự động gán cho:{' '}
                <span className="font-medium text-slate-700 dark:text-slate-300">
                  {resolveUserAssigneeDisplay(defaultOmAssigneeId, users)}
                </span>
              </p>
            )}
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mô tả chi tiết</label>
            <textarea
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              rows={4}
              value={createFormData.description || ''}
              onChange={(e) => setCreateFormData({ ...createFormData, description: e.target.value })}
              placeholder="Mô tả hiện tượng, mã lỗi, hoặc yêu cầu cụ thể..."
            />
          </div>
        </div>
      </Modal>

      {/* VIEW TICKET MODAL */}
      <Modal
        isOpen={!!viewingTicket}
        onClose={() => setViewingTicket(null)}
        title="Chi tiết phiếu sự cố"
        maxWidth="xl"
        footer={
          <button onClick={() => setViewingTicket(null)} className="w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:w-auto sm:text-sm">
            Đóng
          </button>
        }
      >
        {viewingTicket && (
          <div className="space-y-6">
            {/* Timeline Section - Horizontal at top */}
            <div className="border-b border-slate-200 dark:border-slate-700 pb-4">
              <h4 className="font-bold text-slate-700 dark:text-slate-300 mb-4 flex items-center gap-2">
                <ClipboardList size={18} /> Lộ trình phiếu
              </h4>
              {ticketActivities.length > 0 ? (
                <div className="overflow-x-auto">
                  <div className="flex gap-4 pb-4" style={{ minWidth: 'max-content' }}>
                    {ticketActivities.slice().reverse().map((act, index) => {
                      const isLast = index === ticketActivities.length - 1;
                      return (
                        <div key={act._id} className="flex-shrink-0 relative" style={{ minWidth: '200px' }}>
                          {/* Connector line */}
                          {!isLast && (
                            <div className="absolute top-4 left-full w-4 h-0.5 bg-slate-300 dark:bg-slate-600 z-0"></div>
                          )}

                          <div className="relative bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 shadow-sm">
                            {/* Status indicator dot */}
                            <div className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full border-2 ${isLast ? 'bg-blue-600 border-blue-600' : 'bg-slate-300 dark:bg-slate-600 border-slate-400 dark:border-slate-500'
                              }`}></div>

                            <div className="space-y-2">
                              <div>
                                <p className="text-sm font-semibold text-slate-800 dark:text-white">{act.action}</p>
                                {act.statusBefore && act.statusAfter && act.statusBefore !== act.statusAfter ? (
                                  <div className="mt-1 flex items-center gap-2 text-xs">
                                    <span className={`px-2 py-0.5 rounded ${getStatusColor(act.statusBefore)}`}>
                                      {ticketStatusVi(String(act.statusBefore))}
                                    </span>
                                    <span className="text-slate-400">→</span>
                                    <span className={`px-2 py-0.5 rounded ${getStatusColor(act.statusAfter)}`}>
                                      {ticketStatusVi(String(act.statusAfter))}
                                    </span>
                                  </div>
                                ) : act.statusAfter ? (
                                  <div className="mt-1">
                                    <span className={`text-xs px-2 py-0.5 rounded ${getStatusColor(act.statusAfter)}`}>
                                      {ticketStatusVi(String(act.statusAfter))}
                                    </span>
                                  </div>
                                ) : null}
                              </div>

                              <p className="text-xs text-slate-500 dark:text-slate-400">
                                {new Date(act.timestamp).toLocaleString('vi-VN')}
                              </p>

                              <p className="text-xs text-slate-400 dark:text-slate-500">
                                Bởi: <span className="font-medium text-slate-600 dark:text-slate-300">{resolveUserAssigneeDisplay(act.performedBy, users)}</span>
                              </p>

                              {act.details && (
                                <div className="mt-2 text-xs bg-slate-50 dark:bg-slate-900/50 p-2 rounded text-slate-600 dark:text-slate-300 border border-slate-100 dark:border-slate-700">
                                  {act.details}
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ) : (
                <div className="text-sm text-slate-400 italic py-4">Đang cập nhật lộ trình...</div>
              )}
            </div>

            {/* Ticket Info Section */}
            <div className="space-y-4">
              <div className="border-b border-slate-200 dark:border-slate-700 pb-4">
                <h3 className="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-2 mb-2">
                  {viewingTicket.title}
                  <span className={`text-xs px-2 py-0.5 rounded-full ${getStatusColor(viewingTicket.status)} border border-transparent`}>{ticketStatusVi(String(viewingTicket.status))}</span>
                </h3>
                <p className="text-sm text-slate-500 dark:text-slate-400">Mã phiếu: <span className="font-medium text-slate-700 dark:text-slate-300">{viewingTicket.code}</span></p>
              </div>

              {viewingTicket.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">{viewingTicket.description}</p>
                </div>
              )}

              <div className="bg-white dark:bg-slate-800/50 p-4 rounded-lg border border-slate-200 dark:border-slate-700">
                <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Thông tin phiếu</h4>
                <div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <Tag size={16} className="text-blue-500" />
                    <span>Loại: {ticketTypeVi(viewingTicket.ticketType)}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <AlertTriangle size={16} className={viewingTicket.priority === 'High' || viewingTicket.priority === 'Critical' ? 'text-red-500' : 'text-orange-500'} />
                    <span>Ưu tiên: <b>{ticketPriorityVi(String(viewingTicket.priority))}</b></span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <MapPin size={16} className="text-green-500" />
                    <span>Tài sản: {getAssetDisplayName(viewingTicket.assetId as any)}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <User size={16} className="text-purple-500" />
                    <span>Được giao: <b className="text-slate-800 dark:text-slate-200">{resolveUserAssigneeDisplay(viewingTicket.assignedTo, users)}</b></span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <Briefcase size={16} className="text-indigo-500" />
                    <span>Hợp đồng: {resolveContractNumber(contracts, viewingTicket.contractId)}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <Clock size={16} className="text-red-500" />
                    <span>Hạn xử lý (SLA): <b className="text-slate-800 dark:text-slate-200">{new Date(viewingTicket.slaDeadline).toLocaleString('vi-VN')}</b></span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                    <Calendar size={16} className="text-blue-500" />
                    <span>Ngày tạo: <b className="text-slate-800 dark:text-slate-200">{new Date(viewingTicket.createdAt).toLocaleString('vi-VN')}</b></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </Modal>

      {/* EDIT MODAL */}
      <Modal
        isOpen={!!editingTicket}
        onClose={() => setEditingTicket(null)}
        title="Chỉnh sửa phiếu"
        footer={
          <>
            <button onClick={handleEditSave} className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
              Lưu thay đổi
            </button>
            <button onClick={() => setEditingTicket(null)} className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
              Hủy
            </button>
          </>
        }
      >
        {editingTicket && (
          <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="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={editingTicket.title}
                onChange={(e) => setEditingTicket({ ...editingTicket, 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="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                rows={3}
                value={editingTicket.description}
                onChange={(e) => setEditingTicket({ ...editingTicket, 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="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                  value={(() => {
                    // Map invalid statuses to valid ones for display
                    const statusMap: Record<string, TicketStatus> = {
                      [TicketStatus.ASSIGNED]: TicketStatus.OPEN,
                      [TicketStatus.PENDING_PARTS]: TicketStatus.IN_PROGRESS,
                    };
                    return statusMap[editingTicket.status] || editingTicket.status;
                  })()}
                  onChange={(e) => setEditingTicket({ ...editingTicket, status: e.target.value as TicketStatus })}
                >
                  {/* Only show backend-supported status values */}
                  <option value={TicketStatus.OPEN}>{ticketStatusVi(TicketStatus.OPEN)}</option>
                  <option value={TicketStatus.IN_PROGRESS}>{ticketStatusVi(TicketStatus.IN_PROGRESS)}</option>
                  <option value={TicketStatus.RESOLVED}>{ticketStatusVi(TicketStatus.RESOLVED)}</option>
                  <option value={TicketStatus.CLOSED}>{ticketStatusVi(TicketStatus.CLOSED)}</option>
                </select>
                {editingTicket.status === TicketStatus.ASSIGNED || editingTicket.status === TicketStatus.PENDING_PARTS ? (
                  <p className="mt-1 text-xs text-yellow-600 dark:text-yellow-400">
                    Trạng thái hiện tại sẽ được chuyển thành giá trị hợp lệ khi lưu.
                  </p>
                ) : null}
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mức độ ưu tiên</label>
                <select
                  className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                  value={editingTicket.priority}
                  onChange={(e) => setEditingTicket({ ...editingTicket, priority: e.target.value as any })}
                >
                  <option value="Low">{ticketPriorityVi('Low')}</option>
                  <option value="Medium">{ticketPriorityVi('Medium')}</option>
                  <option value="High">{ticketPriorityVi('High')}</option>
                  <option value="Critical">{ticketPriorityVi('Critical')}</option>
                </select>
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                Người được gán
                <span className="text-xs text-slate-500 dark:text-slate-400 ml-2 font-normal">(Để trống để tự động gán)</span>
              </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 mt-1 focus-within:ring-2 focus-within:ring-blue-500">
                {/* Selected Users as Tags */}
                {editingTicket.assignedTechnicianIds && editingTicket.assignedTechnicianIds.length > 0 && (
                  <div className="flex flex-wrap gap-1.5 mb-1.5">
                    {editingTicket.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 = editingTicket.assignedTechnicianIds?.filter(id => id !== userId) || [];
                              setEditingTicket({ 
                                ...editingTicket, 
                                assignedTechnicianIds: newIds
                              });
                            }}
                            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 border-none outline-none ring-0 focus:ring-0"
                  value=""
                  onChange={e => {
                    const selectedId = e.target.value;
                    if (selectedId && !editingTicket.assignedTechnicianIds?.includes(selectedId)) {
                      const newIds = [...(editingTicket.assignedTechnicianIds || []), selectedId];
                      setEditingTicket({ 
                        ...editingTicket, 
                        assignedTechnicianIds: newIds
                      });
                    }
                    e.target.value = '';
                  }}
                >
                  <option value="">-- Chọn người dùng --</option>
                  {users
                    .filter((u) => isActiveOmAssignableUser(u, roles))
                    .filter(u => !editingTicket.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>
              {(!editingTicket.assignedTechnicianIds || editingTicket.assignedTechnicianIds.length === 0) && defaultOmAssigneeId && (
                <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                  Sẽ tự động gán cho:{' '}
                  <span className="font-medium text-slate-700 dark:text-slate-300">
                    {resolveUserAssigneeDisplay(defaultOmAssigneeId, users)}
                  </span>
                </p>
              )}
            </div>
          </div>
        )}
      </Modal>

      {/* DELETE MODAL */}
      <Modal
        isOpen={!!deletingTicketId}
        onClose={() => setDeletingTicketId(null)}
        title="Xóa phiếu"
        footer={
          <>
            <button onClick={handleDeleteConfirm} className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
              Xóa
            </button>
            <button onClick={() => setDeletingTicketId(null)} className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
              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 phiếu này không? Hành động này không thể hoàn tác.
            </p>
          </div>
        </div>
      </Modal>

    </div>
  );
};

export default Operations;