import React, { memo, useRef, useState, useCallback, useMemo, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { Link } from 'react-router-dom';
import { Building2, ChevronDown, Check, Search, X, FileText } from 'lucide-react';
import { useAssetStore } from '../../store/useAssetStore';
import { dataService } from '../../services/dataService';
import { IContract } from '../../types';
import { getDisplayedProjectSegment } from '../../utils/projectSegment';
import { projectSegmentVi } from '../../utils/displayVi';

interface ProjectSelectorProps {
  /** Khi sidebar thu nhỏ (icon): nút nhỏ, dropdown bọc cố định */
  sidebarCollapsed?: boolean;
}

function useDropdownCoords(
  open: boolean,
  triggerRef: React.RefObject<HTMLElement | null>,
  sidebarCollapsed: boolean,
) {
  const [coords, setCoords] = useState({ top: 0, left: 0, width: 288 });

  const update = useCallback(() => {
    const el = triggerRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const vw = typeof window !== 'undefined' ? window.innerWidth : 480;
    const width = Math.min(288, Math.max(224, vw - 24));
    setCoords({
      top: rect.bottom + 8,
      left: Math.max(12, Math.min(rect.left, vw - width - 12)),
      width,
    });
  }, []);

  useEffect(() => {
    if (!open) return;
    update();
    const onResize = () => update();
    window.addEventListener('resize', onResize);
    window.addEventListener('scroll', update, true);
    return () => {
      window.removeEventListener('resize', onResize);
      window.removeEventListener('scroll', update, true);
    };
  }, [open, update]);

  useEffect(() => {
    update();
  }, [sidebarCollapsed, update]);

  return { coords, update };
}

const ProjectSelector: React.FC<ProjectSelectorProps> = memo(({ sidebarCollapsed = false }) => {
  const { projects: sites, selectedProjectId: selectedSiteId, setSelectedProjectId: setSelectedSiteId } = useAssetStore();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [contracts, setContracts] = useState<IContract[]>([]);
  const [contractsLoading, setContractsLoading] = useState(false);
  const dropdownPanelRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);

  const { coords } = useDropdownCoords(isDropdownOpen, triggerRef, sidebarCollapsed);

  const selectedSite = sites.find((s) => s._id === selectedSiteId);
  const currentSegment = selectedSite ? getDisplayedProjectSegment(selectedSite) : null;

  useEffect(() => {
    if (sites.length > 0 && contracts.length === 0 && !contractsLoading) {
      setContractsLoading(true);
      const loadContracts = async () => {
        try {
          const contractPromises = sites.map((site) => dataService.getContracts(site._id));
          const contractArrays = await Promise.all(contractPromises);
          const allContracts = contractArrays.flat();
          setContracts(allContracts);
        } catch (error) {
          console.warn('Failed to load contracts:', error);
        } finally {
          setContractsLoading(false);
        }
      };
      loadContracts();
    }
  }, [sites, contracts.length, contractsLoading]);

  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]);

  const filteredSites = useMemo(() => {
    if (!searchQuery.trim()) return sites;
    const query = searchQuery.toLowerCase().trim();
    return sites.filter((site) => site.name.toLowerCase().includes(query));
  }, [sites, searchQuery]);

  const handleSelectSite = useCallback(
    (siteId: string) => {
      setSelectedSiteId(siteId);
      setIsDropdownOpen(false);
      setSearchQuery('');
    },
    [setSelectedSiteId],
  );

  const handleDropdownToggle = useCallback(() => {
    const newState = !isDropdownOpen;
    setIsDropdownOpen(newState);
    if (newState) {
      setTimeout(() => {
        searchInputRef.current?.focus();
      }, 100);
    } else {
      setSearchQuery('');
    }
  }, [isDropdownOpen]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const t = event.target as Node;
      if (dropdownPanelRef.current?.contains(t)) return;
      if (triggerRef.current?.contains(t)) return;
      setIsDropdownOpen(false);
      setSearchQuery('');
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const dropdownPanel = isDropdownOpen && (
    <div
      ref={dropdownPanelRef}
      className="fixed z-[9999] bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-slate-200 dark:border-slate-700 max-h-[min(70vh,28rem)] flex flex-col animate-in fade-in zoom-in-95 duration-150"
      style={{
        top: coords.top,
        left: coords.left,
        width: coords.width,
      }}
    >
      <div className="px-4 py-2 border-b border-slate-100 dark:border-slate-700 flex-shrink-0">
        <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase block mb-2">Chọn dự án ({sites.length})</span>
        <div className="relative">
          <span className="absolute inset-y-0 left-0 flex items-center pl-2.5">
            <Search size={14} className="text-slate-400" />
          </span>
          <input
            ref={searchInputRef}
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Tìm kiếm dự án..."
            className="w-full pl-8 pr-8 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-slate-700 text-slate-900 dark:text-white placeholder-slate-400"
          />
          {searchQuery && (
            <button
              type="button"
              onClick={() => setSearchQuery('')}
              className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
              aria-label="Xóa tìm kiếm"
            >
              <X size={14} />
            </button>
          )}
        </div>
      </div>
      <div className="overflow-y-auto flex-1 min-h-0 py-1">
        {filteredSites.length > 0 ? (
          filteredSites.map((site) => {
            const counts = getContractCounts(site._id);
            return (
              <button
                key={site._id}
                type="button"
                onClick={() => handleSelectSite(site._id)}
                className={`w-full text-left px-4 py-3 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 flex items-center justify-between gap-3 ${
                  site._id === selectedSiteId ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400' : 'text-slate-700 dark:text-slate-300'
                }`}
              >
                <span className="truncate font-medium flex-1 min-w-0 text-left" title={site.name}>
                  {site.name}
                </span>
                <div className="flex items-center gap-2 flex-shrink-0">
                  {counts.total > 0 ? (
                    counts.active > 0 ? (
                      <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-semibold whitespace-nowrap">
                        <FileText size={12} />
                        {counts.active}
                      </span>
                    ) : (
                      <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-semibold whitespace-nowrap">
                        <FileText size={12} />
                        {counts.expired}
                      </span>
                    )
                  ) : (
                    <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-semibold whitespace-nowrap">
                      <FileText size={12} />
                      0
                    </span>
                  )}
                  {site._id === selectedSiteId && <Check size={16} />}
                </div>
              </button>
            );
          })
        ) : (
          <div className="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400">Không tìm thấy dự án</div>
        )}
      </div>
      <div className="border-t border-slate-100 dark:border-slate-700 pt-1 flex-shrink-0 pb-1">
        <Link
          to="/projects"
          onClick={() => setIsDropdownOpen(false)}
          className="block w-full text-left px-4 py-2 text-xs text-blue-600 dark:text-blue-400 hover:bg-slate-50 dark:hover:bg-slate-700 font-medium"
        >
          + Quản lý dự án
        </Link>
      </div>
    </div>
  );

  if (sidebarCollapsed) {
    return (
      <>
        <button
          ref={triggerRef}
          type="button"
          onClick={handleDropdownToggle}
          className="relative w-full flex justify-center items-center p-2 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors group overflow-visible"
          aria-label={selectedSite ? `Dự án: ${selectedSite.name}` : 'Chọn dự án'}
          aria-expanded={isDropdownOpen}
        >
          <Building2 size={18} className="text-blue-600 dark:text-blue-400" />
          <span className="hidden lg:group-hover:block absolute left-full ml-2 top-1/2 -translate-y-1/2 bg-white dark:bg-slate-800 text-slate-900 dark:text-white text-xs px-2 py-1 rounded shadow-lg border border-slate-200 dark:border-slate-700 whitespace-nowrap z-[60] pointer-events-none">
            {selectedSite?.name ?? 'Chọn dự án'}
          </span>
        </button>
        {typeof document !== 'undefined' && dropdownPanel ? createPortal(dropdownPanel, document.body) : null}
      </>
    );
  }

  return (
    <div className="relative w-full">
      <button
        ref={triggerRef}
        type="button"
        onClick={handleDropdownToggle}
        className="flex items-start gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all group w-full text-left"
        aria-label="Chọn dự án"
        aria-expanded={isDropdownOpen}
      >
        <div className="flex-1 min-w-0 overflow-visible">
          <p
            className={`text-sm font-semibold break-words [overflow-wrap:anywhere] whitespace-normal w-full leading-snug ${
              selectedSite ? 'text-blue-700 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400'
            }`}
          >
            {selectedSite?.name || 'Chọn dự án'}
          </p>
          <div className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-1">
            {currentSegment && (
              <span
                className={`inline-flex flex-shrink-0 text-[9px] font-bold tracking-wide px-1.5 py-0.5 rounded-full border ${
                  currentSegment === 'residential'
                    ? 'bg-emerald-50 text-emerald-800 border-emerald-200 dark:bg-emerald-900/25 dark:text-emerald-300 dark:border-emerald-800'
                    : 'bg-indigo-50 text-indigo-800 border-indigo-200 dark:bg-indigo-900/25 dark:text-indigo-300 dark:border-indigo-800'
                }`}
              >
                {projectSegmentVi(currentSegment)}
              </span>
            )}
            {selectedSite &&
              (() => {
                const counts = getContractCounts(selectedSite._id);
                if (counts.total > 0) {
                  return counts.active > 0 ? (
                    <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-[10px] font-semibold">
                      <FileText size={11} /> HĐ hoạt động {counts.active}
                    </span>
                  ) : (
                    <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-[10px] font-semibold">
                      <FileText size={11} /> HĐ hết hạn {counts.expired}
                    </span>
                  );
                }
                if (currentSegment === 'residential') {
                  return null;
                }
                return (
                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-[10px] font-semibold">
                    <FileText size={11} /> Chưa có HĐ
                  </span>
                );
              })()}
          </div>
        </div>
        <ChevronDown size={14} className="text-slate-400 flex-shrink-0 mt-1 group-hover:text-slate-600 dark:group-hover:text-slate-300" />
      </button>
      {typeof document !== 'undefined' && dropdownPanel ? createPortal(dropdownPanel, document.body) : null}
    </div>
  );
});

ProjectSelector.displayName = 'ProjectSelector';

export default ProjectSelector;