import { useState, useEffect, useRef, useCallback } from 'react';
import './streaming.css';

// ── Types ──

interface StreamInfo {
  id: string;
  broadcasterName: string;
  title: string;
  startedAt: string;
  viewerCount: number;
}

interface ViewState {
  streamId: string;
  phase: 'connecting' | 'connected' | 'error';
  error?: string;
}

const RTC_CONFIG: RTCConfiguration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' },
  ],
};

// ── Elapsed time helper ──
function formatElapsed(startedAt: string): string {
  const diff = Math.max(0, Math.floor((Date.now() - new Date(startedAt).getTime()) / 1000));
  const h = Math.floor(diff / 3600);
  const m = Math.floor((diff % 3600) / 60);
  const s = diff % 60;
  if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  return `${m}:${String(s).padStart(2, '0')}`;
}

// ── Component ──

export default function StreamingTab({ data }: { data: any }) {
  // ── State ──
  const [streams, setStreams] = useState<StreamInfo[]>([]);
  const [userName, setUserName] = useState(() => localStorage.getItem('streaming_name') || '');
  const [streamTitle, setStreamTitle] = useState('Screen Share');
  const [error, setError] = useState<string | null>(null);
  const [myStreamId, setMyStreamId] = useState<string | null>(null);
  const [isBroadcasting, setIsBroadcasting] = useState(false);
  const [starting, setStarting] = useState(false);
  const [viewing, setViewing] = useState<ViewState | null>(null);
  const [, setTick] = useState(0); // for elapsed time re-render

  // ── Refs ──
  const wsRef = useRef<WebSocket | null>(null);
  const clientIdRef = useRef<string>('');
  const localStreamRef = useRef<MediaStream | null>(null);
  const localVideoRef = useRef<HTMLVideoElement | null>(null);
  const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
  /** Broadcaster: one PeerConnection per viewer */
  const peerConnectionsRef = useRef<Map<string, RTCPeerConnection>>(new Map());
  /** Viewer: single PeerConnection to broadcaster */
  const viewerPcRef = useRef<RTCPeerConnection | null>(null);
  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const reconnectDelayRef = useRef(1000);

  // ── Elapsed time ticker ──
  useEffect(() => {
    const hasActive = streams.length > 0 || isBroadcasting;
    if (!hasActive) return;
    const iv = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(iv);
  }, [streams.length, isBroadcasting]);

  // ── SSE data → update stream list ──
  useEffect(() => {
    if (data?.streams) {
      setStreams(data.streams);
    }
  }, [data]);

  // ── Save name to localStorage ──
  useEffect(() => {
    if (userName) localStorage.setItem('streaming_name', userName);
  }, [userName]);

  // ── WebSocket connect ──
  const connectWs = useCallback(() => {
    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) return;

    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    const ws = new WebSocket(`${proto}://${location.host}/ws/streaming`);
    wsRef.current = ws;

    ws.onopen = () => {
      reconnectDelayRef.current = 1000;
    };

    ws.onmessage = (ev) => {
      let msg: any;
      try { msg = JSON.parse(ev.data); } catch { return; }
      handleWsMessage(msg);
    };

    ws.onclose = () => {
      wsRef.current = null;
      // Auto-reconnect if broadcasting or viewing
      if (isBroadcasting || viewing) {
        reconnectTimerRef.current = setTimeout(() => {
          reconnectDelayRef.current = Math.min(reconnectDelayRef.current * 2, 10000);
          connectWs();
        }, reconnectDelayRef.current);
      }
    };

    ws.onerror = () => {
      ws.close();
    };
  }, [isBroadcasting, viewing]);

  // ── WS message handler ──
  const handleWsMessage = useCallback((msg: any) => {
    switch (msg.type) {
      case 'welcome':
        clientIdRef.current = msg.clientId;
        if (msg.streams) setStreams(msg.streams);
        break;

      case 'broadcast_started':
        setMyStreamId(msg.streamId);
        setIsBroadcasting(true);
        setStarting(false);
        break;

      case 'stream_available':
        // SSE will update streams list; this is just a hint
        break;

      case 'stream_ended':
        if (viewing?.streamId === msg.streamId) {
          cleanupViewer();
          setViewing(null);
        }
        break;

      // ── Broadcaster: viewer joined → create offer ──
      case 'viewer_joined': {
        const viewerId = msg.viewerId;
        const pc = new RTCPeerConnection(RTC_CONFIG);
        peerConnectionsRef.current.set(viewerId, pc);

        // Add local stream tracks
        const stream = localStreamRef.current;
        if (stream) {
          for (const track of stream.getTracks()) {
            pc.addTrack(track, stream);
          }
        }

        pc.onicecandidate = (ev) => {
          if (ev.candidate) {
            wsSend({ type: 'ice_candidate', targetId: viewerId, candidate: ev.candidate.toJSON() });
          }
        };

        pc.createOffer()
          .then(offer => pc.setLocalDescription(offer))
          .then(() => {
            wsSend({ type: 'offer', targetId: viewerId, sdp: pc.localDescription });
          })
          .catch(console.error);
        break;
      }

      // ── Broadcaster: viewer left → cleanup ──
      case 'viewer_left': {
        const pc = peerConnectionsRef.current.get(msg.viewerId);
        if (pc) {
          pc.close();
          peerConnectionsRef.current.delete(msg.viewerId);
        }
        break;
      }

      // ── Viewer: received offer from broadcaster ──
      case 'offer': {
        const pc = new RTCPeerConnection(RTC_CONFIG);
        viewerPcRef.current = pc;

        pc.ontrack = (ev) => {
          if (remoteVideoRef.current && ev.streams[0]) {
            remoteVideoRef.current.srcObject = ev.streams[0];
          }
          setViewing(prev => prev ? { ...prev, phase: 'connected' } : prev);
        };

        pc.onicecandidate = (ev) => {
          if (ev.candidate) {
            wsSend({ type: 'ice_candidate', targetId: msg.fromId, candidate: ev.candidate.toJSON() });
          }
        };

        pc.oniceconnectionstatechange = () => {
          if (pc.iceConnectionState === 'failed' || pc.iceConnectionState === 'disconnected') {
            setViewing(prev => prev ? { ...prev, phase: 'error', error: 'Verbindung verloren' } : prev);
          }
        };

        pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))
          .then(() => pc.createAnswer())
          .then(answer => pc.setLocalDescription(answer))
          .then(() => {
            wsSend({ type: 'answer', targetId: msg.fromId, sdp: pc.localDescription });
          })
          .catch(console.error);
        break;
      }

      // ── Broadcaster: received answer from viewer ──
      case 'answer': {
        const pc = peerConnectionsRef.current.get(msg.fromId);
        if (pc) {
          pc.setRemoteDescription(new RTCSessionDescription(msg.sdp)).catch(console.error);
        }
        break;
      }

      // ── ICE candidate relay ──
      case 'ice_candidate': {
        const pc = isBroadcasting
          ? peerConnectionsRef.current.get(msg.fromId)
          : viewerPcRef.current;
        if (pc && msg.candidate) {
          pc.addIceCandidate(new RTCIceCandidate(msg.candidate)).catch(() => {});
        }
        break;
      }

      case 'error':
        setError(msg.message);
        setStarting(false);
        break;
    }
  }, [isBroadcasting, viewing]);

  // ── Send via WS ──
  const wsSend = (data: Record<string, any>) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify(data));
    }
  };

  // ── Start broadcasting ──
  const startBroadcast = useCallback(async () => {
    if (!userName.trim()) { setError('Bitte gib einen Namen ein.'); return; }

    // Check browser support
    if (!navigator.mediaDevices?.getDisplayMedia) {
      setError('Dein Browser unterstützt keine Bildschirmfreigabe.');
      return;
    }

    setError(null);
    setStarting(true);

    try {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true,
      });
      localStreamRef.current = stream;

      // Show local preview
      if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream;
      }

      // Auto-stop when user clicks native "Stop sharing"
      stream.getVideoTracks()[0]?.addEventListener('ended', () => {
        stopBroadcast();
      });

      // Connect WS and start broadcast
      connectWs();

      // Wait for WS to open, then send start_broadcast
      const waitForWs = () => {
        if (wsRef.current?.readyState === WebSocket.OPEN) {
          wsSend({ type: 'start_broadcast', name: userName.trim(), title: streamTitle.trim() || 'Screen Share' });
        } else {
          setTimeout(waitForWs, 100);
        }
      };
      waitForWs();
    } catch (e: any) {
      setStarting(false);
      if (e.name === 'NotAllowedError') {
        setError('Bildschirmfreigabe wurde abgelehnt.');
      } else {
        setError(`Fehler: ${e.message}`);
      }
    }
  }, [userName, streamTitle, connectWs]);

  // ── Stop broadcasting ──
  const stopBroadcast = useCallback(() => {
    wsSend({ type: 'stop_broadcast' });

    // Stop all tracks
    localStreamRef.current?.getTracks().forEach(t => t.stop());
    localStreamRef.current = null;
    if (localVideoRef.current) localVideoRef.current.srcObject = null;

    // Close all peer connections
    for (const pc of peerConnectionsRef.current.values()) pc.close();
    peerConnectionsRef.current.clear();

    setIsBroadcasting(false);
    setMyStreamId(null);
  }, []);

  // ── Join as viewer ──
  const joinStream = useCallback((streamId: string) => {
    setError(null);
    setViewing({ streamId, phase: 'connecting' });
    connectWs();

    const waitForWs = () => {
      if (wsRef.current?.readyState === WebSocket.OPEN) {
        wsSend({ type: 'join_viewer', name: userName.trim() || 'Viewer', streamId });
      } else {
        setTimeout(waitForWs, 100);
      }
    };
    waitForWs();
  }, [userName, connectWs]);

  // ── Leave viewer ──
  const cleanupViewer = useCallback(() => {
    if (viewerPcRef.current) {
      viewerPcRef.current.close();
      viewerPcRef.current = null;
    }
    if (remoteVideoRef.current) remoteVideoRef.current.srcObject = null;
  }, []);

  const leaveViewing = useCallback(() => {
    wsSend({ type: 'leave_viewer' });
    cleanupViewer();
    setViewing(null);
  }, [cleanupViewer]);

  // ── Cleanup on unmount ──
  useEffect(() => {
    return () => {
      localStreamRef.current?.getTracks().forEach(t => t.stop());
      for (const pc of peerConnectionsRef.current.values()) pc.close();
      if (viewerPcRef.current) viewerPcRef.current.close();
      if (wsRef.current) wsRef.current.close();
      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
    };
  }, []);

  // ── Render ──

  // Fullscreen viewer overlay
  if (viewing) {
    const stream = streams.find(s => s.id === viewing.streamId);
    return (
      <div className="stream-viewer-overlay">
        <div className="stream-viewer-header">
          <div className="stream-viewer-header-left">
            <span className="stream-live-badge"><span className="stream-live-dot" /> LIVE</span>
            <div>
              <div className="stream-viewer-title">{stream?.title || 'Stream'}</div>
              <div className="stream-viewer-subtitle">
                {stream?.broadcasterName || '...'} {stream ? `\u00B7 ${stream.viewerCount} Zuschauer` : ''}
              </div>
            </div>
          </div>
          <button className="stream-viewer-close" onClick={leaveViewing}>Verlassen</button>
        </div>
        <div className="stream-viewer-video">
          {viewing.phase === 'connecting' ? (
            <div className="stream-viewer-connecting">
              <div className="stream-viewer-spinner" />
              Verbindung wird hergestellt...
            </div>
          ) : viewing.phase === 'error' ? (
            <div className="stream-viewer-connecting">
              {viewing.error || 'Verbindungsfehler'}
              <button className="stream-btn" onClick={leaveViewing}>Zur\u00FCck</button>
            </div>
          ) : null}
          <video ref={remoteVideoRef} autoPlay playsInline style={viewing.phase === 'connected' ? {} : { display: 'none' }} />
        </div>
      </div>
    );
  }

  return (
    <div className="stream-container">
      {/* Error */}
      {error && (
        <div className="stream-error">
          {error}
          <button className="stream-error-dismiss" onClick={() => setError(null)}>{'\u00D7'}</button>
        </div>
      )}

      {/* Top bar: name, title, start/stop */}
      <div className="stream-topbar">
        <input
          className="stream-input stream-input-name"
          placeholder="Dein Name"
          value={userName}
          onChange={e => setUserName(e.target.value)}
          disabled={isBroadcasting}
        />
        <input
          className="stream-input stream-input-title"
          placeholder="Stream-Titel"
          value={streamTitle}
          onChange={e => setStreamTitle(e.target.value)}
          disabled={isBroadcasting}
        />
        {isBroadcasting ? (
          <button className="stream-btn stream-btn-stop" onClick={stopBroadcast}>
            {'\u23F9'} Stream beenden
          </button>
        ) : (
          <button className="stream-btn" onClick={startBroadcast} disabled={starting}>
            {starting ? 'Starte...' : '\u{1F5A5}\uFE0F Stream starten'}
          </button>
        )}
      </div>

      {/* Grid */}
      {streams.length === 0 && !isBroadcasting ? (
        <div className="stream-empty">
          <div className="stream-empty-icon">{'\u{1F4FA}'}</div>
          <h3>Keine aktiven Streams</h3>
          <p>Starte einen Stream, um deinen Bildschirm zu teilen.</p>
        </div>
      ) : (
        <div className="stream-grid">
          {/* Own broadcast tile (with local preview) */}
          {isBroadcasting && (
            <div className="stream-tile own broadcasting">
              <div className="stream-tile-preview">
                <video ref={localVideoRef} autoPlay playsInline muted />
                <span className="stream-live-badge"><span className="stream-live-dot" /> LIVE</span>
                <span className="stream-tile-viewers">
                  {'\u{1F465}'} {streams.find(s => s.id === myStreamId)?.viewerCount ?? 0}
                </span>
              </div>
              <div className="stream-tile-info">
                <div className="stream-tile-meta">
                  <div className="stream-tile-name">{userName} (Du)</div>
                  <div className="stream-tile-title">{streamTitle}</div>
                </div>
                <span className="stream-tile-time">
                  {myStreamId && streams.find(s => s.id === myStreamId)?.startedAt
                    ? formatElapsed(streams.find(s => s.id === myStreamId)!.startedAt)
                    : '0:00'}
                </span>
              </div>
            </div>
          )}

          {/* Other streams */}
          {streams
            .filter(s => s.id !== myStreamId)
            .map(s => (
              <div key={s.id} className="stream-tile" onClick={() => joinStream(s.id)}>
                <div className="stream-tile-preview">
                  <span className="stream-tile-icon">{'\u{1F5A5}\uFE0F'}</span>
                  <span className="stream-live-badge"><span className="stream-live-dot" /> LIVE</span>
                  <span className="stream-tile-viewers">{'\u{1F465}'} {s.viewerCount}</span>
                </div>
                <div className="stream-tile-info">
                  <div className="stream-tile-meta">
                    <div className="stream-tile-name">{s.broadcasterName}</div>
                    <div className="stream-tile-title">{s.title}</div>
                  </div>
                  <span className="stream-tile-time">{formatElapsed(s.startedAt)}</span>
                  <button className="stream-tile-menu" onClick={e => e.stopPropagation()}>{'\u22EE'}</button>
                </div>
              </div>
            ))}
        </div>
      )}
    </div>
  );
}