'use client'

import type { ReactNode } from 'react'

import SiteFooter from './SiteFooter'
import SiteNavbar from './SiteNavbar'
import {
  getFooterContent,
  localeOptions,
  useStorefrontPreferences,
} from '@/components/StorefrontShell'
import { resolveBrowserAppUrl } from '@/lib/appUrls'

export default function SitePageLayout({ children }: { children: ReactNode }) {
  const { language, theme, dict, companyName, setLanguage, setTheme } = useStorefrontPreferences()
  const dashboardUrl = resolveBrowserAppUrl(
    process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
  )
  const footerContent = getFooterContent(language)
  const available = localeOptions.filter((option) => option.value !== language)
  const current = localeOptions.find((option) => option.value === language) ?? localeOptions[0]

  return (
    <div className="site-page flex min-h-screen flex-col" data-site-page-layout="true">
      <SiteNavbar
        dict={dict}
        theme={theme}
        setTheme={setTheme}
        companyName={companyName}
        dashboardUrl={dashboardUrl}
        currentLanguage={{
          value: current.value,
          flag: current.flag,
          shortLabel: current.value.toUpperCase(),
        }}
        localeOptions={available.map((option) => ({
          value: option.value,
          flag: option.flag,
          shortLabel: option.value.toUpperCase(),
        }))}
        onSelectLanguage={setLanguage}
      />
      <div className="flex flex-1 flex-col">
        <div className="flex-1">{children}</div>
        <SiteFooter
          primaryItems={footerContent.primary}
          secondaryItems={footerContent.secondary}
          localeLabel={footerContent.localeLabel}
          rightsLabel={footerContent.rightsLabel}
          localeOptions={available}
          currentLocale={current}
          onSelectLanguage={setLanguage}
        />
      </div>
    </div>
  )
}