'use client';

import { useState } from 'react';
import HLSPlayer from '@/components/HLSPlayer';
import ViewerCount from '@/components/ViewerCount';
import NowPlaying from '@/components/NowPlaying';
import ChatSidebar from '@/components/ChatSidebar';
import streamingConfig from '@/config/streaming';

export default function Home() {
  const [showChat, setShowChat] = useState(true);
  
  // Stream URL from config - set NEXT_PUBLIC_STREAM_URL in .env.local
  const streamUrl = streamingConfig.streamUrl;

  return (
    <div className="min-h-screen bg-gradient-to-b from-black to-slate-900 text-white">
      {/* Header */}
      <header className="bg-black/50 backdrop-blur-sm border-b border-cyan-500/30 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center font-bold text-xl">
                A
              </div>
              <div>
                <h1 className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                  AeThex LABS
                </h1>
                <p className="text-xs text-cyan-400/60 font-mono">Live Stream</p>
              </div>
            </div>
            
            <div className="flex items-center gap-4">
              <ViewerCount />
              <button
                onClick={() => setShowChat(!showChat)}
                className="lg:hidden bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/50 text-cyan-400 px-4 py-2 rounded-lg transition-colors font-mono text-sm"
              >
                {showChat ? 'Hide Chat' : 'Show Chat'}
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex flex-col lg:flex-row h-[calc(100vh-73px)]">
        {/* Video Player Section */}
        <div className="flex-1 flex flex-col">
          {/* Video Player */}
          <div className="flex-1 bg-black">
            <HLSPlayer
              src={streamUrl}
              autoPlay={true}
              loop={true}
              muted={false}
            />
          </div>

          {/* Video Info Bar */}
          <div className="bg-black/80 backdrop-blur-sm border-t border-cyan-500/30 p-4">
            <div className="container mx-auto">
              <NowPlaying />
            </div>
          </div>
        </div>

        {/* Chat Sidebar */}
        {showChat && (
          <div className="w-full lg:w-96 h-64 lg:h-auto">
            <ChatSidebar />
          </div>
        )}
      </div>

      {/* Footer */}
      <footer className="bg-black/50 backdrop-blur-sm border-t border-cyan-500/30 py-4">
        <div className="container mx-auto px-4 text-center">
          <p className="text-cyan-400/60 text-sm font-mono">
            © 2026 AeThex LABS - Live Streaming Platform
          </p>
        </div>
      </footer>
    </div>
  );
}