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

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

const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
  const { t } = useTranslation('marketing');
  const { url } = usePage();
  const i18n = useTranslation();

  useEffect(() => {
    const locale = url.startsWith('/en/') ? 'en' : 'de';
    if (i18n.i18n.language !== locale) {
      i18n.i18n.changeLanguage(locale);
    }
  }, [url, i18n]);

  const { translations } = usePage().props as any;
  const marketing = translations?.marketing || {};

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

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

  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="de" href={`https://fotospiel.app/de${path}`} />
        <link rel="alternate" hrefLang="en" href={`https://fotospiel.app/en${path}`} />
        <link rel="alternate" hrefLang="x-default" href="https://fotospiel.app/de" />
      </Head>
      <div className="min-h-screen bg-white">
        <header className="bg-white shadow-sm">
          <div className="container mx-auto px-4 py-4">
            <nav className="flex justify-between items-center">
              <Link href="/" className="text-xl font-bold text-gray-900">
                Fotospiel
              </Link>
              <div className="hidden md:flex space-x-8">
                <Link href="/" className="text-gray-700 hover:text-gray-900">
                  {t('nav.home')}
                </Link>
                <Link href="/packages" className="text-gray-700 hover:text-gray-900">
                  {t('nav.packages')}
                </Link>
                <Link href="/blog" className="text-gray-700 hover:text-gray-900">
                  {t('nav.blog')}
                </Link>
                <Link href="/kontakt" className="text-gray-700 hover:text-gray-900">
                  {t('nav.contact')}
                </Link>
              </div>
              <div className="flex items-center space-x-4">
                <select
                  value={currentLocale}
                  onChange={(e) => {
                    const newLocale = e.target.value;
                    const newPath = url.replace(/^\/(de|en)?/, `/${newLocale}`);
                    router.visit(newPath);
                  }}
                  className="border border-gray-300 rounded-md px-2 py-1"
                >
                  <option value="de">DE</option>
                  <option value="en">EN</option>
                </select>
              </div>
            </nav>
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer className="bg-gray-800 text-white py-8">
          <div className="container mx-auto px-4 text-center">
            <p>&copy; 2025 Fotospiel. Alle Rechte vorbehalten.</p>
            <div className="mt-4 space-x-4">
              <Link href="/datenschutz" className="hover:underline">
                {t('nav.privacy')}
              </Link>
              <Link href="/impressum" className="hover:underline">
                {t('nav.impressum')}
              </Link>
              <Link href="/kontakt" className="hover:underline">
                {t('nav.contact')}
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
};

export default MarketingLayout;
