import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { dataService } from '../services/dataService';
import { IProject, ICompany, IContract, IPMSchedule } from '../types';
import { Building2, Plus, Pencil, Trash2, AlertTriangle, MapPin, Calendar, Search, Map as MapIcon, Filter, ArrowUpDown, Download, X, Building, Users, Columns, CalendarDays, RefreshCw, Check } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell } from 'recharts';
import Modal from '../components/Modal';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { apiClient } from '../services/apiClient';
import {
  PROJECT_SEGMENT_OVERRIDES_KEY,
  resolveProjectSegment,
  clearProjectSegmentOverride,
  type ProjectSegment,
} from '../utils/projectSegment';

// Fix Leaflet generic icon
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png',
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png',
});

// Type definitions
interface SiteFormData {
  name: string;
  code: string;
  companyId: string;
  segment: ProjectSegment;
  location: {
    address: string;
    coordinates: { lat: number | string; lng: number | string };
  };
  capacityMWp: number | string;
  commissioningDate: string;
  status?: 'planning' | 'construction' | 'operational' | 'decommissioned';
  meteocontrol?: {
    siteKey?: string;
    apiKey?: string;
    systemKey?: string;
    useV2API?: boolean;
  };
}

interface CompanyFormData {
  name: string;
  code: string;
  taxCode: string;
  address: string;
  email: string;
  phone: string;
  status: 'active' | 'inactive';
}

interface MapSearchResult {
  lat: string;
  lon: string;
  display_name: string;
}

type SortField = 'name' | 'capacityMWp' | 'commissioningDate' | 'location';
type SortDirection = 'asc' | 'desc';

/** URL thật: /projects | /projects/residential | /projects/commercial | /projects/companies */
export const PROJECTS_PATH = '/projects';
export const PROJECTS_PATH_RESIDENTIAL = '/projects/residential';
export const PROJECTS_PATH_COMMERCIAL = '/projects/commercial';
export const PROJECTS_PATH_COMPANIES = '/projects/companies';

function parseProjectsPath(pathname: string): { tab: 'projects' | 'companies'; segment: ProjectSegment } {
  if (!pathname.startsWith('/projects')) {
    return { tab: 'projects', segment: 'residential' };
  }
  const suffix = pathname.replace(/^\/projects\/?/, '').replace(/\/$/, '').toLowerCase();
  if (suffix === 'companies') return { tab: 'companies', segment: 'residential' };
  if (suffix === 'commercial') return { tab: 'projects', segment: 'commercial' };
  if (suffix === 'residential' || suffix === '') return { tab: 'projects', segment: 'residential' };
  return { tab: 'projects', segment: 'residential' };
}

