// AppShell composition — topbar + main scroll region. Used by the
// dashboard, portal, admin templates as the authenticated-app skeleton.
// The shell itself is dumb; auth gates / sidebar collapse / search /
// command palette layer on top.
//
// `LinkComponent` lets apps pass `Link` from `@voltro/web` so the
// top nav uses client-side routing + loader prefetch instead of full
// page reloads. Default is plain `<a>` so the kit stays
// router-agnostic.
//
// The top bar chrome (sticky, glass-on-scroll, h-16, max-w-7xl) is
// the shared <PageHeader> — same one consumed by DocsLayout and by
// landing / marketplace pages directly. That's the single visual
// source of truth across the four sibling apps; do not duplicate
// the header treatment here.

import type { ComponentType, ReactNode } from 'react'
import { cn } from '../cn'
import type { ShellLinkProps } from './docShell'
import { PageHeader } from './pageHeader'

interface NavLink {
  readonly label: string
  readonly href: string
}

interface AppShellProps {
  readonly brand: ReactNode
  readonly nav?: ReadonlyArray<NavLink>
  readonly right?: ReactNode
  readonly children: ReactNode
  readonly className?: string
  readonly LinkComponent?: ComponentType<ShellLinkProps>
}

const PlainLink = ({ to, className, children }: ShellLinkProps): ReactNode => (
  <a href={to} className={className}>{children}</a>
)

export const AppShell = ({
  brand, nav, right, children, className,
  LinkComponent = PlainLink,
}: AppShellProps): ReactNode => {
  const Link = LinkComponent
  return (
    <div className={cn('min-h-screen flex flex-col bg-background text-foreground', className)}>
      <PageHeader>
        <div className="font-semibold flex items-center gap-2">{brand}</div>
        <div className="flex items-center gap-6">
          {nav && nav.length > 0 ? (
            <nav className="hidden md:flex gap-6 text-sm">
              {nav.map((l) => (
                <Link
                  key={l.href}
                  to={l.href}
                  prefetch
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {l.label}
                </Link>
              ))}
            </nav>
          ) : null}
          {right ? <div>{right}</div> : null}
        </div>
      </PageHeader>
      <main className="flex-1">{children}</main>
    </div>
  )
}