import React, { useEffect, useRef } from "react";
import { useWebRTC } from "../webrtc/WebRTCProvider.jsx";

const members = [
  { section: "Foundation Team — 8", users: [
    { name: "Anderson", avatar: "A", status: "online", avatarBg: "from-red-600 to-red-800" },
    { name: "Trevor", avatar: "T", status: "online", avatarBg: "from-red-600 to-red-800" },
  ]},
  { section: "Labs Team — 12", users: [
    { name: "Sarah", avatar: "S", status: "labs", avatarBg: "from-orange-400 to-orange-700", activity: "Testing v2.0" },
  ]},
  { section: "Developers — 47", users: [
    { name: "Marcus", avatar: "M", status: "in-game", avatarBg: "bg-[#1a1a1a]", activity: "Building" },
    { name: "DevUser_2847", avatar: "D", status: "online", avatarBg: "bg-[#1a1a1a]" },
  ]},
  { section: "Community — 61", users: [
    { name: "JohnDev", avatar: "J", status: "offline", avatarBg: "bg-[#1a1a1a]" },
  ]},
];

export default function MemberSidebar() {
  const { joined, peers, localStream } = useWebRTC();

  // Helper to render audio for remote streams
  function RemoteAudio({ stream }) {
    const audioRef = useRef();
    useEffect(() => {
      if (audioRef.current && stream) {
        audioRef.current.srcObject = stream;
      }
    }, [stream]);
    return <audio ref={audioRef} autoPlay playsInline />;
  }

  // Helper to render local audio (muted)
  function LocalAudio() {
    const audioRef = useRef();
    useEffect(() => {
      if (audioRef.current && localStream) {
        audioRef.current.srcObject = localStream;
      }
    }, [localStream]);
    return <audio ref={audioRef} autoPlay playsInline muted />;
  }

  return (
    <div className="member-sidebar w-72 bg-[#0f0f0f] border-l border-[#1a1a1a] flex flex-col">
      <div className="member-header p-4 border-b border-[#1a1a1a] text-xs uppercase tracking-widest text-gray-500">Members — 128</div>
      <div className="member-list flex-1 overflow-y-auto py-3">
        {/* Show all connected voice users */}
        {(joined || (peers && peers.length > 0)) && (
          <div className="member-section mb-4">
            <div className="member-section-title px-4 py-2 text-xs uppercase tracking-wider text-blue-400 font-bold">Voice Channel — Nexus Lounge</div>
            {/* Local user */}
            {joined && (
              <div className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer bg-blue-900/20">
                <div className="member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr from-blue-600 to-blue-900">
                  <span role="img" aria-label="mic">🎤</span>
                  <div className="online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] bg-blue-400"></div>
                </div>
                <div className="member-name flex-1 text-sm">You (Voice Connected)</div>
                <div className="member-activity text-xs text-blue-400">Live</div>
                <LocalAudio />
              </div>
            )}
            {/* Remote peers */}
            {peers && peers.map(({ peerId, stream }) => (
              <div key={peerId} className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer bg-blue-900/10">
                <div className="member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr from-blue-600 to-blue-900">
                  <span role="img" aria-label="mic">🎤</span>
                  <div className="online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] bg-blue-400"></div>
                </div>
                <div className="member-name flex-1 text-sm">{peerId}</div>
                <div className="member-activity text-xs text-blue-400">Live</div>
                <RemoteAudio stream={stream} />
              </div>
            ))}
          </div>
        )}
        {members.map((section, i) => (
          <div key={i} className="member-section mb-4">
            <div className="member-section-title px-4 py-2 text-xs uppercase tracking-wider text-gray-500 font-bold">{section.section}</div>
            {section.users.map((user, j) => (
              <div key={j} className="member-item flex items-center gap-3 px-4 py-1.5 cursor-pointer hover:bg-[#1a1a1a]">
                <div className={`member-avatar-small w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm relative bg-gradient-to-tr ${user.avatarBg}`}>
                  {user.avatar}
                  <div className={`online-indicator absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-[#0f0f0f] ${user.status === "online" ? "bg-green-400" : user.status === "in-game" ? "bg-blue-500" : user.status === "labs" ? "bg-orange-400" : "bg-gray-700"}`}></div>
                </div>
                <div className="member-name flex-1 text-sm">{user.name}</div>
                {user.activity && <div className="member-activity text-xs text-gray-500">{user.activity}</div>}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}
