import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { IAsset, AssetStatus } from '../types';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';
import { FolderTree, Battery, Cpu, Box, CheckCircle2, Pencil, Trash2, AlertTriangle, MapPin, Calendar, Plus, ArrowLeft, Search, Filter, ChevronDown, ChevronRight, BarChart3, X } from 'lucide-react';
import Modal from '../components/Modal';
import Button from '../components/common/Button';
import Input from '../components/common/Input';
import { dataService } from '../services/dataService'; // Import dataService
import { IWorkOrder, ITicket } from '../types'; // Import types
import { assetHistoryKindVi, assetHistoryRowStatusVi, assetStatusVi } from '../utils/displayVi';
import AssetTypeCatalogField from '../components/AssetTypeCatalogField';
import {
  mergeAssetTypeOptionList,
  loadPersistedAssetTypeCatalog,
  savePersistedAssetTypeCatalog,
  normalizePersistedAssetTypeCatalog,
  isBuiltinAssetType,
  normalizeAssetTypeName,
  type PersistedAssetTypeCatalog,
} from '../utils/assetTypeCatalog';

const ASSET_TYPE_ICONS: Record<string, React.ReactNode> = {
  Plant: <FolderTree size={16} />,
  Block: <Box size={16} />,
  Inverter: <Cpu size={16} />,
  'Combiner Box': <Box size={16} />,
  String: <Battery size={16} />,
  Panel: <Box size={16} />,
  'Weather Station': <Box size={16} />
};



