import React, { useState } from 'react';

export default function StreamOverlay({ onStart, onClose }) {
  const [streamType, setStreamType] = useState('screen');
  const [source, setSource] = useState(null);
  const [quality, setQuality] = useState('720p');
  const [fps, setFps] = useState('30');

  const streamSources = {
    screen: [
      { id: 'screen-1', name: 'Screen 1', type: 'Screen', preview: '🖥️' },
      { id: 'screen-2', name: 'Screen 2', type: 'Screen', preview: '🖥️' },
    ],
    window: [
      { id: 'vscode', name: 'Visual Studio Code', type: 'Window', preview: '💻' },
      { id: 'chrome', name: 'Google Chrome', type: 'Window', preview: '🌐' },
      { id: 'terminal', name: 'Terminal', type: 'Window', preview: '⌨️' },
      { id: 'game', name: 'Game.exe', type: 'Game', preview: '🎮' },
    ],
  };

  const qualities = [
    { value: '480p', label: '480p' },
    { value: '720p', label: '720p' },
    { value: '1080p', label: '1080p', nitro: true },
    { value: '1440p', label: '1440p', nitro: true },
    { value: '4k', label: '4K (Source)', nitro: true },
  ];

  const framerates = [
    { value: '15', label: '15 FPS' },
    { value: '30', label: '30 FPS' },
    { value: '60', label: '60 FPS', nitro: true },
  ];

  const handleStart = () => {
    if (!source) return;
    onStart?.({
      type: streamType,
      source,
      quality,
      fps,
    });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="stream-overlay" onClick={(e) => e.stopPropagation()}>
        <div className="stream-header">
          <h2>📺 Go Live</h2>
          <button className="stream-close" onClick={onClose}>✕</button>
        </div>

        <div className="stream-content">
          <div className="stream-tabs">
            <button 
              className={`stream-tab ${streamType === 'screen' ? 'active' : ''}`}
              onClick={() => { setStreamType('screen'); setSource(null); }}
            >
              🖥️ Screen
            </button>
            <button 
              className={`stream-tab ${streamType === 'window' ? 'active' : ''}`}
              onClick={() => { setStreamType('window'); setSource(null); }}
            >
              🪟 Window
            </button>
          </div>

          <div className="source-grid">
            {streamSources[streamType]?.map(src => (
              <button
                key={src.id}
                className={`source-card ${source?.id === src.id ? 'selected' : ''}`}
                onClick={() => setSource(src)}
              >
                <div className="source-preview">{src.preview}</div>
                <div className="source-info">
                  <span className="source-name">{src.name}</span>
                  <span className="source-type">{src.type}</span>
                </div>
                {source?.id === src.id && (
                  <span className="source-check">✓</span>
                )}
              </button>
            ))}
          </div>

          <div className="stream-settings">
            <h3>Stream Quality</h3>
            
            <div className="setting-row">
              <label>Resolution</label>
              <div className="quality-options">
                {qualities.map(q => (
                  <button
                    key={q.value}
                    className={`quality-btn ${quality === q.value ? 'active' : ''} ${q.nitro ? 'nitro' : ''}`}
                    onClick={() => setQuality(q.value)}
                    disabled={q.nitro}
                  >
                    {q.label}
                    {q.nitro && <span className="nitro-badge">🚀</span>}
                  </button>
                ))}
              </div>
            </div>

            <div className="setting-row">
              <label>Frame Rate</label>
              <div className="quality-options">
                {framerates.map(f => (
                  <button
                    key={f.value}
                    className={`quality-btn ${fps === f.value ? 'active' : ''} ${f.nitro ? 'nitro' : ''}`}
                    onClick={() => setFps(f.value)}
                    disabled={f.nitro}
                  >
                    {f.label}
                    {f.nitro && <span className="nitro-badge">🚀</span>}
                  </button>
                ))}
              </div>
            </div>

            <div className="nitro-upsell">
              <span className="nitro-icon">🚀</span>
              <div className="upsell-text">
                <span>Stream in higher quality with Nitro</span>
                <a href="#">Learn more</a>
              </div>
            </div>
          </div>

          <div className="stream-preview-section">
            <h3>Preview</h3>
            <div className="stream-preview-box">
              {source ? (
                <div className="preview-content">
                  <span className="preview-icon">{source.preview}</span>
                  <span className="preview-label">{source.name}</span>
                </div>
              ) : (
                <div className="preview-placeholder">
                  Select a source to preview
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="stream-footer">
          <div className="stream-info">
            {source && (
              <span>Streaming {source.name} at {quality} {fps}fps</span>
            )}
          </div>
          <div className="stream-actions">
            <button className="cancel-btn" onClick={onClose}>Cancel</button>
            <button 
              className="go-live-btn"
              onClick={handleStart}
              disabled={!source}
            >
              Go Live
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Stream viewer component (when watching someone's stream)
export function StreamViewer({ stream, onClose }) {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [volume, setVolume] = useState(100);

  return (
    <div className={`stream-viewer ${isFullscreen ? 'fullscreen' : ''}`}>
      <div className="stream-video">
        <div className="stream-placeholder">
          <span className="stream-icon">📺</span>
          <span className="stream-title">{stream?.source?.name || 'Stream'}</span>
        </div>
      </div>

      <div className="stream-controls">
        <div className="stream-info-bar">
          <div className="streamer-info">
            <div 
              className="streamer-avatar"
              style={stream?.user?.color ? { background: stream.user.color } : undefined}
            >
              {stream?.user?.avatar || 'S'}
            </div>
            <div className="streamer-details">
              <span className="streamer-name">{stream?.user?.name || 'Streamer'}</span>
              <span className="viewer-count">👁️ {stream?.viewers || 0} viewers</span>
            </div>
          </div>

          <div className="viewer-controls">
            <div className="volume-control">
              <button className="control-btn" onClick={() => setVolume(v => v > 0 ? 0 : 100)}>
                {volume === 0 ? '🔇' : '🔊'}
              </button>
              <input
                type="range"
                min="0"
                max="100"
                value={volume}
                onChange={(e) => setVolume(Number(e.target.value))}
                className="volume-slider"
              />
            </div>
            <button className="control-btn" onClick={() => setIsFullscreen(!isFullscreen)}>
              {isFullscreen ? '⛶' : '⛶'}
            </button>
            <button className="control-btn leave" onClick={onClose}>
              ✕
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Stream badge for voice channel
export function StreamBadge({ stream }) {
  return (
    <div className="stream-badge">
      <span className="badge-icon">📺</span>
      <span className="badge-label">LIVE</span>
    </div>
  );
}
