import React from 'react'
import { DEMO_PARTICIPANTS } from '../config/demo'
import VideoConference from '../prefabs/VideoConference'
import AudioConference from '../prefabs/AudioConference'

interface StudioVideoAreaProps {
  isDemoMode?: boolean
  layout?: 'grid' | 'focus'
  mode?: 'video' | 'audio'
}

const DemoModeView: React.FC = () => {
  return (
    <div className="flex-1 flex flex-col bg-gray-950">
      <div className="flex-1 p-4 grid grid-cols-2 gap-2">
        {DEMO_PARTICIPANTS.map((p) => (
          <div key={p.id} className="bg-gray-800 rounded-lg p-3 flex flex-col items-center justify-center">
            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center text-white text-2xl font-bold mb-2">
              {p.name.charAt(0).toUpperCase()}
            </div>
            <div className="text-white text-sm font-medium">{p.name}</div>
            <div className="text-gray-400 text-xs">{p.isMicrophoneEnabled ? 'Mic encendido' : 'Mic apagado'}</div>
          </div>
        ))}
      </div>
      <div className="bg-gray-900 border-t border-gray-800 p-4">
        <div className="flex items-center gap-3">
          <h4 className="text-white text-sm font-medium">Participantes en Studio</h4>
          <span className="text-gray-400 text-xs">({DEMO_PARTICIPANTS.length})</span>
        </div>
      </div>
    </div>
  )
}

const LiveKitModeView: React.FC<{ layout: 'grid' | 'focus'; mode: 'video' | 'audio' }> = ({ layout, mode }) => {
  if (mode === 'audio') return <AudioConference />
  return <VideoConference layout={layout} />
}

const StudioVideoArea: React.FC<StudioVideoAreaProps> = ({ isDemoMode = false, layout = 'grid', mode = 'video' }) => {
  return isDemoMode ? <DemoModeView /> : <LiveKitModeView layout={layout} mode={mode} />
}

export default StudioVideoArea