import React, { useState, useEffect } from 'react';
import { Modal, Select, Button, Message, Table, Space } from '@arco-design/web-react';
import { IconDelete } from '@arco-design/web-react/icon';
import { getUserList } from '@/api/user';
import {
  getCollaboratorList,
  addCollaborator,
  deleteCollaborator
} from '@/api/componentCollaborator';
import { ComponentItem } from '@/api/interface';

interface ShareCollaborationModalProps {
  visible: boolean;
  componentInfo: ComponentItem | null;
  onCancel: () => void;
  onSuccess?: () => void;
  isReadOnly?: boolean; // 是否为只读模式（协同组件tab下）
  currentPermission?: string; // 当前用户的权限（在协同组件tab下使用）
}

interface User {
  id: string;
  username: string;
  account?: string;
}

interface Collaborator {
  id: string;
  collaboratorId: string;
  collaboratorName: string;
  permission: string;
  createTime?: string;
}

const ShareCollaborationModal: React.FC<ShareCollaborationModalProps> = ({
                                                                           visible,
                                                                           componentInfo,
                                                                           onCancel,
                                                                           onSuccess,
                                                                           isReadOnly = false,
                                                                           currentPermission = 'write'
                                                                         }) => {
  const [userList, setUserList] = useState<User[]>([]);
  const [collaboratorList, setCollaboratorList] = useState<Collaborator[]>([]);
  const [selectedUserId, setSelectedUserId] = useState<string>('');
  const [selectedPermission, setSelectedPermission] = useState<string>('write');
  const [loading, setLoading] = useState(false);
  const [tableLoading, setTableLoading] = useState(false);

  // 判断是否可以添加协作者（我的组件 或 协同组件中的admin权限）
  const canAdd = !isReadOnly || currentPermission === 'admin';
  // 判断是否可以编辑/删除（只有我的组件可以）
  const canEdit = !isReadOnly;

  // 权限选项
  const permissionOptions = [
    { label: '管理', value: 'admin' },
    { label: '读', value: 'read' },
    { label: '写', value: 'write' }
  ];

  // 获取用户列表
  const fetchUserList = async () => {
    try {
      const res: any = await getUserList();
      if (res.code === 200 && res.data) {
        setUserList(res.data.records);
      }
    } catch (error) {
      console.error('获取用户列表失败:', error);
      Message.error('获取用户列表失败');
    }
  };

  // 获取协作者列表
  const fetchCollaboratorList = async () => {
    if (!componentInfo?.id) return;

    try {
      setTableLoading(true);
      const res: any = await getCollaboratorList(componentInfo.id);
      if (res.code === 200 && res.data) {
        setCollaboratorList(res.data);
      }
    } catch (error) {
      console.error('获取协作者列表失败:', error);
      Message.error('获取协作者列表失败');
    } finally {
      setTableLoading(false);
    }
  };

  // 添加协作者
  const handleAddCollaborator = async () => {
    if (!selectedUserId) {
      Message.warning('请选择协作者');
      return;
    }

    if (!componentInfo?.id) {
      Message.error('组件信息不完整');
      return;
    }

    // 检查是否已经添加过该用户
    const existingCollaborator = collaboratorList.find(
      c => c.collaboratorId === selectedUserId
    );
    if (existingCollaborator) {
      Message.warning('该用户已经是协作者');
      return;
    }

    try {
      setLoading(true);
      const res: any = await addCollaborator({
        componentBaseId: componentInfo.id,
        collaboratorId: selectedUserId,
        permission: selectedPermission
      });

      if (res.code === 200) {
        Message.success('添加协作者成功');
        setSelectedUserId('');
        setSelectedPermission('write');
        fetchCollaboratorList();
        onSuccess?.();
      }
      else {
        Message.error(res.msg || '添加协作者失败');
      }
    } catch (error) {
      console.error('添加协作者失败:', error);
      Message.error('添加协作者失败');
    } finally {
      setLoading(false);
    }
  };

  // 删除协作者
  const handleDeleteCollaborator = async (collaboratorId: string) => {
    Modal.confirm({
      title: '确认移除',
      content: '确定要移除该协作者吗？',
      okButtonProps: { status: 'danger' },
      onOk: async () => {
        try {
          const res: any = await deleteCollaborator(collaboratorId);
          if (res.code === 200) {
            Message.success('移除协作者成功');
            fetchCollaboratorList();
            onSuccess?.();
          }
          else {
            Message.error(res.msg || '移除协作者失败');
          }
        } catch (error) {
          console.error('移除协作者失败:', error);
          Message.error('移除协作者失败');
        }
      }
    });
  };

  // 更新协作者权限
  const handleUpdatePermission = async (collaborator: Collaborator, newPermission: string) => {
    if (!componentInfo?.id) {
      Message.error('组件信息不完整');
      return;
    }

    try {
      const res: any = await addCollaborator({
        componentBaseId: componentInfo.id,
        collaboratorId: collaborator.collaboratorId,
        permission: newPermission
      });

      if (res.code === 200) {
        Message.success('权限更新成功');
        fetchCollaboratorList();
        onSuccess?.();
      }
      else {
        Message.error(res.msg || '权限更新失败');
      }
    } catch (error) {
      console.error('权限更新失败:', error);
      Message.error('权限更新失败');
    }
  };

  // 表格列定义
  const columns = [
    {
      title: '用户账号',
      dataIndex: 'collaboratorAccount',
      width: 200
    },
    {
      title: '操作权限',
      dataIndex: 'permission',
      width: 150,
      render: (permission: string, record: Collaborator) => {
        const permissionMap = {
          read: '读',
          write: '写',
          admin: '管理'
        };

        // 不可编辑时只显示文本
        if (!canEdit) {
          return <span>{permissionMap[permission] || permission}</span>;
        }

        // 可编辑时显示下拉框
        return (
          <Select
            placeholder="操作权限"
            value={permission}
            onChange={(newPermission) => handleUpdatePermission(record, newPermission)}
            style={{ width: 120 }}
          >
            {permissionOptions.map(option => (
              <Select.Option key={option.value} value={option.value}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        );
      }
    },
    {
      title: '操作',
      dataIndex: 'operations',
      width: 100,
      render: (_: any, record: Collaborator) => {
        // 不可编辑时不显示删除按钮
        if (!canEdit) {
          return null;
        }

        return (
          <Button
            type="text"
            status="danger"
            icon={<IconDelete />}
            onClick={() => handleDeleteCollaborator(record.id)}
          >
            移除
          </Button>
        );
      }
    }
  ];

  // 当弹窗打开时，获取数据
  useEffect(() => {
    if (visible) {
      fetchUserList();
      fetchCollaboratorList();
    }
    else {
      // 关闭时重置状态
      setSelectedUserId('');
      setSelectedPermission('write');
    }
  }, [visible, componentInfo?.id]);

  return (
    <Modal
      title="选择协作者"
      visible={visible}
      onCancel={onCancel}
      footer={null}
      style={{ width: 700 }}
    >
      <div style={{ marginBottom: 20 }}>
        <div style={{
          marginBottom: 16,
          padding: '12px 16px',
          background: '#f7f8fa',
          borderRadius: 4
        }}>
          <div style={{ fontWeight: 500, marginBottom: 4 }}>
            协同成员 ({collaboratorList.length})
          </div>
        </div>

        {/* 添加协作者表单 - 我的组件或协同组件admin权限可以添加 */}
        {canAdd && (
          <Space style={{ width: '100%', marginBottom: 16 }}>
            <Select
              placeholder="请选择协作者"
              value={selectedUserId}
              onChange={setSelectedUserId}
              style={{ width: 300 }}
              showSearch
              filterOption={(inputValue, option) => {
                const children = option.props?.children;
                if (!children || typeof children !== 'string') return false;
                return children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0;
              }}
            >
              {userList.map(user => (
                <Select.Option key={user.id} value={user.id}>
                  {user.account || user.username}
                </Select.Option>
              ))}
            </Select>

            <Select
              placeholder="操作权限"
              value={selectedPermission}
              onChange={setSelectedPermission}
              style={{ width: 150 }}
            >
              {permissionOptions.map(option => (
                <Select.Option key={option.value} value={option.value}>
                  {option.label}
                </Select.Option>
              ))}
            </Select>

            <Button
              type="primary"
              onClick={handleAddCollaborator}
              loading={loading}
            >
              添加
            </Button>
          </Space>
        )}

        {/* 协作者列表 */}
        <Table
          columns={columns}
          data={collaboratorList}
          loading={tableLoading}
          pagination={false}
          border={{
            wrapper: true,
            cell: true
          }}
          noDataElement={
            <div style={{ padding: '40px 0', textAlign: 'center', color: '#999' }}>
              暂无协作者
            </div>
          }
        />
      </div>
    </Modal>
  );
};

export default ShareCollaborationModal;
