"use client";

import { useMemo, useState, useEffect } from "react";
import type { ThemeConfig } from "@menulio/shared";
import { THEME_PRESETS, resolveThemePreset, type ThemePreset } from "@/lib/theme";

export interface MenuItem {
  id: string;
  name: string;
  description: string | null;
  price: number;
  image_url: string | null;
  is_active: boolean;
}

export interface MenuCategory {
  id: string;
  name: string;
  description: string | null;
  is_active: boolean;
  menu_items: MenuItem[];
}

export interface RestaurantData {
  id: string;
  name: string;
  slug: string;
  logo_url: string | null;
  phone?: string | null;
  address?: string | null;
}

interface PublicMenuClientProps {
  restaurant: RestaurantData;
  categories: MenuCategory[];
  initialThemeKey?: string;
  customThemeConfig?: Partial<ThemeConfig>;
  allowThemeSwitching?: boolean;
}

export function PublicMenuClient({
  restaurant,
  categories,
  initialThemeKey = "elegant",
  customThemeConfig,
  allowThemeSwitching = true,
}: PublicMenuClientProps) {
  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(initialThemeKey);
  const [searchQuery, setSearchQuery] = useState("");
  const [activeCategoryId, setActiveCategoryId] = useState<string>(categories[0]?.id ?? "");
  const [selectedItem, setSelectedItem] = useState<MenuItem | null>(null);
  const [showInfoModal, setShowInfoModal] = useState(false);
  const [showThemePicker, setShowThemePicker] = useState(false);
  const [copiedLink, setCopiedLink] = useState(false);
  const [showBackToTop, setShowBackToTop] = useState(false);
  const [tableNumber, setTableNumber] = useState<string | null>(null);
  const [serviceActionToast, setServiceActionToast] = useState<string | null>(null);

  const theme: ThemePreset = useMemo(() => {
    return resolveThemePreset(selectedThemeKey, customThemeConfig);
  }, [selectedThemeKey, customThemeConfig]);

  // Extract table number from URL (?table=X)
  useEffect(() => {
    if (typeof window !== "undefined") {
      const params = new URLSearchParams(window.location.search);
      const table = params.get("table") || params.get("masa");
      if (table) setTableNumber(table);
    }
  }, []);

  // Track scroll position for active category & back-to-top button
  useEffect(() => {
    const handleScroll = () => {
      setShowBackToTop(window.scrollY > 300);

      const categoryElements = categories.map((c) => ({
        id: c.id,
        el: document.getElementById(`category-${c.id}`),
      }));

      const scrollPos = window.scrollY + 140;
      for (let i = categoryElements.length - 1; i >= 0; i--) {
        const item = categoryElements[i];
        if (item && item.el && item.el.offsetTop <= scrollPos) {
          setActiveCategoryId(item.id);
          break;
        }
      }
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, [categories]);

  // Filter categories and items based on search
  const filteredCategories = useMemo(() => {
    const q = searchQuery.trim().toLowerCase();
    if (!q) return categories;

    return categories
      .map((cat) => ({
        ...cat,
        menu_items: cat.menu_items.filter(
          (item) =>
            item.is_active &&
            (item.name.toLowerCase().includes(q) || (item.description && item.description.toLowerCase().includes(q))),
        ),
      }))
      .filter((cat) => cat.menu_items.length > 0);
  }, [categories, searchQuery]);

  const totalItemsCount = useMemo(() => {
    return categories.reduce((acc, cat) => acc + cat.menu_items.filter((i) => i.is_active).length, 0);
  }, [categories]);

  const scrollToCategory = (categoryId: string) => {
    setActiveCategoryId(categoryId);
    const el = document.getElementById(`category-${categoryId}`);
    if (el) {
      const yOffset = -85;
      const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  const handleShare = async () => {
    const url = window.location.href;
    if (navigator.share) {
      try {
        await navigator.share({
          title: `${restaurant.name} - Dijital Menü`,
          text: `${restaurant.name} dijital menüsünü inceleyin!`,
          url,
        });
        return;
      } catch {
        // fallback
      }
    }
    await navigator.clipboard.writeText(url);
    setCopiedLink(true);
    setTimeout(() => setCopiedLink(false), 2500);
  };

  const triggerServiceAction = (msg: string) => {
    setServiceActionToast(msg);
    setTimeout(() => setServiceActionToast(null), 3500);
  };

  const fontClass =
    theme.fontFamily === "serif" ? "font-serif" : theme.fontFamily === "heading" ? "font-heading" : "font-sans";

  return (
    <div
      className={`min-h-screen ${fontClass} transition-colors duration-300`}
      style={{
        backgroundColor: theme.config.background,
        color: theme.textPrimary,
      }}
    >
      {/* Toast Notification */}
      {serviceActionToast && (
        <div className="fixed top-5 left-1/2 -translate-x-1/2 z-50 animate-bounce-in max-w-sm w-full px-4">
          <div className="bg-stone-900 text-white px-5 py-3.5 rounded-2xl shadow-2xl flex items-center gap-3 border border-stone-700">
            <span className="text-xl">🔔</span>
            <p className="text-sm font-medium flex-1">{serviceActionToast}</p>
          </div>
        </div>
      )}

      {/* Main Container - Optimized for Mobile First & Desktop Centered */}
      <div className="w-full max-w-2xl mx-auto min-h-screen flex flex-col shadow-2xl relative">
        {/* Header Hero Banner */}
        <header
          style={{ background: theme.headerGradient }}
          className="relative text-white px-4 sm:px-6 pt-8 sm:pt-10 pb-7 sm:pb-8 rounded-b-3xl shadow-lg overflow-hidden"
        >
          {/* Subtle Ambient Glow */}
          <div
            className="absolute top-0 right-0 w-64 h-64 rounded-full blur-3xl opacity-20 pointer-events-none"
            style={{ backgroundColor: theme.config.primaryColor }}
          />

          {/* Top Bar: Table & Action Buttons */}
          <div className="flex items-center justify-between mb-4 sm:mb-5 relative z-10">
            {tableNumber ? (
              <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-xs font-semibold tracking-wide">
                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                Masa {tableNumber}
              </div>
            ) : (
              <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-xs font-medium tracking-wide">
                <span>✨</span> Dijital QR Menü
              </div>
            )}

            <div className="flex items-center gap-1.5 sm:gap-2">
              {/* Restaurant Info Trigger */}
              {(restaurant.phone || restaurant.address) && (
                <button
                  type="button"
                  onClick={() => setShowInfoModal(true)}
                  className="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center justify-center border border-white/15 backdrop-blur-md"
                  aria-label="Restoran Bilgisi"
                >
                  <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </button>
              )}

              {/* Share Trigger */}
              <button
                type="button"
                onClick={handleShare}
                className="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center justify-center border border-white/15 backdrop-blur-md"
                aria-label="Menüyü Paylaş"
              >
                {copiedLink ? (
                  <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
                  <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                  </svg>
                )}
              </button>

              {/* Live Theme Switcher Trigger */}
              {allowThemeSwitching && (
                <button
                  type="button"
                  onClick={() => setShowThemePicker(!showThemePicker)}
                  className="px-2.5 py-1 sm:py-1.5 rounded-full bg-white/10 hover:bg-white/20 active:scale-95 transition-all flex items-center gap-1.5 border border-white/15 backdrop-blur-md text-[11px] sm:text-xs font-semibold"
                  aria-label="Tema Değiştir"
                >
                  <span className="w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full" style={{ backgroundColor: theme.config.primaryColor }} />
                  <span>Tema</span>
                </button>
              )}
            </div>
          </div>

          {/* Restaurant Identity */}
          <div className="flex items-center gap-3 sm:gap-4 relative z-10">
            {restaurant.logo_url ? (
              <img
                src={restaurant.logo_url}
                alt={restaurant.name}
                className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl object-cover border-2 shadow-md flex-shrink-0"
                style={{ borderColor: theme.config.primaryColor }}
              />
            ) : (
              <div
                className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center font-bold text-xl sm:text-2xl flex-shrink-0 shadow-inner border border-white/20"
                style={{
                  background: "rgba(255, 255, 255, 0.12)",
                  color: theme.config.primaryColor,
                }}
              >
                {restaurant.name.charAt(0).toUpperCase()}
              </div>
            )}

            <div className="flex-1 min-w-0">
              <h1 className="text-xl sm:text-2xl font-bold tracking-tight leading-snug break-words">
                {restaurant.name}
              </h1>
              <p className="text-[11px] sm:text-xs text-white/70 mt-0.5 flex flex-wrap items-center gap-1.5">
                <span>{totalItemsCount} Özel Lezzet</span>
                <span>•</span>
                <span className="capitalize">{theme.name} Şablonu</span>
              </p>
            </div>
          </div>

          {/* Live Search Bar */}
          <div className="mt-6 relative z-10">
            <div className="relative flex items-center">
              <input
                type="text"
                placeholder="Yemek, içecek veya tatlı ara..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-11 pr-10 py-3 rounded-2xl text-stone-900 bg-white/95 placeholder-stone-400 text-sm focus:outline-none focus:ring-2 transition-all shadow-lg"
                style={{
                  outlineColor: theme.config.primaryColor,
                }}
              />
              <svg
                className="w-5 h-5 absolute left-3.5 text-stone-400 pointer-events-none"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
              {searchQuery && (
                <button
                  type="button"
                  onClick={() => setSearchQuery("")}
                  className="absolute right-3.5 w-5 h-5 rounded-full bg-stone-200 text-stone-600 flex items-center justify-center text-xs"
                >
                  ✕
                </button>
              )}
            </div>
          </div>
        </header>

        {/* Live Theme Switcher Drawer */}
        {showThemePicker && allowThemeSwitching && (
          <div className="bg-stone-900 text-white px-5 py-4 border-b border-stone-800 animate-slide-up">
            <div className="flex items-center justify-between mb-3">
              <p className="text-xs font-bold uppercase tracking-wider text-stone-400">
                Canlı Tema Önizleme (6 Şablon)
              </p>
              <button
                type="button"
                onClick={() => setShowThemePicker(false)}
                className="text-stone-400 hover:text-white text-xs"
              >
                Kapat ✕
              </button>
            </div>
            <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
              {Object.values(THEME_PRESETS).map((preset) => {
                const isSelected = selectedThemeKey === preset.key;
                return (
                  <button
                    key={preset.key}
                    type="button"
                    onClick={() => setSelectedThemeKey(preset.key)}
                    className={`flex flex-col items-center gap-1.5 p-2 rounded-xl border text-center transition-all ${
                      isSelected
                        ? "bg-white/15 border-white shadow-md scale-105"
                        : "bg-white/5 border-white/10 opacity-70 hover:opacity-100"
                    }`}
                  >
                    <span
                      className="w-5 h-5 rounded-full border border-white/30"
                      style={{ backgroundColor: preset.config.primaryColor }}
                    />
                    <span className="text-[10px] font-medium leading-tight truncate w-full">
                      {preset.name.split(" ")[0]}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* Sticky Category Navigation Bar */}
        {categories.length > 0 && !searchQuery && (
          <nav
            className="sticky top-0 z-40 px-4 py-3 backdrop-blur-xl border-b shadow-sm transition-all"
            style={{
              backgroundColor: `${theme.config.background}F2`,
              borderColor: theme.cardBorder,
            }}
          >
            <div className="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth py-0.5">
              {categories.map((cat) => {
                const isActive = activeCategoryId === cat.id;
                return (
                  <button
                    key={cat.id}
                    type="button"
                    onClick={() => scrollToCategory(cat.id)}
                    className={`px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 ${
                      isActive
                        ? "text-white shadow-md scale-105"
                        : "hover:bg-black/5 active:scale-95"
                    }`}
                    style={
                      isActive
                        ? { backgroundColor: theme.config.primaryColor }
                        : {
                            backgroundColor: theme.accentBg,
                            color: theme.textSecondary,
                          }
                    }
                  >
                    <span>{cat.name}</span>
                    <span
                      className={`text-[10px] px-1.5 py-0.2 rounded-full ${
                        isActive ? "bg-black/20 text-white" : "bg-black/5"
                      }`}
                    >
                      {cat.menu_items.length}
                    </span>
                  </button>
                );
              })}
            </div>
          </nav>
        )}

        {/* Menu Content Area */}
        <main className="flex-1 px-4 py-6 space-y-8">
          {filteredCategories.length === 0 ? (
            <div className="text-center py-16 px-4">
              <div className="w-16 h-16 rounded-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center text-3xl mx-auto mb-4">
                🔍
              </div>
              <h3 className="text-base font-bold text-stone-800 dark:text-stone-200">
                Aramanıza Uygun Lezzet Bulunamadı
              </h3>
              <p className="text-xs text-stone-500 mt-1 max-w-xs mx-auto">
                "{searchQuery}" için sonuç yok. Lütfen farklı bir arama kelimesi deneyin.
              </p>
              <button
                type="button"
                onClick={() => setSearchQuery("")}
                className="mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white shadow"
                style={{ backgroundColor: theme.config.primaryColor }}
              >
                Tüm Menüyü Göster
              </button>
            </div>
          ) : (
            filteredCategories.map((category) => (
              <section
                key={category.id}
                id={`category-${category.id}`}
                className="scroll-mt-28 space-y-3.5"
              >
                {/* Sticky Category Heading Banner */}
                <div
                  className="sticky top-[58px] z-20 flex items-center justify-between py-2.5 px-3 -mx-3 rounded-2xl backdrop-blur-xl border-b transition-all shadow-sm"
                  style={{
                    backgroundColor: `${theme.config.background}F2`,
                    borderColor: theme.cardBorder,
                  }}
                >
                  <div>
                    <h2
                      className="text-base sm:text-lg font-extrabold tracking-tight"
                      style={{ color: theme.config.primaryColor }}
                    >
                      {category.name}
                    </h2>
                    {category.description && (
                      <p className="text-xs mt-0.5 line-clamp-1" style={{ color: theme.textSecondary }}>
                        {category.description}
                      </p>
                    )}
                  </div>
                  <span
                    className="text-[11px] font-bold px-2.5 py-0.5 rounded-full shadow-sm"
                    style={{ backgroundColor: theme.badgeBg, color: theme.badgeText }}
                  >
                    {category.menu_items.length} Ürün
                  </span>
                </div>

                {/* Items Container: Grid / Card / List Layout based on Theme */}
                {/* Items Container: Grid / Card / List Layout based on Theme */}
                <div
                  className={
                    theme.key === "artisan"
                      ? "grid grid-cols-2 gap-3 sm:gap-4"
                      : theme.config.productLayout === "list"
                      ? "space-y-3"
                      : "grid grid-cols-1 gap-3.5"
                  }
                >
                  {category.menu_items.map((item) => {
                    if (theme.key === "artisan") {
                      return (
                        <article
                          key={item.id}
                          onClick={() => setSelectedItem(item)}
                          className="group relative rounded-3xl p-3.5 transition-all duration-300 cursor-pointer border flex flex-col justify-between hover:scale-[1.02] active:scale-[0.98] shadow-md"
                          style={{
                            backgroundColor: theme.cardBg,
                            borderColor: theme.cardBorder,
                          }}
                        >
                          {/* Image Container with 3D Dish presentation */}
                          <div className="relative w-full aspect-square rounded-2xl overflow-hidden bg-stone-900/60 mb-3 flex items-center justify-center border border-white/5">
                            {item.image_url ? (
                              <img
                                src={item.image_url}
                                alt={item.name}
                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                loading="lazy"
                              />
                            ) : (
                              <div className="text-3xl opacity-60">✨</div>
                            )}
                            <span
                              className="absolute top-2 right-2 px-2 py-0.5 rounded-full text-[9px] font-extrabold uppercase tracking-wide shadow-md"
                              style={{ backgroundColor: theme.config.primaryColor, color: "#121316" }}
                            >
                              ÖZEL
                            </span>
                          </div>

                          {/* Info */}
                          <div className="flex-1 flex flex-col justify-between">
                            <div>
                              <h3 className="font-bold text-xs sm:text-sm text-white tracking-tight leading-snug line-clamp-1 group-hover:text-amber-400 transition-colors">
                                {item.name}
                              </h3>
                              {item.description ? (
                                <p className="text-[11px] text-stone-400 mt-1 line-clamp-2 leading-relaxed">
                                  {item.description}
                                </p>
                              ) : null}
                            </div>

                            <div className="mt-3 pt-2.5 border-t border-white/5 flex items-center justify-between">
                              <span
                                className="text-sm sm:text-base font-black tracking-tight"
                                style={{ color: theme.config.primaryColor }}
                              >
                                ₺{item.price.toFixed(0)}
                              </span>
                              <span
                                className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-stone-950 shadow-sm transition-transform group-hover:scale-110"
                                style={{ backgroundColor: theme.config.primaryColor }}
                              >
                                +
                              </span>
                            </div>
                          </div>
                        </article>
                      );
                    }

                    return (
                      <article
                        key={item.id}
                        onClick={() => setSelectedItem(item)}
                        className={`group relative rounded-2xl p-4 transition-all duration-200 cursor-pointer border hover:shadow-lg active:scale-[0.99] flex gap-3.5 items-center ${
                          theme.config.productLayout === "list" ? "justify-between" : ""
                        }`}
                        style={{
                          backgroundColor: theme.cardBg,
                          borderColor: theme.cardBorder,
                        }}
                      >
                        {/* Item Details */}
                        <div className="flex-1 min-w-0 pr-1">
                          <div className="flex items-start justify-between gap-2">
                            <h3 className="font-bold text-sm tracking-tight leading-snug group-hover:text-amber-600 transition-colors">
                              {item.name}
                            </h3>
                          </div>

                          {item.description && (
                            <p
                              className="text-xs mt-1 leading-relaxed line-clamp-2"
                              style={{ color: theme.textSecondary }}
                            >
                              {item.description}
                            </p>
                          )}

                          <div className="mt-2.5 flex items-center justify-between">
                            <span
                              className="text-base font-extrabold tracking-tight"
                              style={{ color: theme.config.primaryColor }}
                            >
                              ₺{item.price.toFixed(0)}
                            </span>

                            <span className="text-[10px] font-bold px-2 py-0.5 rounded-md bg-black/5 dark:bg-white/10 group-hover:bg-amber-100 dark:group-hover:bg-amber-900/40 transition-colors">
                              İncele →
                            </span>
                          </div>
                        </div>

                        {/* Item Thumbnail Image */}
                        {item.image_url && (
                          <div className="relative w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-stone-100 dark:bg-stone-800 shadow-sm">
                            <img
                              src={item.image_url}
                              alt={item.name}
                              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                              loading="lazy"
                            />
                          </div>
                        )}
                      </article>
                    );
                  })}
                </div>
              </section>
            ))
          )}
        </main>

        {/* Footer */}
        <footer
          className="px-6 py-10 text-center border-t mt-auto text-xs space-y-4"
          style={{
            borderColor: theme.cardBorder,
            color: theme.textSecondary,
          }}
        >
          <div className="flex items-center justify-center gap-2 font-semibold">
            <span>Powered by</span>
            <span className="text-stone-900 dark:text-white font-black tracking-wider uppercase">
              MENULIO
            </span>
          </div>
          <p className="text-[11px] opacity-70">
            © {new Date().getFullYear()} {restaurant.name}. Fiyatlara tüm vergiler dahildir.
          </p>
        </footer>

        {/* Floating Quick Action Bar (Garson Çağır / Hesap İste / Başa Dön) */}
        <aside aria-label="Masa Servis İşlemleri" className="fixed bottom-5 left-1/2 -translate-x-1/2 z-40 max-w-sm w-full px-4 flex items-center justify-between gap-2 pointer-events-none">
          <div className="flex items-center gap-2 pointer-events-auto shadow-2xl rounded-full p-1 bg-stone-900/90 backdrop-blur-lg border border-stone-700 text-white">
            <button
              type="button"
              onClick={() =>
                triggerServiceAction(
                  tableNumber
                    ? `Masa ${tableNumber} için Garson Çağrıldı! Garsonunuz en kısa sürede masanızda olacaktır.`
                    : "Garson çağrıldı! Garsonunuz hemen masanızda olacaktır.",
                )
              }
              className="px-3.5 py-2 rounded-full hover:bg-white/15 active:scale-95 transition-all text-xs font-bold flex items-center gap-1.5"
            >
              <span>👋</span> Garson Çağır
            </button>
            <button
              type="button"
              onClick={() =>
                triggerServiceAction(
                  tableNumber
                    ? `Masa ${tableNumber} için Hesap İsteği iletildi!`
                    : "Hesap isteği iletildi!",
                )
              }
              className="px-3.5 py-2 rounded-full hover:bg-white/15 active:scale-95 transition-all text-xs font-bold flex items-center gap-1.5"
            >
              <span>💳</span> Hesap İste
            </button>
          </div>

          {showBackToTop && (
            <button
              type="button"
              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
              className="w-11 h-11 rounded-full bg-stone-900 text-white shadow-2xl flex items-center justify-center pointer-events-auto active:scale-90 transition-all border border-stone-700"
              aria-label="Başa Dön"
            >
              ↑
            </button>
          )}
        </aside>
      </div>

      {/* Item Detail Modal */}
      {selectedItem && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
          <div
            className="w-full max-w-lg rounded-t-3xl sm:rounded-3xl overflow-hidden shadow-2xl animate-slide-up flex flex-col max-h-[85vh]"
            style={{ backgroundColor: theme.cardBg, color: theme.textPrimary }}
          >
            {/* Modal Image */}
            {selectedItem.image_url ? (
              <div className="relative h-56 w-full bg-stone-900">
                <img
                  src={selectedItem.image_url}
                  alt={selectedItem.name}
                  className="w-full h-full object-cover"
                />
                <button
                  type="button"
                  onClick={() => setSelectedItem(null)}
                  className="absolute top-4 right-4 w-9 h-9 rounded-full bg-black/60 text-white flex items-center justify-center backdrop-blur-md text-sm hover:bg-black/80"
                >
                  ✕
                </button>
              </div>
            ) : (
              <div className="p-4 flex justify-end">
                <button
                  type="button"
                  onClick={() => setSelectedItem(null)}
                  className="w-8 h-8 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 flex items-center justify-center text-sm"
                >
                  ✕
                </button>
              </div>
            )}

            {/* Modal Body */}
            <div className="p-6 overflow-y-auto space-y-4">
              <div className="flex items-start justify-between gap-4">
                <h3 className="text-xl font-bold tracking-tight leading-snug">
                  {selectedItem.name}
                </h3>
                <span
                  className="text-xl font-black whitespace-nowrap"
                  style={{ color: theme.config.primaryColor }}
                >
                  ₺{selectedItem.price.toFixed(0)}
                </span>
              </div>

              {selectedItem.description && (
                <p className="text-sm leading-relaxed" style={{ color: theme.textSecondary }}>
                  {selectedItem.description}
                </p>
              )}

              {/* Quality Badges */}
              <div className="pt-2 flex flex-wrap gap-2 text-xs">
                <span className="px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 font-semibold border border-emerald-200">
                  🌱 Taze & Günlük
                </span>
                <span className="px-3 py-1 rounded-full bg-amber-50 text-amber-700 font-semibold border border-amber-200">
                  ⭐ Şefin İmzası
                </span>
              </div>
            </div>

            {/* Modal Footer */}
            <div className="p-4 border-t" style={{ borderColor: theme.cardBorder }}>
              <button
                type="button"
                onClick={() => {
                  setSelectedItem(null);
                  triggerServiceAction(`"${selectedItem.name}" sipariş tercihleriniz garsona iletildi!`);
                }}
                className="w-full py-3.5 rounded-2xl font-bold text-white shadow-lg active:scale-98 transition-all flex items-center justify-center gap-2 text-sm"
                style={{ backgroundColor: theme.config.primaryColor }}
              >
                <span>➕</span> Garsona Sipariş Olarak Bildir
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Restaurant Info & Contact Modal */}
      {showInfoModal && (
        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
          <div
            className="w-full max-w-md rounded-t-3xl sm:rounded-3xl overflow-hidden shadow-2xl p-6 space-y-5 animate-slide-up"
            style={{ backgroundColor: theme.cardBg, color: theme.textPrimary }}
          >
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-bold">Restoran Bilgileri</h3>
              <button
                type="button"
                onClick={() => setShowInfoModal(false)}
                className="w-8 h-8 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-600 dark:text-stone-300 flex items-center justify-center text-sm"
              >
                ✕
              </button>
            </div>

            <div className="space-y-4 text-sm">
              {restaurant.phone && (
                <div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
                  <span className="text-lg">📞</span>
                  <div className="flex-1">
                    <p className="text-xs text-stone-400">Telefon</p>
                    <a href={`tel:${restaurant.phone}`} className="font-semibold hover:underline">
                      {restaurant.phone}
                    </a>
                  </div>
                </div>
              )}

              {restaurant.address && (
                <div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
                  <span className="text-lg">📍</span>
                  <div className="flex-1">
                    <p className="text-xs text-stone-400">Adres</p>
                    <p className="font-medium text-xs">{restaurant.address}</p>
                  </div>
                </div>
              )}

              <div className="flex items-center gap-3 p-3 rounded-xl bg-stone-50 dark:bg-stone-800/50">
                <span className="text-lg">🕒</span>
                <div className="flex-1">
                  <p className="text-xs text-stone-400">Çalışma Saatleri</p>
                  <p className="font-semibold text-xs">Hergün 10:00 - 00:00</p>
                </div>
              </div>
            </div>

            <button
              type="button"
              onClick={() => setShowInfoModal(false)}
              className="w-full py-3 rounded-xl font-bold bg-stone-900 text-white text-sm"
            >
              Kapat
            </button>
          </div>
        </div>
      )}
    </div>
  );
}