'use client';

import { useAuth } from '@/contexts/AuthContext';
import { useSelectedChild } from '@/contexts/SelectedChildContext';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { MentorDashboard } from '@/components/dashboard/MentorDashboard';
import { ClientDashboard } from '@/components/dashboard/ClientDashboard';
import { ParentDashboard } from '@/components/dashboard/ParentDashboard';

export default function DashboardPage() {
  const { user, loading: authLoading } = useAuth();
  const { selectedChild, loading: childLoading, childrenList } = useSelectedChild();

  if (authLoading) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        minHeight: '50vh',
        background: 'var(--md-sys-color-background)'
      }}>
        <LoadingSpinner size="large" />
      </div>
    );
  }

  if (!user) {
    return null;
  }

  if (user.role === 'mentor') {
    return <MentorDashboard />;
  }
  if (user.role === 'client') {
    return <ClientDashboard />;
  }
  // Родитель: те же страницы, что и студент — показываем дашборд выбранного ребёнка
  if (user.role === 'parent') {
    if (childLoading && childrenList.length === 0) {
      return (
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '50vh',
          background: 'var(--md-sys-color-background)'
        }}>
          <LoadingSpinner size="large" />
        </div>
      );
    }
    if (childrenList.length === 0) {
      return (
        <div style={{
          padding: '24px',
          textAlign: 'center',
          color: 'var(--md-sys-color-on-surface-variant)'
        }}>
          <p>Нет привязанных детей. Обратитесь к администратору.</p>
        </div>
      );
    }
    if (selectedChild) {
      return <ClientDashboard childId={selectedChild.id} childName={selectedChild.name} />;
    }
    return <ParentDashboard />;
  }

  return (
    <div style={{
      padding: '24px',
      textAlign: 'center',
      color: 'var(--md-sys-color-on-surface-variant)'
    }}>
      <p>Неизвестная роль пользователя</p>
    </div>
  );
}