﻿import React, { useEffect } from 'react';
import { Head, Link, usePage, router } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';

interface MarketingLayoutProps {
  children: React.ReactNode;
  title?: string;
}

const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
  const page = usePage<{ translations?: Record<string, Record<string, string>> }>();
  const { url } = page;
  const { t } = useTranslation('marketing');
  const i18n = useTranslation();
  const { locale } = usePage().props as any;
  const { localizedPath } = useLocalizedRoutes();

  useEffect(() => {
    if (locale && i18n.i18n.language !== locale) {
      i18n.i18n.changeLanguage(locale);
    }
  }, [locale, i18n]);

  const marketing = page.props.translations?.marketing ?? {};

  const getString = (key: string, fallback: string) => {
    const value = marketing[key];
    return typeof value === 'string' ? value : fallback;
  };

  const activeLocale = locale || 'de';
  const alternateLocale = activeLocale === 'de' ? 'en' : 'de';
  const path = url.replace(/^\/(de|en)/, '');
  const canonicalUrl = `https://fotospiel.app${path || '/'}`;

  const handleLocaleChange = (nextLocale: string) => {
    router.post('/set-locale', { locale: nextLocale }, {
      preserveState: true,
      replace: true,
      onSuccess: () => {
        i18n.i18n.changeLanguage(nextLocale);
      },
    });
  };

  return (
    <>
      <Head>
        <title>{title || t('meta.title', getString('title', 'Fotospiel'))}</title>
        <meta
          name="description"
          content={t('meta.description', getString('description', 'Sammle Gastfotos für Events mit QR-Codes'))}
        />
        <meta property="og:title" content={title || t('meta.title', getString('title', 'Fotospiel'))} />
        <meta
          property="og:description"
          content={t('meta.description', getString('description', 'Sammle Gastfotos für Events mit QR-Codes'))}
        />
        <meta property="og:url" content={canonicalUrl} />
        <link rel="canonical" href={canonicalUrl} />
        <link rel="alternate" hrefLang="x-default" href="https://fotospiel.app/" />
      </Head>
      <div className="min-h-screen bg-white">
        <header className="bg-white shadow-sm">
          <div className="container mx-auto px-4 py-4">
           
          </div>
        </header>
        <main>
          {children}
        </main>
        {/* Footer kommt von Footer.tsx */}
            
      </div>
    </>
  );
};

export default MarketingLayout;
