'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 BoardPage() {
  const searchParams = useSearchParams();
  const boardId = searchParams.get('id');
  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'
    }}>
      <div style={{
        display: 'flex',
        gap: '8px',
        marginBottom: '16px',
        padding: '8px',
        background: 'var(--md-sys-color-surface)',
        borderRadius: '12px'
      }}>
        <md-icon-button title="Карандаш">
          <md-icon>edit</md-icon>
        </md-icon-button>
        <md-icon-button title="Ластик">
          <md-icon>auto_fix_high</md-icon>
        </md-icon-button>
        <md-icon-button title="Фигуры">
          <md-icon>category</md-icon>
        </md-icon-button>
        <md-icon-button title="Текст">
          <md-icon>text_fields</md-icon>
        </md-icon-button>
        <div style={{ flex: 1 }} />
        <md-filled-button>
          <md-icon slot="icon">save</md-icon>
          Сохранить
        </md-filled-button>
      </div>

      <md-elevated-card style={{
        flex: 1,
        borderRadius: '20px',
        padding: '16px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#fff'
      }}>
        <div style={{ textAlign: 'center' }}>
          <md-icon style={{ 
            fontSize: '64px', 
            marginBottom: '16px',
            color: 'var(--md-sys-color-primary)'
          }}>
            draw
          </md-icon>
          <p style={{ fontSize: '18px', color: 'var(--md-sys-color-on-surface)' }}>
            Интерактивная доска {boardId ? `#${boardId}` : ''}
          </p>
          <p style={{ 
            fontSize: '14px', 
            color: 'var(--md-sys-color-on-surface-variant)' 
          }}>
            Canvas интеграция будет добавлена
          </p>
        </div>
      </md-elevated-card>
    </div>
  );
}