import React, { useState } from 'react';
import { useGroupSettingState, GroupPermission } from '@tencentcloud/chat-uikit-react';

const GroupSettingPanel = () => {
  const {
    groupID,
    groupName,
    avatar,
    memberCount,
    maxMemberCount,
    isMuted,
    isPinned,
    hasPermission,
    setChatPinned,
    setChatMuted,
    updateGroupProfile,
    quitGroup,
  } = useGroupSettingState();

  const [isEditing, setIsEditing] = useState(false);
  const [newName, setNewName] = useState(groupName || '');

  const handleUpdateName = async () => {
    try {
      await updateGroupProfile({ name: newName });
      setIsEditing(false);
    } catch (error) {
      console.error('update failed:', error);
    }
  };

  if (!groupID) return <div>Select group</div>;

  return (
    <div className="group-setting">
      {/* Group chat info */}
      <div className="group-info">
        <img src={avatar} alt="group avatar" className="group-avatar" />
        {isEditing ? (
          <div className="edit-form">
            <input 
              value={newName} 
              onChange={e => setNewName(e.target.value)}
              className="name-input"
            />
            <button onClick={handleUpdateName}>save</button>
            <button onClick={() => setIsEditing(false)}>cancel</button>
          </div>
        ) : (
          <div className="group-details">
            <h3>{groupName}</h3>
            <span>member: {memberCount}/{maxMemberCount}</span>
            {hasPermission(GroupPermission.UPDATE_GROUP_INFO) && (
              <button onClick={() => setIsEditing(true)}>Edit</button>
            )}
          </div>
        )}
      </div>

      {/* chat settings */}
      <div className="chat-settings">
        <div className="setting-item">
          <span>pin conversation</span>
          <input 
            type="checkbox" 
            checked={isPinned || false}
            onChange={e => setChatPinned(e.target.checked)}
          />
        </div>
        <div className="setting-item">
          <span>mute</span>
          <input 
            type="checkbox" 
            checked={isMuted || false}
            onChange={e => setChatMuted(e.target.checked)}
          />
        </div>
      </div>

      {/* action button */}
      <div className="actions">
        <button onClick={quitGroup} className="danger-btn">
          Quit Group
        </button>
      </div>
    </div>
  );
};

import React, { useEffect } from 'react';
import { useGroupSettingState, GroupMemberRole, GroupPermission } from '@tencentcloud/chat-uikit-react';

const GroupMemberList: React.FC = () => {
  const {
    allMembers,
    hasPermission,
    getGroupMemberList,
    setGroupMemberRole,
    deleteGroupMember,
  } = useGroupSettingState();

  useEffect(() => {
    getGroupMemberList({ count: 50 });
  }, []);

  const handlePromote = (userID: string) => {
    setGroupMemberRole({ userID, role: GroupMemberRole.ADMIN });
  };

  const handleRemove = (userID: string) => {
    deleteGroupMember({ userIDList: [userID] });
  };

  return (
    <div className="member-list">
      {allMembers?.map(member => (
        <div key={member.userID} className="member-item">
          <img src={member.avatar} alt="" className="member-avatar" />
          <span className="member-name">{member.nick}</span>
          <span className="member-role">{member.role}</span>
          
          {hasPermission(GroupPermission.SET_MEMBER_ROLE) && (
            <div className="member-actions">
              {member.role === GroupMemberRole.COMMON && (
                <button onClick={() => handlePromote(member.userID)}>
                  Promote to Admin
                </button>
              )}
              <button onClick={() => handleRemove(member.userID)}>
                Remove
              </button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

// Basic Group Chat Settings Component Style
.group-setting {
  padding: 20px;
  background: white;
  border-radius: 8px;

  .group-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;

    .group-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }

    .group-details {
      flex: 1;

      h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
      }

      span {
        color: #666;
        font-size: 14px;
      }

      button {
        margin-top: 8px;
        padding: 4px 8px;
        background: #f0f0f0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    }

    .edit-form {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .name-input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      button {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;

        &:first-child {
          background: #1890ff;
          color: white;
        }

        &:last-child {
          background: #f0f0f0;
        }
      }
    }
  }

  .chat-settings {
    margin-bottom: 20px;

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;

      span {
        font-size: 14px;
      }

      input[type="checkbox"] {
        width: 20px;
        height: 20px;
      }
    }
  }

  .actions {
    .danger-btn {
      padding: 10px 20px;
      background: #ff4d4f;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #ff7875;
      }
    }
  }
}

// Member Management Component style
.member-list {
  .member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;

    .member-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .member-name {
      flex: 1;
      font-size: 14px;
    }

    .member-role {
      color: #666;
      font-size: 12px;
      margin-right: 10px;
    }

    .member-actions {
      display: flex;
      gap: 8px;

      button {
        padding: 4px 8px;
        font-size: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }
      }
    }
  }
}