import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { dataService } from '../services/dataService';
import { IContract, CustomerGroup, ContractStatus, ICustomerGroup, IContractType } from '../types';
import { Briefcase, FileText, Plus, Search, Calendar, DollarSign, AlertTriangle, Users, Edit, Trash2, Download, ArrowUpDown, ChevronLeft, ChevronRight, Settings2 } from 'lucide-react';
import Modal from '../components/Modal';
import Input from '../components/common/Input';
import { formatCurrency, formatNumber } from '../utils/formatters';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';

// Constants
const CONTRACT_STATUSES: Record<string, string> = {
    'active': 'Hiệu lực',
    'Expiring': 'Sắp hết hạn',
    'expired': 'Hết hạn',
    'draft': 'Bản nháp',
    'negotiating': 'Đang đàm phán',
    'completed': 'Hoàn tất',
    'terminated': 'Chấm dứt',
    'suspended': 'Tạm ngưng'
};

const ITEMS_PER_PAGE = 10;

// Debounce hook
function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
}

// Contract Stats Component
const ContractStats: React.FC<{ contracts: IContract[]; customerGroups: ICustomerGroup[] }> = React.memo(({ contracts, customerGroups }) => {
    const stats = useMemo(() => {
        const totalRevenue = contracts
            .filter(c => c.status === 'active' && !c.isFree)
            .reduce((sum, c) => sum + (c.value || 0), 0);
        
        const totalContracts = contracts.length;
        
        const overdueDebt = contracts.reduce((sum, c) => sum + (c.debtAmount || 0), 0);
        
        const expiringCount = contracts.filter(c => c.status === 'Expiring').length;
        
        const totalCapacity = contracts.reduce((sum, c) => sum + (c.capacityKWp || 0), 0);
        
        // Dynamic group stats based on available customer groups
        const groupStats: Record<string, number> = {};
        customerGroups.forEach(group => {
            groupStats[group.code] = contracts.filter(c => c.customerGroup === group.code).length;
        });

        return { totalRevenue, totalContracts, overdueDebt, expiringCount, totalCapacity, groupStats };
    }, [contracts, customerGroups]);

    return (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div className="flex justify-between items-start">
                    <div>
                        <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Tổng doanh thu (Active)</p>
                        <p className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-1">{formatCurrency(stats.totalRevenue, 'VND', true)}</p>
                    </div>
                    <div className="p-2 bg-blue-50 dark:bg-blue-900/20 text-blue-600 rounded">
                        <DollarSign size={20} />
                    </div>
                </div>
                <div className="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700 flex justify-between text-xs text-slate-500">
                    <span>Nợ quá hạn:</span>
                    <span className="font-bold text-red-500">{formatCurrency(stats.overdueDebt, 'VND', true)}</span>
                </div>
            </div>

            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div className="flex justify-between items-start">
                    <div>
                        <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Tổng số Hợp đồng</p>
                        <p className="text-xl font-bold text-slate-800 dark:text-white mt-1">{stats.totalContracts}</p>
                    </div>
                    <div className="p-2 bg-purple-50 dark:bg-purple-900/20 text-purple-600 rounded">
                        <FileText size={20} />
                    </div>
                </div>
                <div className="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700 flex gap-2 text-xs text-slate-500 overflow-x-auto pb-1">
                    {customerGroups.map((group) => {
                        const count = stats.groupStats[group.code] || 0;
                        const colors = ['bg-green-100 text-green-700', 'bg-blue-100 text-blue-700', 'bg-orange-100 text-orange-700', 'bg-purple-100 text-purple-700', 'bg-pink-100 text-pink-700'];
                        const colorIndex = customerGroups.findIndex(g => g.code === group.code) % colors.length;
                        return (
                            <span key={group._id} className={`${colors[colorIndex]} px-1.5 rounded whitespace-nowrap`}>
                                {count} {group.name}
                            </span>
                        );
                    })}
                </div>
            </div>

            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div className="flex justify-between items-start">
                    <div>
                        <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Cảnh báo / Sắp hết hạn</p>
                        <p className="text-xl font-bold text-orange-600 dark:text-orange-400 mt-1">{stats.expiringCount}</p>
                    </div>
                    <div className="p-2 bg-orange-50 dark:bg-orange-900/20 text-orange-600 rounded">
                        <AlertTriangle size={20} />
                    </div>
                </div>
                <p className="mt-3 text-xs text-slate-400">Cần xử lý gia hạn hoặc thanh lý trong 90 ngày tới.</p>
            </div>

            <div className="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div className="flex justify-between items-start">
                    <div>
                        <p className="text-xs text-slate-500 dark:text-slate-400 uppercase font-bold">Tài sản quản lý (kWp)</p>
                        <p className="text-xl font-bold text-slate-800 dark:text-white mt-1">
                            {formatNumber(stats.totalCapacity)}
                        </p>
                    </div>
                    <div className="p-2 bg-green-50 dark:bg-green-900/20 text-green-600 rounded">
                        <Users size={20} />
                    </div>
                </div>
                <p className="mt-3 text-xs text-slate-400">Tổng công suất thuộc phạm vi hợp đồng O&M.</p>
            </div>
        </div>
    );
});

ContractStats.displayName = 'ContractStats';

