'use client';

import { useState, useEffect, useRef } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { toast } from '@/lib/toast';
import { X, Search, Check } from 'lucide-react';
import {
  getDepartments,
  createDepartment,
  updateDepartment,
  getUsers,
  getActiveRegions,
  type Department,
  type User,
  type Region,
} from '@/services/api/organization';

interface DepartmentDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  department?: Department | null;
  defaultParentId?: string; // 预设父部门ID（用于添加子部门）
  organizationId?: string; // ✅ 新增：部门所属组织ID（必填）
}

export function DepartmentDialog({ isOpen, onClose, onSuccess, department, defaultParentId, organizationId }: DepartmentDialogProps) {
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    name: '',
    code: '',
    parentId: '',
    managerId: '',
    description: '',
  });
  const [loading, setLoading] = useState(false);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [loadingData, setLoadingData] = useState(true);
  
  // Manager 搜索相关状态
  const [managerSearch, setManagerSearch] = useState('');
  const [managerResults, setManagerResults] = useState<User[]>([]);
  const [selectedManager, setSelectedManager] = useState<User | null>(null);
  const [searchingManager, setSearchingManager] = useState(false);
  const [showManagerDropdown, setShowManagerDropdown] = useState(false);
  const managerSearchRef = useRef<HTMLDivElement>(null);
  
  // 区域选择（顶级组织编辑时可用）
  const [availableRegions, setAvailableRegions] = useState<Region[]>([]);
  const [selectedRegionIds, setSelectedRegionIds] = useState<string[]>([]);
  const [defaultRegionId, setDefaultRegionId] = useState<string | null>(null);

  const isEdit = !!department;
  const isTopLevel = (isEdit && !department?.parentId) || (!isEdit && !formData.parentId); // 顶级组织（编辑或新建无父部门）时显示区域选择
  
  // ✅ 调试：监控关键状态
  console.log('[DepartmentDialog] State:', {
    isOpen,
    isEdit,
    isTopLevel,
    departmentParentId: department?.parentId,
    formDataParentId: formData.parentId,
    availableRegionsCount: availableRegions.length,
    selectedRegionIdsCount: selectedRegionIds.length,
    defaultRegionId,
    shouldShowRegions: isTopLevel && availableRegions.length > 0,
  });

  // 自动生成部门编码
  const generateCode = () => {
    const timestamp = Date.now().toString(36).toUpperCase();
    return `DEPT_${timestamp}`;
  };

  // 加载部门列表和区域列表
  useEffect(() => {
    if (isOpen) {
      loadData();
      loadRegions();
    }
  }, [isOpen, defaultParentId]); // ✅ 添加 defaultParentId 依赖，确保数据更新
  
  // 加载可用区域
  const loadRegions = async () => {
    try {
      const regions = await getActiveRegions();
      setAvailableRegions(regions);
    } catch (error) {
      console.error('Failed to load regions:', error);
    }
  };

  // 设置表单数据
  useEffect(() => {
    console.log('[DepartmentDialog] useEffect - Setting form data', { 
      department: department ? {
        id: department.id,
        name: department.name,
        parentId: department.parentId,
        regions: department.regions,
        headId: department.headId,
      } : null 
    });
    
    if (department) {
      // 编辑模式：使用现有数据
      setFormData({
        name: department.name,
        code: department.code,
        parentId: department.parentId || '',
        managerId: department.headId || '',  // ← 修改：使用headId
        description: department.description || '',
      });
      // 如果有 head，加载 head 信息
      if (department.headId && department.head) {  // ← 修改：检查headId和head
        setSelectedManager({
          id: department.headId,  // ← 修改
          displayName: department.head.displayName || department.head.username || '',  // ← 修改
          username: department.head.username || '',  // ← 修改
          email: department.head.email || '',  // ← 修改
        } as User);
        setManagerSearch(department.head.displayName || department.head.username || '');  // ← 添加：设置搜索框显示名称
      } else {
        setSelectedManager(null);
      }
      // ✅ 修复：设置区域（顶级组织）
      if (!department.parentId) {
        console.log('[DepartmentDialog] This is a top-level org, loading regions:', {
          hasRegions: !!department.regions,
          isArray: Array.isArray(department.regions),
          regionsData: department.regions,
        });
        if (department.regions && Array.isArray(department.regions) && department.regions.length > 0) {
          const regionIds = department.regions.map(r => r.id);
          setSelectedRegionIds(regionIds);
          
          // 找到默认区域
          let defaultRegion = department.regions.find(r => r.isDefault);
          
          // ✅ 容错：如果没有标记为 isDefault 的区域，使用第一个区域作为默认
          if (!defaultRegion && department.regions.length > 0) {
            console.warn('[DepartmentDialog] ⚠️ No region marked as default, using first region as fallback');
            defaultRegion = department.regions[0];
          }
          
          setDefaultRegionId(defaultRegion?.id || null);
          console.log('[DepartmentDialog] ✅ Loaded regions:', { 
            regionIds, 
            defaultRegionId: defaultRegion?.id,
            defaultRegion,
            fallback: !department.regions.find(r => r.isDefault)
          });
        } else {
          console.warn('[DepartmentDialog] ⚠️ No regions data for top-level org, department.regions:', department.regions);
          setSelectedRegionIds([]);
          setDefaultRegionId(null);
        }
      } else {
        console.log('[DepartmentDialog] This is a sub-department, clearing regions');
        setSelectedRegionIds([]);
        setDefaultRegionId(null);
      }
    } else {
      // 新建模式：自动生成编码，使用预设父部门
      setFormData({
        name: '',
        code: generateCode(),
        parentId: defaultParentId || '', // ✅ 如果有 defaultParentId，会自动选中
        managerId: '',
        description: '',
      });
      setSelectedManager(null);
      setSelectedRegionIds([]);
      setDefaultRegionId(null);
    }
    setManagerSearch('');
    setManagerResults([]);
  }, [department, defaultParentId, isOpen]);

  // 点击外部关闭下拉菜单
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (managerSearchRef.current && !managerSearchRef.current.contains(event.target as Node)) {
        setShowManagerDropdown(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // 辅助函数：找到部门所属的根组织（顶级部门）
  const findRootOrganization = (deptId: string, allDepts: Department[]): Department | null => {
    const dept = allDepts.find(d => d.id === deptId);
    if (!dept) return null;
    
    if (!dept.parentId) {
      // 已经是根组织
      return dept;
    }
    
    // 递归向上查找
    return findRootOrganization(dept.parentId, allDepts);
  };

  // 辅助函数：获取某个组织下的所有部门（包括自己和所有子孙部门）
  const getDepartmentsUnderOrganization = (orgId: string, allDepts: Department[]): Department[] => {
    const result: Department[] = [];
    const org = allDepts.find(d => d.id === orgId);
    if (!org) return result;
    
    result.push(org);
    
    const addChildren = (parentId: string) => {
      const children = allDepts.filter(d => d.parentId === parentId);
      children.forEach(child => {
        result.push(child);
        addChildren(child.id);
      });
    };
    
    addChildren(orgId);
    return result;
  };

  const loadData = async () => {
    try {
      setLoadingData(true);
      const deptsRes = await getDepartments();
      let availableDepts = Array.isArray(deptsRes) ? deptsRes : [];
      
      // ✅ 修复：先确定目标组织，再过滤部门列表
      let targetOrgId: string | null = null;
      
      if (defaultParentId) {
        // 场景1：从某个部门的"添加子部门"进入，找到该部门所属的组织
        const rootOrg = findRootOrganization(defaultParentId, availableDepts);
        targetOrgId = rootOrg?.id || null;
      } else if (department && department.parentId) {
        // 场景2：编辑现有子部门，找到该部门所属的组织（使用完整列表查找）
        const rootOrg = findRootOrganization(department.id, availableDepts);
        targetOrgId = rootOrg?.id || null;
      } else if (department && !department.parentId) {
        // 场景3：编辑顶级组织，不需要限制（上级部门字段会被隐藏）
        console.log('[DepartmentDialog] Editing top-level organization, no parent selection needed');
      }
      
      // 如果确定了目标组织，限制部门范围到该组织及其子部门
      if (targetOrgId) {
        availableDepts = getDepartmentsUnderOrganization(targetOrgId, availableDepts);
        console.log('[DepartmentDialog] Filtered departments under organization:', targetOrgId, 'count:', availableDepts.length);
        // ✅ 修复：保留当前组织本身，让用户可以选择它作为父部门
      }
      
      // 最后，如果是编辑模式，过滤掉当前部门（防止设置自己为父部门）
      if (department) {
        availableDepts = availableDepts.filter((d: Department) => d.id !== department.id);
      }
      
      setDepartments(availableDepts);
    } catch (error) {
      console.error('Failed to load data:', error);
      toast.error(t.organization.dialog.loadDataFailed);
    } finally {
      setLoadingData(false);
    }
  };

  // 搜索 Manager
  const searchManager = async (keyword: string) => {
    setManagerSearch(keyword);
    if (!keyword.trim()) {
      setManagerResults([]);
      setShowManagerDropdown(false);
      return;
    }
    
    try {
      setSearchingManager(true);
      const response = await getUsers({ keyword, pageSize: 10 });
      setManagerResults(response.items || []);
      setShowManagerDropdown(true);
    } catch (error) {
      console.error('Failed to search users:', error);
    } finally {
      setSearchingManager(false);
    }
  };

  // 选择 Manager
  const selectManager = (user: User) => {
    setSelectedManager(user);
    setFormData({ ...formData, managerId: user.id });
    setManagerSearch('');
    setManagerResults([]);
    setShowManagerDropdown(false);
  };

  // 清除 Manager
  const clearManager = () => {
    setSelectedManager(null);
    setFormData({ ...formData, managerId: '' });
    setManagerSearch('');
  };

  // 切换区域选择
  const toggleRegion = (regionId: string) => {
    setSelectedRegionIds(prev => {
      if (prev.includes(regionId)) {
        // 如果取消选择的是默认区域，也清除默认设置
        if (defaultRegionId === regionId) {
          setDefaultRegionId(null);
        }
        return prev.filter(r => r !== regionId);
      }
      return [...prev, regionId];
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    console.log('[DepartmentDialog] handleSubmit called', {
      isTopLevel,
      isEdit,
      formData,
      defaultRegionId,
      selectedRegionIds,
    });

    // 验证组织/部门名称
    if (!formData.name) {
      console.log('[DepartmentDialog] Validation failed: name is empty');
      toast.error(isTopLevel ? t.organization.dialog.orgNameRequired : t.organization.dialog.deptNameRequired);
      return;
    }

    // ✅ 新增：验证顶级组织必须选择主要区域
    if (isTopLevel && !isEdit && !defaultRegionId) {
      console.log('[DepartmentDialog] Validation failed: defaultRegionId is empty for top-level org');
      toast.error(t.organization.dialog.selectPrimaryRegionRequired);
      return;
    }

    console.log('[DepartmentDialog] Validation passed, creating/updating department...');

    try {
      setLoading(true);
      const payload: any = {
        organizationId: organizationId || department?.organizationId, // ✅ 添加必填的 organizationId
        name: formData.name,
        code: formData.code,
        parentId: formData.parentId || undefined,
        headId: formData.managerId || undefined, // ✅ 问题3修复：使用 headId 而不是 managerId
        description: formData.description || undefined,
      };
      
      // ✅ 验证 organizationId 是否存在
      if (!payload.organizationId) {
        toast.error(t.organization.dialog.orgIdMissing);
        return;
      }
      
      // 如果是顶级组织（新建或编辑），包含区域信息
      if (isTopLevel) {
        payload.regionIds = selectedRegionIds.length > 0 ? selectedRegionIds : undefined;
        payload.defaultRegionId = defaultRegionId || undefined;
      }

      console.log('[DepartmentDialog] Payload:', payload);

      if (isEdit) {
        await updateDepartment(department!.id, payload);
        toast.success(t.organization.updateSuccess);
      } else {
        await createDepartment(payload);
        toast.success(t.organization.createSuccess);
      }

      onSuccess();
      onClose();
    } catch (error: any) {
      const message = error.message || '';
      if (message.includes('already exists') || message.includes('已存在')) {
        toast.error(t.organization.dialog.codeAlreadyExists);
      } else {
        toast.error(error.message || (isEdit ? t.organization.updateFailed : t.organization.addFailed));
      }
    } finally {
      setLoading(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-hidden flex flex-col">
        {/* 头部 */}
        <div className="px-6 py-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold">
            {isEdit 
              ? (isTopLevel ? t.organization.dialog.editOrg : t.organization.editDepartment)
              : (isTopLevel ? t.organization.dialog.addOrg : t.organization.addDepartment)
            }
          </h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* 内容 */}
        <div className="flex-1 overflow-y-auto px-6 py-4">
          {loadingData ? (
            <div className="flex items-center justify-center py-12">
              <div className="text-center">
                <svg
                  className="w-8 h-8 mx-auto mb-2 text-blue-600 animate-spin"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                  />
                </svg>
                <p className="text-sm text-gray-500">{t.common.loading}</p>
              </div>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              {/* 组织/部门名称 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">
                  {isTopLevel 
                    ? t.organization.dialog.orgName
                    : t.organization.departmentName
                  } <span className="text-red-500">*</span>
                </label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder={isTopLevel 
                    ? t.organization.dialog.orgNamePlaceholder
                    : t.organization.dialog.deptNamePlaceholder
                  }
                  required
                />
              </div>

              {/* 组织/部门编码 - 编辑模式显示（只读），新建模式隐藏（自动生成） */}
              {isEdit && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1.5">
                    {isTopLevel 
                      ? t.organization.dialog.orgCode
                      : t.organization.departmentCode
                    }
                  </label>
                  <Input
                    value={formData.code}
                    disabled
                    className="bg-gray-50 text-gray-500"
                  />
                </div>
              )}

              {/* ✅ 上级部门 - 顶级组织（无父部门）时不显示 */}
              {!isTopLevel && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1.5">
                    {t.organization.parentDepartment}
                  </label>
                  <select
                    value={formData.parentId}
                    onChange={(e) => {
                      setFormData({ ...formData, parentId: e.target.value });
                    }}
                    className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                  >
                    {/* ✅ 修复：移除"顶级"选项，直接显示组织和子部门 */}
                    {departments.length === 0 ? (
                      <option value="">{t.organization.dialog.selectOrgFirst}</option>
                    ) : (
                      departments.map((dept) => (
                        <option key={dept.id} value={dept.id}>
                          {dept.name}
                        </option>
                      ))
                    )}
                  </select>
                </div>
              )}

              {/* 组织/部门负责人 - 搜索选择 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">
                  {isTopLevel 
                    ? t.organization.dialog.orgManager
                    : t.organization.departmentManager
                  }
                </label>
                {selectedManager ? (
                  <div className="flex items-center justify-between h-10 px-3 rounded-md border border-gray-300 bg-white">
                    <span className="text-sm text-gray-900">
                      {selectedManager.displayName} ({selectedManager.username})
                    </span>
                    <button
                      type="button"
                      onClick={clearManager}
                      className="p-1 rounded hover:bg-gray-100"
                    >
                      <X className="w-4 h-4 text-gray-400" />
                    </button>
                  </div>
                ) : (
                  <div className="relative" ref={managerSearchRef}>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                      <input
                        type="text"
                        value={managerSearch}
                        onChange={(e) => searchManager(e.target.value)}
                        onFocus={() => managerSearch && setShowManagerDropdown(true)}
                        placeholder={t.organization.searchManager || '搜索用户...'}
                        className="w-full h-10 pl-9 pr-3 rounded-md border border-gray-300 bg-white text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                      />
                      {searchingManager && (
                        <div className="absolute right-3 top-1/2 -translate-y-1/2">
                          <svg className="w-4 h-4 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                          </svg>
                        </div>
                      )}
                    </div>
                    
                    {/* 搜索结果下拉 */}
                    {showManagerDropdown && managerResults.length > 0 && (
                      <div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 max-h-48 overflow-y-auto">
                        {managerResults.map((user) => (
                          <button
                            key={user.id}
                            type="button"
                            onClick={() => selectManager(user)}
                            className="w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center"
                          >
                            <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-sm font-medium mr-2">
                              {user.displayName?.charAt(0) || user.username?.charAt(0) || '?'}
                            </div>
                            <div>
                              <div className="text-sm text-gray-900">{user.displayName}</div>
                              <div className="text-xs text-gray-500">{user.username} · {user.email}</div>
                            </div>
                          </button>
                        ))}
                      </div>
                    )}
                    
                    {/* 无结果提示 */}
                    {showManagerDropdown && managerSearch && !searchingManager && managerResults.length === 0 && (
                      <div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 px-3 py-4 text-center">
                        <p className="text-sm text-gray-500">{t.organization.dialog.noMatchingResults}</p>
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* 区域选择 - 顶级组织时显示（编辑或新建） */}
              {isTopLevel && availableRegions.length > 0 && (
                <div className="border-t pt-4">
                <label className="block text-sm font-medium text-gray-700 mb-2.5">
                  {t.organization.dialog.relatedRegions}
                </label>
                  
                  {/* 主要区域（primaryRegion）*/}
                  <div className="mb-3">
                    <div className="text-xs font-medium text-gray-600 mb-1">
                      {t.organization.dialog.primaryRegion} <span className="text-red-500">*</span>
                    </div>
                    <select
                      value={defaultRegionId || ''}
                      onChange={(e) => {
                        const regionId = e.target.value;
                        console.log('[Primary Region Select] Changed to:', regionId);
                        setDefaultRegionId(regionId || null);
                        // 主要区域必须包含在运营区域中
                        if (regionId && !selectedRegionIds.includes(regionId)) {
                          setSelectedRegionIds(prev => [...prev, regionId]);
                        }
                      }}
                      onFocus={() => {
                        console.log('[Primary Region Select] Focused, current value:', defaultRegionId);
                        console.log('[Primary Region Select] Available regions:', availableRegions.map(r => ({id: r.id, name: r.name})));
                      }}
                      className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                      required={!isEdit}
                    >
                      <option value="">{t.organization.dialog.selectPrimaryRegion}</option>
                      {availableRegions.map((region) => (
                        <option key={region.id} value={region.id}>
                          {region.name} ({region.code})
                        </option>
                      ))}
                    </select>
                    <p className="mt-1 text-xs text-gray-500">
                      {t.organization.dialog.primaryRegionHint}
                    </p>
                  </div>
                  
                  {/* 运营区域（operatingRegions）*/}
                  <div>
                    <div className="text-xs font-medium text-gray-600 mb-1">
                      {t.organization.dialog.operatingRegions}
                    </div>
                    <div className="space-y-2 pl-1">
                      {availableRegions.map((region) => (
                        <label key={region.id} className="flex items-center cursor-pointer">
                          <input
                            type="checkbox"
                            checked={selectedRegionIds.includes(region.id)}
                            onChange={() => {
                              // 如果取消选择的是主要区域，也清除主要区域设置
                              if (selectedRegionIds.includes(region.id)) {
                              if (defaultRegionId === region.id) {
                                toast.error(t.organization.dialog.cannotRemovePrimaryRegion);
                                return;
                              }
                                toggleRegion(region.id);
                              } else {
                                toggleRegion(region.id);
                              }
                            }}
                            disabled={defaultRegionId === region.id}
                            className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-50"
                          />
                          <span className="ml-2 text-sm text-gray-700">
                            {region.name} ({region.code})
                            {defaultRegionId === region.id && (
                            <span className="ml-2 text-xs text-blue-600">
                              {t.organization.dialog.primaryBadge}
                            </span>
                            )}
                          </span>
                        </label>
                      ))}
                    </div>
                    <p className="mt-1 text-xs text-gray-500">
                      {t.organization.dialog.operatingRegionsHint}
                    </p>
                  </div>
                </div>
              )}

              {/* 描述 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">
                  {t.organization.description}
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder={isTopLevel
                    ? t.organization.dialog.orgDescriptionPlaceholder
                    : t.organization.dialog.deptDescriptionPlaceholder
                  }
                  className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 resize-none"
                  rows={3}
                />
              </div>

              {/* ✅ 修复：底部按钮移到 form 内 */}
              {!loadingData && (
                <div className="pt-4 flex items-center justify-end space-x-3">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={onClose}
                    disabled={loading}
                  >
                    {t.common.cancel}
                  </Button>
                  <Button
                    type="submit"
                    disabled={loading}
                    className="btn-lark-primary"
                  >
                    {loading ? t.common.loading : t.common.submit}
                  </Button>
                </div>
              )}
            </form>
          )}
        </div>
      </div>
    </div>
  );
}