﻿import React, { useEffect, useMemo, useState } from 'react';
import { Head, Link, router, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MatomoTracker, { MatomoConfig } from '@/components/analytics/MatomoTracker';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import Footer from '@/layouts/app/Footer';
import { useAppearance } from '@/hooks/use-appearance';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { MoreHorizontal, Sun, Moon, Languages, LayoutDashboard, LogOut, LogIn } from 'lucide-react';
import toast from 'react-hot-toast';

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

type PageProps = {
  translations?: Record<string, Record<string, string>>;
  locale?: string;
  analytics?: { matomo?: MatomoConfig };
  supportedLocales?: string[];
  appUrl?: string;
  auth?: { user?: { name?: string; email?: string } };
};

const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
  const page = usePage<PageProps>();
  const { url } = page;
  const { t, i18n, ready } = useTranslation(['marketing', 'common', 'legal', 'auth']);
  const { locale, analytics, supportedLocales = ['de', 'en'], appUrl, auth } = page.props;
  const user = auth?.user ?? null;
  const { localizedPath } = useLocalizedRoutes();
  const { appearance, updateAppearance } = useAppearance();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const occasionLinks = useMemo(() => ([
    {
      key: 'wedding',
      label: t('nav.occasions_types.weddings', 'Hochzeiten'),
      href: localizedPath('/anlaesse/hochzeit'),
    },
    {
      key: 'birthday',
      label: t('nav.occasions_types.birthdays', 'Geburtstage'),
      href: localizedPath('/anlaesse/geburtstag'),
    },
    {
      key: 'corporate',
      label: t('nav.occasions_types.corporate', 'Firmenevents'),
      href: localizedPath('/anlaesse/firmenevent'),
    },
    {
      key: 'confirmation',
      label: t('nav.occasions_types.confirmation', 'Konfirmation'),
      href: localizedPath('/anlaesse/konfirmation'),
    },
  ]), [localizedPath, t]);

  const navLinks = useMemo(() => ([
    {
      key: 'how',
      label: t('nav.how_it_works', "So funktioniert's"),
      href: localizedPath('/so-funktionierts'),
    },
    {
      key: 'packages',
      label: t('nav.packages', 'Pakete'),
      href: localizedPath('/packages'),
    },
    {
      key: 'occasions',
      label: t('nav.occasions', 'Anlässe'),
      children: occasionLinks,
    },
    {
      key: 'blog',
      label: t('nav.blog', 'Blog'),
      href: localizedPath('/blog'),
    },
    {
      key: 'contact',
      label: t('nav.contact', 'Kontakt'),
      href: localizedPath('/kontakt'),
    },
  ]), [localizedPath, occasionLinks, t]);

  const ctaHref = localizedPath('/demo');
  const themeIsDark = appearance === 'dark';
  const themeLabel = themeIsDark ? t('nav.theme_light', 'Helles Design') : t('nav.theme_dark', 'Dunkles Design');
  const toggleTheme = () => updateAppearance(themeIsDark ? 'light' : 'dark');
  const handleLogout = () => {
    router.post('/logout');
  };

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

  if (!ready) {
    return (
      <div className="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 flex items-center justify-center">
        <Head title="Fotospiel" />
        <span className="text-sm text-gray-500 dark:text-gray-400">Lade Inhalte …</span>
      </div>
    );
  }

  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 || supportedLocales[0] || 'de';
  const baseUrl = (typeof appUrl === 'string' && appUrl.length > 0)
    ? appUrl.replace(/\/+$/, '')
    : 'https://fotospiel.app';

  const [rawPath, rawQuery = ''] = url.split('?');
  const localePattern = supportedLocales.length > 0 ? supportedLocales.join('|') : 'de|en';
  const localeRegex = new RegExp(`^/(${localePattern})(?=/|$)`, 'i');
  const relativePath = rawPath.replace(localeRegex, '') || '/';
  const canonicalPath = localizedPath(relativePath, activeLocale);
  const canonicalUrl = `${baseUrl}${canonicalPath}${rawQuery ? `?${rawQuery}` : ''}`;

  const buildAlternateUrl = (targetLocale: string) => {
    const alternatePath = localizedPath(relativePath, targetLocale);
    return `${baseUrl}${alternatePath}${rawQuery ? `?${rawQuery}` : ''}`;
  };

  const alternates = supportedLocales.reduce<Record<string, string>>((acc, currentLocale) => {
    acc[currentLocale] = buildAlternateUrl(currentLocale);
    return acc;
  }, {});

  const orderedLocales = useMemo(() => {
    const preferredOrder = ['de', 'en'];
    return [...supportedLocales].sort((a, b) => {
      const aIndex = preferredOrder.indexOf(a);
      const bIndex = preferredOrder.indexOf(b);
      if (aIndex === -1 && bIndex === -1) return a.localeCompare(b);
      if (aIndex === -1) return 1;
      if (bIndex === -1) return -1;
      return aIndex - bIndex;
    });
  }, [supportedLocales]);

  const resolveLanguageLabel = (code: string) => {
    if (code === 'de') {
      return t('nav.language_de', 'Deutsch');
    }
    if (code === 'en') {
      return t('nav.language_en', 'English');
    }
    return code.toUpperCase();
  };

  const languageOptions = useMemo(() => orderedLocales.map((code) => ({
    code,
    label: resolveLanguageLabel(code),
  })), [orderedLocales, t]);

  const useInlineLocaleToggle = supportedLocales.length === 2;

  const handleLocaleChange = (nextLocale: string) => {
    if (nextLocale === activeLocale) {
      setMobileMenuOpen(false);
      return;
    }

    const targetPath = localizedPath(relativePath, nextLocale);
    const targetUrl = `${targetPath}${rawQuery ? `?${rawQuery}` : ''}`;
    const nextLabel = resolveLanguageLabel(nextLocale);

    setMobileMenuOpen(false);
    router.visit(targetUrl, {
      replace: true,
      preserveState: false,
      onSuccess: () => {
        i18n.changeLanguage(nextLocale);
        toast.success(t('nav.language_changed', '{{language}} selected', { language: nextLabel }));
      },
    });
  };

  const FlagDe = () => (
    <svg
      aria-hidden="true"
      className="h-3.5 w-5 shrink-0 rounded-[3px] shadow-sm ring-1 ring-black/10"
      viewBox="0 0 5 3"
    >
      <rect width="5" height="1" y="0" fill="#000000" />
      <rect width="5" height="1" y="1" fill="#dd0000" />
      <rect width="5" height="1" y="2" fill="#ffce00" />
    </svg>
  );

  const FlagEn = () => (
    <svg
      aria-hidden="true"
      className="h-3.5 w-5 shrink-0 rounded-[3px] shadow-sm ring-1 ring-black/10"
      viewBox="0 0 60 30"
    >
      <rect width="60" height="30" fill="#012169" />
      <path d="M0 0L60 30M60 0L0 30" stroke="#ffffff" strokeWidth="6" />
      <path d="M0 0L60 30M60 0L0 30" stroke="#c8102e" strokeWidth="3" />
      <path d="M30 0V30M0 15H60" stroke="#ffffff" strokeWidth="10" />
      <path d="M30 0V30M0 15H60" stroke="#c8102e" strokeWidth="6" />
    </svg>
  );

  const resolveFlag = (code: string) => {
    if (code === 'de') {
      return <FlagDe />;
    }
    if (code === 'en') {
      return <FlagEn />;
    }
    return null;
  };

  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} />
        <meta property="og:locale" content={activeLocale === 'de' ? 'de_DE' : `${activeLocale}_${activeLocale.toUpperCase()}`} />
        {supportedLocales
          .filter((code) => code !== activeLocale)
          .map((code) => (
            <meta key={`og:locale:${code}`} property="og:locale:alternate" content={code === 'de' ? 'de_DE' : `${code}_${code.toUpperCase()}`} />
          ))}
        <link rel="canonical" href={canonicalUrl} />
        <link rel="alternate" hrefLang="x-default" href={buildAlternateUrl(supportedLocales[0] || 'de')} />
        {Object.entries(alternates).map(([code, href]) => (
          <link key={code} rel="alternate" hrefLang={code} href={href} />
        ))}
      </Head>
      <MatomoTracker config={analytics?.matomo} />
      <div className="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 transition-colors">
        <header className="sticky top-0 z-40 border-b border-gray-200/60 bg-white/95 backdrop-blur dark:border-gray-800/60 dark:bg-gray-900/80">
          <div className="container mx-auto flex items-center justify-between px-4 py-4">
            <Link
              href={localizedPath('/')}
              className="flex items-center gap-3 text-gray-900 dark:text-gray-50"
              onClick={() => setMobileMenuOpen(false)}
            >
              <img src="/logo-transparent-md.png" alt="Logo der Fotospiel App" className="h-10 w-auto" />
              <span className="font-display text-2xl font-semibold tracking-tight text-pink-500 sm:text-3xl">
                Die Fotospiel App
              </span>
            </Link>
            <nav className="hidden items-center gap-6 md:flex">
              {navLinks.map((item) => (
                item.children ? (
                  <div key={item.key} className="relative group">
                    <span className="inline-flex cursor-default items-center gap-1 text-md font-md text-gray-700 transition-colors group-hover:text-pink-600 dark:text-gray-200 dark:group-hover:text-pink-300 font-sans-marketing">
                      {item.label}
                      <svg
                        className="h-4 w-4 text-gray-400 transition group-hover:text-pink-500 dark:text-gray-500"
                        viewBox="0 0 20 20"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true"
                      >
                        <path d="M6 8L10 12L14 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                      </svg>
                    </span>
                    <div className="absolute left-0 top-full hidden min-w-[220px] flex-col gap-1 rounded-xl border border-gray-100 bg-white p-3 text-sm shadow-xl shadow-rose-200/50 transition group-hover:flex group-focus-within:flex dark:border-gray-800 dark:bg-gray-900">
                      {item.children.map((child) => (
                        <Link
                          key={child.key}
                          href={child.href}
                          className="rounded-lg px-3 py-2 font-medium text-gray-600 transition hover:bg-rose-50 hover:text-pink-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:hover:text-pink-300 font-sans-marketing"
                          onClick={() => setMobileMenuOpen(false)}
                        >
                          {child.label}
                        </Link>
                      ))}
                    </div>
                  </div>
                ) : (
                    <Link
                      key={item.key}
                      href={item.href}
                      className="text-md font-md text-gray-700 transition hover:text-pink-600 dark:text-gray-100 dark:hover:text-pink-300 font-sans-marketing"
                      onClick={() => setMobileMenuOpen(false)}
                    >
                    {item.label}
                  </Link>
                )
              ))}
            </nav>
            <div className="flex items-center gap-2">
              {useInlineLocaleToggle && (
                <div
                  className="hidden items-center rounded-full border border-gray-200 bg-white p-1 shadow-sm md:flex dark:border-gray-700 dark:bg-gray-900"
                  role="radiogroup"
                  aria-label={t('nav.language', 'Sprache')}
                >
                  {languageOptions.map((option) => {
                    const isActive = option.code === activeLocale;
                    return (
                      <button
                        key={option.code}
                        type="button"
                        role="radio"
                        aria-checked={isActive}
                        aria-label={`${t('nav.language', 'Sprache')}: ${option.label}`}
                        onClick={() => handleLocaleChange(option.code)}
                        className={[
                          'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
                          isActive
                            ? 'bg-pink-500 text-white shadow-sm'
                            : 'text-gray-600 hover:bg-rose-50 hover:text-pink-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:hover:text-pink-300',
                        ].join(' ')}
                      >
                        {resolveFlag(option.code)}
                        <span className="sr-only">{option.label}</span>
                      </button>
                    );
                  })}
                </div>
              )}
              <Button
                asChild
                className="hidden rounded-full bg-pink-500 px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-pink-600 font-sans-marketing md:inline-flex"
              >
                <Link href={ctaHref}>
                  {t('nav.cta_demo', 'Jetzt ausprobieren')}
                </Link>
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="outline"
                    size="icon"
                    className="rounded-full border-gray-200 text-gray-600 transition hover:border-pink-200 hover:text-pink-500 dark:border-gray-700 dark:text-gray-200 dark:hover:border-pink-400 dark:hover:text-pink-300"
                  >
                    <MoreHorizontal className="h-4 w-4" />
                    <span className="sr-only">{t('nav.preferences', 'Einstellungen')}</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56 space-y-1 p-2 dark:border-gray-800 dark:bg-gray-900">
                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                    {t('nav.preferences', 'Einstellungen')}
                  </DropdownMenuLabel>
                  <DropdownMenuItem
                    onSelect={(event) => {
                      event.preventDefault();
                      toggleTheme();
                    }}
                    className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                  >
                    {themeIsDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                    <span>{themeLabel}</span>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  {!useInlineLocaleToggle && (
                    <>
                      <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                        {t('nav.language', 'Sprache')}
                      </DropdownMenuLabel>
                      <DropdownMenuRadioGroup value={activeLocale} onValueChange={handleLocaleChange}>
                        {supportedLocales.map((code) => (
                          <DropdownMenuRadioItem
                            key={code}
                            value={code}
                            className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                          >
                            <Languages className="h-4 w-4" />
                            <span>{resolveLanguageLabel(code)}</span>
                          </DropdownMenuRadioItem>
                        ))}
                      </DropdownMenuRadioGroup>
                      <DropdownMenuSeparator />
                    </>
                  )}
                  {user ? (
                    <>
                      <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400 dark:text-gray-500">
                        {user.name ?? user.email}
                      </DropdownMenuLabel>
                      <DropdownMenuItem
                        onSelect={(event) => {
                          event.preventDefault();
                          router.visit(localizedPath('/voucher-status'));
                        }}
                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                      >
                        <LayoutDashboard className="h-4 w-4" />
                        <span>{t('gift.lookup_title', 'Gutscheinstatus')}</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onSelect={(event) => {
                          event.preventDefault();
                          router.visit('/event-admin');
                        }}
                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                      >
                        <LayoutDashboard className="h-4 w-4" />
                        <span>{t('nav.dashboard', 'Zum Admin-Bereich')}</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onSelect={(event) => {
                          event.preventDefault();
                          handleLogout();
                        }}
                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                      >
                        <LogOut className="h-4 w-4" />
                        <span>{t('nav.logout', 'Abmelden')}</span>
                      </DropdownMenuItem>
                    </>
                  ) : (
                    <>
                      <DropdownMenuItem
                        onSelect={(event) => {
                          event.preventDefault();
                          router.visit(localizedPath('/login'));
                        }}
                        className="flex items-center gap-2 font-sans-marketing dark:text-gray-100"
                      >
                        <LogIn className="h-4 w-4" />
                        <span>{t('nav.login', 'Anmelden')}</span>
                      </DropdownMenuItem>
                    </>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
              <button
                type="button"
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm transition md:hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
                onClick={() => setMobileMenuOpen((open) => !open)}
                aria-label={mobileMenuOpen ? t('nav.close_menu', 'Menü schließen') : t('nav.open_menu', 'Menü öffnen')}
              >
                {mobileMenuOpen ? (
                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                  </svg>
                ) : (
                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                  </svg>
                )}
              </button>
            </div>
          </div>
          {mobileMenuOpen && (
            <div className="border-t border-gray-200 bg-white md:hidden dark:border-gray-800 dark:bg-gray-900">
              <div className="container mx-auto space-y-4 px-4 py-4">
                {navLinks.map((item) => (
                  item.children ? (
                    <div key={item.key} className="space-y-2">
                      <p className="text-sm font-semibold text-gray-500 dark:text-gray-300">{item.label}</p>
                      <div className="flex flex-col gap-2">
                        {item.children.map((child) => (
                          <Link
                            key={child.key}
                            href={child.href}
                            className="rounded-lg border border-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-pink-400 dark:hover:bg-gray-800 dark:hover:text-pink-300"
                            onClick={() => setMobileMenuOpen(false)}
                          >
                            {child.label}
                          </Link>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <Link
                      key={item.key}
                      href={item.href}
                      className="block rounded-lg border border-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-pink-400 dark:hover:bg-gray-800 dark:hover:text-pink-300 font-sans-marketing"
                      onClick={() => setMobileMenuOpen(false)}
                    >
                      {item.label}
                    </Link>
                  )
                ))}
                <div className="pt-2">
                  <Button
                    asChild
                    className="w-full rounded-full bg-pink-500 px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-pink-600 font-sans-marketing"
                  >
                    <Link href={ctaHref} onClick={() => setMobileMenuOpen(false)}>
                      {t('nav.cta_demo', 'Jetzt ausprobieren')}
                    </Link>
                  </Button>
                </div>
                <div className="pt-2">
                  {useInlineLocaleToggle ? (
                    <div className="space-y-2">
                      <p className="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
                        {t('nav.language', 'Sprache')}
                      </p>
                      <div
                        role="radiogroup"
                        aria-label={t('nav.language', 'Sprache')}
                        className="grid grid-cols-2 gap-2"
                      >
                        {languageOptions.map((option) => {
                          const isActive = option.code === activeLocale;
                          return (
                            <button
                              key={option.code}
                              type="button"
                              role="radio"
                              aria-checked={isActive}
                              aria-label={`${t('nav.language', 'Sprache')}: ${option.label}`}
                              onClick={() => handleLocaleChange(option.code)}
                              className={[
                                'flex items-center justify-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
                                isActive
                                  ? 'border-pink-500 bg-pink-500 text-white shadow-sm'
                                  : 'border-gray-200 bg-white text-gray-700 hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-pink-400 dark:hover:bg-gray-800 dark:hover:text-pink-300',
                              ].join(' ')}
                            >
                              {resolveFlag(option.code)}
                              <span>{option.label}</span>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ) : (
                    <>
                      <label htmlFor="marketing-language-select-mobile" className="sr-only">
                        {t('nav.language', 'Sprache')}
                      </label>
                      <select
                        id="marketing-language-select-mobile"
                        value={activeLocale}
                        onChange={(event) => handleLocaleChange(event.target.value)}
                        className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm focus:border-pink-400 focus:outline-none focus:ring focus:ring-pink-200 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:focus:border-pink-400 dark:focus:ring-pink-300"
                      >
                        {supportedLocales.map((code) => (
                          <option key={code} value={code}>
                            {resolveLanguageLabel(code)}
                          </option>
                        ))}
                      </select>
                    </>
                  )}
                </div>
              </div>
            </div>
          )}
        </header>
        <main>
          {children}
        </main>
        <Footer />
      </div>
    </>
  );
};

export default MarketingLayout;