// Contract Row Component
const ContractRow: React.FC<{
    contract: IContract;
    onView: (contract: IContract) => void;
    onEdit: (contract: IContract) => void;
    onDelete: (id: string) => void;
}> = React.memo(({ contract, onView, onEdit, onDelete }) => {
    const getStatusColor = useCallback((status: string) => {
        switch (status) {
            case 'active': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
            case 'Expiring': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300';
            case 'expired': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
            case 'draft': return 'bg-slate-200 text-slate-800 dark:bg-slate-700 dark:text-slate-300';
            case 'negotiating': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
            case 'completed': return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
            default: return 'bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300';
        }
    }, []);

    return (
        <tr
            className="hover:bg-slate-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors group"
            onClick={() => onView(contract)}
        >
            <td className="px-6 py-4">
                <div className="font-medium text-blue-600 dark:text-blue-400 flex items-center gap-2">
                    <Briefcase size={16} /> {contract.contractNumber}
                </div>
                <div className="text-sm text-slate-700 dark:text-slate-300 mt-1">{contract.partyA}</div>
                <div className="text-xs text-slate-500">{contract.customerCode} • {contract.capacityKWp?.toLocaleString()} kWp</div>
            </td>
            <td className="px-6 py-4">
                <span className="px-2 py-1 rounded border border-slate-200 dark:border-slate-600 text-xs font-medium text-slate-600 dark:text-slate-400 bg-slate-50 dark:bg-slate-800">
                    {contract.customerGroup || 'N/A'}
                </span>
                {contract.isFree && <div className="mt-1 text-xs text-orange-600 font-bold">Miễn phí (EPC)</div>}
            </td>
            <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">
                <div className="flex items-center gap-1"><Calendar size={14} /> {new Date(contract.endDate).toLocaleDateString('vi-VN')}</div>
                <div className="text-xs text-slate-400 mt-1">Từ: {new Date(contract.startDate).toLocaleDateString('vi-VN')}</div>
            </td>
            <td className="px-6 py-4">
                <div className="text-sm font-medium text-slate-700 dark:text-slate-300">
                    {contract.value ? formatCurrency(contract.value, 'VND', true) : '0'}
                </div>
                {contract.debtAmount && contract.debtAmount > 0 ? (
                    <div className="text-xs text-red-500 font-bold mt-1">Nợ: {formatCurrency(contract.debtAmount, 'VND', true)}</div>
                ) : (
                    <div className="text-xs text-green-500 mt-1">Đã thanh toán</div>
                )}
            </td>
            <td className="px-6 py-4 align-middle">
                {contract.serviceTotal ? (
                    <div className="w-32">
                        <div className="flex justify-between text-xs mb-1">
                            <span>{contract.servicePerformed || 0}/{contract.serviceTotal}</span>
                            <span className="text-slate-400">{contract.serviceFrequency}</span>
                        </div>
                        <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1.5">
                            <div
                                className={`h-1.5 rounded-full ${contract.servicePerformed! >= contract.serviceTotal ? 'bg-green-500' : 'bg-blue-500'}`}
                                style={{ width: `${Math.min(((contract.servicePerformed || 0) / contract.serviceTotal) * 100, 100)}%` }}
                            ></div>
                        </div>
                    </div>
                ) : <span className="text-xs text-slate-400">-</span>}
            </td>
            <td className="px-6 py-4 text-right">
                <div className="flex flex-col items-end gap-2 text-right">
                    <span className={`px-2 py-1 rounded-full text-xs font-bold whitespace-nowrap ${getStatusColor(contract.status)}`}>
                        {CONTRACT_STATUSES[contract.status] || contract.status}
                    </span>
                    <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                            onClick={(e) => { e.stopPropagation(); onEdit(contract); }}
                            className="p-1 text-slate-400 hover:text-blue-600 rounded hover:bg-blue-50 dark:hover:bg-blue-900/20"
                            title="Sửa"
                        >
                            <Edit size={14} />
                        </button>
                        <button
                            onClick={(e) => { e.stopPropagation(); onDelete(contract._id); }}
                            className="p-1 text-slate-400 hover:text-red-600 rounded hover:bg-red-50 dark:hover:bg-red-900/20"
                            title="Xóa"
                        >
                            <Trash2 size={14} />
                        </button>
                    </div>
                </div>
            </td>
        </tr>
    );
});

ContractRow.displayName = 'ContractRow';

// Contract Form Tabs Component
const ContractFormTabs: React.FC<{
    activeTab: 'general' | 'financial' | 'service' | 'notes';
    onTabChange: (tab: 'general' | 'financial' | 'service' | 'notes') => void;
}> = ({ activeTab, onTabChange }) => (
    <div className="border-b border-slate-200 dark:border-slate-700 mb-4 flex space-x-4">
        <button
            onClick={() => onTabChange('general')}
            className={`pb-2 text-sm font-medium transition-colors ${
                activeTab === 'general'
                    ? 'border-b-2 border-blue-600 text-blue-600'
                    : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
            }`}
        >
            Thông tin chung
        </button>
        <button
            onClick={() => onTabChange('financial')}
            className={`pb-2 text-sm font-medium transition-colors ${
                activeTab === 'financial'
                    ? 'border-b-2 border-blue-600 text-blue-600'
                    : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
            }`}
        >
            Tài chính & Doanh thu
        </button>
        <button
            onClick={() => onTabChange('service')}
            className={`pb-2 text-sm font-medium transition-colors ${
                activeTab === 'service'
                    ? 'border-b-2 border-blue-600 text-blue-600'
                    : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
            }`}
        >
            Dịch vụ & Tiến độ
        </button>
        <button
            onClick={() => onTabChange('notes')}
            className={`pb-2 text-sm font-medium transition-colors ${
                activeTab === 'notes'
                    ? 'border-b-2 border-blue-600 text-blue-600'
                    : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
            }`}
        >
            Ghi chú & Pháp lý
        </button>
    </div>
);

