import React, { useState } from 'react';
import { X, Users, UserPlus, Shield, UserMinus, RotateCcw, LogOut } from 'lucide-react';
import { ProjectInfo, ProjectMember, ProjectMemberRole } from '../../types/workbench';
import { UserProfile } from '../../types/docgov';

interface ProjectMembersModalProps {
  isOpen: boolean;
  onClose: () => void;
  project: ProjectInfo | undefined;
  currentUser: UserProfile;
  availableUsers: UserProfile[];
  onAddMember: (member: Omit<ProjectMember, 'joinedAt' | 'status'>) => void;
  onUpdateMemberRole: (userId: number, role: ProjectMemberRole) => void;
  onRemoveMember: (userId: number) => void; // 移出/置为已退出
  onRestoreMember: (userId: number) => void; // 重新激活
}

export const ProjectMembersModal: React.FC<ProjectMembersModalProps> = ({
  isOpen,
  onClose,
  project,
  currentUser,
  availableUsers,
  onAddMember,
  onUpdateMemberRole,
  onRemoveMember,
  onRestoreMember,
}) => {
  const [showAddForm, setShowAddForm] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState<number | ''>('');
  const [selectedRole, setSelectedRole] = useState<ProjectMemberRole>('viewer');

  if (!isOpen || !project) return null;

  const isCreator = currentUser.id === project.creatorId;
  const isAdmin = currentUser.roleId === 'role-admin';
  const canManage = isCreator || isAdmin;

  // 筛选尚未加入该项目的人员
  const existingMemberIds = new Set(project.members.map((m) => m.userId));
  const unjoinedUsers = availableUsers.filter((u) => !existingMemberIds.has(u.id));

  const handleAddSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedUserId) return;
    const targetUser = availableUsers.find((u) => u.id === selectedUserId);
    if (!targetUser) return;

    onAddMember({
      userId: targetUser.id,
      userName: targetUser.name,
      department: targetUser.department,
      position: targetUser.position,
      role: selectedRole,
    });

    setSelectedUserId('');
    setSelectedRole('viewer');
    setShowAddForm(false);
  };

  const getRoleBadge = (role: ProjectMemberRole) => {
    switch (role) {
      case 'creator':
        return { label: '项目创建人', bg: 'rgba(79, 107, 255, 0.12)', color: '#4f6bff' };
      case 'author':
        return { label: '编制人 (Author)', bg: 'rgba(59, 130, 246, 0.12)', color: '#2563eb' };
      case 'reviewer':
        return { label: '审核人 (Reviewer)', bg: 'rgba(217, 119, 6, 0.12)', color: '#d97706' };
      case 'approver':
        return { label: '批准人 (Approver)', bg: 'rgba(16, 185, 129, 0.12)', color: '#059669' };
      default:
        return { label: '查阅者 (Viewer)', bg: 'rgba(100, 116, 139, 0.12)', color: '#64748b' };
    }
  };

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 9999,
        background: 'rgba(15, 23, 42, 0.65)',
        backdropFilter: 'blur(4px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px',
      }}
      onClick={onClose}
    >
      <div
        style={{
          width: '100%',
          maxWidth: '680px',
          maxHeight: '85vh',
          background: 'var(--bg-panel, #ffffff)',
          borderRadius: '16px',
          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
        }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* 头部 */}
        <div
          style={{
            padding: '18px 24px',
            borderBottom: '1px solid var(--border-light, #e2e8f0)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            background: 'var(--bg-subtle, #f8fafc)',
          }}
        >
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <Users size={18} color="var(--brand-500, #4f6bff)" />
              <h2 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: 'var(--text-strong, #0f172a)' }}>
                项目成员与职责权限管理
              </h2>
              <span
                style={{
                  fontSize: '11px',
                  background: 'rgba(79, 107, 255, 0.1)',
                  color: 'var(--brand-600, #4338ca)',
                  padding: '2px 8px',
                  borderRadius: '10px',
                  fontWeight: 600,
                }}
              >
                {project.members.filter((m) => m.status === 'active').length} 位在职成员
              </span>
            </div>
            <p style={{ margin: '4px 0 0', fontSize: '12px', color: 'var(--text-muted, #64748b)' }}>
              当前项目：<strong>{project.title}</strong> (创建人: {project.creatorName})
            </p>
          </div>

          <button
            onClick={onClose}
            style={{
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              color: 'var(--text-muted, #64748b)',
              padding: '6px',
              borderRadius: '8px',
            }}
          >
            <X size={18} />
          </button>
        </div>

        {/* 主体列表 */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px' }}>
          {/* 管理员/创建者操作提示 */}
          <div
            style={{
              padding: '10px 14px',
              marginBottom: '16px',
              borderRadius: '8px',
              background: canManage ? 'rgba(79, 107, 255, 0.05)' : 'rgba(100, 116, 139, 0.06)',
              border: '1px solid var(--border-light, #e2e8f0)',
              fontSize: '12px',
              color: 'var(--text, #334155)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <Shield size={15} color={canManage ? '#4f6bff' : '#64748b'} />
              <span>
                {canManage
                  ? '您是该项目的创建人/管理员，有权添加新成员、调整法定职责或移出成员。'
                  : '您是该项目的协同成员，仅可查阅成员名单与职责分配。'}
              </span>
            </div>
            {canManage && !showAddForm && unjoinedUsers.length > 0 && (
              <button
                onClick={() => setShowAddForm(true)}
                style={{
                  padding: '4px 12px',
                  borderRadius: '6px',
                  border: 'none',
                  background: 'var(--brand-500, #4f6bff)',
                  color: '#fff',
                  fontSize: '12px',
                  fontWeight: 600,
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '4px',
                }}
              >
                <UserPlus size={13} />
                添加成员
              </button>
            )}
          </div>

          {/* 添加新成员表单 */}
          {showAddForm && (
            <form
              onSubmit={handleAddSubmit}
              style={{
                padding: '14px 16px',
                marginBottom: '18px',
                borderRadius: '10px',
                border: '1px solid var(--brand-200, #bfdbfe)',
                background: 'rgba(79, 107, 255, 0.04)',
                display: 'flex',
                alignItems: 'center',
                gap: '12px',
                flexWrap: 'wrap',
              }}
            >
              <div style={{ flex: 1, minWidth: '180px' }}>
                <select
                  value={selectedUserId}
                  onChange={(e) => setSelectedUserId(Number(e.target.value))}
                  style={{
                    width: '100%',
                    height: '34px',
                    padding: '0 8px',
                    borderRadius: '6px',
                    border: '1px solid var(--border, #cbd5e1)',
                    background: '#fff',
                    fontSize: '12px',
                    outline: 'none',
                  }}
                  required
                >
                  <option value="">-- 请选择要添加的成员 --</option>
                  {unjoinedUsers.map((u) => (
                    <option key={u.id} value={u.id}>
                      {u.name} ({u.position} - {u.department})
                    </option>
                  ))}
                </select>
              </div>

              <div style={{ width: '150px' }}>
                <select
                  value={selectedRole}
                  onChange={(e) => setSelectedRole(e.target.value as ProjectMemberRole)}
                  style={{
                    width: '100%',
                    height: '34px',
                    padding: '0 8px',
                    borderRadius: '6px',
                    border: '1px solid var(--border, #cbd5e1)',
                    background: '#fff',
                    fontSize: '12px',
                    outline: 'none',
                  }}
                >
                  <option value="author">编制人 (Author)</option>
                  <option value="reviewer">审核人 (Reviewer)</option>
                  <option value="approver">批准人 (Approver)</option>
                  <option value="viewer">查阅者 (Viewer)</option>
                </select>
              </div>

              <div style={{ display: 'flex', gap: '8px' }}>
                <button
                  type="submit"
                  disabled={!selectedUserId}
                  style={{
                    padding: '0 14px',
                    height: '34px',
                    borderRadius: '6px',
                    border: 'none',
                    background: 'var(--brand-500, #4f6bff)',
                    color: '#fff',
                    fontSize: '12px',
                    fontWeight: 600,
                    cursor: selectedUserId ? 'pointer' : 'not-allowed',
                    opacity: selectedUserId ? 1 : 0.6,
                  }}
                >
                  确认加入
                </button>
                <button
                  type="button"
                  onClick={() => setShowAddForm(false)}
                  style={{
                    padding: '0 12px',
                    height: '34px',
                    borderRadius: '6px',
                    border: '1px solid var(--border, #cbd5e1)',
                    background: '#fff',
                    color: 'var(--text, #334155)',
                    fontSize: '12px',
                    cursor: 'pointer',
                  }}
                >
                  取消
                </button>
              </div>
            </form>
          )}

          {/* 成员列表 */}
          <div
            style={{
              border: '1px solid var(--border-light, #e2e8f0)',
              borderRadius: '10px',
              overflow: 'hidden',
              background: '#fff',
            }}
          >
            {project.members.map((member) => {
              const badge = getRoleBadge(member.role);
              const isExited = member.status === 'exited';
              const isMemberCreator = member.role === 'creator' || member.userId === project.creatorId;

              return (
                <div
                  key={member.userId}
                  style={{
                    padding: '12px 16px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    borderBottom: '1px solid var(--border-light, #f1f5f9)',
                    background: isExited ? 'var(--bg-subtle, #f8fafc)' : '#fff',
                    opacity: isExited ? 0.75 : 1,
                  }}
                >
                  {/* 左侧成员信息 */}
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <span
                        style={{
                          fontSize: '13px',
                          fontWeight: 600,
                          color: isExited ? 'var(--text-muted, #64748b)' : 'var(--text-strong, #0f172a)',
                        }}
                      >
                        {member.userName}
                      </span>

                      {/* 角色徽章 */}
                      <span
                        style={{
                          fontSize: '11px',
                          padding: '2px 8px',
                          borderRadius: '4px',
                          fontWeight: 600,
                          background: badge.bg,
                          color: badge.color,
                        }}
                      >
                        {badge.label}
                      </span>

                      {/* 状态标签 */}
                      {isExited ? (
                        <span
                          style={{
                            fontSize: '10px',
                            padding: '1px 6px',
                            borderRadius: '4px',
                            background: '#fee2e2',
                            color: '#dc2626',
                            fontWeight: 600,
                          }}
                        >
                          已退出 ({member.exitedAt || '历史记录留痕'})
                        </span>
                      ) : (
                        <span
                          style={{
                            fontSize: '10px',
                            padding: '1px 6px',
                            borderRadius: '4px',
                            background: '#dcfce7',
                            color: '#15803d',
                            fontWeight: 600,
                          }}
                        >
                          在职成员
                        </span>
                      )}
                    </div>

                    <div style={{ fontSize: '11px', color: 'var(--text-muted, #64748b)', marginTop: '3px' }}>
                      {member.department || '研发中心'} · {member.position || '研发岗位'} · 加入时间: {member.joinedAt}
                    </div>
                  </div>

                  {/* 右侧管理操作 */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    {canManage && !isMemberCreator && (
                      <>
                        {!isExited ? (
                          <>
                            {/* 修改职责 */}
                            <select
                              value={member.role}
                              onChange={(e) => onUpdateMemberRole(member.userId, e.target.value as ProjectMemberRole)}
                              style={{
                                height: '28px',
                                padding: '0 6px',
                                borderRadius: '6px',
                                border: '1px solid var(--border, #cbd5e1)',
                                background: '#fff',
                                fontSize: '11px',
                                color: 'var(--text-strong, #1e293b)',
                                outline: 'none',
                              }}
                            >
                              <option value="author">编制人</option>
                              <option value="reviewer">审核人</option>
                              <option value="approver">批准人</option>
                              <option value="viewer">查阅者</option>
                            </select>

                            {/* 移出项目 */}
                            <button
                              onClick={() => onRemoveMember(member.userId)}
                              title="将该成员移出项目（保留历史会话但限制后续操作与文档查阅）"
                              style={{
                                padding: '4px 8px',
                                borderRadius: '6px',
                                border: '1px solid rgba(239, 68, 68, 0.3)',
                                background: 'rgba(239, 68, 68, 0.06)',
                                color: '#dc2626',
                                fontSize: '11px',
                                cursor: 'pointer',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '4px',
                              }}
                            >
                              <UserMinus size={12} />
                              移出项目
                            </button>
                          </>
                        ) : (
                          /* 重新激活恢复 */
                          <button
                            onClick={() => onRestoreMember(member.userId)}
                            title="重新激活该成员在项目中的工作权限"
                            style={{
                              padding: '4px 10px',
                              borderRadius: '6px',
                              border: '1px solid rgba(16, 185, 129, 0.3)',
                              background: 'rgba(16, 185, 129, 0.08)',
                              color: '#059669',
                              fontSize: '11px',
                              fontWeight: 600,
                              cursor: 'pointer',
                              display: 'flex',
                              alignItems: 'center',
                              gap: '4px',
                            }}
                          >
                            <RotateCcw size={12} />
                            恢复加入
                          </button>
                        )}
                      </>
                    )}

                    {/* 普通在职成员自主退出项目 */}
                    {!canManage && member.userId === currentUser.id && !isExited && (
                      <button
                        onClick={() => onRemoveMember(currentUser.id)}
                        style={{
                          padding: '4px 10px',
                          borderRadius: '6px',
                          border: '1px solid rgba(239, 68, 68, 0.3)',
                          background: 'rgba(239, 68, 68, 0.08)',
                          color: '#dc2626',
                          fontSize: '11px',
                          fontWeight: 500,
                          cursor: 'pointer',
                          display: 'flex',
                          alignItems: 'center',
                          gap: '4px',
                        }}
                      >
                        <LogOut size={12} />
                        退出该项目
                      </button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* 底部 */}
        <div
          style={{
            padding: '12px 24px',
            borderTop: '1px solid var(--border-light, #e2e8f0)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            background: 'var(--bg-subtle, #f8fafc)',
            fontSize: '12px',
            color: 'var(--text-muted, #64748b)',
          }}
        >
          <div>
            💡 退出项目说明：退出成员将保留已有聊天记录供审计留痕，但无法再发送对话或查阅受控交付物。
          </div>
          <button
            onClick={onClose}
            style={{
              padding: '6px 16px',
              borderRadius: '6px',
              border: '1px solid var(--border, #cbd5e1)',
              background: '#fff',
              fontSize: '12px',
              cursor: 'pointer',
            }}
          >
            完成并关闭
          </button>
        </div>
      </div>
    </div>
  );
};