'use client'

import Link from 'next/link'
import {
  DashboardLanguageSwitcher,
  DashboardThemeSwitcher,
  useDashboardI18n,
} from '@/components/I18nProvider'
import { marketplaceUrl } from '@/lib/urls'

export default function PublicShell({ children }: { children: React.ReactNode }) {
  const { language } = useDashboardI18n()
  const dict = {
    en: {
      workspace: 'Company Workspace',
      signIn: 'Sign in',
      createWorkspace: 'Create workspace',
      preferences: 'Workspace preferences',
    },
    fr: {
      workspace: 'Espace entreprise',
      signIn: 'Connexion',
      createWorkspace: 'Créer un espace',
      preferences: 'Preferences espace',
    },
    ar: {
      workspace: 'مساحة الشركة',
      signIn: 'تسجيل الدخول',
      createWorkspace: 'إنشاء مساحة',
      preferences: 'تفضيلات المساحة',
    },
  }[language]

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,#dbeafe,transparent_35%),linear-gradient(180deg,#f8fafc,white)] transition-colors dark:bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.18),transparent_35%),linear-gradient(180deg,#020617,#0f172a)] dark:text-slate-100">
      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/85 backdrop-blur-md transition-colors dark:border-slate-800 dark:bg-slate-950/85">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
          <Link href={marketplaceUrl} className="flex items-center gap-3 text-slate-900 dark:text-slate-100">
            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-blue-600">RentalDriveGo</span>
            <span className="hidden text-sm font-semibold text-slate-500 dark:text-slate-400 sm:inline">{dict.workspace}</span>
          </Link>
          <nav className="flex items-center gap-2">
            <Link href="/sign-in" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100">
              {dict.signIn}
            </Link>
            <Link href="/sign-up" className="rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-slate-200">
              {dict.createWorkspace}
            </Link>
          </nav>
        </div>
      </header>
      <div>{children}</div>
      <footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors dark:border-slate-800 dark:bg-slate-950/90">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
          <p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-slate-500">
            {dict.preferences}
          </p>
          <div className="flex flex-col items-center gap-3 sm:flex-row">
            <DashboardLanguageSwitcher />
            <DashboardThemeSwitcher />
          </div>
        </div>
      </footer>
    </div>
  )
}