// Main Component
const Contracts: React.FC = () => {
    const { selectedProjectId } = useAssetStore();
    const { addNotification } = useUIStore();
    
    const [contracts, setContracts] = useState<IContract[]>([]);
    const [customerGroups, setCustomerGroups] = useState<ICustomerGroup[]>([]);
    const [contractTypes, setContractTypes] = useState<IContractType[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [viewingContract, setViewingContract] = useState<IContract | null>(null);
    
    // Customer Groups Management Modal
    const [isGroupsModalOpen, setIsGroupsModalOpen] = useState(false);
    const [editingGroup, setEditingGroup] = useState<ICustomerGroup | null>(null);
    const [groupFormData, setGroupFormData] = useState<Partial<ICustomerGroup>>({});
    const [isSavingGroup, setIsSavingGroup] = useState(false);

    // Contract Types Management Modal
    const [isContractTypesModalOpen, setIsContractTypesModalOpen] = useState(false);
    const [editingContractType, setEditingContractType] = useState<IContractType | null>(null);
    const [contractTypeFormData, setContractTypeFormData] = useState<Partial<IContractType>>({});
    const [isSavingContractType, setIsSavingContractType] = useState(false);

    // Filters
    const [filterGroup, setFilterGroup] = useState<string>('All');
    const [filterStatus, setFilterStatus] = useState<string>('All');
    const [searchTerm, setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 300);

    // Sorting
    const [sortField, setSortField] = useState<keyof IContract | ''>('');
    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

    // Pagination
    const [currentPage, setCurrentPage] = useState(1);

    // Modal State
    const [activeTab, setActiveTab] = useState<'general' | 'financial' | 'service' | 'notes'>('general');
    const [modalMode, setModalMode] = useState<'view' | 'add' | 'edit'>('view');
    const [formData, setFormData] = useState<Partial<IContract>>({});
    const [isSaving, setIsSaving] = useState(false);
    const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});

    // Load data
    const loadData = useCallback(async () => {
        if (!selectedProjectId) return;
        setLoading(true);
        setError(null);
        try {
            const [contractsData, groupsData, typesData] = await Promise.all([
                dataService.getContracts(selectedProjectId),
                dataService.getCustomerGroups(),
                dataService.getContractTypes()
            ]);
            setContracts(contractsData);
            setCustomerGroups(groupsData);
            setContractTypes(typesData);
        } catch (err: any) {
            const errorMessage = err.message || 'Lỗi khi tải dữ liệu hợp đồng';
            setError(errorMessage);
            addNotification('error', errorMessage);
        } finally {
            setLoading(false);
        }
    }, [selectedProjectId, addNotification]);

    useEffect(() => {
        loadData();
    }, [loadData]);
    
    // Load customer groups separately (for when modal opens)
    const loadCustomerGroups = useCallback(async () => {
        try {
            const groups = await dataService.getCustomerGroups();
            setCustomerGroups(groups);
        } catch (err: any) {
            addNotification('error', 'Lỗi khi tải danh sách nhóm đối tượng');
        }
    }, [addNotification]);

    // Load contract types separately (for when modal opens)
    const loadContractTypes = useCallback(async () => {
        try {
            const types = await dataService.getContractTypes();
            setContractTypes(types);
        } catch (err: any) {
            addNotification('error', 'Lỗi khi tải danh sách loại hợp đồng');
        }
    }, [addNotification]);

    // Filter and sort contracts
    const filteredAndSortedContracts = useMemo(() => {
        let result = [...contracts];

        // Apply filters
        if (filterGroup !== 'All') {
            result = result.filter(c => c.customerGroup === filterGroup);
        }

        if (filterStatus !== 'All') {
            if (filterStatus === 'active_expiring') {
                result = result.filter(c => c.status === 'active' || c.status === 'Expiring');
            } else {
                result = result.filter(c => c.status === filterStatus);
            }
        }

        if (debouncedSearchTerm) {
            const lower = debouncedSearchTerm.toLowerCase();
            result = result.filter(c =>
                c.contractNumber.toLowerCase().includes(lower) ||
                c.partyA.toLowerCase().includes(lower) ||
                (c.customerCode && c.customerCode.toLowerCase().includes(lower))
            );
        }

        // Apply sorting
        if (sortField) {
            result.sort((a, b) => {
                const aVal = a[sortField];
                const bVal = b[sortField];
                
                if (aVal === undefined || aVal === null) return 1;
                if (bVal === undefined || bVal === null) return -1;
                
                if (typeof aVal === 'string' && typeof bVal === 'string') {
                    return sortDirection === 'asc'
                        ? aVal.localeCompare(bVal)
                        : bVal.localeCompare(aVal);
                }
                
                if (typeof aVal === 'number' && typeof bVal === 'number') {
                    return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
                }
                
                return 0;
            });
        }

        return result;
    }, [contracts, filterGroup, filterStatus, debouncedSearchTerm, sortField, sortDirection]);

    // Pagination
    const totalPages = Math.ceil(filteredAndSortedContracts.length / ITEMS_PER_PAGE);
    const paginatedContracts = useMemo(() => {
        const start = (currentPage - 1) * ITEMS_PER_PAGE;
        return filteredAndSortedContracts.slice(start, start + ITEMS_PER_PAGE);
    }, [filteredAndSortedContracts, currentPage]);

    useEffect(() => {
        setCurrentPage(1); // Reset to first page when filters change
    }, [filterGroup, filterStatus, debouncedSearchTerm]);

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

    const handleAdd = useCallback(() => {
        setViewingContract(null);
        // Set default contract type to first available type or empty
        const defaultContractType = contractTypes.length > 0 ? contractTypes[0].code : '';
        setFormData({
            contractType: defaultContractType,
            status: 'draft',
            startDate: new Date().toISOString().split('T')[0],
            endDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split('T')[0],
            customerGroup: 'Other',
            isFree: false,
            paymentCycle: '30_days',
            partyB: 'Vu Phong Energy',
            projectId: selectedProjectId || ''
        });
        setModalMode('add');
        setActiveTab('general');
        setValidationErrors({});
        setIsModalOpen(true);
    }, [selectedProjectId, contractTypes]);

    const handleEdit = useCallback((contract: IContract) => {
        setViewingContract(contract);
        setFormData({ ...contract });
        setModalMode('edit');
        setActiveTab('general');
        setValidationErrors({});
        setIsModalOpen(true);
    }, []);

    const handleView = useCallback((contract: IContract) => {
        setViewingContract(contract);
        setModalMode('view');
        setActiveTab('general');
        setIsModalOpen(true);
    }, []);

    const handleDelete = useCallback(async (id: string) => {
        const contract = contracts.find(c => c._id === id);
        if (!window.confirm(`Bạn có chắc chắn muốn xóa hợp đồng "${contract?.contractNumber}"?`)) return;
        
        try {
            await dataService.deleteContract(id);
            addNotification('success', 'Đã xóa hợp đồng thành công');
            loadData();
        } catch (err: any) {
            const errorMessage = err.message || 'Lỗi khi xóa hợp đồng';
            addNotification('error', errorMessage);
        }
    }, [contracts, loadData, addNotification]);

    const validateForm = useCallback((): boolean => {
        const errors: Record<string, string> = {};
        
        if (!formData.contractNumber?.trim()) {
            errors.contractNumber = 'Số hợp đồng là bắt buộc';
        }
        
        if (!formData.partyA?.trim()) {
            errors.partyA = 'Tên khách hàng là bắt buộc';
        }
        
        if (formData.startDate && formData.endDate) {
            if (new Date(formData.startDate) > new Date(formData.endDate)) {
                errors.endDate = 'Ngày kết thúc phải sau ngày bắt đầu';
            }
        }
        
        setValidationErrors(errors);
        return Object.keys(errors).length === 0;
    }, [formData]);

    const handleSave = useCallback(async () => {
        if (!validateForm()) {
            addNotification('error', 'Vui lòng kiểm tra lại thông tin');
            return;
        }

        setIsSaving(true);
        try {
            if (modalMode === 'add') {
                await dataService.createContract(formData);
                addNotification('success', 'Đã tạo hợp đồng thành công');
            } else if (modalMode === 'edit' && viewingContract) {
                await dataService.updateContract(viewingContract._id, formData);
                addNotification('success', 'Đã cập nhật hợp đồng thành công');
            }
            setIsModalOpen(false);
            loadData();
        } catch (err: any) {
            const errorMessage = err.message || 'Lỗi khi lưu hợp đồng';
            addNotification('error', errorMessage);
        } finally {
            setIsSaving(false);
        }
    }, [formData, modalMode, viewingContract, validateForm, addNotification, loadData]);

    const handleExport = useCallback(() => {
        // Simple CSV export
        const headers = ['Số HĐ', 'Khách hàng', 'Nhóm', 'Ngày bắt đầu', 'Ngày kết thúc', 'Giá trị', 'Nợ', 'Trạng thái'];
        const rows = filteredAndSortedContracts.map(c => [
            c.contractNumber,
            c.partyA,
            c.customerGroup || '',
            new Date(c.startDate).toLocaleDateString('vi-VN'),
            new Date(c.endDate).toLocaleDateString('vi-VN'),
            c.value || 0,
            c.debtAmount || 0,
            CONTRACT_STATUSES[c.status] || c.status
        ]);
        
        const csv = [headers, ...rows].map(row => row.join(',')).join('\n');
        const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `hop-dong-${new Date().toISOString().split('T')[0]}.csv`;
        link.click();
        addNotification('success', 'Đã xuất dữ liệu thành công');
    }, [filteredAndSortedContracts, addNotification]);

    const getStatusColor = useCallback((status: string) => {
        switch (status) {
            case 'active': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
            case 'Expiring': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300';
            case 'expired': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
            case 'draft': return 'bg-slate-200 text-slate-800 dark:bg-slate-700 dark:text-slate-300';
            case 'negotiating': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
            case 'completed': return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
            default: return 'bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300';
        }
    }, []);

    if (loading) {
        return (
            <div className="p-8 text-center">
                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <p className="mt-2 text-slate-500 dark:text-slate-400">Đang tải dữ liệu hợp đồng...</p>
            </div>
        );
    }

    if (error) {
        return (
            <div className="p-8 text-center">
                <AlertTriangle className="mx-auto text-red-500" size={48} />
                <p className="mt-2 text-red-600 dark:text-red-400">{error}</p>
                <button
                    onClick={loadData}
                    className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                >
                    Thử lại
                </button>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Quản lý Hợp đồng O&M</h1>
                    <p className="text-sm text-slate-500 dark:text-slate-400">Theo dõi hợp đồng, doanh thu và tiến độ dịch vụ theo nhóm khách hàng.</p>
                </div>
                <div className="flex gap-2">
                    <button
                        onClick={() => {
                            setIsGroupsModalOpen(true);
                            loadCustomerGroups();
                        }}
                        className="flex items-center gap-2 bg-slate-500 text-white px-4 py-2 rounded-lg hover:bg-slate-600 text-sm font-medium shadow-sm transition-colors"
                        title="Quản lý nhóm đối tượng"
                    >
                        <Settings2 size={18} /> Nhóm đối tượng
                    </button>
                    <button
                        onClick={handleExport}
                        className="flex items-center gap-2 bg-slate-600 text-white px-4 py-2 rounded-lg hover:bg-slate-700 text-sm font-medium shadow-sm transition-colors"
                    >
                        <Download size={18} /> Xuất Excel
                    </button>
                    <button
                        onClick={handleAdd}
                        className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium shadow-sm transition-colors"
                    >
                        <Plus size={18} /> Thêm hợp đồng
                    </button>
                </div>
            </div>

            <ContractStats contracts={contracts} customerGroups={customerGroups} />

            {/* Filter Bar */}
            <div className="flex flex-col md:flex-row gap-4 justify-between items-end md:items-center bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700">
                <div className="flex gap-4 w-full md:w-auto">
                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">Nhóm khách hàng</label>
                        <select
                            className="border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
                            value={filterGroup}
                            onChange={(e) => setFilterGroup(e.target.value)}
                        >
                            <option value="All">Tất cả nhóm</option>
                            {customerGroups.map(group => (
                                <option key={group._id} value={group.code}>
                                    {group.name}
                                </option>
                            ))}
                        </select>
                    </div>
                    <div>
                        <label className="block text-xs font-medium text-slate-500 mb-1">Trạng thái</label>
                        <select
                            className="border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
                            value={filterStatus}
                            onChange={(e) => setFilterStatus(e.target.value)}
                        >
                            <option value="All">Tất cả</option>
                            <option value="active_expiring">Đang hiệu lực</option>
                            <option value="draft">Bản nháp</option>
                            <option value="negotiating">Đang đàm phán</option>
                            <option value="completed">Đã hoàn tất</option>
                            <option value="terminated">Đã chấm dứt</option>
                            <option value="expired">Đã hết hạn</option>
                        </select>
                    </div>
                </div>
                <div className="relative w-full md:w-64">
                    <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <Search size={16} />
                    </span>
                    <input
                        type="text"
                        placeholder="Tìm số HĐ, Khách hàng..."
                        className="pl-10 pr-4 py-2 w-full border border-slate-300 dark:border-slate-600 rounded-md text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </div>
            </div>

            {/* Contracts 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="overflow-x-auto">
                    <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                        <thead className="bg-slate-50 dark:bg-slate-700/50">
                            <tr>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                                    <button
                                        onClick={() => handleSort('contractNumber')}
                                        className="flex items-center gap-1 hover:text-blue-600"
                                    >
                                        Hợp đồng / Khách hàng
                                        {sortField === 'contractNumber' && <ArrowUpDown size={14} />}
                                    </button>
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Nhóm</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('endDate')}
                                        className="flex items-center gap-1 hover:text-blue-600"
                                    >
                                        Thời hạn
                                        {sortField === 'endDate' && <ArrowUpDown size={14} />}
                                    </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('value')}
                                        className="flex items-center gap-1 hover:text-blue-600"
                                    >
                                        Giá trị & Nợ
                                        {sortField === 'value' && <ArrowUpDown size={14} />}
                                    </button>
                                </th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Tiến độ dịch vụ</th>
                                <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Trạng thái</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                            {paginatedContracts.map(contract => (
                                <ContractRow
                                    key={contract._id}
                                    contract={contract}
                                    onView={handleView}
                                    onEdit={handleEdit}
                                    onDelete={handleDelete}
                                />
                            ))}
                            {paginatedContracts.length === 0 && (
                                <tr>
                                    <td colSpan={6} className="text-center py-8 text-slate-500 dark:text-slate-400">
                                        Không tìm thấy hợp đồng phù hợp.
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
                
                {/* Pagination */}
                {totalPages > 1 && (
                    <div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between">
                        <div className="text-sm text-slate-500 dark:text-slate-400">
                            Hiển thị {(currentPage - 1) * ITEMS_PER_PAGE + 1} - {Math.min(currentPage * ITEMS_PER_PAGE, filteredAndSortedContracts.length)} trong tổng số {filteredAndSortedContracts.length} hợp đồng
                        </div>
                        <div className="flex gap-2">
                            <button
                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                disabled={currentPage === 1}
                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-700"
                            >
                                <ChevronLeft size={16} />
                            </button>
                            <span className="px-3 py-1 text-sm text-slate-700 dark:text-slate-300">
                                Trang {currentPage} / {totalPages}
                            </span>
                            <button
                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                                disabled={currentPage === totalPages}
                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-700"
                            >
                                <ChevronRight size={16} />
                            </button>
                        </div>
                    </div>
                )}
            </div>

            {/* Add/View Modal */}
            <Modal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                title={modalMode === 'add' ? "Thêm hợp đồng mới" : modalMode === 'edit' ? `Chỉnh sửa: ${formData.contractNumber}` : `Chi tiết Hợp đồng: ${viewingContract?.contractNumber}`}
                maxWidth="2xl"
                footer={
                    <div className="flex gap-3 w-full">
                        <button
                            onClick={() => setIsModalOpen(false)}
                            className="flex-1 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white p-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
                        >
                            Đóng
                        </button>
                        {(modalMode === 'add' || modalMode === 'edit') && (
                            <button
                                onClick={handleSave}
                                disabled={isSaving}
                                className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700 transition-colors disabled:opacity-50 font-bold"
                            >
                                {isSaving ? 'Đang lưu...' : 'Lưu Hợp đồng'}
                            </button>
                        )}
                        {modalMode === 'view' && (
                            <button
                                onClick={() => viewingContract && handleEdit(viewingContract)}
                                className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700 transition-colors font-bold"
                            >
                                Chỉnh sửa
                            </button>
                        )}
                    </div>
                }
            >
                <ContractFormTabs activeTab={activeTab} onTabChange={setActiveTab} />

                {/* Content */}
                <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
                    {activeTab === 'general' && (
                        <div className="grid grid-cols-2 gap-4">
                            <div className="col-span-2">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Số hợp đồng *</label>
                                {modalMode === 'view' ? (
                                    <div className="font-medium text-slate-900 dark:text-white border p-2 rounded bg-slate-50 dark:bg-slate-700/50 border-slate-200 dark:border-slate-600">{viewingContract?.contractNumber || 'N/A'}</div>
                                ) : (
                                    <div>
                                        <Input
                                            placeholder="Ví dụ: HĐ/2024/001"
                                            value={formData.contractNumber || ''}
                                            onChange={(e) => setFormData({ ...formData, contractNumber: e.target.value })}
                                        />
                                        {validationErrors.contractNumber && (
                                            <p className="text-xs text-red-500 mt-1">{validationErrors.contractNumber}</p>
                                        )}
                                    </div>
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Khách hàng (Bên A) *</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.partyA}</div>
                                ) : (
                                    <div>
                                        <Input
                                            value={formData.partyA || ''}
                                            onChange={(e) => setFormData({ ...formData, partyA: e.target.value })}
                                        />
                                        {validationErrors.partyA && (
                                            <p className="text-xs text-red-500 mt-1">{validationErrors.partyA}</p>
                                        )}
                                    </div>
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Mã khách hàng</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.customerCode || 'N/A'}</div>
                                ) : (
                                    <Input
                                        value={formData.customerCode || ''}
                                        onChange={(e) => setFormData({ ...formData, customerCode: e.target.value })}
                                    />
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Dịch vụ (Bên B)</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.partyB || 'N/A'}</div>
                                ) : (
                                    <Input
                                        value={formData.partyB || ''}
                                        onChange={(e) => setFormData({ ...formData, partyB: e.target.value })}
                                    />
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Nhóm đối tượng</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.customerGroup || 'N/A'}</div>
                                ) : (
                                    <select
                                        className="w-full border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                                        value={formData.customerGroup || ''}
                                        onChange={(e) => setFormData({ ...formData, customerGroup: e.target.value })}
                                    >
                                        <option value="">-- Chọn nhóm đối tượng --</option>
                                        {customerGroups.map(group => (
                                            <option key={group._id} value={group.code}>
                                                {group.name} {group.description ? `(${group.description})` : ''}
                                            </option>
                                        ))}
                                    </select>
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">
                                    Loại hợp đồng
                                    {modalMode !== 'view' && (
                                        <button
                                            type="button"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setIsContractTypesModalOpen(true);
                                                loadContractTypes();
                                            }}
                                            className="ml-2 text-xs text-blue-600 hover:underline"
                                            title="Quản lý loại hợp đồng"
                                        >
                                            <Settings2 size={12} className="inline" />
                                        </button>
                                    )}
                                </label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">
                                        {contractTypes.find(t => t.code === viewingContract?.contractType)?.name || viewingContract?.contractType} 
                                        {viewingContract?.isFree ? ' (Miễn phí/EPC)' : ''}
                                    </div>
                                ) : (
                                    <div className="flex items-center gap-4">
                                        <select
                                            className="flex-1 border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                                            value={formData.contractType || ''}
                                            onChange={(e) => setFormData({ ...formData, contractType: e.target.value })}
                                        >
                                            <option value="">-- Chọn loại hợp đồng --</option>
                                            {contractTypes.map(type => (
                                                <option key={type._id} value={type.code}>
                                                    {type.name} {type.description ? `(${type.description})` : ''}
                                                </option>
                                            ))}
                                        </select>
                                        <label className="flex items-center gap-2 text-xs font-medium cursor-pointer">
                                            <input
                                                type="checkbox"
                                                checked={formData.isFree || false}
                                                onChange={(e) => setFormData({ ...formData, isFree: e.target.checked })}
                                                className="rounded text-blue-600"
                                            />
                                            Miễn phí
                                        </label>
                                    </div>
                                )}
                            </div>
                            <div className="col-span-2">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Địa chỉ thi công</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.siteAddress || 'N/A'}</div>
                                ) : (
                                    <Input
                                        value={formData.siteAddress || ''}
                                        onChange={(e) => setFormData({ ...formData, siteAddress: e.target.value })}
                                    />
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Công suất dự án (kWp)</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200 font-bold">{viewingContract?.capacityKWp ? `${formatNumber(viewingContract.capacityKWp)} kWp` : 'N/A'}</div>
                                ) : (
                                    <Input
                                        type="number"
                                        value={formData.capacityKWp || ''}
                                        onChange={(e) => setFormData({ ...formData, capacityKWp: Number(e.target.value) })}
                                    />
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Trạng thái</label>
                                {modalMode === 'view' ? (
                                    <span className={`px-2 py-1 rounded text-xs font-bold inline-block ${getStatusColor(viewingContract?.status || '')}`}>
                                        {CONTRACT_STATUSES[viewingContract?.status || ''] || viewingContract?.status}
                                    </span>
                                ) : (
                                    <select
                                        className="w-full border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                                        value={formData.status || ''}
                                        onChange={(e) => setFormData({ ...formData, status: e.target.value as ContractStatus })}
                                    >
                                        <option value="draft">Bản nháp</option>
                                        <option value="active">Hiệu lực</option>
                                        <option value="negotiating">Đàm phán</option>
                                        <option value="Expiring">Sắp hết hạn</option>
                                        <option value="expired">Hết hạn</option>
                                        <option value="completed">Hoàn tất</option>
                                        <option value="terminated">Chấm dứt</option>
                                    </select>
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Ngày bắt đầu</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.startDate ? new Date(viewingContract.startDate).toLocaleDateString('vi-VN') : 'N/A'}</div>
                                ) : (
                                    <Input
                                        type="date"
                                        value={formData.startDate ? new Date(formData.startDate).toISOString().split('T')[0] : ''}
                                        onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                                    />
                                )}
                            </div>
                            <div className="col-span-2 md:col-span-1">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Ngày kết thúc</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-800 dark:text-slate-200">{viewingContract?.endDate ? new Date(viewingContract.endDate).toLocaleDateString('vi-VN') : 'N/A'}</div>
                                ) : (
                                    <div>
                                        <Input
                                            type="date"
                                            value={formData.endDate ? new Date(formData.endDate).toISOString().split('T')[0] : ''}
                                            onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                                        />
                                        {validationErrors.endDate && (
                                            <p className="text-xs text-red-500 mt-1">{validationErrors.endDate}</p>
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {activeTab === 'financial' && (
                        <div className="space-y-4">
                            <div className="grid grid-cols-2 gap-4 bg-slate-50 dark:bg-slate-700/30 p-4 rounded-lg">
                                <div>
                                    <label className="block text-xs font-bold text-slate-500 mb-1">Giá trị hợp đồng</label>
                                    {modalMode === 'view' ? (
                                        <div className="text-lg font-bold text-blue-600">{formatCurrency(viewingContract?.value || 0)}</div>
                                    ) : (
                                        <Input
                                            type="number"
                                            value={formData.value || ''}
                                            onChange={(e) => setFormData({ ...formData, value: Number(e.target.value) })}
                                        />
                                    )}
                                </div>
                                <div>
                                    <label className="block text-xs font-bold text-slate-500 mb-1">Nợ quá hạn</label>
                                    {modalMode === 'view' ? (
                                        <div className="text-lg font-bold text-red-600">{formatCurrency(viewingContract?.debtAmount || 0)}</div>
                                    ) : (
                                        <Input
                                            type="number"
                                            value={formData.debtAmount || ''}
                                            onChange={(e) => setFormData({ ...formData, debtAmount: Number(e.target.value) })}
                                        />
                                    )}
                                </div>
                                <div className="col-span-2 md:col-span-1">
                                    <label className="block text-xs font-bold text-slate-500 mb-1">Chu kỳ thanh toán</label>
                                    {modalMode === 'view' ? (
                                        <div className="text-sm">{viewingContract?.paymentCycle === '30_days' ? '30 Ngày' : viewingContract?.paymentCycle === '60_days' ? '60 Ngày' : 'Khác'}</div>
                                    ) : (
                                        <select
                                            className="w-full border border-slate-300 dark:border-slate-600 rounded-md text-sm p-2 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                                            value={formData.paymentCycle || ''}
                                            onChange={(e) => setFormData({ ...formData, paymentCycle: e.target.value as any })}
                                        >
                                            <option value="30_days">30 Ngày</option>
                                            <option value="60_days">60 Ngày</option>
                                            <option value="custom">Khác</option>
                                        </select>
                                    )}
                                </div>
                            </div>

                            <div>
                                <h4 className="font-bold text-sm mb-2 flex items-center gap-2"><DollarSign size={16} /> Phân bổ doanh thu (Dự kiến)</h4>
                                {viewingContract?.revenuePlan ? (
                                    <div className="overflow-x-auto">
                                        <table className="w-full text-xs text-left border border-slate-200 dark:border-slate-600 rounded">
                                            <thead className="bg-slate-100 dark:bg-slate-700">
                                                <tr>
                                                    <th className="p-2 border-r border-slate-200 dark:border-slate-600">Năm</th>
                                                    <th className="p-2 border-r border-slate-200 dark:border-slate-600">Q1</th>
                                                    <th className="p-2 border-r border-slate-200 dark:border-slate-600">Q2</th>
                                                    <th className="p-2 border-r border-slate-200 dark:border-slate-600">Q3</th>
                                                    <th className="p-2">Q4</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {viewingContract.revenuePlan.map(plan => (
                                                    <tr key={plan.year} className="border-t border-slate-200 dark:border-slate-600">
                                                        <td className="p-2 font-bold border-r border-slate-200 dark:border-slate-600">{plan.year}</td>
                                                        <td className="p-2 border-r border-slate-200 dark:border-slate-600">{formatCurrency(plan.q1, 'VND', true)}</td>
                                                        <td className="p-2 border-r border-slate-200 dark:border-slate-600">{formatCurrency(plan.q2, 'VND', true)}</td>
                                                        <td className="p-2 border-r border-slate-200 dark:border-slate-600">{formatCurrency(plan.q3, 'VND', true)}</td>
                                                        <td className="p-2">{formatCurrency(plan.q4, 'VND', true)}</td>
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                ) : <p className="text-sm text-slate-400 italic">Chưa có kế hoạch doanh thu.</p>}
                            </div>
                        </div>
                    )}

                    {activeTab === 'service' && (
                        <div className="space-y-4">
                            <div className="flex justify-between items-center bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                                <div className="flex-1 mr-4">
                                    <p className="text-sm font-bold text-slate-700 dark:text-slate-200">Cam kết dịch vụ</p>
                                    {modalMode === 'view' ? (
                                        <p className="text-xs text-slate-500">{viewingContract?.serviceFrequency || 'N/A'}</p>
                                    ) : (
                                        <Input
                                            placeholder="Ví dụ: 4 lần/năm"
                                            value={formData.serviceFrequency || ''}
                                            onChange={(e) => setFormData({ ...formData, serviceFrequency: e.target.value })}
                                        />
                                    )}
                                </div>
                                <div className="text-2xl font-bold text-blue-600">
                                    {modalMode === 'view' ? (
                                        <>{viewingContract?.serviceTotal || 0} <span className="text-sm font-normal text-slate-500">lần</span></>
                                    ) : (
                                        <div className="w-24">
                                            <Input
                                                type="number"
                                                value={formData.serviceTotal || ''}
                                                onChange={(e) => setFormData({ ...formData, serviceTotal: Number(e.target.value) })}
                                            />
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg text-center">
                                    <p className="text-xs text-slate-500 uppercase">Đã thực hiện</p>
                                    {modalMode === 'view' ? (
                                        <p className="text-xl font-bold text-green-600">{viewingContract?.servicePerformed || 0}</p>
                                    ) : (
                                        <Input
                                            type="number"
                                            className="text-center"
                                            value={formData.servicePerformed || ''}
                                            onChange={(e) => setFormData({ ...formData, servicePerformed: Number(e.target.value) })}
                                        />
                                    )}
                                </div>
                                <div className="p-4 border border-slate-200 dark:border-slate-700 rounded-lg text-center">
                                    <p className="text-xs text-slate-500 uppercase">Còn lại</p>
                                    <p className="text-xl font-bold text-orange-600">
                                        {modalMode === 'view'
                                            ? (viewingContract?.serviceTotal || 0) - (viewingContract?.servicePerformed || 0)
                                            : (formData.serviceTotal || 0) - (formData.servicePerformed || 0)
                                        }
                                    </p>
                                </div>
                            </div>

                            <div className="mt-4">
                                <h4 className="font-bold text-sm mb-2 flex items-center gap-2"><FileText size={16} /> Trạng thái tiến độ</h4>
                                <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-4">
                                    <div
                                        className="bg-blue-600 h-4 rounded-full flex items-center justify-center text-[10px] text-white font-bold"
                                        style={{ width: `${Math.min(((modalMode === 'view' ? viewingContract?.servicePerformed : formData.servicePerformed) || 0) / ((modalMode === 'view' ? viewingContract?.serviceTotal : formData.serviceTotal) || 1) * 100, 100)}%` }}
                                    >
                                        {Math.round(((modalMode === 'view' ? viewingContract?.servicePerformed : formData.servicePerformed) || 0) / ((modalMode === 'view' ? viewingContract?.serviceTotal : formData.serviceTotal) || 1) * 100)}%
                                    </div>
                                </div>
                                {viewingContract && (viewingContract.servicePerformed || 0) < (viewingContract.serviceTotal || 0) * 0.5 && new Date(viewingContract.endDate) < new Date(new Date().setMonth(new Date().getMonth() + 6)) && (
                                    <div className="flex items-center gap-2 mt-2 text-xs text-red-600 bg-red-50 p-2 rounded">
                                        <AlertTriangle size={14} /> Cảnh báo: Tiến độ thực hiện thấp so với thời hạn hợp đồng còn lại.
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {activeTab === 'notes' && (
                        <div className="space-y-4">
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-2">Ghi chú & Điều khoản</label>
                                {modalMode === 'view' ? (
                                    <div className="text-sm text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-700/50 p-3 rounded border border-slate-200 dark:border-slate-600 min-h-[100px]">
                                        {viewingContract?.notes || 'Không có ghi chú.'}
                                    </div>
                                ) : (
                                    <textarea
                                        className="w-full border border-slate-300 dark:border-slate-600 rounded-md text-sm p-3 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none min-h-[150px]"
                                        value={formData.notes || ''}
                                        onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                        placeholder="Nhập ghi chú hoặc điều khoản đặc biệt..."
                                    />
                                )}
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-1">Link văn bản (PDF/Doc)</label>
                                {modalMode === 'view' ? (
                                    viewingContract?.documentUrl ? (
                                        <a href={viewingContract.documentUrl} target="_blank" rel="noreferrer" className="flex items-center gap-2 text-blue-600 hover:underline text-sm mt-1">
                                            <FileText size={16} /> Xem hợp đồng gốc (Link)
                                        </a>
                                    ) : <span className="text-sm text-slate-400">Chưa tải lên văn bản.</span>
                                ) : (
                                    <Input
                                        placeholder="https://example.com/contract.pdf"
                                        value={formData.documentUrl || ''}
                                        onChange={(e) => setFormData({ ...formData, documentUrl: e.target.value })}
                                    />
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </Modal>

            {/* Customer Groups Management Modal */}
            <Modal
                isOpen={isGroupsModalOpen}
                onClose={() => {
                    setIsGroupsModalOpen(false);
                    setEditingGroup(null);
                    setGroupFormData({});
                }}
                title="Quản lý Nhóm đối tượng"
                maxWidth="xl"
                footer={
                    <div className="flex gap-3 w-full">
                        <button
                            onClick={() => {
                                setIsGroupsModalOpen(false);
                                setEditingGroup(null);
                                setGroupFormData({});
                            }}
                            className="flex-1 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white p-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
                        >
                            Đóng
                        </button>
                        {editingGroup && (
                            <button
                                onClick={async () => {
                                    setIsSavingGroup(true);
                                    try {
                                        await dataService.deleteCustomerGroup(editingGroup._id);
                                        addNotification('success', 'Đã xóa nhóm đối tượng thành công');
                                        await loadCustomerGroups();
                                        setEditingGroup(null);
                                        setGroupFormData({});
                                    } catch (err: any) {
                                        addNotification('error', err.message || 'Lỗi khi xóa nhóm đối tượng');
                                    } finally {
                                        setIsSavingGroup(false);
                                    }
                                }}
                                disabled={isSavingGroup}
                                className="flex-1 bg-red-600 text-white p-2 rounded text-sm hover:bg-red-700 transition-colors disabled:opacity-50 font-bold"
                            >
                                {isSavingGroup ? 'Đang xóa...' : 'Xóa'}
                            </button>
                        )}
                        <button
                            onClick={async () => {
                                if (!groupFormData.name || !groupFormData.code) {
                                    addNotification('error', 'Vui lòng nhập đầy đủ tên và mã nhóm');
                                    return;
                                }
                                setIsSavingGroup(true);
                                try {
                                    if (editingGroup) {
                                        await dataService.updateCustomerGroup(editingGroup._id, groupFormData);
                                        addNotification('success', 'Đã cập nhật nhóm đối tượng thành công');
                                    } else {
                                        await dataService.createCustomerGroup(groupFormData);
                                        addNotification('success', 'Đã tạo nhóm đối tượng thành công');
                                    }
                                    await loadCustomerGroups();
                                    setEditingGroup(null);
                                    setGroupFormData({});
                                } catch (err: any) {
                                    addNotification('error', err.message || 'Lỗi khi lưu nhóm đối tượng');
                                } finally {
                                    setIsSavingGroup(false);
                                }
                            }}
                            disabled={isSavingGroup}
                            className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700 transition-colors disabled:opacity-50 font-bold"
                        >
                            {isSavingGroup ? 'Đang lưu...' : editingGroup ? 'Cập nhật' : 'Thêm mới'}
                        </button>
                    </div>
                }
            >
                <div className="space-y-4">
                    {/* Form */}
                    <div className="bg-slate-50 dark:bg-slate-700/30 p-4 rounded-lg space-y-4">
                        <h3 className="font-bold text-sm text-slate-700 dark:text-slate-300">
                            {editingGroup ? 'Chỉnh sửa nhóm đối tượng' : 'Thêm nhóm đối tượng mới'}
                        </h3>
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-1">Tên nhóm *</label>
                                <Input
                                    placeholder="Ví dụ: TTE, Eco, Assetco"
                                    value={groupFormData.name || ''}
                                    onChange={(e) => setGroupFormData({ ...groupFormData, name: e.target.value })}
                                />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-1">Mã nhóm *</label>
                                <Input
                                    placeholder="Ví dụ: TTE, ECO, ASSETCO"
                                    value={groupFormData.code || ''}
                                    onChange={(e) => setGroupFormData({ ...groupFormData, code: e.target.value.toUpperCase() })}
                                />
                            </div>
                            <div className="col-span-2">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Mô tả</label>
                                <Input
                                    placeholder="Mô tả về nhóm đối tượng này"
                                    value={groupFormData.description || ''}
                                    onChange={(e) => setGroupFormData({ ...groupFormData, description: e.target.value })}
                                />
                            </div>
                        </div>
                        {editingGroup && (
                            <button
                                onClick={() => {
                                    setEditingGroup(null);
                                    setGroupFormData({});
                                }}
                                className="text-xs text-blue-600 hover:underline"
                            >
                                Hủy chỉnh sửa
                            </button>
                        )}
                    </div>

                    {/* List */}
                    <div>
                        <h3 className="font-bold text-sm text-slate-700 dark:text-slate-300 mb-3">Danh sách nhóm đối tượng</h3>
                        <div className="space-y-2 max-h-[400px] overflow-y-auto">
                            {customerGroups.length === 0 ? (
                                <div className="text-center py-8 text-slate-400 text-sm">
                                    Chưa có nhóm đối tượng nào. Hãy thêm nhóm đầu tiên.
                                </div>
                            ) : (
                                customerGroups.map(group => (
                                    <div
                                        key={group._id}
                                        className={`flex items-center justify-between p-3 rounded-lg border ${
                                            editingGroup?._id === group._id
                                                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                                                : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800'
                                        }`}
                                    >
                                        <div className="flex-1">
                                            <div className="flex items-center gap-2">
                                                <span className="font-bold text-slate-800 dark:text-white">{group.name}</span>
                                                <span className="text-xs px-2 py-0.5 bg-slate-200 dark:bg-slate-700 rounded text-slate-600 dark:text-slate-400">
                                                    {group.code}
                                                </span>
                                                {!group.isActive && (
                                                    <span className="text-xs px-2 py-0.5 bg-red-100 text-red-700 rounded">
                                                        Đã vô hiệu hóa
                                                    </span>
                                                )}
                                            </div>
                                            {group.description && (
                                                <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                                    {group.description}
                                                </div>
                                            )}
                                        </div>
                                        <button
                                            onClick={() => {
                                                setEditingGroup(group);
                                                setGroupFormData({
                                                    name: group.name,
                                                    code: group.code,
                                                    description: group.description || '',
                                                });
                                            }}
                                            className="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                                        >
                                            Sửa
                                        </button>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </Modal>

            {/* Contract Types Management Modal */}
            <Modal
                isOpen={isContractTypesModalOpen}
                onClose={() => {
                    setIsContractTypesModalOpen(false);
                    setEditingContractType(null);
                    setContractTypeFormData({});
                }}
                title="Quản lý Loại hợp đồng"
                maxWidth="xl"
                footer={
                    <div className="flex gap-3 w-full">
                        <button
                            onClick={() => {
                                setIsContractTypesModalOpen(false);
                                setEditingContractType(null);
                                setContractTypeFormData({});
                            }}
                            className="flex-1 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-white p-2 rounded text-sm hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
                        >
                            Đóng
                        </button>
                        {editingContractType && (
                            <button
                                onClick={async () => {
                                    setIsSavingContractType(true);
                                    try {
                                        await dataService.deleteContractType(editingContractType._id);
                                        addNotification('success', 'Đã xóa loại hợp đồng thành công');
                                        await loadContractTypes();
                                        setEditingContractType(null);
                                        setContractTypeFormData({});
                                    } catch (err: any) {
                                        addNotification('error', err.message || 'Lỗi khi xóa loại hợp đồng');
                                    } finally {
                                        setIsSavingContractType(false);
                                    }
                                }}
                                disabled={isSavingContractType}
                                className="flex-1 bg-red-600 text-white p-2 rounded text-sm hover:bg-red-700 transition-colors disabled:opacity-50 font-bold"
                            >
                                {isSavingContractType ? 'Đang xóa...' : 'Xóa'}
                            </button>
                        )}
                        <button
                            onClick={async () => {
                                if (!contractTypeFormData.name || !contractTypeFormData.code) {
                                    addNotification('error', 'Vui lòng nhập đầy đủ tên và mã loại hợp đồng');
                                    return;
                                }
                                setIsSavingContractType(true);
                                try {
                                    if (editingContractType) {
                                        await dataService.updateContractType(editingContractType._id, contractTypeFormData);
                                        addNotification('success', 'Đã cập nhật loại hợp đồng thành công');
                                    } else {
                                        await dataService.createContractType(contractTypeFormData);
                                        addNotification('success', 'Đã tạo loại hợp đồng thành công');
                                    }
                                    await loadContractTypes();
                                    setEditingContractType(null);
                                    setContractTypeFormData({});
                                } catch (err: any) {
                                    addNotification('error', err.message || 'Lỗi khi lưu loại hợp đồng');
                                } finally {
                                    setIsSavingContractType(false);
                                }
                            }}
                            disabled={isSavingContractType}
                            className="flex-1 bg-blue-600 text-white p-2 rounded text-sm hover:bg-blue-700 transition-colors disabled:opacity-50 font-bold"
                        >
                            {isSavingContractType ? 'Đang lưu...' : editingContractType ? 'Cập nhật' : 'Thêm mới'}
                        </button>
                    </div>
                }
            >
                <div className="space-y-4">
                    {/* Form */}
                    <div className="bg-slate-50 dark:bg-slate-700/30 p-4 rounded-lg space-y-4">
                        <h3 className="font-bold text-sm text-slate-700 dark:text-slate-300">
                            {editingContractType ? 'Chỉnh sửa loại hợp đồng' : 'Thêm loại hợp đồng mới'}
                        </h3>
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-1">Tên loại hợp đồng *</label>
                                <Input
                                    placeholder="Ví dụ: O&M, EPC, PPA"
                                    value={contractTypeFormData.name || ''}
                                    onChange={(e) => setContractTypeFormData({ ...contractTypeFormData, name: e.target.value })}
                                />
                            </div>
                            <div>
                                <label className="block text-xs font-bold text-slate-500 mb-1">Mã loại hợp đồng *</label>
                                <Input
                                    placeholder="Ví dụ: OM, EPC, PPA"
                                    value={contractTypeFormData.code || ''}
                                    onChange={(e) => setContractTypeFormData({ ...contractTypeFormData, code: e.target.value.toUpperCase() })}
                                />
                            </div>
                            <div className="col-span-2">
                                <label className="block text-xs font-bold text-slate-500 mb-1">Mô tả</label>
                                <Input
                                    placeholder="Mô tả về loại hợp đồng này"
                                    value={contractTypeFormData.description || ''}
                                    onChange={(e) => setContractTypeFormData({ ...contractTypeFormData, description: e.target.value })}
                                />
                            </div>
                        </div>
                        {editingContractType && (
                            <button
                                onClick={() => {
                                    setEditingContractType(null);
                                    setContractTypeFormData({});
                                }}
                                className="text-xs text-blue-600 hover:underline"
                            >
                                Hủy chỉnh sửa
                            </button>
                        )}
                    </div>

                    {/* List */}
                    <div>
                        <h3 className="font-bold text-sm text-slate-700 dark:text-slate-300 mb-3">Danh sách loại hợp đồng</h3>
                        <div className="space-y-2 max-h-[400px] overflow-y-auto">
                            {contractTypes.length === 0 ? (
                                <div className="text-center py-8 text-slate-400 text-sm">
                                    Chưa có loại hợp đồng nào. Hãy thêm loại đầu tiên.
                                </div>
                            ) : (
                                contractTypes.map(type => (
                                    <div
                                        key={type._id}
                                        className={`flex items-center justify-between p-3 rounded-lg border ${
                                            editingContractType?._id === type._id
                                                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                                                : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800'
                                        }`}
                                    >
                                        <div className="flex-1">
                                            <div className="flex items-center gap-2">
                                                <span className="font-bold text-slate-800 dark:text-white">{type.name}</span>
                                                <span className="text-xs px-2 py-0.5 bg-slate-200 dark:bg-slate-700 rounded text-slate-600 dark:text-slate-400">
                                                    {type.code}
                                                </span>
                                                {!type.isActive && (
                                                    <span className="text-xs px-2 py-0.5 bg-red-100 text-red-700 rounded">
                                                        Đã vô hiệu hóa
                                                    </span>
                                                )}
                                            </div>
                                            {type.description && (
                                                <div className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                                    {type.description}
                                                </div>
                                            )}
                                        </div>
                                        <button
                                            onClick={() => {
                                                setEditingContractType(type);
                                                setContractTypeFormData({
                                                    name: type.name,
                                                    code: type.code,
                                                    description: type.description || '',
                                                });
                                            }}
                                            className="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                                        >
                                            Sửa
                                        </button>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    );
};

export default Contracts;