/**
 * Globals Settings — main content area
 *
 * Pro users:  full-width live preview (editors are in the sidebar)
 * Free users: FeatureUpgradeTab marketing page
 */

import { usePro } from '@/contexts/pro-context'
import { useGlobalsContext } from './contexts/globals-context'
import { GlobalsPreview } from './components/globals-preview'
import { GlobalsUpgradeTab } from './components/upgrade-tab'
import { Loader2 } from 'lucide-react'

export function GlobalsSettings() {
  const { isPro } = usePro()

  // Free users see the upgrade tab
  if (!isPro) {
    return (
      <div className="p-6">
        <GlobalsUpgradeTab />
      </div>
    )
  }

  return <GlobalsEditor />
}

/** Pro-only live preview */
function GlobalsEditor() {
  const { settings, loading } = useGlobalsContext()

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

  return (
    <div className="flex-1 overflow-auto p-6 bg-muted/30">
      <GlobalsPreview settings={settings} />
    </div>
  )
}