'use client'

import MarketplaceHeader from '@/components/MarketplaceHeader'
import MarketplaceFooter from '@/components/MarketplaceFooter'
import { useMarketplacePreferences, getFooterContent, localeOptions } from '@/components/MarketplaceShell'
import { resolveBrowserAppUrl } from '@/lib/appUrls'

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

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