import React, { useState } from 'react';

export default function VideoCall({ users, onLeave, onToggleMute, onToggleDeafen, onToggleVideo, onToggleScreenShare }) {
  const [isMuted, setIsMuted] = useState(false);
  const [isDeafened, setIsDeafened] = useState(false);
  const [isVideoOn, setIsVideoOn] = useState(true);
  const [isScreenSharing, setIsScreenSharing] = useState(false);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [focusedUser, setFocusedUser] = useState(null);

  const participants = users || [
    { id: 1, name: 'Anderson', avatar: 'A', gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)', speaking: true, muted: false, video: true },
    { id: 2, name: 'Trevor', avatar: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', speaking: false, muted: true, video: true },
    { id: 3, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', speaking: false, muted: false, video: false, streaming: true },
    { id: 4, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', speaking: false, muted: false, video: false },
  ];

  const handleMute = () => {
    setIsMuted(!isMuted);
    onToggleMute?.(!isMuted);
  };

  const handleDeafen = () => {
    setIsDeafened(!isDeafened);
    onToggleDeafen?.(!isDeafened);
  };

  const handleVideo = () => {
    setIsVideoOn(!isVideoOn);
    onToggleVideo?.(!isVideoOn);
  };

  const handleScreenShare = () => {
    setIsScreenSharing(!isScreenSharing);
    onToggleScreenShare?.(!isScreenSharing);
  };

  const focusedParticipant = focusedUser ? participants.find((p) => p.id === focusedUser) : participants.find((p) => p.streaming) || participants[0];
  const gridParticipants = participants.filter((p) => p.id !== focusedParticipant?.id);

  return (
    <div className={`video-call-container ${isFullscreen ? 'fullscreen' : ''}`}>
      {/* Main/Focused Video Area */}
      <div className="video-main">
        <div className="video-focused">
          {focusedParticipant?.streaming ? (
            <div className="screen-share-view">
              <div className="screen-content">
                <div className="screen-placeholder">
                  <span className="screen-icon">🖥️</span>
                  <span>{focusedParticipant.name}'s screen</span>
                </div>
              </div>
              <div className="streamer-pip">
                <div 
                  className="pip-avatar"
                  style={{ background: focusedParticipant.gradient }}
                >
                  {focusedParticipant.avatar}
                </div>
                <span className="pip-name">{focusedParticipant.name}</span>
              </div>
            </div>
          ) : focusedParticipant?.video ? (
            <div className="video-feed">
              <div className="video-placeholder">
                <div 
                  className="video-avatar-large"
                  style={{ background: focusedParticipant.gradient }}
                >
                  {focusedParticipant.avatar}
                </div>
              </div>
              <div className="video-name-overlay">{focusedParticipant.name}</div>
            </div>
          ) : (
            <div className="video-audio-only">
              <div 
                className={`audio-avatar ${focusedParticipant?.speaking ? 'speaking' : ''}`}
                style={{ background: focusedParticipant?.gradient }}
              >
                {focusedParticipant?.avatar}
              </div>
              <div className="audio-name">{focusedParticipant?.name}</div>
              {focusedParticipant?.muted && <div className="audio-muted">🔇</div>}
            </div>
          )}
        </div>

        {/* Participant Grid */}
        <div className="video-grid">
          {gridParticipants.map((participant) => (
            <div 
              key={participant.id}
              className={`video-tile ${participant.speaking ? 'speaking' : ''}`}
              onClick={() => setFocusedUser(participant.id)}
            >
              {participant.video ? (
                <div className="tile-video">
                  <div 
                    className="tile-avatar"
                    style={{ background: participant.gradient }}
                  >
                    {participant.avatar}
                  </div>
                </div>
              ) : (
                <div className="tile-audio">
                  <div 
                    className="tile-avatar"
                    style={{ background: participant.gradient }}
                  >
                    {participant.avatar}
                  </div>
                </div>
              )}
              <div className="tile-info">
                <span className="tile-name">{participant.name}</span>
                <div className="tile-icons">
                  {participant.muted && <span>🔇</span>}
                  {participant.streaming && <span>🖥️</span>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Controls Bar */}
      <div className="video-controls">
        <div className="controls-left">
          <div className="call-info">
            <span className="call-channel">🔊 Nexus Lounge</span>
            <span className="call-duration">1:23:45</span>
          </div>
        </div>

        <div className="controls-center">
          <button 
            className={`control-btn ${isMuted ? 'active' : ''}`}
            onClick={handleMute}
            title={isMuted ? 'Unmute' : 'Mute'}
          >
            {isMuted ? '🔇' : '🎙️'}
          </button>
          <button 
            className={`control-btn ${isDeafened ? 'active' : ''}`}
            onClick={handleDeafen}
            title={isDeafened ? 'Undeafen' : 'Deafen'}
          >
            {isDeafened ? '🔈' : '🔊'}
          </button>
          <button 
            className={`control-btn ${isVideoOn ? 'active' : ''}`}
            onClick={handleVideo}
            title={isVideoOn ? 'Turn Off Camera' : 'Turn On Camera'}
          >
            {isVideoOn ? '📹' : '📷'}
          </button>
          <button 
            className={`control-btn ${isScreenSharing ? 'active sharing' : ''}`}
            onClick={handleScreenShare}
            title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
          >
            🖥️
          </button>
          <button 
            className="control-btn activities"
            title="Activities"
          >
            🎮
          </button>
          <button 
            className="control-btn leave"
            onClick={onLeave}
            title="Leave Call"
          >
            📞
          </button>
        </div>

        <div className="controls-right">
          <button 
            className="control-btn"
            title="Show Participants"
          >
            👥 {participants.length}
          </button>
          <button 
            className="control-btn"
            title="Chat"
          >
            💬
          </button>
          <button 
            className={`control-btn ${isFullscreen ? 'active' : ''}`}
            onClick={() => setIsFullscreen(!isFullscreen)}
            title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
          >
            {isFullscreen ? '⛶' : '⛶'}
          </button>
        </div>
      </div>
    </div>
  );
}