// Component to handle map resize when modal opens
const MapResizeHandler = ({ isOpen }: { isOpen: boolean }) => {
  const map = useMap();

  useEffect(() => {
    if (isOpen) {
      // Small delay to ensure modal is fully rendered
      const timer = setTimeout(() => {
        map.invalidateSize();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [isOpen, map]);

  return null;
};

// Component to handle map clicks
const LocationMarker = ({ position, setPosition }: { position: { lat: number, lng: number } | null, setPosition: (pos: { lat: number, lng: number }) => void }) => {
  const map = useMap();

  useEffect(() => {
    if (position) {
      map.flyTo(position, map.getZoom());
    }
  }, [position, map]);

  useMapEvents({
    click(e) {
      setPosition(e.latlng);
    },
  });

  return position ? <Marker position={position} /> : null;
};

// Debounce hook
const 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;
};

// Mini Chart Component for Maintenance Schedule
const MiniMaintenanceChart: React.FC<{
  stats: { total: number; active: number; overdue: number; upcoming: number };
  onMouseEnter?: (e: React.MouseEvent) => void;
  onMouseLeave?: () => void;
  onMouseMove?: (e: React.MouseEvent) => void;
}> = ({ stats, onMouseEnter, onMouseLeave, onMouseMove }) => {
  if (stats.total === 0) {
    return null;
  }

  const maxValue = Math.max(stats.active, stats.upcoming, stats.overdue, stats.total, 1);
  const chartData = [
    { name: 'Active', value: stats.active, color: '#10b981', bgColor: 'rgba(16, 185, 129, 0.1)', borderColor: '#10b981' },
    { name: 'Upcoming', value: stats.upcoming, color: '#f59e0b', bgColor: 'rgba(245, 158, 11, 0.1)', borderColor: '#f59e0b' },
    { name: 'Overdue', value: stats.overdue, color: '#ef4444', bgColor: 'rgba(239, 68, 68, 0.1)', borderColor: '#ef4444' },
  ];

  return (
    <div
      className="w-full cursor-pointer group"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseMove={onMouseMove}
    >
      <div className="bg-gradient-to-br from-slate-50 to-white dark:from-slate-800/50 dark:to-slate-800/30 rounded-lg p-2 border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-all duration-200">
        {/* Legend with Icons */}
        <div className="flex items-center justify-between mb-1.5">
          <div className="flex items-center gap-2 flex-wrap">
            {chartData.filter(item => item.value > 0).map((item, index) => (
              <div key={index} className="flex items-center gap-1">
                <div
                  className="w-2.5 h-2.5 rounded-full shadow-sm border border-white dark:border-slate-700"
                  style={{
                    backgroundColor: item.color,
                    boxShadow: `0 0 0 1.5px ${item.bgColor}`
                  }}
                />
                <span className="text-[10px] font-medium text-slate-600 dark:text-slate-400">
                  {item.name === 'Active' ? 'HĐ' : item.name === 'Upcoming' ? 'Sắp' : 'QH'}
                </span>
                <span className="text-[10px] font-bold text-slate-800 dark:text-slate-200">
                  {item.value}
                </span>
              </div>
            ))}
          </div>
          <div className="text-[10px] font-semibold text-slate-500 dark:text-slate-400">
            Tổng: {stats.total}
          </div>
        </div>

        {/* Chart */}
        <div className="relative">
          <ResponsiveContainer width="100%" height={36}>
            <BarChart data={chartData.filter(item => item.value > 0)} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
              <Bar
                dataKey="value"
                radius={[6, 6, 0, 0]}
                barSize={24}
              >
                {chartData.filter(item => item.value > 0).map((entry, index) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={entry.color}
                    style={{
                      filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
                      transition: 'all 0.2s ease'
                    }}
                  />
                ))}
              </Bar>
              <XAxis
                dataKey="name"
                hide
              />
              <YAxis
                domain={[0, maxValue]}
                hide
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

const Projects: React.FC = () => {
  const location = useLocation();
  const initialPath = parseProjectsPath(location.pathname);

  const [sites, setSites] = useState<IProject[]>([]);
  const [companies, setCompanies] = useState<ICompany[]>([]);
  const [contracts, setContracts] = useState<IContract[]>([]);
  const [pmSchedules, setPmSchedules] = useState<IPMSchedule[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { fetchProjects, setSelectedProjectId, fetchAssets } = useAssetStore();
  const { addNotification } = useUIStore();

  // Tab state — đồng bộ với URL (/projects/*)
  const [activeTab, setActiveTab] = useState<'projects' | 'companies'>(() => initialPath.tab);

  // Site Management State
  const [isSiteModalOpen, setIsSiteModalOpen] = useState(false);
  const [isMapModalOpen, setIsMapModalOpen] = useState(false);
  const [editingSite, setEditingSite] = useState<IProject | null>(null);
  const [siteFormData, setSiteFormData] = useState<SiteFormData>({
    name: '',
    code: '',
    companyId: '',
    segment: 'residential',
    location: {
      address: '',
      coordinates: { lat: 10.762622, lng: 106.660172 }
    },
    capacityMWp: '',
    commissioningDate: new Date().toISOString().split('T')[0],
    status: 'planning',
    meteocontrol: {
      siteKey: '',
      apiKey: '',
      systemKey: '',
      useV2API: true
    }
  });
  const [deletingSiteId, setDeletingSiteId] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);
  const [syncingProjectId, setSyncingProjectId] = useState<string | null>(null);

  // Company Management State
  const [isCompanyModalOpen, setIsCompanyModalOpen] = useState(false);
  const [editingCompany, setEditingCompany] = useState<ICompany | null>(null);
  const [companyFormData, setCompanyFormData] = useState<CompanyFormData>({
    name: '',
    code: '',
    taxCode: '',
    address: '',
    email: '',
    phone: '',
    status: 'active'
  });
  const [deletingCompanyId, setDeletingCompanyId] = useState<string | null>(null);
  const [isSavingCompany, setIsSavingCompany] = useState(false);
  const [companySearchQuery, setCompanySearchQuery] = useState('');

  // Search & Filter State
  const [searchQuery, setSearchQuery] = useState('');
  const [activeProjectSegment, setActiveProjectSegment] = useState<ProjectSegment>(() => initialPath.segment);
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [companyFilter, setCompanyFilter] = useState<string>('all');
  const [sortField, setSortField] = useState<SortField>('name');
  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');

  // Pagination State
  const [projectsPage, setProjectsPage] = useState(1);
  const [projectsItemsPerPage, setProjectsItemsPerPage] = useState(20);
  const [companiesPage, setCompaniesPage] = useState(1);
  const [companiesItemsPerPage, setCompaniesItemsPerPage] = useState(20);

  // Map Search State
  const [mapSearchQuery, setMapSearchQuery] = useState('');
  const [mapSearchResults, setMapSearchResults] = useState<MapSearchResult[]>([]);
  const [isSearchingMap, setIsSearchingMap] = useState(false);
  const [projectSegmentOverrides, setProjectSegmentOverrides] = useState<Record<string, ProjectSegment>>(() => {
    try {
      const raw = localStorage.getItem(PROJECT_SEGMENT_OVERRIDES_KEY);
      if (!raw) return {};
      const parsed = JSON.parse(raw) as Record<string, ProjectSegment>;
      return parsed && typeof parsed === 'object' ? parsed : {};
    } catch {
      return {};
    }
  });

  // Column Visibility State
  const [columnVisibility, setColumnVisibility] = useState({
    company: false,      // Công ty - hidden by default
    coordinates: false,  // Tọa độ - hidden by default
    location: false,     // Địa điểm - hidden by default
    contracts: true,    // Hợp đồng - visible by default
    name: true,
    capacity: true,
    status: false,      // Trạng thái - hidden by default (ẩn mặc định)
    commissioningDate: true,
    maintenanceSchedule: true, // Lịch bảo trì - visible by default
    actions: true
  });
  const [isColumnVisibilityOpen, setIsColumnVisibilityOpen] = useState(false);

  // Tooltip State
  const [tooltipState, setTooltipState] = useState<{
    show: boolean;
    content: string;
    x: number;
    y: number;
  }>({ show: false, content: '', x: 0, y: 0 });

  // Debounce search query
  const debouncedSearchQuery = useDebounce(searchQuery, 300);
  const debouncedCompanySearchQuery = useDebounce(companySearchQuery, 300);

  // Close column visibility dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      if (isColumnVisibilityOpen && !target.closest('.column-visibility-dropdown')) {
        setIsColumnVisibilityOpen(false);
      }
    };
    if (isColumnVisibilityOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [isColumnVisibilityOpen]);

  useEffect(() => {
    const p = parseProjectsPath(location.pathname);
    setActiveTab(p.tab);
    setActiveProjectSegment(p.segment);
  }, [location.pathname]);

  useEffect(() => {
    loadSites();
  }, []);

  const loadSites = async () => {
    setLoading(true);
    setError(null);
    try {
      const [siteList, companyList] = await Promise.all([
        dataService.getProjects(),
        dataService.getCompanies()
      ]);
      setSites(siteList);
      setCompanies(companyList);

      // Load contracts and PM schedules for all projects
      if (siteList.length > 0) {
        try {
          const [contractPromises, schedulePromises] = await Promise.all([
            Promise.all(siteList.map(site => dataService.getContracts(site._id))),
            Promise.all(siteList.map(site => dataService.getPMSchedules(site._id)))
          ]);
          const allContracts = contractPromises.flat();
          const allSchedules = schedulePromises.flat();
          setContracts(allContracts);
          setPmSchedules(allSchedules);
        } catch (err) {
          // If loading fails, continue without contracts/schedules
          console.warn('Failed to load contracts or PM schedules:', err);
          setContracts([]);
          setPmSchedules([]);
        }
      } else {
        setContracts([]);
        setPmSchedules([]);
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi tải danh sách dự án';
      setError(errorMessage);
      addNotification('error', errorMessage);
    } finally {
      setLoading(false);
    }
  };

  const handleMapSearch = useCallback(async () => {
    if (!mapSearchQuery.trim()) return;
    setIsSearchingMap(true);
    try {
      const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(mapSearchQuery)}&limit=10`);
      if (!response.ok) throw new Error('Không thể tìm kiếm địa điểm');
      const data = await response.json();
      setMapSearchResults(data);
    } catch (error) {
      console.error("Error searching location:", error);
      addNotification('error', 'Không thể tìm kiếm địa điểm. Vui lòng thử lại.');
    } finally {
      setIsSearchingMap(false);
    }
  }, [mapSearchQuery, addNotification]);

  const getProjectSegment = useCallback((site: IProject) => {
    return resolveProjectSegment(site, projectSegmentOverrides);
  }, [projectSegmentOverrides]);

  const setProjectSegmentOverride = useCallback((projectId: string, segment: ProjectSegment) => {
    setProjectSegmentOverrides((prev) => {
      const next = { ...prev, [projectId]: segment };
      localStorage.setItem(PROJECT_SEGMENT_OVERRIDES_KEY, JSON.stringify(next));
      return next;
    });
  }, []);

  // Site Handlers
  const handleOpenCreateSite = useCallback(() => {
    setEditingSite(null);
    setSiteFormData({
      name: '',
      code: '',
      companyId: '',
      segment: activeProjectSegment,
      location: {
        address: '',
        coordinates: { lat: 10.762622, lng: 106.660172 }
      },
      capacityMWp: '',
      commissioningDate: new Date().toISOString().split('T')[0],
      status: 'planning',
      meteocontrol: {
        siteKey: '',
        apiKey: '',
        systemKey: '',
        useV2API: true
      }
    });
    setIsSiteModalOpen(true);
  }, [activeProjectSegment]);

  const handleOpenEditSite = useCallback((site: IProject) => {
    const segment = getProjectSegment(site);
    setEditingSite(site);
    setSiteFormData({
      name: site.name,
      code: site.code,
      companyId: typeof site.companyId === 'object' ? (site.companyId as any)._id : site.companyId,
      segment,
      location: {
        address: site.location.address,
        coordinates: {
          lat: site.location.coordinates.lat,
          lng: site.location.coordinates.lng
        }
      },
      capacityMWp: segment === 'residential' ? site.capacityMWp * 1000 : site.capacityMWp,
      commissioningDate: site.commissioningDate.split('T')[0],
      status: site.status || 'planning',
      meteocontrol: {
        siteKey: site.meteocontrol?.siteKey || '',
        apiKey: site.meteocontrol?.apiKey || '',
        systemKey: site.meteocontrol?.systemKey || site.meteocontrol?.siteKey || '',
        useV2API: true
      }
    });
    setIsSiteModalOpen(true);
  }, [getProjectSegment]);

  const validateForm = useCallback((data: SiteFormData): string | null => {
    if (!data.name?.trim()) return 'Vui lòng nhập tên dự án';
    if (!data.code?.trim()) return 'Vui lòng nhập mã dự án';
    if (!data.companyId) return 'Vui lòng chọn công ty quản lý';
    if (!data.location.address?.trim()) return 'Vui lòng nhập địa điểm';
    if (data.location.coordinates.lat === '' || data.location.coordinates.lng === '') {
      return 'Vui lòng nhập tọa độ hợp lệ';
    }
    const lat = typeof data.location.coordinates.lat === 'string' ? parseFloat(data.location.coordinates.lat) : data.location.coordinates.lat;
    const lng = typeof data.location.coordinates.lng === 'string' ? parseFloat(data.location.coordinates.lng) : data.location.coordinates.lng;
    if (isNaN(lat) || lat < -90 || lat > 90) return 'Vĩ độ không hợp lệ (-90 đến 90)';
    if (isNaN(lng) || lng < -180 || lng > 180) return 'Kinh độ không hợp lệ (-180 đến 180)';
    return null;
  }, []);

  const handleSiteSave = useCallback(async () => {
    const validationError = validateForm(siteFormData);
    if (validationError) {
      addNotification('error', validationError);
      return;
    }

    setIsSaving(true);
    try {
      // Clean up data before sending to API
      const inputCapacity = siteFormData.capacityMWp === '' ? 0 : parseFloat(String(siteFormData.capacityMWp)) || 0;
      const dataToSave: Partial<IProject> = {
        ...siteFormData,
        capacityMWp: siteFormData.segment === 'residential' ? inputCapacity / 1000 : inputCapacity,
        location: {
          address: siteFormData.location.address,
          coordinates: {
            lat: typeof siteFormData.location.coordinates.lat === 'string'
              ? parseFloat(siteFormData.location.coordinates.lat)
              : siteFormData.location.coordinates.lat,
            lng: typeof siteFormData.location.coordinates.lng === 'string'
              ? parseFloat(siteFormData.location.coordinates.lng)
              : siteFormData.location.coordinates.lng
          }
        },
        companyId: typeof siteFormData.companyId === 'object'
          ? (siteFormData.companyId as any)._id
          : siteFormData.companyId,
        status: siteFormData.status || 'planning',
        segment: siteFormData.segment,
        meteocontrol: siteFormData.segment === 'commercial' && (siteFormData.meteocontrol?.siteKey || siteFormData.meteocontrol?.apiKey)
          ? {
              siteKey: siteFormData.meteocontrol.siteKey || undefined,
              apiKey: siteFormData.meteocontrol.apiKey || undefined,
              systemKey: siteFormData.meteocontrol.systemKey || siteFormData.meteocontrol.siteKey || undefined,
              useV2API: true
            }
          : undefined
      };

      if (editingSite) {
        // Explicitly include segment in the update to ensure it's not lost
        const updatedProject = { ...editingSite, ...dataToSave, segment: siteFormData.segment } as IProject;
        await dataService.updateProject(updatedProject);
        
        // Clear local override after successful save to prioritize server data
        clearProjectSegmentOverride(editingSite._id);
        setProjectSegmentOverrides((prev) => {
          const next = { ...prev };
          delete next[editingSite._id];
          return next;
        });
        addNotification('success', `Đã cập nhật dự án "${siteFormData.name}" thành công`);
      } else {
        const newSite: IProject = {
          ...dataToSave,
          segment: siteFormData.segment,
          _id: `s${Date.now()}`,
          managerId: 'u2' // Default mock
        } as IProject;
        await dataService.createProject(newSite);
        addNotification('success', `Đã tạo dự án "${siteFormData.name}" thành công`);
      }

      // Small delay to ensure DB persistence is complete before fetching
      await new Promise(resolve => setTimeout(resolve, 500));
      await loadSites();
      await fetchProjects();
      setIsSiteModalOpen(false);
      setEditingSite(null);
      setSiteFormData({
        name: '',
        code: '',
        companyId: '',
        segment: activeProjectSegment,
        location: { address: '', coordinates: { lat: 10.762622, lng: 106.660172 } },
        capacityMWp: '',
        commissioningDate: new Date().toISOString().split('T')[0],
        status: 'planning',
        meteocontrol: { siteKey: '', apiKey: '', systemKey: '', useV2API: true }
      });
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi lưu dự án';
      addNotification('error', errorMessage);
    } finally {
      setIsSaving(false);
    }
  }, [siteFormData, editingSite, validateForm, addNotification, fetchProjects, activeProjectSegment, clearProjectSegmentOverride]);

  const handleSyncAssets = useCallback(async (projectId: string, syncKPI: boolean = false, kpiDays: number = 30) => {
    if (!projectId) return;

    setSyncingProjectId(projectId);
    try {
      const response = await apiClient.post(`/assets/sync/${projectId}?syncKPI=${syncKPI}&kpiDays=${kpiDays}`, {});

      if (response.success) {
        const results = response.data as {
          assets?: { success?: boolean; message?: string };
          kpi?: {
            success?: boolean;
            message?: string;
            data?: { successCount?: number; totalDays?: number };
          };
        } | undefined;
        const messages: string[] = [];
        
        if (results?.assets?.success) {
          messages.push('Đồng bộ thiết bị thành công');
        } else if (results?.assets) {
          messages.push(`Thiết bị: ${results.assets.message || 'Thất bại'}`);
        }

        // KPI sync is disabled by default, only show if explicitly requested
        if (syncKPI && results?.kpi?.success) {
          const kpiData = results.kpi.data;
          if (kpiData) {
            messages.push(`KPI: ${kpiData.successCount}/${kpiData.totalDays} ngày thành công`);
          } else {
            messages.push('Đồng bộ KPI thành công');
          }
        } else if (results?.kpi && syncKPI) {
          messages.push(`KPI: ${results.kpi.message || 'Thất bại'}`);
        }

        const message = messages.length > 0 ? messages.join('. ') : 'Đồng bộ thành công';
        addNotification('success', message);

        // Reload projects to get updated data
        await loadSites();
        // Reload assets if this is the selected project
        const selectedPid = useAssetStore.getState().selectedProjectId;
        if (projectId === selectedPid) {
          await fetchAssets(projectId);
        }
      } else {
        addNotification('error', response.message || 'Đồng bộ thất bại');
      }
    } catch (error: any) {
      console.error('Error syncing:', error);
      addNotification('error', 'Lỗi khi đồng bộ: ' + (error.message || 'Unknown error'));
    } finally {
      setSyncingProjectId(null);
    }
  }, [addNotification, fetchAssets]);

  const handleMoveToResidential = useCallback(async (site: IProject) => {
    try {
      await dataService.updateProject({ ...site, segment: 'residential' });
      // Clear local override after successful move to prioritize server data
      clearProjectSegmentOverride(site._id);
      setProjectSegmentOverrides((prev) => {
        const next = { ...prev };
        delete next[site._id];
        return next;
      });
      addNotification('success', `Đã chuyển "${site.name}" sang Residential`);
      await loadSites();
      await fetchProjects();
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi chuyển loại dự án';
      addNotification('error', errorMessage);
    }
  }, [addNotification, fetchProjects, clearProjectSegmentOverride]);

  const handleDeleteSiteConfirm = useCallback(async () => {
    if (!deletingSiteId) return;

    try {
      const siteToDelete = sites.find(s => s._id === deletingSiteId);
      await dataService.deleteSite(deletingSiteId);
      addNotification('success', `Đã xóa dự án "${siteToDelete?.name || ''}" thành công`);
      await loadSites();
      await fetchProjects();
      setDeletingSiteId(null);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi xóa dự án';
      addNotification('error', errorMessage);
    }
  }, [deletingSiteId, sites, addNotification, fetchProjects]);

  // Company Handlers
  const handleOpenCreateCompany = useCallback(() => {
    setEditingCompany(null);
    setCompanyFormData({
      name: '',
      code: '',
      taxCode: '',
      address: '',
      email: '',
      phone: '',
      status: 'active'
    });
    setIsCompanyModalOpen(true);
  }, []);

  const handleOpenEditCompany = useCallback((company: ICompany) => {
    setEditingCompany(company);
    setCompanyFormData({
      name: company.name,
      code: company.code,
      taxCode: company.taxCode || '',
      address: company.address || '',
      email: company.email || '',
      phone: company.phone || '',
      status: company.status || 'active'
    });
    setIsCompanyModalOpen(true);
  }, []);

  const validateCompanyForm = useCallback((data: CompanyFormData): string | null => {
    if (!data.name?.trim()) return 'Vui lòng nhập tên công ty';
    if (!data.code?.trim()) return 'Vui lòng nhập mã công ty';
    if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
      return 'Email không hợp lệ';
    }
    return null;
  }, []);

  const handleCompanySave = useCallback(async () => {
    const validationError = validateCompanyForm(companyFormData);
    if (validationError) {
      addNotification('error', validationError);
      return;
    }

    setIsSavingCompany(true);
    try {
      const dataToSave: Partial<ICompany> = {
        ...companyFormData,
        status: companyFormData.status || 'active'
      };

      if (editingCompany) {
        await dataService.updateCompany({ ...editingCompany, ...dataToSave } as ICompany);
        addNotification('success', `Đã cập nhật công ty "${companyFormData.name}" thành công`);
      } else {
        const newCompany: ICompany = {
          ...dataToSave,
          _id: `c${Date.now()}`
        } as ICompany;
        await dataService.createCompany(newCompany);
        addNotification('success', `Đã tạo công ty "${companyFormData.name}" thành công`);
      }

      await loadSites();
      setIsCompanyModalOpen(false);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi lưu công ty';
      addNotification('error', errorMessage);
    } finally {
      setIsSavingCompany(false);
    }
  }, [companyFormData, editingCompany, validateCompanyForm, addNotification]);

  const handleDeleteCompanyConfirm = useCallback(async () => {
    if (!deletingCompanyId) return;

    try {
      const companyToDelete = companies.find(c => c._id === deletingCompanyId);
      await dataService.deleteCompany(deletingCompanyId);
      addNotification('success', `Đã xóa công ty "${companyToDelete?.name || ''}" thành công`);
      await loadSites();
      setDeletingCompanyId(null);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi xóa công ty';
      addNotification('error', errorMessage);
    }
  }, [deletingCompanyId, companies, addNotification]);

  // Helper functions
  const getCompanyName = useCallback((companyId: string | object): string => {
    // Handle case where companyId might be an object (populated) or a string (ID)
    const id = typeof companyId === 'object' ? (companyId as any)._id : companyId;
    const company = companies.find(c => c._id === id);
    return company ? `${company.name} (${company.code})` : 'N/A';
  }, [companies]);

  // Helper function to get maintenance schedule stats for a project
  const getMaintenanceScheduleStats = useCallback((projectId: string): {
    total: number;
    active: number;
    overdue: number;
    upcoming: number;
  } => {
    const projectSchedules = pmSchedules.filter(s => s.projectId === projectId);
    const now = new Date();

    const active = projectSchedules.filter(s => s.status === 'Active').length;
    const overdue = projectSchedules.filter(s => {
      if (s.status !== 'Active') return false;
      return new Date(s.nextDue) < now;
    }).length;
    const upcoming = projectSchedules.filter(s => {
      if (s.status !== 'Active') return false;
      const dueDate = new Date(s.nextDue);
      const daysUntilDue = Math.ceil((dueDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
      return dueDate >= now && daysUntilDue <= 7;
    }).length;

    return {
      total: projectSchedules.length,
      active,
      overdue,
      upcoming
    };
  }, [pmSchedules]);

  // Helper function to get contract counts for a project
  const getContractCounts = useCallback((projectId: string): { active: number; expired: number; total: number } => {
    const projectContracts = contracts.filter(c => c.projectId === projectId);
    const activeStatuses: string[] = ['active', 'negotiating', 'suspended', 'completed', 'Expiring'];
    const expiredStatuses: string[] = ['expired', 'terminated'];

    const active = projectContracts.filter(c => activeStatuses.includes(c.status)).length;
    const expired = projectContracts.filter(c => expiredStatuses.includes(c.status)).length;
    const total = projectContracts.length;

    return { active, expired, total };
  }, [contracts]);

  // Helper function to get contract tooltip content
  const getContractTooltipContent = useCallback((projectId: string, statusType: 'active' | 'expired'): string[] => {
    const projectContracts = contracts.filter(c => c.projectId === projectId);
    const activeStatuses: string[] = ['active', 'negotiating', 'suspended', 'completed', 'Expiring'];
    const expiredStatuses: string[] = ['expired', 'terminated'];

    let filteredContracts: IContract[];
    if (statusType === 'active') {
      filteredContracts = projectContracts.filter(c => activeStatuses.includes(c.status));
    } else {
      filteredContracts = projectContracts.filter(c => expiredStatuses.includes(c.status));
    }

    if (filteredContracts.length === 0) return [];

    return filteredContracts.map(contract => {
      try {
        let startDateStr = 'N/A';
        let endDateStr = 'N/A';

        if (contract.startDate) {
          const startDate = new Date(contract.startDate);
          if (!isNaN(startDate.getTime())) {
            startDateStr = startDate.toLocaleDateString('vi-VN', {
              day: '2-digit',
              month: '2-digit',
              year: 'numeric'
            });
          }
        }

        if (contract.endDate) {
          const endDate = new Date(contract.endDate);
          if (!isNaN(endDate.getTime())) {
            endDateStr = endDate.toLocaleDateString('vi-VN', {
              day: '2-digit',
              month: '2-digit',
              year: 'numeric'
            });
          }
        }

        const contractNum = contract.contractNumber || 'N/A';
        return `${contractNum}: ${startDateStr} - ${endDateStr}`;
      } catch (error) {
        return `${contract.contractNumber || 'N/A'}: N/A - N/A`;
      }
    });
  }, [contracts]);

  // Helper function to get maintenance schedule tooltip content
  const getMaintenanceScheduleTooltipContent = useCallback((projectId: string): string[] => {
    const projectSchedules = pmSchedules.filter(s => s.projectId === projectId && s.status === 'Active');
    if (projectSchedules.length === 0) return [];

    const now = new Date();
    return projectSchedules.map(schedule => {
      try {
        const dueDate = new Date(schedule.nextDue);
        if (isNaN(dueDate.getTime())) return `${schedule.title}: N/A`;

        const dueDateStr = dueDate.toLocaleDateString('vi-VN', {
          day: '2-digit',
          month: '2-digit',
          year: 'numeric'
        });

        const isOverdue = dueDate < now;
        const daysUntilDue = Math.ceil((dueDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));

        let statusText = '';
        if (isOverdue) {
          statusText = ` (Quá hạn ${Math.abs(daysUntilDue)} ngày)`;
        } else if (daysUntilDue <= 7) {
          statusText = ` (Còn ${daysUntilDue} ngày)`;
        }

        return `${schedule.title}: ${dueDateStr}${statusText}`;
      } catch (error) {
        return `${schedule.title}: N/A`;
      }
    });
  }, [pmSchedules]);

  // Tooltip handlers
  const handleTooltipShow = useCallback((e: React.MouseEvent, projectId: string, statusType: 'active' | 'expired') => {
    const content = getContractTooltipContent(projectId, statusType);
    if (content.length === 0) return;

    const rect = e.currentTarget.getBoundingClientRect();
    setTooltipState({
      show: true,
      content: content.join('\n'),
      x: rect.left + rect.width / 2,
      y: rect.top - 10
    });
  }, [getContractTooltipContent]);

  const handleTooltipHide = useCallback(() => {
    setTooltipState(prev => ({ ...prev, show: false }));
  }, []);

  const getStatusColor = useCallback((status: string) => {
    switch (status) {
      case 'operational': return 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300';
      case 'construction': return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300';
      case 'planning': return 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300';
      case 'decommissioned': return 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300';
      default: return 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300';
    }
  }, []);

  const getStatusLabel = useCallback((status: string) => {
    const labels: Record<string, string> = {
      'operational': 'Đang vận hành',
      'construction': 'Đang xây dựng',
      'planning': 'Đang lập kế hoạch',
      'decommissioned': 'Đã ngừng hoạt động'
    };
    return labels[status] || status;
  }, []);


  const segmentedProjects = useMemo(() => {
    return sites.filter(site => getProjectSegment(site) === activeProjectSegment);
  }, [sites, activeProjectSegment, projectSegmentOverrides]);

  const projectSegmentCounts = useMemo(() => {
    return {
      residential: sites.filter(site => getProjectSegment(site) === 'residential').length,
      commercial: sites.filter(site => getProjectSegment(site) === 'commercial').length,
    };
  }, [sites, projectSegmentOverrides]);

  // Memoized statistics
  const stats = useMemo(() => {
    return {
      total: segmentedProjects.length,
      totalCapacity: segmentedProjects.reduce((acc, s) => acc + s.capacityMWp, 0),
      uniqueLocations: new Set(segmentedProjects.map(s => s.location.address)).size,
      byStatus: {
        operational: segmentedProjects.filter(s => s.status === 'operational').length,
        construction: segmentedProjects.filter(s => s.status === 'construction').length,
        planning: segmentedProjects.filter(s => s.status === 'planning').length,
        decommissioned: segmentedProjects.filter(s => s.status === 'decommissioned').length
      }
    };
  }, [segmentedProjects]);

  // Memoized filtered companies
  const filteredCompanies = useMemo(() => {
    let filtered = [...companies];

    // Apply search filter
    if (debouncedCompanySearchQuery.trim()) {
      const query = debouncedCompanySearchQuery.toLowerCase();
      filtered = filtered.filter(company => {
        return (
          company.name.toLowerCase().includes(query) ||
          company.code.toLowerCase().includes(query) ||
          (company.taxCode && company.taxCode.toLowerCase().includes(query)) ||
          (company.email && company.email.toLowerCase().includes(query)) ||
          (company.address && company.address.toLowerCase().includes(query))
        );
      });
    }

    return filtered.sort((a, b) => a.name.localeCompare(b.name));
  }, [companies, debouncedCompanySearchQuery]);

  // Memoized filtered and sorted projects
  const filteredAndSortedProjects = useMemo(() => {
    let filtered = [...segmentedProjects];

    // Apply search filter
    if (debouncedSearchQuery.trim()) {
      const query = debouncedSearchQuery.toLowerCase();
      filtered = filtered.filter(site => {
        const companyName = getCompanyName(site.companyId).toLowerCase();
        return (
          site.name.toLowerCase().includes(query) ||
          site.code.toLowerCase().includes(query) ||
          site.location.address.toLowerCase().includes(query) ||
          companyName.includes(query)
        );
      });
    }

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

    // Apply company filter
    if (companyFilter !== 'all') {
      filtered = filtered.filter(site => {
        const id = typeof site.companyId === 'object' ? (site.companyId as any)._id : site.companyId;
        return id === companyFilter;
      });
    }

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

      switch (sortField) {
        case 'name':
          aValue = a.name.toLowerCase();
          bValue = b.name.toLowerCase();
          break;
        case 'capacityMWp':
          aValue = a.capacityMWp;
          bValue = b.capacityMWp;
          break;
        case 'commissioningDate':
          aValue = new Date(a.commissioningDate).getTime();
          bValue = new Date(b.commissioningDate).getTime();
          break;
        case 'location':
          aValue = a.location.address.toLowerCase();
          bValue = b.location.address.toLowerCase();
          break;
        default:
          return 0;
      }

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

    return filtered;
  }, [segmentedProjects, debouncedSearchQuery, statusFilter, companyFilter, sortField, sortDirection, getCompanyName]);

  // Reset page when filters change
  useEffect(() => {
    setProjectsPage(1);
  }, [activeProjectSegment, debouncedSearchQuery, statusFilter, companyFilter, projectsItemsPerPage]);

  useEffect(() => {
    setCompaniesPage(1);
  }, [debouncedCompanySearchQuery, companiesItemsPerPage]);

  // Paginated projects
  const paginatedProjects = useMemo(() => {
    const startIndex = (projectsPage - 1) * projectsItemsPerPage;
    const endIndex = startIndex + projectsItemsPerPage;
    return filteredAndSortedProjects.slice(startIndex, endIndex);
  }, [filteredAndSortedProjects, projectsPage, projectsItemsPerPage]);

  const totalProjectsPages = useMemo(() => {
    return Math.ceil(filteredAndSortedProjects.length / projectsItemsPerPage);
  }, [filteredAndSortedProjects.length, projectsItemsPerPage]);

  // Paginated companies
  const paginatedCompanies = useMemo(() => {
    const startIndex = (companiesPage - 1) * companiesItemsPerPage;
    const endIndex = startIndex + companiesItemsPerPage;
    return filteredCompanies.slice(startIndex, endIndex);
  }, [filteredCompanies, companiesPage, companiesItemsPerPage]);

  const totalCompaniesPages = useMemo(() => {
    return Math.ceil(filteredCompanies.length / companiesItemsPerPage);
  }, [filteredCompanies.length, companiesItemsPerPage]);

  const capacityUnitLabel = activeProjectSegment === 'residential' ? 'kWp' : 'MWp';

  const formatCapacityBySegment = useCallback((capacityMWp: number, segment: ProjectSegment) => {
    if (segment === 'residential') {
      return (capacityMWp * 1000).toFixed(2);
    }
    return capacityMWp.toFixed(2);
  }, []);

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

  const handleExport = useCallback(() => {
    try {
      const csvContent = [
        [`Tên dự án`, `Mã dự án`, `Công ty`, `Công suất (${capacityUnitLabel})`, `Địa điểm`, `Trạng thái`, `Ngày COD`, `Tọa độ`].join(','),
        ...filteredAndSortedProjects.map(site => [
          `"${site.name}"`,
          `"${site.code}"`,
          `"${getCompanyName(site.companyId)}"`,
          formatCapacityBySegment(site.capacityMWp, activeProjectSegment),
          `"${site.location.address}"`,
          `"${getStatusLabel(site.status || 'planning')}"`,
          new Date(site.commissioningDate).toLocaleDateString('vi-VN'),
          `${site.location.coordinates.lat.toFixed(4)}, ${site.location.coordinates.lng.toFixed(4)}`
        ].join(','))
      ].join('\n');

      const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', `danh_sach_du_an_${new Date().toISOString().split('T')[0]}.csv`);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      addNotification('success', 'Đã xuất dữ liệu thành công');
    } catch (err) {
      addNotification('error', 'Lỗi khi xuất dữ liệu');
    }
  }, [filteredAndSortedProjects, getCompanyName, getStatusLabel, addNotification, capacityUnitLabel, formatCapacityBySegment, activeProjectSegment]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-slate-500 dark:text-slate-400">Đang tải danh sách dự án...</div>
      </div>
    );
  }

  if (error && sites.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-red-500 dark:text-red-400">Lỗi: {error}</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Quản lý Dự án & Công ty</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400">Quản lý danh mục đầu tư (Portfolio), thông tin các nhà máy và công ty quản lý.</p>
        </div>
        <div className="flex gap-2">
          {activeTab === 'projects' && filteredAndSortedProjects.length > 0 && (
            <button
              onClick={handleExport}
              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm font-medium shadow-sm"
            >
              <Download size={18} /> Xuất Excel
            </button>
          )}
          {activeTab === 'projects' && (
            <button
              onClick={handleOpenCreateSite}
              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"
            >
              <Plus size={18} /> Thêm dự án mới
            </button>
          )}
          {activeTab === 'companies' && (
            <button
              onClick={handleOpenCreateCompany}
              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"
            >
              <Plus size={18} /> Thêm công ty mới
            </button>
          )}
        </div>
      </div>

      {/* Tab Navigation — URL: /projects | /projects/companies */}
      <div className="flex gap-2 border-b border-slate-200 dark:border-slate-700">
        <Link
          to={PROJECTS_PATH}
          className={`px-4 py-2 font-medium text-sm transition-colors ${activeTab === 'projects'
              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
              : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
            }`}
        >
          <div className="flex items-center gap-2">
            <Building2 size={18} /> Dự án
          </div>
        </Link>
        <Link
          to={PROJECTS_PATH_COMPANIES}
          className={`px-4 py-2 font-medium text-sm transition-colors ${activeTab === 'companies'
              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
              : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
            }`}
        >
          <div className="flex items-center gap-2">
            <Building size={18} /> Công ty quản lý
          </div>
        </Link>
      </div>

      {/* Projects Tab Content */}
      {activeTab === 'projects' && (
        <>
          {/* Project Segment Tabs — URL: /projects/residential | /projects/commercial */}
          <div className="flex gap-2">
            <Link
              to={PROJECTS_PATH_RESIDENTIAL}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeProjectSegment === 'residential'
                  ? 'bg-blue-600 text-white'
                  : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
                }`}
            >
              Residential ({projectSegmentCounts.residential})
            </Link>
            <Link
              to={PROJECTS_PATH_COMMERCIAL}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeProjectSegment === 'commercial'
                  ? 'bg-blue-600 text-white'
                  : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
                }`}
            >
              Commercial ({projectSegmentCounts.commercial})
            </Link>
          </div>

          {/* Stats Cards */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Tổng số dự án</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.total}</p>
              </div>
              <div className="p-3 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg">
                <Building2 size={24} />
              </div>
            </div>
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Tổng công suất</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">
                  {activeProjectSegment === 'residential' ? (stats.totalCapacity * 1000).toFixed(1) : stats.totalCapacity.toFixed(2)} {capacityUnitLabel}
                </p>
              </div>
              <div className="p-3 bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-300 rounded-lg">
                <Calendar size={24} />
              </div>
            </div>
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Khu vực hoạt động</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.uniqueLocations}</p>
              </div>
              <div className="p-3 bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-300 rounded-lg">
                <MapPin size={24} />
              </div>
            </div>
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Đang vận hành</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">{stats.byStatus.operational}</p>
              </div>
              <div className="p-3 bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300 rounded-lg">
                <Building2 size={24} />
              </div>
            </div>
          </div>

          {/* Projects 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 overflow-visible">
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <h3 className="font-bold text-slate-700 dark:text-slate-200">Danh sách dự án</h3>
                <div className="flex flex-wrap gap-2 w-full md:w-auto">
                  <div className="relative flex-1 md:flex-initial min-w-[200px]">
                    <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-slate-400">
                      <Search size={14} />
                    </span>
                    <input
                      type="text"
                      placeholder="Tìm kiếm..."
                      className="pl-8 pr-4 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 w-full"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                    />
                    {searchQuery && (
                      <button
                        onClick={() => setSearchQuery('')}
                        className="absolute inset-y-0 right-0 flex items-center pr-2 text-slate-400 hover:text-slate-600"
                      >
                        <X size={14} />
                      </button>
                    )}
                  </div>
                  <div className="relative column-visibility-dropdown">
                    <button
                      onClick={() => setIsColumnVisibilityOpen(!isColumnVisibilityOpen)}
                      className="flex items-center gap-2 border border-slate-300 dark:border-slate-600 rounded-md text-sm px-3 py-1.5 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-1 focus:ring-blue-500"
                      title="Hiển thị/Ẩn cột"
                    >
                      <Columns size={16} /> <span className="hidden md:inline">Cột</span>
                    </button>
                    {isColumnVisibilityOpen && (
                      <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-700 z-50 p-2">
                        <div className="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2 px-2">Hiển thị cột:</div>
                        <div className="space-y-1">
                          {[
                            { key: 'name', label: 'Tên dự án' },
                            { key: 'company', label: 'Công ty' },
                            { key: 'capacity', label: `Công suất (${capacityUnitLabel})` },
                            { key: 'status', label: 'Trạng thái' },
                            { key: 'location', label: 'Địa điểm' },
                            { key: 'commissioningDate', label: 'Ngày COD' },
                            { key: 'coordinates', label: 'Tọa độ' },
                            { key: 'contracts', label: 'Hợp đồng' },
                            { key: 'maintenanceSchedule', label: 'Lịch bảo trì' }
                          ].map((col) => (
                            <label key={col.key} className="flex items-center gap-2 px-2 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded cursor-pointer">
                              <input
                                type="checkbox"
                                checked={columnVisibility[col.key as keyof typeof columnVisibility]}
                                onChange={(e) => setColumnVisibility(prev => ({ ...prev, [col.key]: e.target.checked }))}
                                className="rounded border-slate-300 dark:border-slate-600 text-blue-600 focus:ring-blue-500"
                              />
                              <span className="text-sm text-slate-700 dark:text-slate-300">{col.label}</span>
                            </label>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="flex gap-2 w-full md:w-auto relative z-0">
                    <select
                      className="border border-slate-300 dark:border-slate-600 rounded-md text-sm px-3 py-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 md:flex-initial relative z-0"
                      value={statusFilter}
                      onChange={(e) => setStatusFilter(e.target.value)}
                    >
                      <option value="all">Tất cả trạng thái</option>
                      <option value="planning">Đang lập kế hoạch</option>
                      <option value="construction">Đang xây dựng</option>
                      <option value="operational">Đang vận hành</option>
                      <option value="decommissioned">Đã ngừng hoạt động</option>
                    </select>
                    <select
                      className="border border-slate-300 dark:border-slate-600 rounded-md text-sm px-3 py-1.5 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 md:flex-initial relative z-0"
                      value={companyFilter}
                      onChange={(e) => setCompanyFilter(e.target.value)}
                    >
                      <option value="all">Tất cả công ty</option>
                      {companies.map(company => (
                        <option key={company._id} value={company._id}>{company.name}</option>
                      ))}
                    </select>
                  </div>
                </div>
              </div>
              {(debouncedSearchQuery || statusFilter !== 'all' || companyFilter !== 'all') && (
                <div className="mt-2 text-sm text-slate-500 dark:text-slate-400">
                  Hiển thị {filteredAndSortedProjects.length} / {segmentedProjects.length} dự án
                </div>
              )}
            </div>
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                <thead className="bg-white dark:bg-slate-800">
                  <tr>
                    {columnVisibility.name && (
                      <th className="px-3 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                        <button onClick={() => handleSort('name')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                          Tên dự án <ArrowUpDown size={12} />
                        </button>
                      </th>
                    )}
                    {columnVisibility.company && (
                      <th className="px-3 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Công ty</th>
                    )}
                    {columnVisibility.capacity && (
                      <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('capacityMWp')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                          Công suất ({capacityUnitLabel}) <ArrowUpDown size={12} />
                        </button>
                      </th>
                    )}
                    {columnVisibility.status && (
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Trạng thái</th>
                    )}
                    {columnVisibility.contracts && (
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Hợp đồng</th>
                    )}
                    {columnVisibility.maintenanceSchedule && (
                      <th className="px-3 py-2 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Lịch bảo trì</th>
                    )}
                    {columnVisibility.location && (
                      <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('location')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                          Địa điểm <ArrowUpDown size={12} />
                        </button>
                      </th>
                    )}
                    {columnVisibility.commissioningDate && (
                      <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('commissioningDate')} className="flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200">
                          Ngày COD <ArrowUpDown size={12} />
                        </button>
                      </th>
                    )}
                    {columnVisibility.coordinates && (
                      <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">Tọa độ</th>
                    )}
                    {columnVisibility.actions && (
                      <th className="px-3 py-2 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">
                  {paginatedProjects.map(site => (
                    <tr key={site._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                      {columnVisibility.name && (
                        <td className="px-3 py-2 whitespace-nowrap">
                          <div className="flex items-center gap-3">
                            <div className={`p-2 rounded-lg ${site.status === 'operational'
                                ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-300'
                                : site.status === 'construction'
                                  ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-300'
                                  : site.status === 'planning'
                                    ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300'
                                    : site.status === 'decommissioned'
                                      ? 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
                                      : 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300'
                              }`}>
                              <Building2 size={18} />
                            </div>
                            <div>
                              <button
                                onClick={() => setSelectedProjectId(site._id)}
                                className="text-sm font-semibold text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer text-left"
                                title="Chọn dự án này làm dự án hiện tại"
                              >
                                {site.name}
                              </button>
                              <div className="text-xs text-slate-500 dark:text-slate-400">{site.code}</div>
                            </div>
                          </div>
                        </td>
                      )}
                      {columnVisibility.company && (
                        <td className="px-3 py-2 text-sm text-slate-600 dark:text-slate-300 whitespace-nowrap">
                          {getCompanyName(site.companyId)}
                        </td>
                      )}
                      {columnVisibility.capacity && (
                        <td className="px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 whitespace-nowrap">
                          {formatCapacityBySegment(site.capacityMWp, activeProjectSegment)}
                        </td>
                      )}
                      {columnVisibility.status && (
                        <td className="px-3 py-2 whitespace-nowrap">
                          <span className={`px-2 py-0.5 text-xs font-semibold rounded-full ${getStatusColor(site.status || 'planning')}`}>
                            {getStatusLabel(site.status || 'planning')}
                          </span>
                        </td>
                      )}
                      {columnVisibility.contracts && (
                        <td className="px-3 py-2 whitespace-nowrap">
                          {(() => {
                            const counts = getContractCounts(site._id);
                            if (counts.total === 0) {
                              return <span className="text-sm text-slate-400">0</span>;
                            }
                            return (
                              <div className="flex items-center gap-2">
                                {counts.active > 0 && (
                                  <span
                                    className="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 cursor-help relative"
                                    onMouseEnter={(e) => handleTooltipShow(e, site._id, 'active')}
                                    onMouseLeave={handleTooltipHide}
                                    onMouseMove={(e) => {
                                      const rect = e.currentTarget.getBoundingClientRect();
                                      setTooltipState(prev => ({
                                        ...prev,
                                        x: rect.left + rect.width / 2,
                                        y: rect.top - 10
                                      }));
                                    }}
                                  >
                                    {counts.active}
                                  </span>
                                )}
                                {counts.expired > 0 && (
                                  <span
                                    className="px-2 py-1 text-xs font-semibold rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 cursor-help relative"
                                    onMouseEnter={(e) => handleTooltipShow(e, site._id, 'expired')}
                                    onMouseLeave={handleTooltipHide}
                                    onMouseMove={(e) => {
                                      const rect = e.currentTarget.getBoundingClientRect();
                                      setTooltipState(prev => ({
                                        ...prev,
                                        x: rect.left + rect.width / 2,
                                        y: rect.top - 10
                                      }));
                                    }}
                                  >
                                    {counts.expired}
                                  </span>
                                )}
                              </div>
                            );
                          })()}
                        </td>
                      )}
                      {columnVisibility.maintenanceSchedule && (
                        <td className="px-3 py-2">
                          {(() => {
                            const stats = getMaintenanceScheduleStats(site._id);
                            if (stats.total === 0) {
                              return (
                                <span className="text-sm text-slate-400">Chưa có lịch</span>
                              );
                            }

                            return (
                              <div className="flex flex-col gap-1.5">
                                <MiniMaintenanceChart
                                  stats={stats}
                                  onMouseEnter={(e) => {
                                    const content = getMaintenanceScheduleTooltipContent(site._id);
                                    if (content.length === 0) return;
                                    const rect = e.currentTarget.getBoundingClientRect();
                                    setTooltipState({
                                      show: true,
                                      content: content.join('\n'),
                                      x: rect.left + rect.width / 2,
                                      y: rect.top - 10
                                    });
                                  }}
                                  onMouseLeave={handleTooltipHide}
                                  onMouseMove={(e) => {
                                    const rect = e.currentTarget.getBoundingClientRect();
                                    setTooltipState(prev => ({
                                      ...prev,
                                      x: rect.left + rect.width / 2,
                                      y: rect.top - 10
                                    }));
                                  }}
                                />
                                <div className="flex items-center gap-1 flex-wrap">
                                  {stats.overdue > 0 && (
                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 flex items-center gap-1">
                                      <AlertTriangle size={10} />
                                      {stats.overdue} quá hạn
                                    </span>
                                  )}
                                  {stats.upcoming > 0 && stats.overdue === 0 && (
                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center gap-1">
                                      <CalendarDays size={10} />
                                      {stats.upcoming} sắp đến hạn
                                    </span>
                                  )}
                                  {stats.active > 0 && stats.overdue === 0 && stats.upcoming === 0 && (
                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
                                      {stats.active} hoạt động
                                    </span>
                                  )}
                                </div>
                              </div>
                            );
                          })()}
                        </td>
                      )}
                      {columnVisibility.location && (
                        <td className="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                          <div className="flex items-start gap-1 max-w-xs">
                            <MapPin size={14} className="mt-0.5 flex-shrink-0" />
                            <span className="break-words">{site.location.address}</span>
                          </div>
                        </td>
                      )}
                      {columnVisibility.commissioningDate && (
                        <td className="px-3 py-2 text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap">
                          {new Date(site.commissioningDate).toLocaleDateString('vi-VN')}
                        </td>
                      )}
                      {columnVisibility.coordinates && (
                        <td className="px-3 py-2 text-sm text-slate-400 font-mono text-xs whitespace-nowrap">
                          {site.location.coordinates ? `${site.location.coordinates.lat.toFixed(4)}, ${site.location.coordinates.lng.toFixed(4)}` : 'N/A'}
                        </td>
                      )}
                      {columnVisibility.actions && (
                        <td className="px-3 py-2 text-right text-sm font-medium">
                          <div className="flex justify-end space-x-2">
                            {site.meteocontrol?.siteKey && site.meteocontrol?.apiKey && (
                              <button
                                onClick={() => handleSyncAssets(site._id, false)}
                                disabled={syncingProjectId === site._id}
                                className="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 p-2 rounded hover:bg-green-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                title="Đồng bộ thiết bị từ Meteocontrol"
                              >
                                <RefreshCw 
                                  size={16} 
                                  className={syncingProjectId === site._id ? 'animate-spin' : ''} 
                                />
                              </button>
                            )}
                            {activeProjectSegment === 'commercial' && (
                              <button
                                onClick={() => handleMoveToResidential(site)}
                                className="text-emerald-600 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-300 p-2 rounded hover:bg-emerald-50 dark:hover:bg-slate-700 transition-colors"
                                title="Chuyển sang Residential"
                              >
                                <Check size={16} />
                              </button>
                            )}
                            <button
                              onClick={() => handleOpenEditSite(site)}
                              className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 p-2 rounded hover:bg-blue-50 dark:hover:bg-slate-700 transition-colors"
                              title="Chỉnh sửa"
                            >
                              <Pencil size={16} />
                            </button>
                            <button
                              onClick={() => setDeletingSiteId(site._id)}
                              className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded hover:bg-red-50 dark:hover:bg-slate-700 transition-colors"
                              title="Xóa"
                            >
                              <Trash2 size={16} />
                            </button>
                          </div>
                        </td>
                      )}
                    </tr>
                  ))}
                  {paginatedProjects.length === 0 && (
                    <tr>
                      <td colSpan={Object.values(columnVisibility).filter(v => v).length} className="text-center py-8 text-slate-500 dark:text-slate-400">
                        {searchQuery || statusFilter !== 'all' || companyFilter !== 'all'
                          ? 'Không tìm thấy dự án nào phù hợp với bộ lọc.'
                          : 'Chưa có dự án nào.'}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            {/* Pagination Controls for Projects */}
            {filteredAndSortedProjects.length > 0 && (
              <div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 flex flex-col sm:flex-row justify-between items-center gap-4">
                <div className="flex items-center gap-2">
                  <span className="text-sm text-slate-600 dark:text-slate-400">Hiển thị</span>
                  <select
                    className="border border-slate-300 dark:border-slate-600 rounded-md text-sm px-2 py-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                    value={projectsItemsPerPage}
                    onChange={(e) => {
                      setProjectsItemsPerPage(Number(e.target.value));
                      setProjectsPage(1);
                    }}
                  >
                    <option value={20}>20</option>
                    <option value={50}>50</option>
                    <option value={100}>100</option>
                  </select>
                  <span className="text-sm text-slate-600 dark:text-slate-400">
                    / {filteredAndSortedProjects.length} dự án
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-slate-600 dark:text-slate-400">
                    Trang {projectsPage} / {totalProjectsPages}
                  </span>
                  <div className="flex gap-1">
                    <button
                      onClick={() => setProjectsPage(1)}
                      disabled={projectsPage === 1}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Đầu
                    </button>
                    <button
                      onClick={() => setProjectsPage(prev => Math.max(1, prev - 1))}
                      disabled={projectsPage === 1}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Trước
                    </button>
                    <button
                      onClick={() => setProjectsPage(prev => Math.min(totalProjectsPages, prev + 1))}
                      disabled={projectsPage === totalProjectsPages}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Sau
                    </button>
                    <button
                      onClick={() => setProjectsPage(totalProjectsPages)}
                      disabled={projectsPage === totalProjectsPages}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Cuối
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* Companies Tab Content */}
      {activeTab === 'companies' && (
        <>
          {/* Companies Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Tổng số công ty</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">{companies.length}</p>
              </div>
              <div className="p-3 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg">
                <Building size={24} />
              </div>
            </div>
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Đang hoạt động</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">
                  {companies.filter(c => c.status === 'active').length}
                </p>
              </div>
              <div className="p-3 bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-300 rounded-lg">
                <Users size={24} />
              </div>
            </div>
            <div className="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400 font-medium">Đã ngừng hoạt động</p>
                <p className="text-2xl font-bold text-slate-800 dark:text-white">
                  {companies.filter(c => c.status === 'inactive').length}
                </p>
              </div>
              <div className="p-3 bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg">
                <Building size={24} />
              </div>
            </div>
          </div>

          {/* Companies 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 flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <h3 className="font-bold text-slate-700 dark:text-slate-200">Danh sách Công ty quản lý</h3>
                <div className="flex flex-wrap gap-2 w-full md:w-auto">
                  <div className="relative flex-1 md:flex-initial min-w-[200px]">
                    <span className="absolute inset-y-0 left-0 flex items-center pl-2 text-slate-400">
                      <Search size={14} />
                    </span>
                    <input
                      type="text"
                      placeholder="Tìm kiếm công ty..."
                      className="pl-8 pr-4 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400 w-full"
                      value={companySearchQuery}
                      onChange={(e) => setCompanySearchQuery(e.target.value)}
                    />
                    {companySearchQuery && (
                      <button
                        onClick={() => setCompanySearchQuery('')}
                        className="absolute inset-y-0 right-0 flex items-center pr-2 text-slate-400 hover:text-slate-600"
                      >
                        <X size={14} />
                      </button>
                    )}
                  </div>
                </div>
              </div>
              {companySearchQuery && (
                <div className="mt-2 text-sm text-slate-500 dark:text-slate-400">
                  Hiển thị {filteredCompanies.length} / {companies.length} công ty
                </div>
              )}
            </div>
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                <thead className="bg-white dark:bg-slate-800">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Tên công ty
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Mã công ty
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Mã số thuế
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Email
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Địa chỉ
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase whitespace-nowrap">
                      Trạng thái
                    </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">
                  {paginatedCompanies.map(company => (
                    <tr key={company._id} className="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center gap-3">
                          <div className="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300 rounded-lg">
                            <Building size={18} />
                          </div>
                          <span className="text-sm font-semibold text-slate-900 dark:text-white">{company.name}</span>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300 whitespace-nowrap font-mono">
                        {company.code}
                      </td>
                      <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap font-mono">
                        {company.taxCode || '-'}
                      </td>
                      <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap">
                        {company.email || '-'}
                      </td>
                      <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400 max-w-xs truncate">
                        {company.address || '-'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 py-1 text-xs font-semibold rounded-full ${company.status === 'active'
                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
                            : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
                          }`}>
                          {company.status === 'active' ? 'Đang hoạt động' : 'Đã ngừng hoạt động'}
                        </span>
                      </td>
                      <td className="px-6 py-4 text-right text-sm font-medium">
                        <div className="flex justify-end space-x-2">
                          <button
                            onClick={() => handleOpenEditCompany(company)}
                            className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 p-2 rounded hover:bg-blue-50 dark:hover:bg-slate-700 transition-colors"
                            title="Chỉnh sửa"
                          >
                            <Pencil size={16} />
                          </button>
                          <button
                            onClick={() => setDeletingCompanyId(company._id)}
                            className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded hover:bg-red-50 dark:hover:bg-slate-700 transition-colors"
                            title="Xóa"
                          >
                            <Trash2 size={16} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {paginatedCompanies.length === 0 && (
                    <tr>
                      <td colSpan={7} className="text-center py-8 text-slate-500 dark:text-slate-400">
                        {companySearchQuery
                          ? 'Không tìm thấy công ty nào phù hợp với bộ lọc.'
                          : 'Chưa có công ty nào.'}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            {/* Pagination Controls for Companies */}
            {filteredCompanies.length > 0 && (
              <div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 flex flex-col sm:flex-row justify-between items-center gap-4">
                <div className="flex items-center gap-2">
                  <span className="text-sm text-slate-600 dark:text-slate-400">Hiển thị</span>
                  <select
                    className="border border-slate-300 dark:border-slate-600 rounded-md text-sm px-2 py-1 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                    value={companiesItemsPerPage}
                    onChange={(e) => {
                      setCompaniesItemsPerPage(Number(e.target.value));
                      setCompaniesPage(1);
                    }}
                  >
                    <option value={20}>20</option>
                    <option value={50}>50</option>
                    <option value={100}>100</option>
                  </select>
                  <span className="text-sm text-slate-600 dark:text-slate-400">
                    / {filteredCompanies.length} công ty
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm text-slate-600 dark:text-slate-400">
                    Trang {companiesPage} / {totalCompaniesPages}
                  </span>
                  <div className="flex gap-1">
                    <button
                      onClick={() => setCompaniesPage(1)}
                      disabled={companiesPage === 1}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Đầu
                    </button>
                    <button
                      onClick={() => setCompaniesPage(prev => Math.max(1, prev - 1))}
                      disabled={companiesPage === 1}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Trước
                    </button>
                    <button
                      onClick={() => setCompaniesPage(prev => Math.min(totalCompaniesPages, prev + 1))}
                      disabled={companiesPage === totalCompaniesPages}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Sau
                    </button>
                    <button
                      onClick={() => setCompaniesPage(totalCompaniesPages)}
                      disabled={companiesPage === totalCompaniesPages}
                      className="px-2 py-1 text-sm border border-slate-300 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      Cuối
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* SITE ADD/EDIT MODAL */}
      <Modal
        isOpen={isSiteModalOpen}
        onClose={() => setIsSiteModalOpen(false)}
        title={editingSite ? "Chỉnh sửa dự án" : "Thêm dự án mới"}
        footer={
          <>
            <button
              onClick={handleSiteSave}
              disabled={isSaving}
              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 disabled:opacity-50 disabled:cursor-not-allowed sm:ml-3 sm:w-auto sm:text-sm"
            >
              {isSaving ? 'Đang lưu...' : 'Lưu thông tin'}
            </button>
            <button
              onClick={() => setIsSiteModalOpen(false)}
              disabled={isSaving}
              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 disabled:opacity-50 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">Tên dự án <span className="text-red-500">*</span></label>
            <input
              type="text"
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={siteFormData.name}
              onChange={(e) => setSiteFormData({ ...siteFormData, name: e.target.value })}
              placeholder="VP Solar Farm..."
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mã dự án <span className="text-red-500">*</span></label>
              <input
                type="text"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.code}
                onChange={(e) => setSiteFormData({ ...siteFormData, code: e.target.value })}
                placeholder="VPS-01"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Công ty quản lý <span className="text-red-500">*</span></label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.companyId}
                onChange={(e) => setSiteFormData({ ...siteFormData, companyId: e.target.value })}
              >
                <option value="">-- Chọn công ty --</option>
                {companies.map(company => (
                  <option key={company._id} value={company._id}>{company.name} ({company.code})</option>
                ))}
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                Công suất ({siteFormData.segment === 'residential' ? 'kWp' : 'MWp'})
              </label>
              <input
                type="number"
                step={siteFormData.segment === 'residential' ? '1' : '0.01'}
                min="0"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.capacityMWp}
                onChange={(e) => setSiteFormData({ ...siteFormData, capacityMWp: e.target.value })}
                placeholder={siteFormData.segment === 'residential' ? '0' : '0.00'}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Trạng thái</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.status || 'planning'}
                onChange={(e) => setSiteFormData({ ...siteFormData, status: e.target.value as any })}
              >
                <option value="planning">Đang lập kế hoạch</option>
                <option value="construction">Đang xây dựng</option>
                <option value="operational">Đang vận hành</option>
                <option value="decommissioned">Đã ngừng hoạt động</option>
              </select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Loại dự án</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.segment}
                onChange={(e) => {
                  const nextSegment = e.target.value as ProjectSegment;
                  const currentSegment = siteFormData.segment;
                  const parsedCapacity = parseFloat(String(siteFormData.capacityMWp));
                  const hasCapacity = !Number.isNaN(parsedCapacity);
                  const convertedCapacity = !hasCapacity
                    ? siteFormData.capacityMWp
                    : currentSegment === 'commercial' && nextSegment === 'residential'
                      ? (parsedCapacity * 1000).toFixed(2)
                      : currentSegment === 'residential' && nextSegment === 'commercial'
                        ? (parsedCapacity / 1000).toFixed(3)
                        : siteFormData.capacityMWp;

                  setSiteFormData({ ...siteFormData, segment: nextSegment, capacityMWp: convertedCapacity });
                }}
              >
                <option value="residential">Residential</option>
                <option value="commercial">Commercial</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Ngày COD</label>
              <input
                type="date"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={siteFormData.commissioningDate}
                onChange={(e) => setSiteFormData({ ...siteFormData, commissioningDate: e.target.value })}
              />
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Địa điểm <span className="text-red-500">*</span></label>
            <input
              type="text"
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={siteFormData.location.address}
              onChange={(e) => setSiteFormData({
                ...siteFormData,
                location: {
                  ...siteFormData.location,
                  address: e.target.value
                }
              })}
              placeholder="Nhập địa chỉ..."
            />
          </div>
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Tọa độ (Lat, Long)</label>
              <button
                type="button"
                onClick={() => setIsMapModalOpen(true)}
                className="text-xs flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
              >
                <MapIcon size={14} /> Chọn trên bản đồ
              </button>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs text-slate-500 mb-1">Vĩ độ (Latitude)</label>
                <input
                  type="number"
                  step="0.000001"
                  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={siteFormData.location.coordinates.lat}
                  onChange={(e) => setSiteFormData({
                    ...siteFormData,
                    location: {
                      ...siteFormData.location,
                      coordinates: {
                        lat: e.target.value,
                        lng: siteFormData.location.coordinates.lng
                      }
                    }
                  })}
                  placeholder="e.g. 10.7626"
                />
              </div>
              <div>
                <label className="block text-xs text-slate-500 mb-1">Kinh độ (Longitude)</label>
                <input
                  type="number"
                  step="0.000001"
                  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={siteFormData.location.coordinates.lng}
                  onChange={(e) => setSiteFormData({
                    ...siteFormData,
                    location: {
                      ...siteFormData.location,
                      coordinates: {
                        lat: siteFormData.location.coordinates.lat,
                        lng: e.target.value
                      }
                    }
                  })}
                  placeholder="e.g. 106.6601"
                />
              </div>
            </div>
          </div>

          {siteFormData.segment === 'commercial' && (
            <div className="border-t border-slate-200 dark:border-slate-700 pt-4 mt-4">
              <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                Cấu hình Meteocontrol VCOM
              </h3>
              <div className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                      Site Key (Meteocontrol)
                    </label>
                    <input
                      type="text"
                      className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                      value={siteFormData.meteocontrol?.siteKey || ''}
                      onChange={(e) => setSiteFormData({
                        ...siteFormData,
                        meteocontrol: {
                          ...siteFormData.meteocontrol,
                          siteKey: e.target.value,
                          systemKey: e.target.value
                        }
                      })}
                      placeholder="Nhập Site Key"
                    />
                    <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                      Mã định danh site trong Meteocontrol VCOM
                    </p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                      API Key (Widget API)
                    </label>
                    <input
                      type="text"
                      className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                      value={siteFormData.meteocontrol?.apiKey || ''}
                      onChange={(e) => setSiteFormData({
                        ...siteFormData,
                        meteocontrol: {
                          ...siteFormData.meteocontrol,
                          apiKey: e.target.value
                        }
                      })}
                      placeholder="Nhập API Key"
                    />
                    <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                      API key để truy cập Widget API
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}

        </div>
      </Modal>

      {/* MAP MODAL */}
      <Modal
        isOpen={isMapModalOpen}
        onClose={() => {
          setIsMapModalOpen(false);
          setMapSearchQuery('');
          setMapSearchResults([]);
        }}
        title="Chọn toạ độ trên bản đồ"
        footer={
          <button
            onClick={() => setIsMapModalOpen(false)}
            className="w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:w-auto sm:text-sm"
          >
            Đóng / Xác nhận
          </button>
        }
      >
        <div className="space-y-3">
          {/* Search Input */}
          <div className="relative z-[1000]">
            <div className="flex gap-2">
              <input
                type="text"
                className="flex-1 rounded-md border border-slate-300 dark:border-slate-600 p-2 text-sm bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
                placeholder="Tìm kiếm địa điểm (VD: Hồ Chí Minh)..."
                value={mapSearchQuery}
                onChange={(e) => setMapSearchQuery(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleMapSearch()}
              />
              <button
                onClick={handleMapSearch}
                disabled={isSearchingMap || !mapSearchQuery.trim()}
                className="bg-blue-600 text-white px-3 py-2 rounded-md text-sm hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
              >
                {isSearchingMap ? '...' : <Search size={16} />}
              </button>
            </div>
            {mapSearchResults.length > 0 && (
              <ul className="absolute top-full left-0 right-0 mt-1 max-h-60 overflow-y-auto border border-slate-200 dark:border-slate-700 rounded-md bg-white dark:bg-slate-800 shadow-lg z-50">
                {mapSearchResults.map((result, index) => (
                  <li
                    key={index}
                    className="p-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer border-b border-slate-100 dark:border-slate-700 last:border-0 text-slate-700 dark:text-slate-200"
                    onClick={() => {
                      const lat = parseFloat(result.lat);
                      const lng = parseFloat(result.lon);
                      setSiteFormData({
                        ...siteFormData,
                        location: {
                          ...siteFormData.location,
                          address: result.display_name,
                          coordinates: { lat, lng }
                        }
                      });
                      setMapSearchResults([]);
                      setMapSearchQuery('');
                    }}
                  >
                    {result.display_name}
                  </li>
                ))}
              </ul>
            )}
          </div>

          <div className="h-[400px] w-full rounded-lg overflow-hidden border border-slate-300 z-0">
            <MapContainer
              key={isMapModalOpen ? 'map-open' : 'map-closed'}
              center={[
                typeof siteFormData.location.coordinates.lat === 'string'
                  ? parseFloat(siteFormData.location.coordinates.lat) || 10.762622
                  : siteFormData.location.coordinates.lat || 10.762622,
                typeof siteFormData.location.coordinates.lng === 'string'
                  ? parseFloat(siteFormData.location.coordinates.lng) || 106.660172
                  : siteFormData.location.coordinates.lng || 106.660172
              ]}
              zoom={13}
              style={{ height: '100%', width: '100%' }}
            >
              <MapResizeHandler isOpen={isMapModalOpen} />
              <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <LocationMarker
                position={
                  (siteFormData.location.coordinates.lat && siteFormData.location.coordinates.lng) ?
                    {
                      lat: typeof siteFormData.location.coordinates.lat === 'string'
                        ? parseFloat(siteFormData.location.coordinates.lat)
                        : siteFormData.location.coordinates.lat,
                      lng: typeof siteFormData.location.coordinates.lng === 'string'
                        ? parseFloat(siteFormData.location.coordinates.lng)
                        : siteFormData.location.coordinates.lng
                    } : null
                }
                setPosition={(pos) => setSiteFormData({
                  ...siteFormData,
                  location: {
                    ...siteFormData.location,
                    coordinates: { lat: pos.lat, lng: pos.lng }
                  }
                })}
              />
            </MapContainer>
          </div>
          <p className="text-sm text-slate-500 mt-2 text-center">Click trên bản đồ để chọn vị trí.</p>
        </div>
      </Modal>

      {/* DELETE SITE MODAL */}
      <Modal
        isOpen={!!deletingSiteId}
        onClose={() => setDeletingSiteId(null)}
        title="Xóa dự án"
        footer={
          <>
            <button
              onClick={handleDeleteSiteConfirm}
              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
            >
              Xóa vĩnh viễn
            </button>
            <button
              onClick={() => setDeletingSiteId(null)}
              className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              Hủy
            </button>
          </>
        }
      >
        <div className="flex items-center space-x-3">
          <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/30 rounded-full p-2">
            <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
          </div>
          <div>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              Bạn có chắc chắn muốn xóa dự án này không? <br />
              <b>Lưu ý:</b> Hành động này sẽ xóa dữ liệu nhưng trong bản demo các tài sản con chưa bị xóa tự động.
            </p>
          </div>
        </div>
      </Modal>

      {/* COMPANY ADD/EDIT MODAL */}
      <Modal
        isOpen={isCompanyModalOpen}
        onClose={() => setIsCompanyModalOpen(false)}
        title={editingCompany ? "Chỉnh sửa công ty" : "Thêm công ty mới"}
        footer={
          <>
            <button
              onClick={handleCompanySave}
              disabled={isSavingCompany}
              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 disabled:opacity-50 disabled:cursor-not-allowed sm:ml-3 sm:w-auto sm:text-sm"
            >
              {isSavingCompany ? 'Đang lưu...' : 'Lưu thông tin'}
            </button>
            <button
              onClick={() => setIsCompanyModalOpen(false)}
              disabled={isSavingCompany}
              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 disabled:opacity-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              Hủy
            </button>
          </>
        }
      >
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                Tên công ty <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={companyFormData.name}
                onChange={(e) => setCompanyFormData({ ...companyFormData, name: e.target.value })}
                placeholder="Công ty TNHH..."
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">
                Mã công ty <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2 uppercase"
                value={companyFormData.code}
                onChange={(e) => setCompanyFormData({ ...companyFormData, code: e.target.value.toUpperCase() })}
                placeholder="CT-001"
              />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Mã số thuế</label>
              <input
                type="text"
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={companyFormData.taxCode}
                onChange={(e) => setCompanyFormData({ ...companyFormData, taxCode: e.target.value })}
                placeholder="0123456789"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Trạng thái</label>
              <select
                className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                value={companyFormData.status}
                onChange={(e) => setCompanyFormData({ ...companyFormData, status: e.target.value as 'active' | 'inactive' })}
              >
                <option value="active">Đang hoạt động</option>
                <option value="inactive">Đã ngừng hoạt động</option>
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Email</label>
            <input
              type="email"
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={companyFormData.email}
              onChange={(e) => setCompanyFormData({ ...companyFormData, email: e.target.value })}
              placeholder="contact@company.com"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Số điện thoại</label>
            <input
              type="text"
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              value={companyFormData.phone}
              onChange={(e) => setCompanyFormData({ ...companyFormData, phone: e.target.value })}
              placeholder="0123456789"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Địa chỉ</label>
            <textarea
              className="mt-1 block w-full rounded-md border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
              rows={3}
              value={companyFormData.address}
              onChange={(e) => setCompanyFormData({ ...companyFormData, address: e.target.value })}
              placeholder="Nhập địa chỉ công ty..."
            />
          </div>
        </div>
      </Modal>

      {/* DELETE COMPANY MODAL */}
      <Modal
        isOpen={!!deletingCompanyId}
        onClose={() => setDeletingCompanyId(null)}
        title="Xóa công ty"
        footer={
          <>
            <button
              onClick={handleDeleteCompanyConfirm}
              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
            >
              Xóa vĩnh viễn
            </button>
            <button
              onClick={() => setDeletingCompanyId(null)}
              className="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            >
              Hủy
            </button>
          </>
        }
      >
        <div className="flex items-center space-x-3">
          <div className="flex-shrink-0 bg-red-100 dark:bg-red-900/30 rounded-full p-2">
            <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
          </div>
          <div>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              Bạn có chắc chắn muốn xóa công ty này không? <br />
              <b>Lưu ý:</b> Hành động này sẽ xóa công ty khỏi hệ thống. Các dự án liên quan có thể bị ảnh hưởng.
            </p>
          </div>
        </div>
      </Modal>

      {/* Custom Tooltip */}
      {tooltipState.show && (
        <div
          className="fixed z-[9999] pointer-events-none transition-opacity duration-0"
          style={{
            left: `${tooltipState.x}px`,
            top: `${tooltipState.y}px`,
            transform: 'translate(-50%, -100%)',
            marginTop: '-8px'
          }}
        >
          <div className="bg-slate-800 dark:bg-slate-900 text-white dark:text-slate-100 text-xs rounded-lg shadow-2xl px-3 py-2.5 max-w-xs border border-slate-700 dark:border-slate-600 backdrop-blur-sm">
            <div className="whitespace-pre-line text-slate-100 dark:text-slate-200 leading-relaxed">
              {tooltipState.content.split('\n').map((line, index) => (
                <div key={index} className="py-0.5">
                  {line}
                </div>
              ))}
            </div>
            <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full">
              <div className="border-4 border-transparent border-t-slate-800 dark:border-t-slate-900"></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Projects;