import React, { useEffect, useState } from 'react'
import { useChannels } from '../contexts/ChannelContext'
import ChannelList from './ChannelList'
import VideoPlayer from './VideoPlayer'
import Header from './Header'
import LoadingSpinner from './LoadingSpinner'

export default function MainInterface() {
  const { refreshChannels, isLoading, error, currentChannel } = useChannels()
  const [showChannelList, setShowChannelList] = useState(true)

  useEffect(() => {
    refreshChannels()
  }, [])

  if (isLoading && !currentChannel) {
    return <LoadingSpinner />
  }

  return (
    <div className="min-h-screen bg-gray-900 flex flex-col">
      <Header 
        onToggleChannelList={() => setShowChannelList(!showChannelList)}
        showChannelList={showChannelList}
      />
      
      <div className="flex-1 flex overflow-hidden">
        {showChannelList && (
          <div className="w-80 border-r border-gray-700 flex-shrink-0">
            <ChannelList onChannelSelect={() => setShowChannelList(false)} />
          </div>
        )}
        
        <div className="flex-1 flex flex-col">
          {currentChannel ? (
            <VideoPlayer channel={currentChannel} />
          ) : (
            <div className="flex-1 flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl mb-4">📺</div>
                <h2 className="text-2xl font-semibold text-white mb-2">
                  Selecciona un canal
                </h2>
                <p className="text-gray-400">
                  Elige un canal de la lista para comenzar a ver
                </p>
              </div>
            </div>
          )}
        </div>
      </div>

      {error && (
        <div className="bg-red-900/50 border-t border-red-700 text-red-300 px-4 py-3 text-sm">
          {error}
        </div>
      )}
    </div>
  )
}