import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { dataService } from '../services/dataService';
import { IInventoryItem, IInventoryTransaction } from '../types';
import { Box, Search, Plus, AlertTriangle, PackageCheck, History, ArrowDownLeft, ArrowUpRight, Trash2, X, Pencil, Download, ArrowUpDown, Filter } from 'lucide-react';
import Modal from '../components/Modal';
import { useUIStore } from '../store/useUIStore';
import { useAssetStore } from '../store/useAssetStore';
import { inventoryCategoryVi, inventoryTxTypeVi } from '../utils/displayVi';

const Inventory: React.FC = () => {
  const { selectedProjectId } = useAssetStore();
  const [items, setItems] = useState<IInventoryItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { addNotification } = useUIStore();

  // Filter & Search State
  const [searchQuery, setSearchQuery] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const [lowStockFilter, setLowStockFilter] = useState<boolean>(false);
  const [sortField, setSortField] = useState<keyof IInventoryItem>('itemCode');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

  // Transaction Form State
  const [txType, setTxType] = useState<'In' | 'Out'>('In');
  const [txForm, setTxForm] = useState({
    itemId: '',
    quantity: 1,
    unitCost: 0,
    notes: ''
  });

  // New Item Form State
  const [isNewItem, setIsNewItem] = useState(false);
  const [newItemForm, setNewItemForm] = useState({
    itemCode: '',
    name: '',
    category: 'Consumable',
    unit: 'Cái',
    minStockLevel: 0,
    location: '',
    supplier: ''
  });

  // Edit Item State
  const [editingItem, setEditingItem] = useState<IInventoryItem | null>(null);
  const [editForm, setEditForm] = useState({
    name: '',
    category: 'Consumable',
    unit: 'Cái',
    minStockLevel: 0,
    location: '',
    supplier: ''
  });

  // History Modal State
  const [historyData, setHistoryData] = useState<IInventoryTransaction[]>([]);
  const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false);
  const [historySearchQuery, setHistorySearchQuery] = useState('');
  const [historyTypeFilter, setHistoryTypeFilter] = useState<string>('all');

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

  useEffect(() => {
    if (isHistoryModalOpen) {
      loadHistory();
    }
  }, [isHistoryModalOpen]);

  const loadHistory = async () => {
    try {
      const data = await dataService.getInventoryHistory();
      setHistoryData(data);
    } catch (error) {
      console.error('Failed to load history:', error);
      addNotification('error', 'Không thể tải lịch sử giao dịch');
    }
  };

  const loadData = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await dataService.getInventory();
      setItems(data);
    } catch (err: any) {
      const errorMessage = err.message || 'Lỗi khi tải dữ liệu kho';
      setError(errorMessage);
      addNotification('error', errorMessage);
    } finally {
      setLoading(false);
    }
  };

  const handleTransaction = async () => {
    try {
      let targetItemId = txForm.itemId;

      // Logic for creating new item
      if (txType === 'In' && isNewItem) {
        if (!newItemForm.itemCode || !newItemForm.name || !newItemForm.unit) {
          addNotification('error', 'Vui lòng điền đầy đủ thông tin vật tư mới (Mã, Tên, ĐVT).');
          return;
        }

        // Check for duplicate item code
        if (items.some(item => item.itemCode === newItemForm.itemCode)) {
          addNotification('error', 'Mã vật tư đã tồn tại. Vui lòng sử dụng mã khác.');
          return;
        }

        // Create the new item first
        const newItem = await dataService.createInventoryItem({
          ...newItemForm,
          category: newItemForm.category as any
        });

        targetItemId = newItem._id;
      } else {
        if (!targetItemId) {
          addNotification('error', 'Vui lòng chọn vật tư.');
          return;
        }
      }

      if (txForm.quantity <= 0) {
        addNotification('error', 'Số lượng phải lớn hơn 0.');
        return;
      }

      // Check stock availability for Out transactions
      if (txType === 'Out') {
        const selectedItem = items.find(item => item._id === targetItemId);
        if (selectedItem && selectedItem.currentStock < txForm.quantity) {
          addNotification('error', `Số lượng tồn kho không đủ. Tồn kho hiện tại: ${selectedItem.currentStock} ${selectedItem.unit}`);
          return;
        }
      }

      await dataService.createStockTransaction(
        targetItemId,
        txType,
        txForm.quantity,
        txForm.unitCost,
        txForm.notes
      );

      addNotification('success', `${txType === 'In' ? 'Nhập' : 'Xuất'} kho thành công!`);
      setIsModalOpen(false);
      resetTransactionForm();
      await loadData();
    } catch (error: any) {
      addNotification('error', error.message || 'Có lỗi xảy ra');
    }
  };

  const resetTransactionForm = () => {
    setTxForm({ itemId: '', quantity: 1, unitCost: 0, notes: '' });
    setIsNewItem(false);
    setNewItemForm({
      itemCode: '',
      name: '',
      category: 'Consumable',
      unit: 'Cái',
      minStockLevel: 0,
      location: '',
      supplier: ''
    });
  };

  const handleDelete = async (id: string) => {
    if (window.confirm('Bạn có chắc chắn muốn xóa vật tư này không?')) {
      try {
        await dataService.deleteInventoryItem(id);
        addNotification('success', 'Xóa vật tư thành công');
        await loadData();
      } catch (error: any) {
        addNotification('error', error.message || 'Không thể xóa vật tư');
      }
    }
  };

  const handleEditClick = (item: IInventoryItem) => {
    setEditingItem(item);
    setEditForm({
      name: item.name,
      category: item.category,
      unit: item.unit,
      minStockLevel: item.minStock || 0,
      location: item.location || '',
      supplier: item.supplier || ''
    });
  };

  const handleEditSave = async () => {
    if (!editingItem) return;
    
    try {
      // Note: updateInventoryItem method doesn't exist in dataService yet
      // This is a placeholder for future implementation
      addNotification('info', 'Chức năng chỉnh sửa đang được phát triển. Vui lòng xóa và tạo lại vật tư.');
      setEditingItem(null);
    } catch (error: any) {
      addNotification('error', error.message || 'Không thể cập nhật vật tư');
    }
  };

  const handleExport = () => {
    try {
      const csvContent = [
        ['Mã VT', 'Tên vật tư', 'Danh mục', 'Tồn kho', 'Đơn vị', 'Định mức tối thiểu', 'Vị trí', 'Nhà cung cấp'],
        ...filteredAndSortedItems.map(item => [
          item.itemCode,
          item.name,
          item.category,
          item.currentStock?.toString() || '0',
          item.unit,
          (item.minStock || 0).toString(),
          item.location || '',
          item.supplier || ''
        ])
      ].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');

      const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', `inventory_${new Date().toISOString().split('T')[0]}.csv`);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      addNotification('success', 'Xuất dữ liệu thành công!');
    } catch (error) {
      addNotification('error', 'Không thể xuất dữ liệu');
    }
  };

  // Memoized statistics
  const stats = useMemo(() => {
    return {
      total: items.length,
      lowStock: items.filter(i => (i.currentStock || 0) <= (i.minStock || 0)).length,
      totalValue: items.reduce((sum, item) => {
        // Estimate value if we had average cost - for now just count items
        return sum + (item.currentStock || 0);
      }, 0),
      categories: Array.from(new Set(items.map(i => i.category))).length
    };
  }, [items]);

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

    // Apply search filter
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(item =>
        item.itemCode?.toLowerCase().includes(query) ||
        item.name?.toLowerCase().includes(query) ||
        item.location?.toLowerCase().includes(query) ||
        item.supplier?.toLowerCase().includes(query)
      );
    }

    // Apply category filter
    if (categoryFilter !== 'all') {
      filtered = filtered.filter(item => item.category === categoryFilter);
    }

    // Apply low stock filter
    if (lowStockFilter) {
      filtered = filtered.filter(item => (item.currentStock || 0) <= (item.minStock || 0));
    }

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

      // Handle numeric fields
      if (sortField === 'currentStock' || sortField === 'minStock') {
        aValue = aValue || 0;
        bValue = bValue || 0;
      }

      // 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;
  }, [items, searchQuery, categoryFilter, lowStockFilter, sortField, sortDirection]);

  // Memoized filtered history
  const filteredHistory = useMemo(() => {
    let filtered = [...historyData];

    // Apply search filter
    if (historySearchQuery.trim()) {
      const query = historySearchQuery.toLowerCase();
      filtered = filtered.filter(tx => {
        const itemName = typeof tx.itemId === 'object' ? (tx.itemId as any).name?.toLowerCase() : '';
        const itemCode = typeof tx.itemId === 'object' ? (tx.itemId as any).itemCode?.toLowerCase() : '';
        return itemName.includes(query) || itemCode.includes(query) || tx.notes?.toLowerCase().includes(query);
      });
    }

    // Apply type filter
    if (historyTypeFilter !== 'all') {
      filtered = filtered.filter(tx => tx.type === historyTypeFilter);
    }

    // Sort by timestamp descending
    filtered.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());

    return filtered;
  }, [historyData, historySearchQuery, historyTypeFilter]);

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

  // Get unique categories
  const categories = useMemo(() => {
    return Array.from(new Set(items.map(i => i.category))).sort();
  }, [items]);

  const lowStockItems = useMemo(() => {
    return items.filter(i => (i.currentStock || 0) <= (i.minStock || 0));
  }, [items]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-slate-500 dark:text-slate-400">Đang tải kho 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 flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Kho & Vật tư</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400">Quản lý vật tư thay thế, xuất/nhập tồn.</p>
        </div>
        <div className="grid grid-cols-2 md:flex md:gap-2 gap-2">
          <button
            onClick={handleExport}
            className="flex items-center justify-center gap-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 text-sm font-medium shadow-sm"
            title="Xuất dữ liệu CSV"
          >
            <Download size={18} /> <span className="hidden sm:inline">Xuất CSV</span>
          </button>
          <button
            onClick={() => setIsHistoryModalOpen(true)}
            className="flex items-center justify-center gap-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 px-3 py-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 text-sm font-medium shadow-sm"
          >
            <History size={18} /> <span className="hidden sm:inline">Lịch sử</span>
          </button>
          <button
            onClick={() => { setTxType('Out'); setIsModalOpen(true); }}
            className="flex items-center justify-center gap-2 bg-orange-600 text-white px-3 py-2 rounded-lg hover:bg-orange-700 text-sm font-medium shadow-sm"
          >
            <ArrowUpRight size={18} /> <span className="hidden sm:inline">Xuất kho</span>
          </button>
          <button
            onClick={() => { setTxType('In'); setIsModalOpen(true); }}
            className="flex items-center justify-center gap-2 bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium shadow-sm"
          >
            <ArrowDownLeft size={18} /> <span className="hidden sm:inline">Nhập kho</span>
          </button>
        </div>
      </div>

      {/* Statistics Cards */}
      <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">Tổng vật tư</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.total}</p>
          </div>
          <PackageCheck className="text-blue-500" size={24} />
        </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">Tồn kho thấp</p>
            <p className="text-2xl font-bold text-red-600 dark:text-red-400">{stats.lowStock}</p>
          </div>
          <AlertTriangle className="text-red-500" size={24} />
        </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">Danh mục</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.categories}</p>
          </div>
          <Box className="text-green-500" size={24} />
        </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">Tổng số lượng</p>
            <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.totalValue.toLocaleString()}</p>
          </div>
          <PackageCheck className="text-purple-500" size={24} />
        </div>
      </div>

      {lowStockItems.length > 0 && (
        <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-r-lg flex items-start gap-3">
          <AlertTriangle className="text-red-600 dark:text-red-400 flex-shrink-0" size={24} />
          <div>
            <h3 className="font-bold text-red-800 dark:text-red-400">Cảnh báo tồn kho thấp</h3>
            <p className="text-sm text-red-700 dark:text-red-300 mt-1">
              Có {lowStockItems.length} mặt hàng dưới mức tồn kho tối thiểu. Cần lập kế hoạch mua sắm ngay.
            </p>
          </div>
        </div>
      )}

      {/* Inventory Table */}
      <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 flex items-center gap-2">
              <PackageCheck size={18} /> Danh mục vật tư
            </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 mã hoặc tên..."
                  className="pl-8 pr-3 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-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={categoryFilter}
                onChange={(e) => setCategoryFilter(e.target.value)}
              >
                <option value="all">Tất cả danh mục</option>
                {categories.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
              <label className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300 cursor-pointer">
                <input
                  type="checkbox"
                  checked={lowStockFilter}
                  onChange={(e) => setLowStockFilter(e.target.checked)}
                  className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                />
                <span>Tồn kho thấp</span>
              </label>
            </div>
          </div>
          {searchQuery || categoryFilter !== 'all' || lowStockFilter ? (
            <div className="text-sm text-slate-500 dark:text-slate-400">
              Tìm thấy {filteredAndSortedItems.length} vật tư
            </div>
          ) : null}
        </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('itemCode')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Mã VT <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('name')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Tên vật tư <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('category')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Danh 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 whitespace-nowrap">
                  <button onClick={() => handleSort('currentStock')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Tồn kho <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">Vị trí</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Nhà cung cấp</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">
              {filteredAndSortedItems.map(item => (
                <tr key={item._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="font-mono text-sm text-slate-600 dark:text-slate-400">{item.itemCode}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="font-medium text-slate-900 dark:text-white">{item.name}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="px-2 py-1 bg-slate-100 dark:bg-slate-700 rounded text-xs text-slate-600 dark:text-slate-300">{inventoryCategoryVi(String(item.category))}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center gap-2">
                      <span className={`font-bold ${(item.currentStock || 0) <= (item.minStock || 0) ? 'text-red-600 dark:text-red-400' : 'text-slate-800 dark:text-white'}`}>
                        {item.currentStock || 0}
                      </span>
                      <span className="text-xs text-slate-500">{item.unit}</span>
                      {(item.currentStock || 0) <= (item.minStock || 0) && <AlertTriangle size={14} className="text-red-500" />}
                    </div>
                  </td>
                  <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-400 whitespace-nowrap">
                    {item.location || '-'}
                  </td>
                  <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-400 whitespace-nowrap">
                    {item.supplier || '-'}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right">
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => handleEditClick(item)}
                        className="p-1 text-slate-400 hover:text-blue-600 transition-colors"
                        title="Chỉnh sửa vật tư"
                      >
                        <Pencil size={16} />
                      </button>
                      <button
                        onClick={() => handleDelete(item._id)}
                        className="p-1 text-slate-400 hover:text-red-600 transition-colors"
                        title="Xóa vật tư"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
              {filteredAndSortedItems.length === 0 && (
                <tr>
                  <td colSpan={7} className="text-center py-8 text-slate-500 dark:text-slate-400">
                    {searchQuery || categoryFilter !== 'all' || lowStockFilter ? 'Không tìm thấy vật tư nào phù hợp với bộ lọc.' : 'Kho trống.'}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Transaction Modal */}
      <Modal
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          resetTransactionForm();
        }}
        title={txType === 'In' ? 'Nhập kho vật tư' : 'Xuất kho vật tư'}
        footer={
          <div className="flex w-full gap-2">
            <button onClick={handleTransaction} className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700">
              Xác nhận {txType === 'In' ? 'Nhập' : 'Xuất'}
            </button>
            <button
              onClick={() => {
                setIsModalOpen(false);
                resetTransactionForm();
              }}
              className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white p-2 rounded text-sm px-4"
            >
              Hủy
            </button>
          </div>
        }
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Chọn vật tư</label>

            {txType === 'In' && (
              <div className="flex items-center gap-2 mb-2">
                <input
                  type="checkbox"
                  id="createNew"
                  checked={isNewItem}
                  onChange={(e) => setIsNewItem(e.target.checked)}
                  className="rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                />
                <label htmlFor="createNew" className="text-sm text-slate-700 dark:text-slate-300 select-none">
                  Thêm vật tư mới
                </label>
              </div>
            )}

            {!isNewItem ? (
              <select
                className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                value={txForm.itemId}
                onChange={(e) => setTxForm({ ...txForm, itemId: e.target.value })}
              >
                <option value="">-- Chọn vật tư --</option>
                {items.map(item => (
                  <option key={item._id} value={item._id}>
                    {item.name} (Tồn: {item.currentStock || 0} {item.unit})
                  </option>
                ))}
              </select>
            ) : (
              <div className="space-y-3 bg-slate-50 dark:bg-slate-800 p-3 rounded border border-slate-200 dark:border-slate-700">
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Mã Vật tư *</label>
                    <input
                      type="text"
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      placeholder="VD: VT-001"
                      value={newItemForm.itemCode}
                      onChange={e => setNewItemForm({ ...newItemForm, itemCode: e.target.value })}
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Tên Vật tư *</label>
                    <input
                      type="text"
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      placeholder="Tên vật tư..."
                      value={newItemForm.name}
                      onChange={e => setNewItemForm({ ...newItemForm, name: e.target.value })}
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Danh mục *</label>
                    <select
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      value={newItemForm.category}
                      onChange={e => setNewItemForm({ ...newItemForm, category: e.target.value })}
                    >
                      <option value="Consumable">Vật tư tiêu hao</option>
                      <option value="CriticalSpare">Linh kiện dự phòng (Critical)</option>
                      <option value="Tool">Công cụ dụng cụ</option>
                      <option value="Equipment">Thiết bị</option>
                      <option value="Safety Gear">Bảo hộ lao động</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Đơn vị *</label>
                    <input
                      type="text"
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      placeholder="Cái, Hộp, Kg..."
                      value={newItemForm.unit}
                      onChange={e => setNewItemForm({ ...newItemForm, unit: e.target.value })}
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Định mức tối thiểu</label>
                    <input
                      type="number"
                      min="0"
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      value={newItemForm.minStockLevel === 0 ? '' : newItemForm.minStockLevel}
                      onChange={e => {
                        const val = parseInt(e.target.value);
                        setNewItemForm({ ...newItemForm, minStockLevel: isNaN(val) ? 0 : val });
                      }}
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-slate-500 mb-1">Vị trí kho</label>
                    <input
                      type="text"
                      className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                      placeholder="Kệ A, Tủ B..."
                      value={newItemForm.location}
                      onChange={e => setNewItemForm({ ...newItemForm, location: e.target.value })}
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Nhà cung cấp</label>
                  <input
                    type="text"
                    className="w-full border border-slate-300 dark:border-slate-600 p-1.5 rounded text-sm bg-white dark:bg-slate-700 dark:text-white"
                    placeholder="Tên nhà cung cấp..."
                    value={newItemForm.supplier}
                    onChange={e => setNewItemForm({ ...newItemForm, supplier: e.target.value })}
                  />
                </div>
              </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 mb-1">Số lượng</label>
              <input
                type="number"
                min="1"
                className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                value={txForm.quantity || ''}
                onChange={(e) => {
                  const val = parseInt(e.target.value);
                  setTxForm({ ...txForm, quantity: isNaN(val) ? 0 : val });
                }}
              />
            </div>
            {txType === 'In' && (
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Đơn giá nhập</label>
                <input
                  type="number"
                  min="0"
                  className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={txForm.unitCost || ''}
                  onChange={(e) => {
                    const val = parseInt(e.target.value);
                    setTxForm({ ...txForm, unitCost: isNaN(val) ? 0 : val });
                  }}
                />
              </div>
            )}
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Ghi chú</label>
            <textarea
              className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
              rows={3}
              placeholder={`Lý do ${txType === 'In' ? 'nhập' : 'xuất'} kho...`}
              value={txForm.notes}
              onChange={(e) => setTxForm({ ...txForm, notes: e.target.value })}
            />
          </div>
        </div>
      </Modal>

      {/* Edit Item Modal */}
      <Modal
        isOpen={!!editingItem}
        onClose={() => setEditingItem(null)}
        title="Chỉnh sửa vật tư"
        footer={
          <div className="flex w-full gap-2">
            <button onClick={handleEditSave} className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700">
              Lưu thay đổi
            </button>
            <button onClick={() => setEditingItem(null)} className="bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white p-2 rounded text-sm px-4">
              Hủy
            </button>
          </div>
        }
      >
        {editingItem && (
          <div className="space-y-4">
            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
              <p className="text-sm text-yellow-800 dark:text-yellow-300">
                ⚠️ Chức năng chỉnh sửa đang được phát triển. Hiện tại bạn có thể xóa và tạo lại vật tư với thông tin mới.
              </p>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Mã vật tư</label>
              <input
                type="text"
                className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400"
                value={editingItem.itemCode}
                disabled
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Tên vật tư</label>
              <input
                type="text"
                className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                value={editForm.name}
                onChange={(e) => setEditForm({ ...editForm, name: 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 mb-1">Danh mục</label>
                <select
                  className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={editForm.category}
                  onChange={(e) => setEditForm({ ...editForm, category: e.target.value })}
                >
                  <option value="Consumable">Vật tư tiêu hao</option>
                  <option value="CriticalSpare">Linh kiện dự phòng (Critical)</option>
                  <option value="Tool">Công cụ dụng cụ</option>
                  <option value="Equipment">Thiết bị</option>
                  <option value="Safety Gear">Bảo hộ lao động</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Đơn vị</label>
                <input
                  type="text"
                  className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={editForm.unit}
                  onChange={(e) => setEditForm({ ...editForm, unit: e.target.value })}
                />
              </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 mb-1">Định mức tối thiểu</label>
                <input
                  type="number"
                  min="0"
                  className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={editForm.minStockLevel === 0 ? '' : editForm.minStockLevel}
                  onChange={e => {
                    const val = parseInt(e.target.value);
                    setEditForm({ ...editForm, minStockLevel: isNaN(val) ? 0 : val });
                  }}
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Vị trí kho</label>
                <input
                  type="text"
                  className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={editForm.location}
                  onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Nhà cung cấp</label>
              <input
                type="text"
                className="w-full border border-slate-300 dark:border-slate-600 p-2 rounded bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                value={editForm.supplier}
                onChange={(e) => setEditForm({ ...editForm, supplier: e.target.value })}
              />
            </div>
          </div>
        )}
      </Modal>

      {/* History Modal */}
      {isHistoryModalOpen && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
          <div className="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
            <div className="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900 rounded-t-lg">
              <h3 className="font-semibold text-lg dark:text-white">Lịch sử Xuất/Nhập kho</h3>
              <button
                onClick={() => setIsHistoryModalOpen(false)}
                className="text-slate-400 hover:text-slate-500"
              >
                <X size={20} />
              </button>
            </div>

            <div className="p-4 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
              <div className="flex gap-2">
                <div className="relative flex-1">
                  <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..."
                    className="pl-8 pr-3 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"
                    value={historySearchQuery}
                    onChange={(e) => setHistorySearchQuery(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"
                  value={historyTypeFilter}
                  onChange={(e) => setHistoryTypeFilter(e.target.value)}
                >
                  <option value="all">Tất cả</option>
                  <option value="In">Nhập kho</option>
                  <option value="Out">Xuất kho</option>
                </select>
              </div>
              {filteredHistory.length > 0 && (
                <div className="text-sm text-slate-500 dark:text-slate-400 mt-2">
                  Hiển thị {filteredHistory.length} giao dịch
                </div>
              )}
            </div>

            <div className="p-0 overflow-auto flex-1">
              <table className="w-full text-sm text-left">
                <thead className="text-xs text-slate-500 uppercase bg-slate-50 dark:bg-slate-700 dark:text-slate-400 sticky top-0">
                  <tr>
                    <th className="px-4 py-3">Thời gian</th>
                    <th className="px-4 py-3">Loại</th>
                    <th className="px-4 py-3">Vật tư</th>
                    <th className="px-4 py-3 text-right">Số lượng</th>
                    <th className="px-4 py-3 text-right">Đơn giá</th>
                    <th className="px-4 py-3">Ghi chú</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                  {filteredHistory.map((tx) => (
                    <tr key={tx._id} className="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700">
                      <td className="px-4 py-3 whitespace-nowrap dark:text-slate-300">
                        {new Date(tx.timestamp).toLocaleString('vi-VN')}
                      </td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 rounded text-xs font-semibold ${tx.type === 'In'
                          ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300'
                          : 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300'
                          }`}>
                          {inventoryTxTypeVi(String(tx.type))}
                        </span>
                      </td>
                      <td className="px-4 py-3 font-medium text-slate-900 dark:text-white">
                        {typeof tx.itemId === 'object' ? (tx.itemId as any).name : 'Unknown Item'}
                        <div className="text-xs text-slate-500">
                          {typeof tx.itemId === 'object' ? (tx.itemId as any).itemCode : ''}
                        </div>
                      </td>
                      <td className="px-4 py-3 text-right font-medium dark:text-slate-300">
                        {tx.quantity}
                      </td>
                      <td className="px-4 py-3 text-right text-slate-500 dark:text-slate-400">
                        {tx.unitCost?.toLocaleString('vi-VN')} ₫
                      </td>
                      <td className="px-4 py-3 text-slate-500 dark:text-slate-400 truncate max-w-xs">
                        {tx.notes || '-'}
                      </td>
                    </tr>
                  ))}
                  {filteredHistory.length === 0 && (
                    <tr>
                      <td colSpan={6} className="px-4 py-8 text-center text-slate-500 dark:text-slate-400">
                        {historySearchQuery || historyTypeFilter !== 'all' ? 'Không tìm thấy giao dịch nào phù hợp.' : 'Chưa có dữ liệu lịch sử'}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            <div className="p-4 border-t border-slate-200 dark:border-slate-700 flex justify-end">
              <button
                onClick={() => setIsHistoryModalOpen(false)}
                className="px-4 py-2 bg-slate-100 text-slate-700 hover:bg-slate-200 rounded-lg text-sm font-medium dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600"
              >
                Đóng
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Inventory;