import React, { useState } from 'react';

export default function StageChannel({ channel, onClose, onLeave }) {
  const [isLive, setIsLive] = useState(true);
  const [isSpeaker, setIsSpeaker] = useState(false);
  const [handRaised, setHandRaised] = useState(false);
  const [muted, setMuted] = useState(true);

  const stageData = channel || {
    name: 'Community Townhall',
    topic: 'Q&A with the AeThex Team - Monthly Update',
    startedAt: '2 hours ago',
    listeners: 234,
  };

  const speakers = [
    { id: 1, name: 'Anderson', avatar: 'A', color: '#ff0000', speaking: true, role: 'Host' },
    { id: 2, name: 'Trevor', avatar: 'T', color: '#0066ff', speaking: false, role: 'Speaker' },
    { id: 3, name: 'Sarah', avatar: 'S', color: '#ffa500', speaking: false, role: 'Speaker' },
  ];

  const audience = [
    { id: 4, name: 'Marcus', avatar: 'M', handRaised: true },
    { id: 5, name: 'DevUser_123', avatar: 'D', handRaised: false },
    { id: 6, name: 'Player_456', avatar: 'P', handRaised: true },
    { id: 7, name: 'CoolGamer', avatar: 'C', handRaised: false },
    { id: 8, name: 'TechFan', avatar: 'T', handRaised: false },
  ];

  const handleRequestSpeak = () => {
    setHandRaised(!handRaised);
  };

  return (
    <div className="stage-channel">
      <div className="stage-header">
        <div className="stage-info">
          <div className="stage-live-badge">
            <span className="live-dot" />
            LIVE
          </div>
          <h2>{stageData.name}</h2>
          <p className="stage-topic">{stageData.topic}</p>
        </div>
        <button className="stage-close" onClick={onClose}>✕</button>
      </div>

      <div className="stage-content">
        <div className="stage-section">
          <div className="section-header">
            <span className="speaker-icon">🎙️</span>
            <span>Speakers — {speakers.length}</span>
          </div>
          <div className="speakers-grid">
            {speakers.map(speaker => (
              <div 
                key={speaker.id} 
                className={`speaker-card ${speaker.speaking ? 'speaking' : ''}`}
              >
                <div 
                  className="speaker-avatar"
                  style={{ background: speaker.color }}
                >
                  {speaker.avatar}
                  {speaker.speaking && <div className="speaking-ring" />}
                </div>
                <div className="speaker-name">{speaker.name}</div>
                <div className="speaker-role">{speaker.role}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="stage-section">
          <div className="section-header">
            <span className="audience-icon">👥</span>
            <span>Audience — {audience.length}</span>
          </div>
          <div className="audience-grid">
            {audience.map(user => (
              <div key={user.id} className="audience-member">
                <div className="audience-avatar">{user.avatar}</div>
                <span className="audience-name">{user.name}</span>
                {user.handRaised && <span className="hand-raised">✋</span>}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="stage-stats">
        <span>👁️ {stageData.listeners} listening</span>
        <span>•</span>
        <span>Started {stageData.startedAt}</span>
      </div>

      <div className="stage-controls">
        {isSpeaker ? (
          <>
            <button 
              className={`stage-btn ${muted ? 'muted' : ''}`}
              onClick={() => setMuted(!muted)}
            >
              {muted ? '🔇' : '🎤'}
              <span>{muted ? 'Unmute' : 'Mute'}</span>
            </button>
            <button className="stage-btn" onClick={() => setIsSpeaker(false)}>
              👥
              <span>Move to Audience</span>
            </button>
          </>
        ) : (
          <button 
            className={`stage-btn request ${handRaised ? 'active' : ''}`}
            onClick={handleRequestSpeak}
          >
            ✋
            <span>{handRaised ? 'Lower Hand' : 'Request to Speak'}</span>
          </button>
        )}
        
        <button className="stage-btn leave" onClick={onLeave}>
          📞
          <span>Leave Stage</span>
        </button>
      </div>
    </div>
  );
}

// Stage channel in sidebar
export function StageChannelPreview({ channel, onJoin }) {
  return (
    <div className="stage-preview">
      <div className="stage-preview-header">
        <span className="stage-icon">📢</span>
        <span className="stage-name">{channel.name}</span>
        <div className="stage-live-dot" />
      </div>
      {channel.topic && (
        <div className="stage-preview-topic">{channel.topic}</div>
      )}
      <div className="stage-preview-info">
        <span className="speaker-count">🎙️ {channel.speakers} speaking</span>
        <span className="listener-count">👁️ {channel.listeners}</span>
      </div>
      <button className="stage-join-btn" onClick={onJoin}>
        Join Stage
      </button>
    </div>
  );
}
