"use client";

import Link from "next/link";
import { PublicMenuClient, type MenuCategory, type RestaurantData } from "@/components/PublicMenuClient";
import { THEME_PRESETS } from "@/lib/theme";

interface TemplateGalleryClientProps {
  restaurant: RestaurantData;
  categories: MenuCategory[];
  initialThemeKey?: string;
}

export function TemplateGalleryClient({
  restaurant,
  categories,
}: TemplateGalleryClientProps) {
  const presetsList = Object.values(THEME_PRESETS);

  return (
    <div className="min-h-screen bg-stone-950 text-stone-100 flex flex-col font-sans">
      {/* Top Navbar */}
      <header className="border-b border-stone-800/80 bg-stone-900/90 backdrop-blur-xl sticky top-0 z-50 px-4 sm:px-6 py-3.5">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Link href="/" className="font-black text-xl tracking-tight text-amber-400">
              MENULIO
            </Link>
            <span className="text-stone-600 hidden sm:inline">/</span>
            <span className="text-xs font-semibold text-stone-400 hidden sm:inline">
              Şablon Galerisi
            </span>
          </div>

          <Link
            href="/"
            className="text-xs font-bold px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-stone-950 transition-all shadow-md shadow-amber-500/20"
          >
            Ana Sayfa →
          </Link>
        </div>
      </header>

      {/* Main Content Area - Stacked Vertically */}
      <main className="flex-1 w-full max-w-4xl mx-auto py-10 px-4 space-y-16">
        {presetsList.map((preset) => (
          <section
            key={preset.key}
            className="flex flex-col items-center gap-8 border-b border-stone-800/80 pb-16 last:border-0"
          >
            {/* Theme Info */}
            <div className="text-center max-w-xl space-y-3">
              <div className="inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-stone-900 border border-stone-800 text-xs font-bold text-stone-300">
                <span
                  className="w-2.5 h-2.5 rounded-full"
                  style={{ backgroundColor: preset.config.primaryColor }}
                />
                <span className="uppercase tracking-wider text-[11px]">{preset.key} Şablonu</span>
              </div>

              <h2 className="text-2xl sm:text-3xl font-extrabold text-white">
                {preset.name}
              </h2>

              <p className="text-xs sm:text-sm text-stone-400 leading-relaxed">
                Tipografi: <span className="uppercase text-stone-200 font-semibold">{preset.fontFamily}</span> • Mizanpaj: <span className="uppercase text-stone-200 font-semibold">{preset.config.productLayout}</span>
              </p>

              <div className="pt-2">
                <Link
                  href={`/demo?theme=${preset.key}`}
                  target="_blank"
                  className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-stone-900 hover:bg-stone-800 text-stone-200 border border-stone-700/80 text-xs font-bold transition-all shadow-md"
                >
                  <span>↗</span> Canlı Demoyu Sekmede Aç
                </Link>
              </div>
            </div>

            {/* Phone Mockup Preview */}
            <div className="w-full max-w-[420px] rounded-[36px] sm:rounded-[44px] overflow-hidden shadow-2xl border-0 sm:border-[8px] border-stone-800 bg-stone-900 relative">
              {/* Dynamic Island */}
              <div className="hidden sm:block w-24 h-4 bg-stone-800 rounded-full mx-auto mt-2.5 mb-1" />

              {/* Screen Body */}
              <div className="overflow-y-auto max-h-[720px] rounded-none sm:rounded-[32px] no-scrollbar">
                <PublicMenuClient
                  restaurant={restaurant}
                  categories={categories}
                  initialThemeKey={preset.key}
                  allowThemeSwitching={false}
                />
              </div>
            </div>
          </section>
        ))}
      </main>
    </div>
  );
}
