'use client'

import { Suspense } from 'react'
import { SettingsRail } from './SettingsRail'
import { SettingsLoadingSkeleton } from './SettingsLoadingSkeleton'
import { SETTINGS_SECTIONS } from './sections'

interface SettingsShellProps {
  variant: 'page' | 'modal'
  /** Resolved section id. Required for the modal (drives which content renders);
   *  optional for the page where `{children}` is the route's own content. */
  activeSection?: string
  children?: React.ReactNode
}

/**
 * Shared two-pane settings layout (category rail + content). The full-page
 * route renders it via `settings/layout.tsx` (content = the route's children);
 * the routed modal renders it inside a Dialog (content resolved from the
 * section map). Keeping one shell means page and modal stay visually identical.
 */
export function SettingsShell({ variant, activeSection, children }: SettingsShellProps) {
  if (variant === 'modal') {
    const Section = activeSection ? SETTINGS_SECTIONS[activeSection] : undefined
    return (
      <div className="flex min-h-0 flex-1">
        <aside className="hidden w-56 shrink-0 overflow-y-auto border-r border-border p-3 md:block">
          <SettingsRail variant="modal" display="rail" activeId={activeSection} />
        </aside>
        <div className="min-h-0 flex-1 overflow-y-auto p-6">
          <div className="mb-6 md:hidden">
            <SettingsRail variant="modal" display="select" activeId={activeSection} />
          </div>
          <Suspense fallback={<SettingsLoadingSkeleton />}>
            {Section ? <Section /> : null}
          </Suspense>
        </div>
      </div>
    )
  }

  return (
    <div className="grid gap-8 md:grid-cols-[220px_1fr]">
      <aside className="md:sticky md:top-8 md:self-start">
        <div className="mb-4 md:hidden">
          <SettingsRail variant="page" display="select" />
        </div>
        <div className="hidden md:block">
          <SettingsRail variant="page" display="rail" />
        </div>
      </aside>
      <div className="min-w-0">{children}</div>
    </div>
  )
}