import { useState } from 'react';
import type { RuleGroup, DocTypeInfo } from '~/api/evaluation_points/rule-groups';

interface RebindModalProps {
  /** 是否显示弹窗 */
  visible: boolean;
  /** 要删除的分组ID */
  groupId: string;
  /** 要删除的分组名称 */
  groupName: string;
  /** 关联的评查点数量 */
  pointsCount: number;
  /** 只绑定当前分组的文档类型（换绑时会替换为新分组） */
  singleBoundDocTypes: DocTypeInfo[];
  /** 绑定多个分组的文档类型（换绑时会移除当前分组） */
  multiBoundDocTypes: DocTypeInfo[];
  /** 所有一级分组列表（用于选择新分组） */
  allFirstLevelGroups: RuleGroup[];
  /** 换绑并删除操作是否加载中 */
  loading?: boolean;
  /** 关闭弹窗 */
  onClose: () => void;
  /** 确认换绑并删除 */
  onConfirm: (newGroupId: string) => void;
}

export function RebindModal({
  visible,
  groupId,
  groupName,
  pointsCount,
  singleBoundDocTypes,
  multiBoundDocTypes,
  allFirstLevelGroups,
  loading = false,
  onClose,
  onConfirm
}: RebindModalProps) {
  // 选中的新一级分组ID
  const [selectedGroupId, setSelectedGroupId] = useState<string>('');

  // 过滤掉当前要删除的一级分组
  const availableGroups = allFirstLevelGroups.filter(g => g.id !== groupId);

  // 处理确认换绑
  const handleConfirm = () => {
    if (!selectedGroupId) {
      return;
    }
    onConfirm(selectedGroupId);
  };

  // 重置状态
  const handleClose = () => {
    setSelectedGroupId('');
    onClose();
  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
      {/* 遮罩层 */}
      <div
        className="absolute inset-0 bg-black/50"
        onClick={handleClose}
      />

      {/* 弹窗内容 */}
      <div className="relative bg-white rounded-lg shadow-xl w-[800px] min-h-[500px] max-h-[85vh] overflow-hidden flex flex-col">
        {/* 标题栏 */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-medium text-gray-900">
            <i className="ri-exchange-line mr-2 text-primary"></i>
            分组换绑
          </h3>
          <button
            type="button"
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <i className="ri-close-line text-xl"></i>
          </button>
        </div>

        {/* 主体内容 */}
        <div className="px-6 py-4 overflow-y-auto flex-1">
          {/* 提示信息 */}
          <div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
            <div className="flex items-start">
              <i className="ri-alert-line text-amber-500 text-xl mr-3 mt-0.5"></i>
              <div>
                <p className="text-amber-800 font-medium">
                  一级分组「{groupName}」下有 <span className="text-amber-900 font-bold">{pointsCount}</span> 个评查点
                </p>
                <p className="text-amber-700 text-sm mt-1">
                  请选择新的一级分组进行换绑后，才能删除该分组。
                </p>
              </div>
            </div>
          </div>

          {/* 两栏布局 */}
          <div className="grid grid-cols-2 gap-6 mb-6">
            {/* 左侧：需要更换绑定的文档类型 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
                <i className="ri-file-transfer-line mr-2 text-blue-500"></i>
                需要更换绑定的文档类型
              </h4>
              {singleBoundDocTypes.length > 0 ? (
                <>
                  <p className="text-xs text-gray-500 mb-3">
                    以下文档类型只绑定了当前分组，换绑后将绑定到新选择的分组：
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {singleBoundDocTypes.map(docType => (
                      <span
                        key={docType.id}
                        className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
                      >
                        <i className="ri-file-text-line mr-1"></i>
                        {docType.name}
                      </span>
                    ))}
                  </div>
                </>
              ) : (
                <p className="text-sm text-gray-400 italic">无需要更换绑定的文档类型</p>
              )}
            </div>

            {/* 右侧：选择新的一级分组 */}
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
                <i className="ri-folder-transfer-line mr-2 text-primary"></i>
                选择新的一级分组
              </h4>
              <p className="text-xs text-gray-500 mb-3">
                请选择一个一级分组作为换绑目标（单选）：
              </p>
              {availableGroups.length > 0 ? (
                <div className="min-h-[280px] overflow-y-auto space-y-2">
                  {availableGroups.map(group => (
                    <label
                      key={group.id}
                      className={`flex items-center p-2 rounded-md cursor-pointer transition-colors ${
                        selectedGroupId === group.id
                          ? 'bg-primary/10 border border-primary'
                          : 'hover:bg-gray-50 border border-transparent'
                      }`}
                    >
                      <input
                        type="radio"
                        name="newGroup"
                        value={group.id}
                        checked={selectedGroupId === group.id}
                        onChange={(e) => setSelectedGroupId(e.target.value)}
                        className="mr-3 text-primary focus:ring-primary"
                      />
                      <i className="ri-folder-line mr-2 text-gray-400"></i>
                      <span className="text-sm text-gray-700">{group.name}</span>
                      {group.code && (
                        <span className="ml-2 text-xs text-gray-400">({group.code})</span>
                      )}
                    </label>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-gray-400 italic">暂无可选的一级分组</p>
              )}
            </div>
          </div>

          {/* 下方：会移除绑定的文档类型 */}
          {multiBoundDocTypes.length > 0 && (
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center">
                <i className="ri-delete-bin-line mr-2 text-orange-500"></i>
                会移除当前分组绑定的文档类型
              </h4>
              <p className="text-xs text-gray-500 mb-3">
                以下文档类型绑定了多个一级分组，换绑后将移除当前分组的绑定关系：
              </p>
              <div className="flex flex-wrap gap-2">
                {multiBoundDocTypes.map(docType => (
                  <span
                    key={docType.id}
                    className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800"
                  >
                    <i className="ri-file-text-line mr-1"></i>
                    {docType.name}
                  </span>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* 底部按钮 */}
        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50">
          <button
            type="button"
            onClick={handleClose}
            disabled={loading}
            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed"
          >
            取消
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!selectedGroupId || loading}
            className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary border border-transparent rounded-md hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? (
              <>
                <i className="ri-loader-4-line animate-spin mr-2"></i>
                处理中...
              </>
            ) : (
              <>
                <i className="ri-exchange-line mr-2"></i>
                更换绑定并删除
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

export default RebindModal;