'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { loadComponent } from '@/lib/material-components';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';

export default function VideoCallPage() {
  const searchParams = useSearchParams();
  const roomId = searchParams.get('room');
  const [componentsLoaded, setComponentsLoaded] = useState(false);

  useEffect(() => {
    Promise.all([
      loadComponent('elevated-card'),
      loadComponent('filled-button'),
      loadComponent('icon-button'),
      loadComponent('icon'),
    ]).then(() => {
      setComponentsLoaded(true);
    }).catch((err) => {
      console.error('Error loading components:', err);
      setComponentsLoaded(true);
    });
  }, []);

  if (!componentsLoaded) {
    return <LoadingSpinner size="large" />;
  }

  return (
    <div style={{
      height: 'calc(100vh - 180px)',
      display: 'flex',
      flexDirection: 'column',
      gap: '16px'
    }}>
      <md-elevated-card style={{
        flex: 1,
        borderRadius: '20px',
        padding: '16px',
        display: 'flex',
        flexDirection: 'column',
        background: '#000'
      }}>
        <div style={{
          flex: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#fff'
        }}>
          <div style={{ textAlign: 'center' }}>
            <md-icon style={{ fontSize: '64px', marginBottom: '16px' }}>
              videocam
            </md-icon>
            <p style={{ fontSize: '18px' }}>
              Видеозвонок {roomId ? `(комната: ${roomId})` : ''}
            </p>
            <p style={{ fontSize: '14px', opacity: 0.7 }}>
              LiveKit интеграция будет добавлена
            </p>
          </div>
        </div>
        
        <div style={{
          display: 'flex',
          gap: '12px',
          justifyContent: 'center',
          padding: '16px'
        }}>
          <md-icon-button style={{ background: 'rgba(255,255,255,0.1)' }}>
            <md-icon>mic</md-icon>
          </md-icon-button>
          <md-icon-button style={{ background: 'rgba(255,255,255,0.1)' }}>
            <md-icon>videocam</md-icon>
          </md-icon-button>
          <md-icon-button style={{ background: '#e53935' }}>
            <md-icon>call_end</md-icon>
          </md-icon-button>
        </div>
      </md-elevated-card>
    </div>
  );
}