import { createEffect, Show } from 'solid-js'
import { useAuth } from '../context/auth'
import { DataProvider } from '../context/data'
import { TableSortProvider } from '../context/sort'
import AdminPage from '../routes/admin'

/**
 * Компонент защищенного маршрута
 */
export const ProtectedRoute = () => {
  const auth = useAuth()

  createEffect(() => {
    if (auth.isReady() && !auth.isAuthenticated()) {
      window.location.href = '/login'
    }
  })

  return (
    <Show
      when={auth.isReady()}
      fallback={
        <div class="loading-screen">
          <div class="loading-spinner" />
          <div>Инициализация авторизации...</div>
        </div>
      }
    >
      <Show
        when={auth.isAuthenticated()}
        fallback={
          <div class="auth-error-screen">
            <div class="auth-error-content">
              <h2>Доступ запрещен</h2>
              <p>У вас нет прав доступа к админ-панели или ваша сессия истекла.</p>
              <div class="auth-error-actions">
                <button class="btn btn-primary" onClick={() => (window.location.href = '/login')}>
                  Войти в аккаунт
                </button>
                <button class="btn btn-secondary" onClick={() => auth.logout()}>
                  Выйти из текущего аккаунта
                </button>
              </div>
            </div>
          </div>
        }
      >
        <DataProvider>
          <TableSortProvider>
            <AdminPage apiUrl={`${location.origin}/graphql`} />
          </TableSortProvider>
        </DataProvider>
      </Show>
    </Show>
  )
}