const AssetManagement: React.FC = () => {
  const {
    projects: sites,
    assets,
    selectedProjectId: selectedSiteId,
    setSelectedProjectId: setSelectedSiteId,
    addAsset,
    updateAsset,
    deleteAsset,
    isLoading,
    fetchProjects,
    fetchAssets
  } = useAssetStore();

  const { addNotification } = useUIStore();

  const [selectedAsset, setSelectedAsset] = useState<IAsset | null>(null);
  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());

  // Search & Filter State
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [typeFilter, setTypeFilter] = useState<string>('all');

  const [customAssetTypes, setCustomAssetTypes] = useState<string[]>(
    () => loadPersistedAssetTypeCatalog().customTypes
  );
  const [hiddenBuiltinAssetTypes, setHiddenBuiltinAssetTypes] = useState<string[]>(
    () => loadPersistedAssetTypeCatalog().hiddenBuiltinTypes
  );

  // Modal State
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [createFormData, setCreateFormData] = useState<Partial<IAsset>>({
    assetType: 'Inverter',
    status: AssetStatus.OPERATIONAL,
    specifications: {}
  });
  const [createFormErrors, setCreateFormErrors] = useState<Record<string, string>>({});

  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [isDeleteWithChildrenModalOpen, setIsDeleteWithChildrenModalOpen] = useState(false);
  const [deletePassword, setDeletePassword] = useState('');
  const [deletePasswordError, setDeletePasswordError] = useState('');
  const [assetsToDelete, setAssetsToDelete] = useState<IAsset[]>([]);
  const [editFormData, setEditFormData] = useState<Partial<IAsset>>({});
  const [editFormErrors, setEditFormErrors] = useState<Record<string, string>>({});

  // History State
  const [assetHistory, setAssetHistory] = useState<any[]>([]);
  const [isHistoryLoading, setIsHistoryLoading] = useState(false);

  // Initialize data
  useEffect(() => {
    if (sites.length === 0) {
      fetchProjects();
    }
  }, [sites.length, fetchProjects]);

  useEffect(() => {
    if (selectedSiteId && assets.length === 0) {
      fetchAssets(selectedSiteId);
    }
  }, [selectedSiteId, assets.length, fetchAssets]);

  // Reset selected asset when site changes
  useEffect(() => {
    setSelectedAsset(null);
    setExpandedNodes(new Set());
    setAssetHistory([]); // Clear history
  }, [selectedSiteId]);

  // Fetch history when asset is selected
  useEffect(() => {
    const fetchHistory = async () => {
      if (!selectedAsset || !selectedSiteId) return;

      setIsHistoryLoading(true);
      try {
        // Fetch both WOs and Tickets for the project (filtering by asset on client for now as API is project-based)
        // In a real optimized scenario, we would have an endpoint GET /api/assets/:id/history
        const [wos, tickets] = await Promise.all([
          dataService.getWorkOrders(selectedSiteId),
          dataService.getTickets(selectedSiteId)
        ]);

        const assetWos = wos.filter(w => {
          if (!w.assetId) return false;
          const aId = typeof w.assetId === 'object' ? (w.assetId as any)._id : w.assetId;
          return aId === selectedAsset._id;
        }).map(w => ({
          id: w._id,
          date: w.actualEnd || w.scheduledDate || (w as any).createdAt || new Date().toISOString(),
          type: 'Work Order',
          code: w.woCode,
          status: w.status,
          name: w.title
        }));

        const assetTickets = tickets.filter(t => {
          if (!t.assetId) return false;
          const aId = typeof t.assetId === 'object' ? (t.assetId as any)._id : t.assetId;
          return aId === selectedAsset._id;
        }).map(t => ({
          id: t._id,
          date: t.createdAt,
          type: 'Ticket',
          code: t.code,
          status: t.status,
          name: t.title
        }));

        // Merge and sort by date desc
        const history = [...assetWos, ...assetTickets].sort((a, b) =>
          new Date(b.date).getTime() - new Date(a.date).getTime()
        );

        setAssetHistory(history);
      } catch (error) {
        console.error("Failed to fetch asset history", error);
      } finally {
        setIsHistoryLoading(false);
      }
    };

    fetchHistory();
  }, [selectedAsset, selectedSiteId]);

  // Memoized computed values
  const currentSite = useMemo(() =>
    sites.find(s => s._id === selectedSiteId),
    [sites, selectedSiteId]
  );

  // Filter and search assets
  const filteredAssets = useMemo(() => {
    return assets.filter(asset => {
      const matchesSearch = !searchQuery ||
        asset.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        asset.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
        asset.serialNumber?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        asset.manufacturer?.toLowerCase().includes(searchQuery.toLowerCase());

      const matchesStatus = statusFilter === 'all' || asset.status === statusFilter;
      const matchesType = typeFilter === 'all' || asset.assetType === typeFilter;

      return matchesSearch && matchesStatus && matchesType;
    });
  }, [assets, searchQuery, statusFilter, typeFilter]);

  const assetTypeOptions = useMemo(
    () =>
      mergeAssetTypeOptionList(
        { customTypes: customAssetTypes, hiddenBuiltinTypes: hiddenBuiltinAssetTypes },
        assets
      ),
    [customAssetTypes, hiddenBuiltinAssetTypes, assets]
  );

  const persistCatalog = useCallback((next: PersistedAssetTypeCatalog) => {
    const norm = normalizePersistedAssetTypeCatalog(next);
    savePersistedAssetTypeCatalog(norm);
    setCustomAssetTypes(norm.customTypes);
    setHiddenBuiltinAssetTypes(norm.hiddenBuiltinTypes);
  }, []);

  const hasAssetsUsingTypeName = useCallback(
    (typeName: string) => {
      const n = normalizeAssetTypeName(typeName);
      if (!n) return false;
      return assets.some(
        (a) => normalizeAssetTypeName(String(a.assetType ?? '')) === n
      );
    },
    [assets]
  );

  const handleCatalogAddType = useCallback(
    async (name: string) => {
      const n = normalizeAssetTypeName(name);
      if (!n) {
        addNotification('error', 'Tên loại không hợp lệ.');
        return false;
      }
      const merged = mergeAssetTypeOptionList(
        { customTypes: customAssetTypes, hiddenBuiltinTypes: hiddenBuiltinAssetTypes },
        assets
      );
      if (merged.includes(n)) {
        addNotification('info', `Loại "${n}" đã có trong danh sách.`);
        return false;
      }
      persistCatalog({
        customTypes: [...customAssetTypes, n],
        hiddenBuiltinTypes: hiddenBuiltinAssetTypes,
      });
      addNotification('success', `Đã thêm loại "${n}".`);
      return true;
    },
    [assets, customAssetTypes, hiddenBuiltinAssetTypes, persistCatalog, addNotification]
  );

  const handleCatalogRenameType = useCallback(
    async (oldName: string, rawNew: string) => {
      const newName = normalizeAssetTypeName(rawNew);
      if (!newName) {
        addNotification('error', 'Tên mới không hợp lệ.');
        return false;
      }
      if (newName === oldName) return false;
      const merged = mergeAssetTypeOptionList(
        { customTypes: customAssetTypes, hiddenBuiltinTypes: hiddenBuiltinAssetTypes },
        assets
      );
      if (merged.some((t) => t !== oldName && t === newName)) {
        addNotification('error', 'Tên mới đã tồn tại trong danh mục.');
        return false;
      }

      const affected = assets.filter((a) => a.assetType === oldName);
      if (
        affected.length > 0 &&
        !window.confirm(`Đổi "${oldName}" → "${newName}" và cập nhật ${affected.length} tài sản?`)
      ) {
        return false;
      }

      try {
        for (const a of affected) {
          await updateAsset({ ...a, assetType: newName as IAsset['assetType'] });
        }

        let nextHidden = [...hiddenBuiltinAssetTypes];
        if (isBuiltinAssetType(oldName)) {
          nextHidden = [
            ...new Set([...nextHidden, normalizeAssetTypeName(oldName)].filter(Boolean)),
          ].filter(isBuiltinAssetType);
        }

        let nextCustom = [...customAssetTypes];
        if (!isBuiltinAssetType(oldName)) {
          const idx = nextCustom.indexOf(oldName);
          if (idx !== -1) nextCustom[idx] = newName;
          else if (!isBuiltinAssetType(newName)) nextCustom.push(newName);
        } else if (!isBuiltinAssetType(newName)) {
          nextCustom.push(newName);
        }

        nextCustom = [...new Set(nextCustom.map(normalizeAssetTypeName).filter(Boolean))].filter(
          (t) => !isBuiltinAssetType(t)
        );

        persistCatalog({ customTypes: nextCustom, hiddenBuiltinTypes: nextHidden });

        addNotification(
          'success',
          affected.length > 0
            ? `Đã đổi tên loại và cập nhật ${affected.length} tài sản.`
            : `Đã đổi tên loại thành "${newName}".`
        );
        return true;
      } catch (err: unknown) {
        addNotification('error', err instanceof Error ? err.message : 'Không đổi tên loại được.');
        return false;
      }
    },
    [
      assets,
      customAssetTypes,
      hiddenBuiltinAssetTypes,
      updateAsset,
      persistCatalog,
      addNotification,
    ]
  );

  const handleCatalogDeleteType = useCallback(
    async (name: string) => {
      const n = normalizeAssetTypeName(name);
      if (!n) {
        addNotification('error', 'Tên loại không hợp lệ.');
        return false;
      }
      if (assets.some((a) => normalizeAssetTypeName(String(a.assetType ?? '')) === n)) {
        addNotification(
          'error',
          `Loại "${n}" đang được dùng bởi một hoặc nhiều tài sản — không cho phép xóa / gỡ. Đổi loại tài sản hoặc xóa thiết bị trước.`
        );
        return false;
      }
      if (isBuiltinAssetType(n)) {
        const nextHidden = [...new Set([...hiddenBuiltinAssetTypes, n])].filter(isBuiltinAssetType);
        persistCatalog({
          customTypes: customAssetTypes,
          hiddenBuiltinTypes: nextHidden,
        });
        addNotification('success', `Đã gỡ "${n}" khỏi danh mục loại.`);
        return true;
      }
      persistCatalog({
        customTypes: customAssetTypes.filter(
          (t) => normalizeAssetTypeName(String(t ?? '')) !== n
        ),
        hiddenBuiltinTypes: hiddenBuiltinAssetTypes,
      });
      addNotification('success', `Đã xóa loại "${n}" khỏi danh mục.`);
      return true;
    },
    [assets, customAssetTypes, hiddenBuiltinAssetTypes, persistCatalog, addNotification]
  );

  const assetTypeSelectClass =
    'block w-full rounded-md border shadow-sm px-3 py-2 sm:text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white border-slate-300 dark:border-slate-600 focus:border-blue-500 focus:ring-blue-500';

  // Asset statistics
  const assetStats = useMemo(() => {
    const stats = {
      total: assets.length,
      operational: assets.filter(a => a.status === AssetStatus.OPERATIONAL).length,
      faulty: assets.filter(a => a.status === AssetStatus.FAULTY).length,
      maintenance: assets.filter(a => a.status === AssetStatus.MAINTENANCE).length,
      inactive: assets.filter(a => a.status === AssetStatus.INACTIVE).length,
      byType: assetTypeOptions.reduce((acc, type) => {
        acc[type] = assets.filter(a => a.assetType === type).length;
        return acc;
      }, {} as Record<string, number>)
    };
    return stats;
  }, [assets, assetTypeOptions]);

  // Helper to safely get ID from populated or string fields
  const safelyGetId = useCallback((field: any): string | null => {
    if (!field) return null;
    if (typeof field === 'string') return field;
    if (typeof field === 'object' && field._id) return field._id.toString();
    return String(field);
  }, []);

  // Helper to sort assets by name with natural number sorting
  const sortAssetsByName = useCallback((assets: IAsset[]): IAsset[] => {
    return [...assets].sort((a, b) => {
      const nameA = (a.name || '').toLowerCase();
      const nameB = (b.name || '').toLowerCase();
      
      // Natural sort: compare strings with numbers properly (e.g., "IVT 1", "IVT 2", "IVT 10" instead of "IVT 1", "IVT 10", "IVT 2")
      return nameA.localeCompare(nameB, 'vi', { numeric: true, sensitivity: 'base' });
    });
  }, []);

  // Get valid parent assets (prevent circular references)
  const getValidParentAssets = useCallback((excludeId?: string) => {
    if (!excludeId) return assets;

    const excludeSet = new Set<string>([excludeId]);
    const addChildren = (parentId: string) => {
      assets.forEach(asset => {
        const pId = safelyGetId(asset.parentAssetId);
        if (pId === parentId && !excludeSet.has(asset._id)) {
          excludeSet.add(asset._id);
          addChildren(asset._id);
        }
      });
    };
    addChildren(excludeId);

    return assets.filter(a => !excludeSet.has(a._id));
  }, [assets, safelyGetId]);

  // Toggle node expansion
  const toggleNode = useCallback((assetId: string) => {
    setExpandedNodes(prev => {
      const next = new Set(prev);
      if (next.has(assetId)) {
        next.delete(assetId);
      } else {
        next.add(assetId);
      }
      return next;
    });
  }, []);

  // Render asset tree with expand/collapse
  const renderAssetTree = useCallback((parentId: string | null = null, level = 0): React.ReactNode => {
    const children = filteredAssets.filter(a => {
      const pId = safelyGetId(a.parentAssetId);
      return pId === parentId || (!parentId && !pId);
    });

    // Sort children by name with natural number sorting
    const sortedChildren = sortAssetsByName(children);

    if (sortedChildren.length === 0) return null;

    return (
      <ul className={`space-y-1 ${level > 0 ? 'ml-4 border-l border-slate-200 dark:border-slate-700 pl-2' : ''}`}>
        {sortedChildren.map(asset => {
          const hasChildren = filteredAssets.some(a => safelyGetId(a.parentAssetId) === asset._id);
          const isExpanded = expandedNodes.has(asset._id);

          return (
            <li key={asset._id}>
              <div className="flex items-center group">
                {hasChildren && (
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      toggleNode(asset._id);
                    }}
                    className="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded mr-1"
                  >
                    {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                  </button>
                )}
                {!hasChildren && <div className="w-6" />}
                <div
                  onClick={() => setSelectedAsset(asset)}
                  className={`flex-1 flex items-center space-x-2 p-2 rounded cursor-pointer text-sm transition-colors ${selectedAsset?._id === asset._id
                    ? 'bg-blue-50 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 font-medium'
                    : 'hover:bg-slate-50 dark:hover:bg-slate-700/50 text-slate-700 dark:text-slate-300'
                    }`}
                >
                  {ASSET_TYPE_ICONS[asset.assetType] || <Box size={16} />}
                  <span className="flex-1">{asset.name}</span>
                  {asset.status === AssetStatus.FAULTY && (
                    <div className="w-2 h-2 rounded-full bg-red-500" title="Lỗi" />
                  )}
                </div>
              </div>
              {hasChildren && isExpanded && renderAssetTree(asset._id, level + 1)}
            </li>
          );
        })}
      </ul>
    );
  }, [filteredAssets, expandedNodes, selectedAsset, toggleNode, safelyGetId, sortAssetsByName]);

  // Form validation
  const validateCreateForm = useCallback((): boolean => {
    const errors: Record<string, string> = {};

    if (!createFormData.name?.trim()) {
      errors.name = 'Tên tài sản là bắt buộc';
    }

    if (!createFormData.assetType) {
      errors.assetType = 'Loại tài sản là bắt buộc';
    }

    setCreateFormErrors(errors);
    return Object.keys(errors).length === 0;
  }, [createFormData]);

  const validateEditForm = useCallback((): boolean => {
    const errors: Record<string, string> = {};

    if (!editFormData.name?.trim()) {
      errors.name = 'Tên tài sản là bắt buộc';
    }

    if (!editFormData.assetType) {
      errors.assetType = 'Loại tài sản là bắt buộc';
    }

    setEditFormErrors(errors);
    return Object.keys(errors).length === 0;
  }, [editFormData]);

  // Handlers
  const handleCreateClick = useCallback(() => {
    setCreateFormData({
      projectId: selectedSiteId,
      status: AssetStatus.OPERATIONAL,
      assetType: 'Inverter',
      specifications: {}
    });
    setCreateFormErrors({});
    setIsCreateModalOpen(true);
  }, [selectedSiteId]);

  const handleCreateSave = useCallback(async () => {
    if (!validateCreateForm() || !createFormData.name || !selectedSiteId) return;

    try {
      const newAsset: IAsset = {
        _id: `a${Date.now()}`,
        projectId: selectedSiteId,
        name: createFormData.name.trim(),
        code: createFormData.code || `AST-${Date.now()}`,
        assetType: createFormData.assetType || 'Inverter',
        serialNumber: createFormData.serialNumber || undefined,
        status: createFormData.status || AssetStatus.OPERATIONAL,
        manufacturer: createFormData.manufacturer || undefined,
        installDate: createFormData.installDate || new Date().toISOString().split('T')[0],
        commissioningDate: createFormData.commissioningDate,
        warrantyEndDate: createFormData.warrantyEndDate,
        parentAssetId: createFormData.parentAssetId || null,
        specifications: createFormData.specifications || {},
      };

      await addAsset(newAsset);
      setIsCreateModalOpen(false);
      setCreateFormData({ assetType: 'Inverter', status: AssetStatus.OPERATIONAL, specifications: {} });
      addNotification('success', `Đã tạo tài sản "${newAsset.name}" thành công`);
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi tạo tài sản');
    }
  }, [createFormData, selectedSiteId, validateCreateForm, addAsset, addNotification]);

  const handleEditClick = useCallback(() => {
    if (selectedAsset) {
      // Calculate months diff for UI
      let months = undefined;
      if (selectedAsset.commissioningDate && selectedAsset.warrantyEndDate) {
        const start = new Date(selectedAsset.commissioningDate);
        const end = new Date(selectedAsset.warrantyEndDate);
        // Simplified month diff
        months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
      }

      // Normalize parentAssetId to string ID (handle populated objects)
      const normalizedParentAssetId = safelyGetId(selectedAsset.parentAssetId);

      // Normalize commissioningDate to ensure it's a valid date string
      // If asset doesn't have commissioningDate, use project's COD date as default
      let normalizedCommissioningDate = selectedAsset.commissioningDate;
      if (normalizedCommissioningDate) {
        try {
          const date = new Date(normalizedCommissioningDate);
          if (isNaN(date.getTime())) {
            normalizedCommissioningDate = undefined;
          } else {
            // Ensure it's in ISO format for date input
            normalizedCommissioningDate = date.toISOString().split('T')[0];
          }
        } catch (e) {
          normalizedCommissioningDate = undefined;
        }
      }
      
      // If no commissioningDate, use project's COD date (commissioningDate)
      if (!normalizedCommissioningDate && currentSite?.commissioningDate) {
        try {
          const projectCODDate = new Date(currentSite.commissioningDate);
          if (!isNaN(projectCODDate.getTime())) {
            normalizedCommissioningDate = projectCODDate.toISOString().split('T')[0];
          }
        } catch (e) {
          // Keep undefined if date is invalid
        }
      }

      setEditFormData({ 
        ...selectedAsset, 
        warrantyMonths: months,
        parentAssetId: normalizedParentAssetId,
        commissioningDate: normalizedCommissioningDate
      } as any);
      setEditFormErrors({});
      setIsEditModalOpen(true);
    }
  }, [selectedAsset, safelyGetId, currentSite]);

  const handleEditSave = useCallback(async () => {
    if (!validateEditForm() || !editFormData || !selectedAsset) return;

    try {
      // Normalize payload: Ensure projectId and parentAssetId are strings (IDs), not populated objects
      const payload = { ...editFormData };

      if (payload.projectId && typeof payload.projectId === 'object') {
        payload.projectId = (payload.projectId as any)._id;
      }

      if (payload.parentAssetId && typeof payload.parentAssetId === 'object') {
        payload.parentAssetId = (payload.parentAssetId as any)._id;
      }

      await updateAsset(payload as IAsset);

      // Update local state with the sanitized payload to keep UI consistent immediately
      setSelectedAsset(payload as IAsset);
      setIsEditModalOpen(false);
      addNotification('success', `Đã cập nhật tài sản "${editFormData.name}" thành công`);
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi cập nhật tài sản');
    }
  }, [editFormData, selectedAsset, validateEditForm, updateAsset, addNotification]);

  // Helper to get all child assets recursively
  const getAllChildAssets = useCallback((parentId: string): IAsset[] => {
    const children: IAsset[] = [];
    const findChildren = (id: string) => {
      assets.forEach(asset => {
        const pId = safelyGetId(asset.parentAssetId);
        if (pId === id) {
          children.push(asset);
          findChildren(asset._id); // Recursively find grandchildren
        }
      });
    };
    findChildren(parentId);
    return children;
  }, [assets, safelyGetId]);

  const handleDeleteClick = useCallback(() => {
    if (selectedAsset) {
      // Check if asset has children
      const childAssets = getAllChildAssets(selectedAsset._id);
      if (childAssets.length > 0) {
        // If has children, show password confirmation modal
        setAssetsToDelete([selectedAsset, ...childAssets]);
        setDeletePassword('');
        setDeletePasswordError('');
        setIsDeleteWithChildrenModalOpen(true);
        return;
      }
      // No children, show normal delete modal
      setIsDeleteModalOpen(true);
    }
  }, [selectedAsset, getAllChildAssets]);

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

    try {
      await deleteAsset(selectedAsset._id);
      setSelectedAsset(null);
      setIsDeleteModalOpen(false);
      addNotification('success', `Đã xóa tài sản "${selectedAsset.name}" thành công`);
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi xóa tài sản');
    }
  }, [selectedAsset, deleteAsset, addNotification]);

  const handleDeleteWithChildrenConfirm = useCallback(async () => {
    if (!selectedAsset || assetsToDelete.length === 0) return;

    // Password confirmation: require user to type asset name or "DELETE"
    const passwordToCheck = selectedAsset.name.toUpperCase().trim();
    const enteredPassword = deletePassword.trim().toUpperCase();
    
    if (enteredPassword !== passwordToCheck && enteredPassword !== 'DELETE') {
      setDeletePasswordError('Mật khẩu không đúng. Vui lòng nhập tên tài sản hoặc "DELETE" để xác nhận.');
      return;
    }

    try {
      // Separate parent and children
      const parentAsset = assetsToDelete.find(a => a._id === selectedAsset._id);
      const childAssets = assetsToDelete.filter(a => a._id !== selectedAsset._id);

      // Delete children first (to avoid foreign key constraints)
      for (const childAsset of childAssets) {
        await deleteAsset(childAsset._id);
      }

      // Then delete parent
      if (parentAsset) {
        await deleteAsset(parentAsset._id);
      }

      setSelectedAsset(null);
      setIsDeleteWithChildrenModalOpen(false);
      setDeletePassword('');
      setDeletePasswordError('');
      setAssetsToDelete([]);
      
      const childCount = childAssets.length;
      addNotification('success', `Đã xóa tài sản "${selectedAsset.name}" và ${childCount} tài sản con thành công`);
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi xóa tài sản');
    }
  }, [selectedAsset, assetsToDelete, deletePassword, deleteAsset, addNotification]);

  const handleClearFilters = useCallback(() => {
    setSearchQuery('');
    setStatusFilter('all');
    setTypeFilter('all');
  }, []);

  const validParentAssetsForCreate = useMemo(() =>
    getValidParentAssets(),
    [getValidParentAssets]
  );

  const validParentAssetsForEdit = useMemo(() =>
    getValidParentAssets(editFormData._id),
    [getValidParentAssets, editFormData._id]
  );

  return (
    <div className="flex flex-col lg:h-[calc(100vh-8rem)] lg:min-h-[calc(100vh-6rem)]">
      {/* HEADER & SITE SELECTOR */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-800 dark:text-white flex items-center gap-2">
            Quản lý Tài sản (AM)
          </h1>
          {currentSite && (
            <div className="flex items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mt-1">
              <span className="flex items-center gap-1">
                <MapPin size={14} /> {currentSite.location.address}
              </span>
              <span className="flex items-center gap-1">
                <Box size={14} /> {currentSite.capacityMWp} MWp
              </span>
              <span className="flex items-center gap-1">
                <Calendar size={14} /> {new Date(currentSite.commissioningDate).toLocaleDateString('vi-VN')}
              </span>
            </div>
          )}
        </div>

        <div className="flex items-center gap-3 w-full md:w-auto">
          <select
            className="border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:outline-none w-full md:w-64"
            value={selectedSiteId}
            onChange={(e) => setSelectedSiteId(e.target.value)}
          >
            {sites.map(site => (
              <option key={site._id} value={site._id}>{site.name}</option>
            ))}
          </select>
          <Button onClick={handleCreateClick} icon={<Plus size={16} />}>
            Thêm tài sản
          </Button>
        </div>
      </div>

      {/* Statistics Cards */}
      {assetStats.total > 0 && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Tổng số</p>
                <p className="text-2xl font-bold text-slate-900 dark:text-white">{assetStats.total}</p>
              </div>
              <BarChart3 className="w-8 h-8 text-blue-500" />
            </div>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Hoạt động</p>
                <p className="text-2xl font-bold text-green-600 dark:text-green-400">{assetStats.operational}</p>
              </div>
              <CheckCircle2 className="w-8 h-8 text-green-500" />
            </div>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Lỗi</p>
                <p className="text-2xl font-bold text-red-600 dark:text-red-400">{assetStats.faulty}</p>
              </div>
              <AlertTriangle className="w-8 h-8 text-red-500" />
            </div>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Bảo trì</p>
                <p className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{assetStats.maintenance}</p>
              </div>
              <Box className="w-8 h-8 text-yellow-500" />
            </div>
          </div>
          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-500 dark:text-slate-400">Không hoạt động</p>
                <p className="text-2xl font-bold text-slate-600 dark:text-slate-400">{assetStats.inactive}</p>
              </div>
              <Box className="w-8 h-8 text-slate-500" />
            </div>
          </div>
        </div>
      )}

      <div className="flex-1 flex flex-col lg:flex-row gap-6 lg:overflow-hidden relative lg:min-h-0">
        {/* Left: Cấu trúc tài sản — desktop ~1/3 chiều ngang */}
        <div className={`w-full lg:flex-[1_1_0%] lg:min-w-0 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col lg:min-h-0 lg:overflow-hidden ${selectedAsset ? 'hidden lg:flex' : 'flex'}`}>
          <div className="p-4 flex-shrink-0 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 rounded-t-xl">
            <h3 className="font-semibold text-slate-700 dark:text-slate-200 flex items-center gap-2 mb-3">
              <FolderTree size={18} /> Cấu trúc tài sản
            </h3>

            {/* Search & Filters */}
            <div className="space-y-2">
              <div className="relative">
                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-slate-400" size={16} />
                <Input
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Tìm kiếm tài sản..."
                  className="pl-8"
                  fullWidth
                />
              </div>
              <div className="flex gap-2">
                <select
                  className="flex-1 text-xs border border-slate-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                >
                  <option value="all">Tất cả trạng thái</option>
                  {Object.values(AssetStatus).map(status => (
                    <option key={status} value={status}>{assetStatusVi(status)}</option>
                  ))}
                </select>
                <select
                  className="flex-1 text-xs border border-slate-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                  value={typeFilter}
                  onChange={(e) => setTypeFilter(e.target.value)}
                >
                  <option value="all">Tất cả loại</option>
                  {assetTypeOptions.map((type) => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>
              </div>
              {(searchQuery || statusFilter !== 'all' || typeFilter !== 'all') && (
                <button
                  onClick={handleClearFilters}
                  className="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
                >
                  <X size={12} /> Xóa bộ lọc
                </button>
              )}
            </div>
          </div>
          <div className="p-4 lg:overflow-y-auto lg:flex-1 lg:min-h-0">
            {isLoading ? (
              <div className="text-center text-slate-400 mt-10">Đang tải...</div>
            ) : filteredAssets.length > 0 ? (
              renderAssetTree(null)
            ) : assets.length > 0 ? (
              <div className="text-center text-slate-400 mt-10 italic">
                Không tìm thấy tài sản nào phù hợp với bộ lọc.
              </div>
            ) : (
              <div className="text-center text-slate-400 mt-10 italic">
                Chưa có dữ liệu tài sản cho site này.
              </div>
            )}
          </div>
        </div>

        {/* Right: Chi tiết — desktop ~2/3 chiều ngang */}
        <div className={`w-full lg:flex-[2_1_0%] lg:min-w-0 lg:min-h-0 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 lg:overflow-y-auto ${!selectedAsset ? 'hidden lg:block' : 'block'}`}>
          {selectedAsset ? (
            <div className="p-4 md:p-6">
              {/* Back button for mobile */}
              <button
                onClick={() => setSelectedAsset(null)}
                className="lg:hidden flex items-center gap-2 text-blue-600 dark:text-blue-400 font-medium mb-4 hover:underline"
              >
                <ArrowLeft size={18} />
                Quay lại danh sách
              </button>
              <div className="flex items-start justify-between">
                <div>
                  <h2 className="text-xl font-bold text-slate-900 dark:text-white">{selectedAsset.name}</h2>
                  <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
                    {selectedAsset.assetType} • {selectedAsset.code}
                    {selectedAsset.serialNumber && ` • ${selectedAsset.serialNumber}`}
                  </p>
                </div>
                <div className="flex space-x-2">
                  <div className={`px-3 py-1 rounded-full text-xs font-bold uppercase flex items-center ${selectedAsset.status === AssetStatus.OPERATIONAL
                    ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
                    : selectedAsset.status === AssetStatus.FAULTY
                      ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
                      : selectedAsset.status === AssetStatus.MAINTENANCE
                        ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300'
                        : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
                    }`}>
                    {assetStatusVi(selectedAsset.status)}
                  </div>
                  {/* Action Buttons */}
                  <button
                    onClick={handleEditClick}
                    className="p-2 text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded"
                    title="Chỉnh sửa"
                  >
                    <Pencil size={18} />
                  </button>
                  <button
                    onClick={handleDeleteClick}
                    className="p-2 text-slate-500 hover:text-red-600 dark:text-slate-400 dark:hover:text-red-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded"
                    title="Xóa"
                  >
                    <Trash2 size={18} />
                  </button>
                </div>
              </div>

              <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="p-4 border border-slate-100 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-900/50">
                  <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Thông số kỹ thuật</h4>
                  <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
                    {selectedAsset.serialNumber && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Serial Number</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200 font-mono text-xs">{selectedAsset.serialNumber}</span>
                      </div>
                    )}
                    {selectedAsset.specifications?.serialNumbers && Array.isArray(selectedAsset.specifications.serialNumbers) && selectedAsset.specifications.serialNumbers.length > 1 && (
                      <div className="flex justify-between items-start">
                        <span className="text-slate-500 dark:text-slate-500">Tất cả Serial Numbers</span>
                        <div className="text-right">
                          {selectedAsset.specifications.serialNumbers.map((serial: string, idx: number) => (
                            <div key={idx} className="font-medium text-slate-900 dark:text-slate-200 font-mono text-xs">
                              {serial}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                    {selectedAsset.manufacturer && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Nhà sản xuất</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200">{selectedAsset.manufacturer}</span>
                      </div>
                    )}
                    {selectedAsset.model && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Model</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200">{selectedAsset.model}</span>
                      </div>
                    )}
                    {selectedAsset.capacityKW && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Công suất</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200">{selectedAsset.capacityKW} kW</span>
                      </div>
                    )}
                    {selectedAsset.installDate && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Ngày lắp đặt</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200">
                          {new Date(selectedAsset.installDate).toLocaleDateString('vi-VN')}
                        </span>
                      </div>
                    )}
                    {selectedAsset.commissioningDate && (
                      <div className="flex justify-between">
                        <span className="text-slate-500 dark:text-slate-500">Ngày vận hành</span>
                        <span className="font-medium text-slate-900 dark:text-slate-200">
                          {new Date(selectedAsset.commissioningDate).toLocaleDateString('vi-VN')}
                        </span>
                      </div>
                    )}
                    {selectedAsset.specifications && Object.entries(selectedAsset.specifications).filter(([k]) => k !== 'serialNumbers').length > 0 && (
                      Object.entries(selectedAsset.specifications)
                        .filter(([k]) => k !== 'serialNumbers')
                        .map(([k, v]) => (
                          <div key={k} className="flex justify-between">
                            <span className="text-slate-500 dark:text-slate-500 capitalize">{k}</span>
                            <span className="font-medium text-slate-900 dark:text-slate-200">{String(v)}</span>
                          </div>
                        ))
                    )}
                    {!selectedAsset.manufacturer && !selectedAsset.model && !selectedAsset.capacityKW &&
                      !selectedAsset.installDate && !selectedAsset.commissioningDate &&
                      (!selectedAsset.specifications || Object.keys(selectedAsset.specifications).length === 0) && (
                        <div className="text-slate-400 italic text-xs">Chưa có thông tin</div>
                      )}
                  </div>
                </div>

                <div className="p-4 border border-slate-100 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-900/50">
                  <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">Tài chính & Bảo hành</h4>
                  <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
                    {selectedAsset.warrantyEndDate ? (
                      <>
                        <div className="flex justify-between">
                          <span className="text-slate-500 dark:text-slate-500">Trạng thái bảo hành</span>
                          <span className={`font-medium ${new Date(selectedAsset.warrantyEndDate) > new Date()
                            ? 'text-green-600 dark:text-green-400'
                            : 'text-red-600 dark:text-red-400'
                            }`}>
                            {new Date(selectedAsset.warrantyEndDate) > new Date() ? 'Đang hiệu lực' : 'Đã hết hạn'}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-slate-500 dark:text-slate-500">Hết hạn bảo hành</span>
                          <span className="font-medium text-slate-900 dark:text-slate-200">
                            {new Date(selectedAsset.warrantyEndDate).toLocaleDateString('vi-VN')}
                          </span>
                        </div>
                      </>
                    ) : (
                      <div className="text-slate-400 italic text-xs">Chưa có thông tin bảo hành</div>
                    )}
                  </div>
                </div>
              </div>

              {/* Maintenance History - Placeholder */}
              <div className="mt-8">
                <h4 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-4">Lịch sử bảo trì</h4>
                <div className="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-lg lg:max-h-64 lg:overflow-y-auto">
                  <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700 text-sm">
                    <thead className="bg-slate-50 dark:bg-slate-700/50 sticky top-0">
                      <tr>
                        <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">Ngày</th>
                        <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">Mã</th>
                        <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">Loại</th>
                        <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">Tiêu đề</th>
                        <th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap">Kết quả</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700">
                      {isHistoryLoading ? (
                        <tr>
                          <td colSpan={5} className="px-4 py-8 text-center text-slate-400 dark:text-slate-500">
                            Đang tải lịch sử...
                          </td>
                        </tr>
                      ) : assetHistory.length > 0 ? (
                        assetHistory.map((item) => (
                          <tr key={item.id} className="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                            <td className="px-4 py-3 whitespace-nowrap text-slate-900 dark:text-slate-200">
                              {new Date(item.date).toLocaleDateString('vi-VN')}
                            </td>
                            <td className="px-4 py-3 whitespace-nowrap text-slate-900 dark:text-slate-200 font-mono text-xs">
                              {item.code}
                            </td>
                            <td className="px-4 py-3 whitespace-nowrap">
                              <span className={`px-2 py-0.5 rounded text-xs font-medium ${item.type === 'Ticket'
                                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                                : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                                }`}>
                                {assetHistoryKindVi(item.type)}
                              </span>
                            </td>
                            <td className="px-4 py-3 text-slate-600 dark:text-slate-400 max-w-xs lg:max-w-xs break-words lg:truncate" title={item.name}>
                              {item.name}
                            </td>
                            <td className="px-4 py-3 whitespace-nowrap">
                              <span className="px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
                                {assetHistoryRowStatusVi(item.type, item.status)}
                              </span>
                            </td>
                          </tr>
                        ))
                      ) : (
                        <tr>
                          <td colSpan={5} className="px-4 py-8 text-center text-slate-400 dark:text-slate-500">
                            Chưa có lịch sử bảo trì (WO/Ticket)
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          ) : (
            <div className="h-full flex flex-col items-center justify-center text-slate-400 dark:text-slate-500">
              <FolderTree size={48} className="mb-4 opacity-20" />
              <p>Chọn một tài sản từ danh sách để xem chi tiết.</p>
            </div>
          )}
        </div>
      </div>

      {/* CREATE MODAL */}
      <Modal
        isOpen={isCreateModalOpen}
        onClose={() => {
          setIsCreateModalOpen(false);
          setCreateFormErrors({});
        }}
        title="Thêm tài sản mới"
        footer={
          <>
            <Button onClick={handleCreateSave} isLoading={isLoading}>
              Tạo mới
            </Button>
            <Button
              variant="secondary"
              onClick={() => {
                setIsCreateModalOpen(false);
                setCreateFormErrors({});
              }}
              className="ml-3"
            >
              Hủy
            </Button>
          </>
        }
      >
        <div className="space-y-4">
          <Input
            label="Tên tài sản *"
            value={createFormData.name || ''}
            onChange={(e) => {
              setCreateFormData({ ...createFormData, name: e.target.value });
              if (createFormErrors.name) {
                setCreateFormErrors({ ...createFormErrors, name: '' });
              }
            }}
            placeholder="Ví dụ: Inverter 05"
            error={createFormErrors.name}
          />
          <div className="grid grid-cols-2 gap-4 items-start">
            <AssetTypeCatalogField
              value={createFormData.assetType || ''}
              onChange={(next) => {
                setCreateFormData({ ...createFormData, assetType: next as IAsset['assetType'] });
                if (createFormErrors.assetType) {
                  setCreateFormErrors({ ...createFormErrors, assetType: '' });
                }
              }}
              options={assetTypeOptions}
              error={createFormErrors.assetType}
              selectClassName={`${assetTypeSelectClass}${createFormErrors.assetType ? ' border-red-300 dark:border-red-800' : ''}`}
              onAddType={handleCatalogAddType}
              onRenameType={handleCatalogRenameType}
              onDeleteType={handleCatalogDeleteType}
              deleteBlockedByAssets={hasAssetsUsingTypeName(createFormData.assetType || '')}
            />
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                Tài sản cha
              </label>
              <select
                className="block w-full rounded-md border shadow-sm px-3 py-2 sm:text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white border-slate-300 dark:border-slate-600 focus:border-blue-500 focus:ring-blue-500"
                value={createFormData.parentAssetId || ''}
                onChange={(e) => setCreateFormData({ ...createFormData, parentAssetId: e.target.value || null })}
              >
                <option value="">-- Không (Gốc) --</option>
                {validParentAssetsForCreate.map(a => (
                  <option key={a._id} value={a._id}>{a.name} ({a.assetType})</option>
                ))}
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Input
              label="Serial Number"
              value={createFormData.serialNumber || ''}
              onChange={(e) => setCreateFormData({ ...createFormData, serialNumber: e.target.value })}
            />
            <Input
              label="Nhà sản xuất"
              value={createFormData.manufacturer || ''}
              onChange={(e) => setCreateFormData({ ...createFormData, manufacturer: e.target.value })}
            />
          </div>
          <Input
            type="date"
            label="Ngày lắp đặt"
            value={createFormData.installDate || ''}
            onChange={(e) => setCreateFormData({ ...createFormData, installDate: e.target.value })}
          />
          <div className="grid grid-cols-2 gap-4">
            <Input
              type="date"
              label="Ngày vận hành"
              value={createFormData.commissioningDate ? new Date(createFormData.commissioningDate).toISOString().split('T')[0] : ''}
              onChange={(e) => {
                const newDate = e.target.value;
                const payload = { ...createFormData, commissioningDate: newDate };

                // Auto calc warranty end date if months is set
                if (newDate && (createFormData as any).warrantyMonths) {
                  const d = new Date(newDate);
                  d.setMonth(d.getMonth() + Number((createFormData as any).warrantyMonths));
                  payload.warrantyEndDate = d.toISOString();
                }
                setCreateFormData(payload);
              }}
            />
            <Input
              type="number"
              label="Số tháng bảo hành"
              value={(createFormData as any).warrantyMonths || ''}
              placeholder="Nhập số tháng..."
              onChange={(e) => {
                const months = Number(e.target.value);
                const payload: any = { ...createFormData, warrantyMonths: months };

                // Auto calc warranty end date if start date is set
                if (createFormData.commissioningDate) {
                  const d = new Date(createFormData.commissioningDate);
                  d.setMonth(d.getMonth() + months);
                  payload.warrantyEndDate = d.toISOString();
                }
                setCreateFormData(payload);
              }}
            />
          </div>
        </div>
      </Modal>

      {/* EDIT MODAL */}
      <Modal
        isOpen={isEditModalOpen}
        onClose={() => {
          setIsEditModalOpen(false);
          setEditFormErrors({});
        }}
        title="Chỉnh sửa tài sản"
        footer={
          <>
            <Button onClick={handleEditSave} isLoading={isLoading}>
              Lưu thay đổi
            </Button>
            <Button
              variant="secondary"
              onClick={() => {
                setIsEditModalOpen(false);
                setEditFormErrors({});
              }}
              className="ml-3"
            >
              Hủy
            </Button>
          </>
        }
      >
        <div className="space-y-4">
          <Input
            label="Tên tài sản *"
            value={editFormData.name || ''}
            onChange={(e) => {
              setEditFormData({ ...editFormData, name: e.target.value });
              if (editFormErrors.name) {
                setEditFormErrors({ ...editFormErrors, name: '' });
              }
            }}
            error={editFormErrors.name}
          />
          <div className="grid grid-cols-2 gap-4 items-start">
            <AssetTypeCatalogField
              value={editFormData.assetType || ''}
              onChange={(next) => {
                setEditFormData({ ...editFormData, assetType: next as IAsset['assetType'] });
                if (editFormErrors.assetType) {
                  setEditFormErrors({ ...editFormErrors, assetType: '' });
                }
              }}
              options={assetTypeOptions}
              error={editFormErrors.assetType}
              selectClassName={`${assetTypeSelectClass}${editFormErrors.assetType ? ' border-red-300 dark:border-red-800' : ''}`}
              onAddType={handleCatalogAddType}
              onRenameType={handleCatalogRenameType}
              onDeleteType={handleCatalogDeleteType}
              deleteBlockedByAssets={hasAssetsUsingTypeName(editFormData.assetType || '')}
            />
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Trạng thái</label>
              <select
                className="block w-full rounded-md border shadow-sm px-3 py-2 sm:text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white border-slate-300 dark:border-slate-600 focus:border-blue-500 focus:ring-blue-500"
                value={editFormData.status}
                onChange={(e) => setEditFormData({ ...editFormData, status: e.target.value as AssetStatus })}
              >
                {Object.values(AssetStatus).map((status) => (
                  <option key={status} value={status}>{assetStatusVi(status)}</option>
                ))}
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <Input
              label="Serial Number"
              value={editFormData.serialNumber || ''}
              onChange={(e) => setEditFormData({ ...editFormData, serialNumber: e.target.value })}
            />
            <Input
              label="Nhà sản xuất"
              value={editFormData.manufacturer || ''}
              onChange={(e) => setEditFormData({ ...editFormData, manufacturer: e.target.value })}
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Input
                type="date"
                label="Ngày vận hành"
                value={editFormData.commissioningDate || ''}
                onChange={(e) => {
                  const newDate = e.target.value;
                  const payload = { ...editFormData, commissioningDate: newDate };

                  // Auto calc warranty end date if months is set
                  if (newDate && (editFormData as any).warrantyMonths) {
                    const d = new Date(newDate);
                    d.setMonth(d.getMonth() + Number((editFormData as any).warrantyMonths));
                    payload.warrantyEndDate = d.toISOString();
                  }
                  setEditFormData(payload);
                }}
              />
              {currentSite?.commissioningDate && (
                <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                  Ngày COD dự án: {new Date(currentSite.commissioningDate).toLocaleDateString('vi-VN')}
                </p>
              )}
            </div>
            <Input
              type="number"
              label="Số tháng bảo hành"
              value={(editFormData as any).warrantyMonths || ''}
              placeholder="Nhập số tháng..."
              onChange={(e) => {
                const months = Number(e.target.value);
                const payload: any = { ...editFormData, warrantyMonths: months };

                // Auto calc warranty end date if start date is set
                if (editFormData.commissioningDate) {
                  const d = new Date(editFormData.commissioningDate);
                  d.setMonth(d.getMonth() + months);
                  payload.warrantyEndDate = d.toISOString();
                }
                setEditFormData(payload);
              }}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Tài sản cha</label>
            <select
              className="block w-full rounded-md border shadow-sm px-3 py-2 sm:text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white border-slate-300 dark:border-slate-600 focus:border-blue-500 focus:ring-blue-500"
              value={safelyGetId(editFormData.parentAssetId) || ''}
              onChange={(e) => setEditFormData({ ...editFormData, parentAssetId: e.target.value || null })}
            >
              <option value="">-- Không (Gốc) --</option>
              {validParentAssetsForEdit.map(a => (
                <option key={a._id} value={a._id}>{a.name} ({a.assetType})</option>
              ))}
            </select>
          </div>
        </div>
      </Modal>

      {/* DELETE MODAL */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Xóa tài sản"
        footer={
          <>
            <Button variant="danger" onClick={handleDeleteConfirm} isLoading={isLoading}>
              Xóa
            </Button>
            <Button variant="secondary" onClick={() => setIsDeleteModalOpen(false)} className="ml-3">
              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 tài sản <b className="text-slate-700 dark:text-slate-200">{selectedAsset?.name}</b> không? Hành động này không thể hoàn tác.
            </p>
          </div>
        </div>
      </Modal>

      {/* DELETE WITH CHILDREN MODAL - Password Confirmation */}
      <Modal
        isOpen={isDeleteWithChildrenModalOpen}
        onClose={() => {
          setIsDeleteWithChildrenModalOpen(false);
          setDeletePassword('');
          setDeletePasswordError('');
          setAssetsToDelete([]);
        }}
        title="Xóa tài sản và tất cả tài sản con"
        footer={
          <>
            <Button 
              variant="danger" 
              onClick={handleDeleteWithChildrenConfirm} 
              isLoading={isLoading}
              disabled={!deletePassword.trim()}
            >
              Xóa tất cả
            </Button>
            <Button 
              variant="secondary" 
              onClick={() => {
                setIsDeleteWithChildrenModalOpen(false);
                setDeletePassword('');
                setDeletePasswordError('');
                setAssetsToDelete([]);
              }} 
              className="ml-3"
            >
              Hủy
            </Button>
          </>
        }
      >
        <div className="space-y-4">
          <div className="flex items-start 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 className="flex-1">
              <p className="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">
                Cảnh báo: Tài sản này có {assetsToDelete.length - 1} tài sản con
              </p>
              <p className="text-sm text-slate-500 dark:text-slate-400 mb-3">
                Bạn đang chuẩn bị xóa tài sản <b className="text-slate-700 dark:text-slate-200">{selectedAsset?.name}</b> và tất cả {assetsToDelete.length - 1} tài sản con. Hành động này không thể hoàn tác.
              </p>
              {assetsToDelete.length > 1 && (
                <div className="mt-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-lg max-h-40 overflow-y-auto">
                  <p className="text-xs font-medium text-slate-600 dark:text-slate-400 mb-2">Danh sách tài sản sẽ bị xóa:</p>
                  <ul className="text-xs text-slate-500 dark:text-slate-500 space-y-1">
                    {assetsToDelete.map((asset, idx) => (
                      <li key={asset._id} className="flex items-center gap-2">
                        <span className="w-5 h-5 flex items-center justify-center rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400 text-[10px]">
                          {idx + 1}
                        </span>
                        <span className={idx === 0 ? 'font-semibold text-slate-700 dark:text-slate-300' : ''}>
                          {asset.name} {idx === 0 && '(Tài sản cha)'}
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
          
          <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
              Nhập mật khẩu xác nhận *
            </label>
            <Input
              type="text"
              value={deletePassword}
              onChange={(e) => {
                setDeletePassword(e.target.value);
                if (deletePasswordError) {
                  setDeletePasswordError('');
                }
              }}
              placeholder={`Nhập "${selectedAsset?.name}" hoặc "DELETE" để xác nhận`}
              error={deletePasswordError}
              className="uppercase"
            />
            <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
              Vui lòng nhập tên tài sản <b>"{selectedAsset?.name}"</b> hoặc từ khóa <b>"DELETE"</b> để xác nhận xóa.
            </p>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default AssetManagement;