import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { dataService } from '../services/dataService';
import { IReport } from '../types';
import { FileText, Download, Filter, Plus, FileSpreadsheet, File, Trash2, Loader2, Search, ArrowUpDown, Calendar, X, CheckCircle } from 'lucide-react';
import Modal from '../components/Modal';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';
import { downloadFromBase64, downloadFromBlob, downloadFromUrl, sanitizeFilename } from '../utils/reportDownload';
import { reportTypeVi, reportStatusVi } from '../utils/displayVi';

// Constants
const REFRESH_INTERVAL = 5000; // 5 seconds
const ITEMS_PER_PAGE = 10;

function reportCreatedBySearchText(createdBy: IReport['createdBy']): string {
  if (typeof createdBy === 'string') return createdBy;
  if (createdBy && typeof createdBy === 'object') {
    return [createdBy.name, createdBy.email].filter(Boolean).join(' ');
  }
  return '';
}

const Reports: React.FC = () => {
  const { selectedProjectId } = useAssetStore();
  const { addNotification } = useUIStore();
  const [reports, setReports] = useState<IReport[]>([]);
  const [loading, setLoading] = useState(true);
  const [downloadingIds, setDownloadingIds] = useState<Set<string>>(new Set());
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [newReportType, setNewReportType] = useState<IReport['type']>('Monthly');
  
  // Filter & Search State
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [typeFilter, setTypeFilter] = useState<string>('all');
  const [sortField, setSortField] = useState<keyof IReport>('generatedDate');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
  const [currentPage, setCurrentPage] = useState(1);
  
  // Date range for report generation
  const [startDate, setStartDate] = useState<string>('');
  const [endDate, setEndDate] = useState<string>('');
  const [selectedMonth, setSelectedMonth] = useState<string>(''); // For Monthly report (YYYY-MM format)
  const [sendEmail, setSendEmail] = useState(false);
  const [financialData, setFinancialData] = useState<any>(null); // For Financial report

  const loadReports = useCallback(async () => {
    if (!selectedProjectId) return;
    setLoading(true);
    try {
      const data = await dataService.getReports(selectedProjectId);
      console.log('Loaded reports:', data.length, 'reports for projectId:', selectedProjectId);
      setReports(data);
    } catch (error) {
      console.error('Error loading reports:', error);
    } finally {
      setLoading(false);
    }
  }, [selectedProjectId]);

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

  // Auto-refresh reports list if there are any processing reports
  useEffect(() => {
    const hasProcessingReports = reports.some(r => r.status === 'Processing');
    if (!hasProcessingReports || !selectedProjectId) return;

    // Use shorter interval when there are processing reports for faster updates
    const interval = setInterval(() => {
      loadReports().catch(err => {
        console.error('Error auto-refreshing reports:', err);
      });
    }, REFRESH_INTERVAL);

    return () => clearInterval(interval);
  }, [reports, selectedProjectId, loadReports]);

  const handleGenerateReport = async () => {
    try {
      let title = '';
      let reportData: any = {};
      
      // Build title based on report type
      if (newReportType === 'Daily') {
        const dateStr = startDate 
          ? new Date(startDate).toLocaleDateString('vi-VN')
          : new Date().toLocaleDateString('vi-VN');
        title = `Báo cáo Ngày ${dateStr}`;
      } else if (newReportType === 'Monthly') {
        if (selectedMonth) {
          const [year, month] = selectedMonth.split('-');
          const monthStr = new Date(parseInt(year), parseInt(month) - 1, 1).toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' });
          title = `Báo cáo Tháng ${monthStr}`;
        } else {
          // Default to current month
          const now = new Date();
          const monthStr = now.toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' });
          title = `Báo cáo Tháng ${monthStr}`;
        }
      } else if (newReportType === 'Financial') {
        const dateRange = startDate && endDate 
          ? ` (${new Date(startDate).toLocaleDateString('vi-VN')} - ${new Date(endDate).toLocaleDateString('vi-VN')})`
          : ' 12 tháng gần nhất';
        title = `Báo cáo Tài chính${dateRange}`;
        // Include financialData if available (from Finance page context)
        if (financialData) {
          reportData.financialData = financialData;
        }
      } else if (newReportType === 'Audit') {
        const dateRange = startDate && endDate 
          ? ` (${new Date(startDate).toLocaleDateString('vi-VN')} - ${new Date(endDate).toLocaleDateString('vi-VN')})`
          : ' tháng gần nhất';
        title = `Báo cáo Audit${dateRange}`;
      } else {
        title = `Báo cáo ${newReportType} - ${new Date().toLocaleDateString('vi-VN')}`;
      }
      
      const newReport = await dataService.generateReport(
        newReportType, 
        title, 
        selectedProjectId || undefined,
        null, // screenshot (deprecated)
        reportData.financialData || undefined // financialData
      );
      addNotification('success', 'Đã tạo yêu cầu báo cáo thành công. Báo cáo đang được xử lý...');
      setIsModalOpen(false);
      // Reset form
      setStartDate('');
      setEndDate('');
      setSelectedMonth('');
      setSendEmail(false);
      setFinancialData(null);
      
      // If we got the new report from response, add it to the list immediately (optimistic update)
      if (newReport) {
        setReports(prev => {
          // Check if report already exists (avoid duplicates)
          const exists = prev.some(r => r._id === newReport._id);
          if (exists) {
            // Update existing report
            return prev.map(r => r._id === newReport._id ? newReport : r);
          }
          // Add new report at the beginning (most recent first)
          return [newReport, ...prev];
        });
      }
      
      // Wait a bit for backend to save the report to DB before loading
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // Load reports to ensure we have the latest data
      await loadReports();
      
      // Poll multiple times to catch the report when it becomes Ready
      // Backend generates PDF after ~2 seconds (setTimeout 2000ms)
      // Poll at 1s, 2.5s, 3.5s, 4.5s, 6s, 8s to ensure we catch it
      const pollTimes = [1000, 2500, 3500, 4500, 6000, 8000];
      pollTimes.forEach(delay => {
        setTimeout(() => {
          loadReports().catch(err => {
            console.error('Error polling reports:', err);
          });
        }, delay);
      });
    } catch (error: any) {
      addNotification('error', error.message || 'Lỗi khi tạo báo cáo');
    }
  };

  // Memoized statistics
  const stats = useMemo(() => {
    return {
      total: reports.length,
      ready: reports.filter(r => r.status === 'Ready').length,
      processing: reports.filter(r => r.status === 'Processing').length,
      failed: reports.filter(r => r.status === 'Failed').length,
      byType: {
        Daily: reports.filter(r => r.type === 'Daily').length,
        Monthly: reports.filter(r => r.type === 'Monthly').length,
        Audit: reports.filter(r => r.type === 'Audit').length,
        Financial: reports.filter(r => r.type === 'Financial').length,
        Custom: reports.filter(r => r.type === 'Custom').length,
      }
    };
  }, [reports]);

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

    // Apply search filter
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(report => 
        report.title?.toLowerCase().includes(query) ||
        report.type?.toLowerCase().includes(query) ||
        reportCreatedBySearchText(report.createdBy).toLowerCase().includes(query) ||
        report.format?.toLowerCase().includes(query)
      );
    }

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

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

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

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

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

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

    return filtered;
  }, [reports, searchQuery, statusFilter, typeFilter, sortField, sortDirection]);

  // Paginated reports
  const paginatedReports = useMemo(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    return filteredAndSortedReports.slice(startIndex, startIndex + ITEMS_PER_PAGE);
  }, [filteredAndSortedReports, currentPage]);

  const totalPages = Math.ceil(filteredAndSortedReports.length / ITEMS_PER_PAGE);

  // Sort handler
  const handleSort = useCallback((field: keyof IReport) => {
    if (sortField === field) {
      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
      } else {
      setSortField(field);
      setSortDirection('desc');
    }
    setCurrentPage(1); // Reset to first page when sorting
  }, [sortField, sortDirection]);

  /**
   * Main download handler
   */
  const handleDownload = async (report: IReport) => {
    // Validate report status
    if (report.status === 'Processing') {
      addNotification('warning', 'Báo cáo đang được xử lý, vui lòng thử lại sau.');
      return;
    }
    if (report.status === 'Failed') {
      addNotification('error', 'Tạo báo cáo thất bại. Vui lòng thử lại.');
      return;
    }

    // Check if already downloading
    if (downloadingIds.has(report._id)) {
      return;
    }

    const reportId = report._id;
    setDownloadingIds(prev => new Set(prev).add(reportId));

    try {
      const extension = report.format.toLowerCase();
      const filename = sanitizeFilename(report.title, extension);

      // Case 1: Base64 data URL - Try API endpoint first for better reliability
      if (report.downloadUrl?.startsWith('data:')) {
        try {
          const blob = await dataService.downloadReport(reportId);
          downloadFromBlob(blob, filename);
          addNotification('success', 'Đã tải xuống báo cáo thành công');
          return;
        } catch (apiError: any) {
          console.warn('API endpoint download failed, trying base64 decode as fallback:', apiError.message);
          try {
            await downloadFromBase64(report.downloadUrl, filename);
            addNotification('success', 'Đã tải xuống báo cáo thành công');
            return;
          } catch (base64Error: any) {
            console.error('Both API endpoint and base64 decode failed:', {
              apiError: apiError.message,
              base64Error: base64Error.message
            });
            
            if (apiError.message?.includes('404') || apiError.message?.includes('not found')) {
              throw new Error('Báo cáo không tìm thấy trên server. Vui lòng thử tạo lại báo cáo.');
            }
            
            throw new Error(`Không thể tải báo cáo. Vui lòng thử lại sau.`);
          }
        }
      }
      // Case 2: Try API endpoint download first
      else if (report.downloadUrl === '#' || !report.downloadUrl) {
        try {
          const blob = await dataService.downloadReport(reportId);
          downloadFromBlob(blob, filename);
          addNotification('success', 'Đã tải xuống báo cáo thành công');
        } catch (apiError: any) {
          throw new Error(`Không thể tải báo cáo từ server: ${apiError.message}`);
        }
      }
      // Case 3: External URL (HTTP/HTTPS)
      else if (report.downloadUrl.startsWith('http://') || report.downloadUrl.startsWith('https://')) {
        await downloadFromUrl(report.downloadUrl, filename);
        addNotification('success', 'Đã tải xuống báo cáo thành công');
      }
      // Case 4: Relative URL or other
      else {
        const link = document.createElement('a');
        link.href = report.downloadUrl;
        link.download = filename;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        addNotification('success', 'Đã tải xuống báo cáo thành công');
      }
    } catch (error: any) {
      console.error('Download error:', error);
      addNotification('error', `Lỗi khi tải xuống báo cáo: ${error.message || 'Vui lòng thử lại sau.'}`);
    } finally {
      setDownloadingIds(prev => {
        const next = new Set(prev);
        next.delete(reportId);
        return next;
      });
    }
  };

  const handleDeleteReport = async (reportId: string) => {
    try {
      await dataService.deleteReport(reportId);
      addNotification('success', 'Đã xóa báo cáo thành công');
      await loadReports();
    } catch (error: any) {
      addNotification('error', error.message || 'Xóa báo cáo thất bại');
    }
  };

  const getIcon = (format: string) => {
    if (format === 'PDF') return <FileText className="text-red-500" size={20} />;
    if (format === 'Excel') return <FileSpreadsheet className="text-green-500" size={20} />;
    return <File className="text-slate-500" size={20} />;
  };

  const getStatusBadge = (status: IReport['status']) => {
    const baseClasses = 'px-2 py-1 text-xs font-semibold rounded-full';
    switch (status) {
      case 'Ready':
        return (
          <span className={`${baseClasses} bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400`}>
            Sẵn sàng
          </span>
        );
      case 'Processing':
        return (
          <span className={`${baseClasses} bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 flex items-center gap-1`}>
            <Loader2 size={12} className="animate-spin" />
            Đang xử lý
          </span>
        );
      case 'Failed':
        return (
          <span className={`${baseClasses} bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400`}>
            Thất bại
          </span>
        );
      default:
        return (
          <span className={`${baseClasses} bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400`}>
            {reportStatusVi(String(status))}
          </span>
        );
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="animate-spin text-blue-600 dark:text-blue-400" size={32} />
          <p className="text-slate-600 dark:text-slate-400">Đang tải dữ liệu báo cáo...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Trung tâm Báo cáo (Reports)</h1>
        <button
          onClick={() => setIsModalOpen(true)}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 flex items-center gap-2 transition-colors"
        >
          <Plus size={18} /> Tạo báo cáo mới
        </button>
      </div>

      {/* Statistics Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-slate-500 dark:text-slate-400 text-sm">Tổng số báo cáo</p>
              <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.total}</p>
            </div>
            <FileText className="text-blue-500" size={24} />
          </div>
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-slate-500 dark:text-slate-400 text-sm">Sẵn sàng</p>
              <p className="text-2xl font-bold text-green-600 dark:text-green-400">{stats.ready}</p>
            </div>
            <CheckCircle className="text-green-500" size={24} />
          </div>
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-slate-500 dark:text-slate-400 text-sm">Đang xử lý</p>
              <p className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{stats.processing}</p>
            </div>
            <Loader2 className="text-yellow-500 animate-spin" size={24} />
          </div>
        </div>
        <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-slate-500 dark:text-slate-400 text-sm">Thất bại</p>
              <p className="text-2xl font-bold text-red-600 dark:text-red-400">{stats.failed}</p>
            </div>
            <X className="text-red-500" size={24} />
          </div>
        </div>
      </div>

      {/* Templates / Quick Actions */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { type: 'Daily', label: 'Báo cáo Ngày', desc: 'Sản lượng, PR, Sự cố trong ngày' },
          { type: 'Monthly', label: 'Báo cáo Tháng', desc: 'Tổng hợp vận hành & tài chính tháng' },
          { type: 'Audit', label: 'Báo cáo Audit', desc: 'Dữ liệu phục vụ kiểm toán bên thứ 3' },
          { type: 'Financial', label: 'Báo cáo Tài chính', desc: 'P&L, Doanh thu, Chi phí chi tiết' },
        ].map((tpl) => (
          <div key={tpl.type} className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 hover:border-blue-300 dark:hover:border-blue-500 transition-colors cursor-pointer" onClick={() => {
            setNewReportType(tpl.type as any);
            setIsModalOpen(true);
          }}>
            <div className="flex items-start justify-between mb-2">
              <div className="p-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg">
                <FileText size={20} />
              </div>
              <span className="text-xs font-semibold bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-1 rounded">Mẫu</span>
            </div>
            <h3 className="font-bold text-slate-800 dark:text-white">{tpl.label}</h3>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{tpl.desc}</p>
          </div>
        ))}
      </div>

      {/* Report List */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div className="p-4 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-bold text-slate-700 dark:text-slate-200">Lịch sử báo cáo</h3>
            <div className="flex gap-2">
              <div className="relative">
                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-slate-400" size={16} />
                <input
                  type="text"
                  placeholder="Tìm kiếm báo cáo..."
                  className="pl-8 pr-3 py-1.5 border border-slate-300 dark:border-slate-600 rounded text-sm bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={searchQuery}
                  onChange={(e) => {
                    setSearchQuery(e.target.value);
                    setCurrentPage(1);
                  }}
                />
              </div>
            </div>
          </div>
          <div className="flex gap-2 flex-wrap">
            <select
              className="border-slate-300 dark:border-slate-600 rounded text-sm p-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={statusFilter}
              onChange={(e) => {
                setStatusFilter(e.target.value);
                setCurrentPage(1);
              }}
            >
              <option value="all">Tất cả trạng thái</option>
              <option value="Ready">Sẵn sàng</option>
              <option value="Processing">Đang xử lý</option>
              <option value="Failed">Thất bại</option>
            </select>
            <select
              className="border-slate-300 dark:border-slate-600 rounded text-sm p-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              value={typeFilter}
              onChange={(e) => {
                setTypeFilter(e.target.value);
                setCurrentPage(1);
              }}
            >
              <option value="all">Tất cả loại</option>
              <option value="Daily">Báo cáo Ngày</option>
              <option value="Monthly">Báo cáo Tháng</option>
              <option value="Audit">Báo cáo Audit</option>
              <option value="Financial">Báo cáo Tài chính</option>
              <option value="Custom">Tùy chỉnh</option>
            </select>
            {(searchQuery || statusFilter !== 'all' || typeFilter !== 'all') && (
              <button
                onClick={() => {
                  setSearchQuery('');
                  setStatusFilter('all');
                  setTypeFilter('all');
                  setCurrentPage(1);
                }}
                className="px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-white flex items-center gap-1"
              >
                <X size={14} /> Xóa bộ lọc
              </button>
            )}
          </div>
          {searchQuery && (
            <div className="text-sm text-slate-500 dark:text-slate-400 mt-2">
              Tìm thấy {filteredAndSortedReports.length} báo cáo
            </div>
          )}
        </div>
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
            <thead className="bg-slate-50 dark:bg-slate-700/50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                  <button onClick={() => handleSort('title')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Tên báo cáo <ArrowUpDown size={12} />
                  </button>
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                  <button onClick={() => handleSort('type')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Loại <ArrowUpDown size={12} />
                  </button>
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                  <button onClick={() => handleSort('generatedDate')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Ngày tạo <ArrowUpDown size={12} />
                  </button>
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Người tạo</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                  <button onClick={() => handleSort('status')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                    Trạng thái <ArrowUpDown size={12} />
                  </button>
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Định dạng</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Thao tác</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
              {paginatedReports.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center text-slate-500 dark:text-slate-400">
                    <div className="flex flex-col items-center gap-2">
                      <FileText size={48} className="text-slate-300 dark:text-slate-600" />
                      <p className="text-sm font-medium">
                        {filteredAndSortedReports.length === 0 && reports.length === 0
                          ? 'Chưa có báo cáo nào'
                          : 'Không tìm thấy báo cáo phù hợp'}
                      </p>
                      <p className="text-xs">
                        {filteredAndSortedReports.length === 0 && reports.length === 0
                          ? 'Tạo báo cáo mới để bắt đầu'
                          : 'Thử thay đổi bộ lọc hoặc từ khóa tìm kiếm'}
                      </p>
                    </div>
                  </td>
                </tr>
              ) : (
                paginatedReports.map((report, index) => (
                <tr key={report._id || index} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                  <td className="px-6 py-4 text-sm font-medium text-slate-900 dark:text-white">{report.title}</td>
                  <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">{reportTypeVi(String(report.type))}</td>
                  <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">{new Date(report.generatedDate).toLocaleDateString('vi-VN')}</td>
                  <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
                    {typeof report.createdBy === 'string' 
                      ? report.createdBy 
                      : report.createdBy?.name || report.createdBy?.email || 'N/A'}
                  </td>
                  <td className="px-6 py-4 text-sm">{getStatusBadge(report.status)}</td>
                  <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400 flex items-center gap-2">
                    {getIcon(report.format)} {report.size}
                  </td>
                  <td className="px-6 py-4 text-right">
                    <div className="flex justify-end gap-2">
                      <button
                        onClick={() => handleDownload(report)}
                        disabled={downloadingIds.has(report._id) || report.status === 'Processing'}
                        className={`p-2 rounded transition-colors ${
                          downloadingIds.has(report._id) || report.status === 'Processing'
                            ? 'text-slate-400 dark:text-slate-600 cursor-not-allowed'
                            : 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-slate-700'
                        }`}
                        title={
                          downloadingIds.has(report._id)
                            ? 'Đang tải xuống...'
                            : report.status === 'Processing'
                            ? 'Báo cáo đang được xử lý'
                            : 'Tải xuống'
                        }
                      >
                        {downloadingIds.has(report._id) ? (
                          <Loader2 size={18} className="animate-spin" />
                        ) : (
                        <Download size={18} />
                        )}
                      </button>
                      <button
                        onClick={() => {
                          if (window.confirm('Bạn có chắc chắn muốn xóa báo cáo này không?')) {
                            handleDeleteReport(report._id);
                          }
                        }}
                        disabled={downloadingIds.has(report._id)}
                        className={`p-2 rounded transition-colors ${
                          downloadingIds.has(report._id)
                            ? 'text-slate-400 dark:text-slate-600 cursor-not-allowed'
                            : 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-slate-700'
                        }`}
                        title="Xóa"
                      >
                        <Trash2 size={18} />
                      </button>
                    </div>
                  </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, filteredAndSortedReports.length)} trong tổng số {filteredAndSortedReports.length} báo cáo
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                disabled={currentPage === 1}
                className="px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-600"
              >
                Trước
              </button>
              <div className="flex gap-1">
                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                  let pageNum: number;
                  if (totalPages <= 5) {
                    pageNum = i + 1;
                  } else if (currentPage <= 3) {
                    pageNum = i + 1;
                  } else if (currentPage >= totalPages - 2) {
                    pageNum = totalPages - 4 + i;
                  } else {
                    pageNum = currentPage - 2 + i;
                  }
                  return (
                    <button
                      key={pageNum}
                      onClick={() => setCurrentPage(pageNum)}
                      className={`px-3 py-1.5 text-sm border rounded ${
                        currentPage === pageNum
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600'
                      }`}
                    >
                      {pageNum}
                    </button>
                  );
                })}
              </div>
              <button
                onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                disabled={currentPage === totalPages}
                className="px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-600"
              >
                Sau
              </button>
            </div>
          </div>
        )}
      </div>

      <Modal
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          // Reset form when closing
          setStartDate('');
          setEndDate('');
          setSelectedMonth('');
          setSendEmail(false);
          setFinancialData(null);
        }}
        title="Tạo báo cáo mới"
        footer={
          <>
            <button onClick={handleGenerateReport} className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
              Xác nhận tạo
            </button>
            <button onClick={() => setIsModalOpen(false)} className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
              Hủy
            </button>
          </>
        }
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Loại báo cáo</label>
            <select
              className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={newReportType}
              onChange={(e) => {
                setNewReportType(e.target.value as any);
                // Reset form when changing report type
                setStartDate('');
                setEndDate('');
                setSelectedMonth('');
                setFinancialData(null);
              }}
            >
              <option value="Daily">Báo cáo Ngày</option>
              <option value="Monthly">Báo cáo Tháng</option>
              <option value="Audit">Báo cáo Audit</option>
              <option value="Financial">Báo cáo Tài chính</option>
              <option value="Custom">Tùy chỉnh</option>
            </select>
            <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
              {newReportType === 'Daily' && 'Tổng hợp tickets, work orders và hoạt động trong ngày'}
              {newReportType === 'Monthly' && 'Tổng hợp KPIs, tickets, work orders và tài chính trong tháng'}
              {newReportType === 'Audit' && 'Nhật ký hoạt động và thay đổi trong hệ thống'}
              {newReportType === 'Financial' && 'Phân tích tài chính, doanh thu, chi phí và ROI'}
              {newReportType === 'Custom' && 'Báo cáo tùy chỉnh'}
            </p>
          </div>

          {/* Monthly Report - Month Selector */}
          {newReportType === 'Monthly' && (
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                Chọn tháng báo cáo
              </label>
              <input
                type="month"
                className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                value={selectedMonth}
                onChange={(e) => setSelectedMonth(e.target.value)}
                max={new Date().toISOString().slice(0, 7)} // Can't select future months
              />
              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                {selectedMonth 
                  ? `Báo cáo cho tháng ${new Date(selectedMonth + '-01').toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' })}`
                  : 'Để trống để chọn tháng hiện tại'}
              </p>
            </div>
          )}

          {/* Daily Report - Date Selector */}
          {newReportType === 'Daily' && (
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                Chọn ngày báo cáo
              </label>
              <input
                type="date"
                className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                max={new Date().toISOString().split('T')[0]} // Can't select future dates
              />
              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                {startDate 
                  ? `Báo cáo cho ngày ${new Date(startDate).toLocaleDateString('vi-VN')}`
                  : 'Để trống để chọn ngày hôm nay'}
              </p>
            </div>
          )}

          {/* Financial & Audit Reports - Date Range */}
          {(newReportType === 'Financial' || newReportType === 'Audit') && (
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                  {newReportType === 'Financial' ? 'Từ tháng' : 'Từ ngày'}
                </label>
                {newReportType === 'Financial' ? (
                  <input
                    type="month"
                    className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                    value={startDate}
                    onChange={(e) => setStartDate(e.target.value)}
                    max={endDate || new Date().toISOString().slice(0, 7)}
                  />
                ) : (
                  <input
                    type="date"
                    className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                    value={startDate}
                    onChange={(e) => setStartDate(e.target.value)}
                    max={endDate || new Date().toISOString().split('T')[0]}
                  />
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                  {newReportType === 'Financial' ? 'Đến tháng' : 'Đến ngày'}
                </label>
                {newReportType === 'Financial' ? (
                  <input
                    type="month"
                    className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                    value={endDate}
                    onChange={(e) => setEndDate(e.target.value)}
                    min={startDate || undefined}
                    max={new Date().toISOString().slice(0, 7)}
                  />
                ) : (
                  <input
                    type="date"
                    className="block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm border p-2"
                    value={endDate}
                    onChange={(e) => setEndDate(e.target.value)}
                    min={startDate || undefined}
                    max={new Date().toISOString().split('T')[0]}
                  />
                )}
              </div>
            </div>
          )}

          {(startDate || endDate || selectedMonth) && (
            <div className="flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 p-2 rounded">
              <Calendar size={14} />
              <span>
                {newReportType === 'Monthly' && selectedMonth && (
                  `Báo cáo cho tháng ${new Date(selectedMonth + '-01').toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' })}`
                )}
                {newReportType === 'Daily' && startDate && (
                  `Báo cáo cho ngày ${new Date(startDate).toLocaleDateString('vi-VN')}`
                )}
                {(newReportType === 'Financial' || newReportType === 'Audit') && startDate && endDate && (
                  `Báo cáo từ ${newReportType === 'Financial' ? 'tháng' : 'ngày'} ${newReportType === 'Financial' ? new Date(startDate + '-01').toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' }) : new Date(startDate).toLocaleDateString('vi-VN')} đến ${newReportType === 'Financial' ? new Date(endDate + '-01').toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' }) : new Date(endDate).toLocaleDateString('vi-VN')}`
                )}
              </span>
            </div>
          )}

          {newReportType === 'Financial' && (
            <div className="text-xs text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 p-2 rounded">
              <p className="font-medium mb-1">Lưu ý:</p>
              <p>Báo cáo tài chính sẽ tự động lấy dữ liệu từ hệ thống. Nếu không chọn khoảng thời gian, hệ thống sẽ lấy dữ liệu 12 tháng gần nhất.</p>
            </div>
          )}

          <div className="flex items-center gap-2 pt-2 border-t border-slate-200 dark:border-slate-700">
            <input
              type="checkbox"
              id="sendEmail"
              className="rounded border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
              checked={sendEmail}
              onChange={(e) => setSendEmail(e.target.checked)}
            />
            <label htmlFor="sendEmail" className="text-sm text-slate-600 dark:text-slate-300">
              Gửi bản sao qua Email (Tính năng đang phát triển)
            </label>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default Reports;