import React, { useState } from 'react';

const mockMembers = [
  { id: 1, name: 'Trevor', tag: '#0001', avatar: 'T', status: 'online', roles: ['founder', 'foundation'], joinedAt: '2024-01-15' },
  { id: 2, name: 'Sarah', tag: '#1234', avatar: 'S', status: 'online', roles: ['foundation', 'corporation'], joinedAt: '2024-02-20' },
  { id: 3, name: 'DevUser_2847', tag: '#9876', avatar: 'D', status: 'idle', roles: ['labs'], joinedAt: '2024-03-10' },
  { id: 4, name: 'Alex', tag: '#5555', avatar: 'A', status: 'dnd', roles: ['corporation'], joinedAt: '2024-04-05' },
  { id: 5, name: 'Jordan', tag: '#7777', avatar: 'J', status: 'offline', roles: [], joinedAt: '2024-05-12' },
  { id: 6, name: 'Casey', tag: '#3333', avatar: 'C', status: 'online', roles: ['labs', 'corporation'], joinedAt: '2024-06-01' },
  { id: 7, name: 'Morgan', tag: '#2222', avatar: 'M', status: 'online', roles: ['foundation'], joinedAt: '2024-06-15' },
  { id: 8, name: 'Riley', tag: '#4444', avatar: 'R', status: 'offline', roles: [], joinedAt: '2024-07-20' },
];

const allRoles = [
  { id: 'founder', name: 'Founder', color: '#ff0000' },
  { id: 'foundation', name: 'Foundation', color: '#ff0000' },
  { id: 'corporation', name: 'Corporation', color: '#0066ff' },
  { id: 'labs', name: 'Labs', color: '#ffa500' },
];

export default function MemberListPanel({ onClose }) {
  const [searchQuery, setSearchQuery] = useState('');
  const [filterRole, setFilterRole] = useState('all');
  const [selectedMember, setSelectedMember] = useState(null);
  const [showRoleMenu, setShowRoleMenu] = useState(false);

  const filteredMembers = mockMembers.filter(member => {
    const matchesSearch = member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          member.tag.includes(searchQuery);
    const matchesRole = filterRole === 'all' || member.roles.includes(filterRole);
    return matchesSearch && matchesRole;
  });

  const getMemberRoles = (member) => {
    return allRoles.filter(role => member.roles.includes(role.id));
  };

  const getStatusColor = (status) => {
    const colors = { online: '#3ba55d', idle: '#faa61a', dnd: '#ed4245', offline: '#747f8d' };
    return colors[status] || colors.offline;
  };

  const toggleMemberRole = (memberId, roleId) => {
    // Mock implementation - in real app would update backend
    console.log(`Toggle role ${roleId} for member ${memberId}`);
  };

  return (
    <div className="member-list-panel">
      <div className="member-list-header">
        <h2>Members — {mockMembers.length}</h2>
        <button className="member-list-close" onClick={onClose}>✕</button>
      </div>

      <div className="member-list-filters">
        <input
          type="text"
          className="member-search"
          placeholder="Search members..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <select
          className="role-filter"
          value={filterRole}
          onChange={(e) => setFilterRole(e.target.value)}
        >
          <option value="all">All Roles</option>
          {allRoles.map(role => (
            <option key={role.id} value={role.id}>{role.name}</option>
          ))}
          <option value="">No Roles</option>
        </select>
      </div>

      <div className="member-list-content">
        {filteredMembers.length === 0 ? (
          <div className="no-members">No members found</div>
        ) : (
          filteredMembers.map(member => (
            <div
              key={member.id}
              className={`member-list-item ${selectedMember === member.id ? 'selected' : ''}`}
              onClick={() => setSelectedMember(member.id)}
            >
              <div className="member-avatar-wrapper">
                <div className="member-avatar">{member.avatar}</div>
                <div
                  className="member-status-dot"
                  style={{ background: getStatusColor(member.status) }}
                />
              </div>

              <div className="member-info">
                <div className="member-name-row">
                  <span className="member-name">{member.name}</span>
                  <span className="member-tag">{member.tag}</span>
                </div>
                <div className="member-roles">
                  {getMemberRoles(member).map(role => (
                    <span
                      key={role.id}
                      className="member-role-badge"
                      style={{ borderColor: role.color, color: role.color }}
                    >
                      {role.name}
                    </span>
                  ))}
                </div>
              </div>

              <div className="member-actions">
                <button
                  className="member-action-btn"
                  onClick={(e) => {
                    e.stopPropagation();
                    setSelectedMember(member.id);
                    setShowRoleMenu(!showRoleMenu);
                  }}
                  title="Manage Roles"
                >
                  🎭
                </button>
                <button className="member-action-btn" title="Message">💬</button>
                <button className="member-action-btn" title="More">⋯</button>
              </div>

              {selectedMember === member.id && showRoleMenu && (
                <div className="role-assignment-menu" onClick={(e) => e.stopPropagation()}>
                  <div className="role-menu-header">Manage Roles</div>
                  {allRoles.map(role => (
                    <label key={role.id} className="role-menu-item">
                      <input
                        type="checkbox"
                        checked={member.roles.includes(role.id)}
                        onChange={() => toggleMemberRole(member.id, role.id)}
                      />
                      <span className="role-dot" style={{ background: role.color }}></span>
                      <span>{role.name}</span>
                    </label>
                  ))}
                </div>
              )}
            </div>
          ))
        )}
      </div>

      <div className="member-list-footer">
        <button className="prune-members-btn">Prune Members</button>
        <button className="invite-members-btn">Invite People</button>
      </div>
    </div>
  );
}
