import { useEffect } from 'react'
import { useAdminReviewStore } from '../../state/adminReviewStore'
import { useAuthStore } from '../../state/authStore'
import { useCatalogStore } from '../../state/catalogStore'
import { useProjectStore } from '../../state/projectStore'
import { useSubmissionStore } from '../../state/submissionStore'
import FlowCanvas from '../canvas/FlowCanvas'
import DevicePalette from '../palette/DevicePalette'
import ConnectionErrorBanner from './ConnectionErrorBanner'
import RightPanel from './RightPanel'
import TopBar from './TopBar'

export default function AppShell() {
  const isLoaded = useProjectStore((s) => s.isLoaded)
  const loadInitialDiagram = useProjectStore((s) => s.loadInitialDiagram)
  const isCatalogLoaded = useCatalogStore((s) => s.isLoaded)
  const loadCatalog = useCatalogStore((s) => s.loadCatalog)
  const loadMySubmissions = useSubmissionStore((s) => s.loadMySubmissions)
  const loadAuth = useAuthStore((s) => s.load)
  const role = useAuthStore((s) => s.role)
  const loadAdminQueue = useAdminReviewStore((s) => s.loadAll)

  useEffect(() => {
    loadInitialDiagram()
    loadCatalog()
    loadMySubmissions()
    loadAuth()
  }, [loadInitialDiagram, loadCatalog, loadMySubmissions, loadAuth])

  // Only Admins/Super-Admins need the review queue at all — and role isn't
  // known until loadAuth() above resolves, so this is a separate effect
  // keyed on it rather than bundled into the one above.
  useEffect(() => {
    if (role === 'admin' || role === 'super_admin') loadAdminQueue()
  }, [role, loadAdminQueue])

  if (!isLoaded || !isCatalogLoaded) {
    return <div className="flex h-screen items-center justify-center text-sm text-slate-400">Loading…</div>
  }

  return (
    <div className="flex h-screen flex-col">
      <TopBar />
      <div className="flex min-h-0 flex-1">
        <DevicePalette />
        <main className="relative min-w-0 flex-1">
          <ConnectionErrorBanner />
          <FlowCanvas />
        </main>
        <RightPanel />
      </div>
    </div>
  )
}