'use client';

/**
 * ServiceDiscovery Component
 *
 * Upgrade highlights:
 * - High-converting luxury service cards with top-image banner (h-48 w-full object-cover rounded-t-2xl)
 * - Glassmorphism favorite heart button (bg-white/70 backdrop-blur-md) with saveFavourite API integration
 * - Conversion pricing psychology: strikethrough old price next to bold new price
 * - Fixed luxury tags: Max 2 tags (Discount always on left/first, followed by Featured badge)
 * - Category tag removed from card for clean, high-end aesthetics
 * - Categories menu scrollable via Left/Right chevron arrow buttons & touch swipe
 * - Fixed sticky spacing (docks seamlessly at top-[72px] beneath site header without overlapping)
 * - Prioritized sorting: is_featured items appear first
 * - Smart URL search binding (?q=...) & typo-tolerant fuzzy matching ("keretin" -> "Keratin")
 * - High-converting recovery empty state with "View All Services" quick-action button
 */

import React, { useState, useMemo, useRef, useEffect, useTransition, Suspense } from 'react';
import { useRouter, usePathname, useSearchParams } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Sparkles,
  Hand,
  Scissors,
  Flower2,
  Sparkle,
  User,
  Search,
  ArrowUpDown,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Check,
  X,
  Flame,
  Palette,
  Eye,
} from 'lucide-react';
import type { Category, Service } from '@shinecode/api-client/types';
import { slugify, saveFavourite } from '@/lib/api/client';
import { useAuthStore } from '@/lib/stores/useAuthStore';
import { Input } from '@/components/ui/input';
import { ImageWithFallback } from '@/components/ui/ImageWithFallback';
import { ServiceCard } from '@/components/ServiceCard';
import { cn, formatDuration } from '@/lib/utils';

export type SortOption = 'recommended' | 'price-asc' | 'price-desc' | 'rating' | 'popular';

export interface ServiceDiscoveryProps {
  initialServices: Service[];
  categories: Category[];
  activeCategorySlug?: string;
  locale?: string;
}

interface CategorySeoEntry {
  titleEn: string;
  titleAr: string;
  descriptionEn: string;
  descriptionAr: string;
}

const CATEGORY_SEO_MAP: Record<string, CategorySeoEntry> = {
  all: {
    titleEn: 'All Doorstep Treatments & Services',
    titleAr: 'جميع العلاجات والخدمات المنزلية الفاخرة',
    descriptionEn:
      "Discover Dubai's most comprehensive catalog of on-demand at-home beauty, grooming, and spa wellness treatments. From precision Russian manicures and signature blowouts to clinical HydraFacials and deep tissue massages, our vetted top 1% master professionals bring the luxury salon experience directly to your door with hospital-grade sterilized kits and guaranteed satisfaction.",
    descriptionAr:
      'اكتشف أكبر تشكيلة من خدمات التجميل والعناية والسبا الفاخرة عند الطلب في منزلك بدبي. من المانيكير الروسي الاحترافي والسشوار إلى الهيدرا فيشل والمساج العميق، يقدم نخبة الخبراء تجربة الصالون الفاخرة مباشرة إلى باب منزلك مع أدوات معقمة طبياً بنسبة 100%.',
  },
  nails: {
    titleEn: 'At-Home Manicure & Pedicure Services',
    titleAr: 'خدمات الأظافر والمانيكير والباديكير المنزلية',
    descriptionEn:
      'Experience flawless, salon-quality nail care delivered directly to your doorstep. Our vetted nail artists specialize in medical Russian manicures, BIAB builder gel overlays, chip-resistant diamond gel polish, and deep restorative spa pedicures using 100% autoclave-sterilized single-use kits.',
    descriptionAr:
      'استمتعي بعناية أظافر فائقة الدقة والجمال في منزلك. يتخصص خبراؤنا في المانيكير الروسي الطبي، تقوية الأظافر بجل البيلدر، وطلاء الجل المقاوم للخدش، إلى جانب جلسات الباديكير الملكي باستخدام أدوات معقمة مغلفة لكل عميل.',
  },
  'nail-care': {
    titleEn: 'At-Home Manicure & Pedicure Services',
    titleAr: 'خدمات الأظافر والمانيكير والباديكير المنزلية',
    descriptionEn:
      'Experience flawless, salon-quality nail care delivered directly to your doorstep. Our vetted nail artists specialize in medical Russian manicures, BIAB builder gel overlays, chip-resistant diamond gel polish, and deep restorative spa pedicures using 100% autoclave-sterilized single-use kits.',
    descriptionAr:
      'استمتعي بعناية أظافر فائقة الدقة والجمال في منزلك. يتخصص خبراؤنا في المانيكير الروسي الطبي، تقوية الأظافر بجل البيلدر، وطلاء الجل المقاوم للخدش، إلى جانب جلسات الباديكير الملكي باستخدام أدوات معقمة مغلفة لكل عميل.',
  },
  hair: {
    titleEn: 'Professional Hair Styling & Keratin Treatments',
    titleAr: 'خدمات تصفيف وعلاج الشعر الاحترافية',
    descriptionEn:
      'Transform your hair with red-carpet blowout styling, formal up-dos, and organic smoothing keratin treatments in the comfort of your living room. Our master hairstylists bring professional Dyson and GHD tools to craft breathtaking volume, shine, and long-lasting frizz protection.',
    descriptionAr:
      'تألقي بتسريحات شعر وسشوار احترافي، أو علاجات الكيراتين العضوية الحريرية في راحة منزلك. يستخدم خبراؤنا أحدث أجهزة دايسون وجي إتش دي لمنح شعرك كثافة ساحرة ولمعاناً فائقاً يدوم طويلاً ضد الرطوبة.',
  },
  'hair-care': {
    titleEn: 'Professional Hair Styling & Keratin Treatments',
    titleAr: 'خدمات تصفيف وعلاج الشعر الاحترافية',
    descriptionEn:
      'Transform your hair with red-carpet blowout styling, formal up-dos, and organic smoothing keratin treatments in the comfort of your living room. Our master hairstylists bring professional Dyson and GHD tools to craft breathtaking volume, shine, and long-lasting frizz protection.',
    descriptionAr:
      'تألقي بتسريحات شعر وسشوار احترافي، أو علاجات الكيراتين العضوية الحريرية في راحة منزلك. يستخدم خبراؤنا أحدث أجهزة دايسون وجي إتش دي لمنح شعرك كثافة ساحرة ولمعاناً فائقاً يدوم طويلاً ضد الرطوبة.',
  },
  massage: {
    titleEn: 'Therapeutic & Relaxation At-Home Massage',
    titleAr: 'جلسات المساج والاسترخاء التام بالمنزل',
    descriptionEn:
      'Restore physical vitality and mental tranquility with custom doorstep bodywork sessions. Choose from deep tissue heated volcanic basalt stone therapy, gentle Swedish relaxation strokes, and lymphatic drainage sculpting performed by licensed massage therapists with 100% pure organic aromatherapy oils.',
    descriptionAr:
      'استعد طاقتك البدنية والذهنية مع جلسات التدليك العلاجي المتخصصة في منزلك. اختر من بين مساج الأحجار البركانية الساخنة، المساج السويدي المهدئ، والمساج اللمفاوي بأيدي معالجين مرخصين وبزيوت عطرية عضوية نقية.',
  },
  spa: {
    titleEn: 'Therapeutic & Relaxation At-Home Massage',
    titleAr: 'جلسات المساج والاسترخاء التام بالمنزل',
    descriptionEn:
      'Restore physical vitality and mental tranquility with custom doorstep bodywork sessions. Choose from deep tissue heated volcanic basalt stone therapy, gentle Swedish relaxation strokes, and lymphatic drainage sculpting performed by licensed massage therapists with 100% pure organic aromatherapy oils.',
    descriptionAr:
      'استعد طاقتك البدنية والذهنية مع جلسات التدليك العلاجي المتخصصة في منزلك. اختر من بين مساج الأحجار البركانية الساخنة، المساج السويدي المهدئ، والمساج اللمفاوي بأيدي معالجين مرخصين وبزيوت عطرية عضوية نقية.',
  },
  facials: {
    titleEn: 'Clinical Facials & Advanced Skin Therapy',
    titleAr: 'علاجات البشرة والفيشل الطبي المتقدم',
    descriptionEn:
      'Revitalize your complexion with non-invasive clinical facial treatments delivered to your home. Featuring deep vortex suction pore extraction with HydraFacial technology, 24K pure gold collagen firming infusions, and botanical brightening peels for an effortless, radiant red-carpet glow.',
    descriptionAr:
      'جددي نضارة بشرتك مع أحدث علاجات الفيشل الطبية في منزلك. نوفر تنظيف المسام بتقنية الشفط هيدرا فيشل، جلسات الذهب الخالص عيار 24 والكولاجين لشد البشرة، والتقشير النباتي لإشراقة ونضارة فورية لا مثيل لها.',
  },
  'skin-care': {
    titleEn: 'Clinical Facials & Advanced Skin Therapy',
    titleAr: 'علاجات البشرة والفيشل الطبي المتقدم',
    descriptionEn:
      'Revitalize your complexion with non-invasive clinical facial treatments delivered to your home. Featuring deep vortex suction pore extraction with HydraFacial technology, 24K pure gold collagen firming infusions, and botanical brightening peels for an effortless, radiant red-carpet glow.',
    descriptionAr:
      'جددي نضارة بشرتك مع أحدث علاجات الفيشل الطبية في منزلك. نوفر تنظيف المسام بتقنية الشفط هيدرا فيشل، جلسات الذهب الخالص عيار 24 والكولاجين لشد البشرة، والتقشير النباتي لإشراقة ونضارة فورية لا مثيل لها.',
  },
  'mens-grooming': {
    titleEn: "Executive Men's Grooming & Barbering",
    titleAr: 'خدمات العناية والحلاقة الفاخرة للرجال',
    descriptionEn:
      'Tailored grooming precision for modern gentlemen delivered to your private residence or executive suite. Enjoy sharp scissor fades, hot towel straight-razor beard alignments, detoxifying charcoal facial treatments, and restorative hand care by master Dubai barbers.',
    descriptionAr:
      'عناية وحلاقة متكاملة للرجل العصري في منزله أو جناحه الخاص. قص شعر احترافي وتحديد اللحية بالموس مع منشفة بخار ساخنة وعلاجات تنظيف البشرة بالفحم بواسطة أمهر حلاقي دبي.',
  },
  'mens-salon-spa': {
    titleEn: "Executive Men's Grooming & Barbering",
    titleAr: 'خدمات العناية والحلاقة الفاخرة للرجال',
    descriptionEn:
      'Tailored grooming precision for modern gentlemen delivered to your private residence or executive suite. Enjoy sharp scissor fades, hot towel straight-razor beard alignments, detoxifying charcoal facial treatments, and restorative hand care by master Dubai barbers.',
    descriptionAr:
      'عناية وحلاقة متكاملة للرجل العصري في منزله أو جناحه الخاص. قص شعر احترافي وتحديد اللحية بالموس مع منشفة بخار ساخنة وعلاجات تنظيف البشرة بالفحم بواسطة أمهر حلاقي دبي.',
  },
  'make-up': {
    titleEn: 'Luxury Makeup & Event Glam Artistry',
    titleAr: 'خدمات المكياج والتجميل الاحترافي للمناسبات',
    descriptionEn:
      'Flawless red-carpet makeup artistry for weddings, VIP events, and everyday glam delivered to your home using world-class prestige cosmetics.',
    descriptionAr:
      'مكياج احترافي للمناسبات والأعراس والسهرات بإطلالات ساحرة ومستحضرات تجميل عالمية فاخرة في منزلك.',
  },
  'lashes-eyebrows': {
    titleEn: 'Lash Extensions & Keratin Brow Lamination',
    titleAr: 'علاجات الرموش وتصفيح الحواجب بالكيراتين',
    descriptionEn:
      'Precision lash lifts, Russian volume extensions, and keratin brow lamination tailored to enhance your natural facial harmony.',
    descriptionAr:
      'رفع الرموش وتركيب الرموش الروسية وتصفيح الحواجب بالكيراتين لإبراز جمال عينيك الطبيعي.',
  },
  'hair-removal': {
    titleEn: 'Full-Body Waxing & Gentle Hair Removal',
    titleAr: 'خدمات إزالة الشعر والشمع بالمنزل',
    descriptionEn:
      'Gentle, hygienic full-body waxing, threading, and smoothing treatments using skin-safe organic waxes and soothing botanical balms.',
    descriptionAr:
      'إزالة شعر ناعمة وصحية لكامل الجسم بالشمع العضوي والخيط مع عناية مرطبة وملطفة للبشرة.',
  },
};

/** Resolve relevant Lucide icon for any category slug */
function getCategoryIcon(slug: string) {
  const clean = slug.toLowerCase();
  if (clean === 'all') return Sparkles;
  if (clean.includes('nail')) return Hand;
  if (clean.includes('hair') && !clean.includes('removal')) return Scissors;
  if (clean.includes('massage') || clean.includes('spa')) return Flower2;
  if (clean.includes('facial') || clean.includes('skin')) return Sparkle;
  if (clean.includes('men')) return User;
  if (clean.includes('make') || clean.includes('up')) return Palette;
  if (clean.includes('lash') || clean.includes('brow')) return Eye;
  if (clean.includes('removal') || clean.includes('wax')) return Flame;
  return Sparkles;
}

/** Levenshtein distance helper for fuzzy typo tolerance */
function levenshteinDistance(s1: string, s2: string): number {
  if (s1 === s2) return 0;
  if (s1.length === 0) return s2.length;
  if (s2.length === 0) return s1.length;

  const matrix: number[][] = [];

  for (let i = 0; i <= s2.length; i++) {
    matrix[i] = [i];
  }

  for (let j = 0; j <= s1.length; j++) {
    matrix[0][j] = j;
  }

  for (let i = 1; i <= s2.length; i++) {
    for (let j = 1; j <= s1.length; j++) {
      if (s2.charAt(i - 1) === s1.charAt(j - 1)) {
        matrix[i][j] = matrix[i - 1][j - 1];
      } else {
        matrix[i][j] = Math.min(
          matrix[i - 1][j - 1] + 1, // substitution
          matrix[i][j - 1] + 1,     // insertion
          matrix[i - 1][j] + 1      // deletion
        );
      }
    }
  }

  return matrix[s2.length][s1.length];
}

/**
 * Forgiving fuzzy matcher:
 * Handles exact substrings, prefix matches, and typos (e.g. "keretin" -> "Keratin")
 */
function isFuzzyMatch(targetText: string, query: string): boolean {
  if (!targetText || !query) return false;
  const cleanTarget = targetText.toLowerCase().trim();
  const cleanQuery = query.toLowerCase().trim();

  // 1. Direct Substring
  if (cleanTarget.includes(cleanQuery)) return true;

  // 2. Tokenized match (every query token matches at least one target word)
  const queryTokens = cleanQuery.split(/\s+/).filter(Boolean);
  const targetWords = cleanTarget.split(/[\s,.\-_/]+/).filter(Boolean);

  if (queryTokens.length === 0) return true;

  return queryTokens.every((token) => {
    return targetWords.some((word) => {
      // Exact / substring / prefix
      if (word.includes(token) || token.includes(word) || word.startsWith(token)) return true;

      const tokenLen = token.length;
      if (tokenLen <= 3) {
        return false;
      }

      const maxDistance = tokenLen <= 5 ? 1 : 2;
      const wordChunk = word.slice(0, tokenLen + 1);
      const dist = levenshteinDistance(token, wordChunk);
      if (dist <= maxDistance) return true;

      return levenshteinDistance(token, word) <= maxDistance;
    });
  });
}

const SORT_OPTIONS: { id: SortOption; labelEn: string; labelAr: string }[] = [
  { id: 'recommended', labelEn: 'Recommended', labelAr: 'الموصى به' },
  { id: 'price-asc', labelEn: 'Price: Low to High', labelAr: 'السعر: من الأقل للأعلى' },
  { id: 'price-desc', labelEn: 'Price: High to Low', labelAr: 'السعر: من الأعلى للأقل' },
  { id: 'rating', labelEn: 'Highest Rated', labelAr: 'الأعلى تقييماً' },
  { id: 'popular', labelEn: 'Most Popular', labelAr: 'الأكثر طلباً' },
];

function ServiceDiscoveryContent({
  initialServices = [],
  categories = [],
  activeCategorySlug = 'all',
  locale = 'en',
}: ServiceDiscoveryProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [, startTransition] = useTransition();

  const isAr = locale === 'ar';
  const { token } = useAuthStore();

  // Initial search from URL parameter (?q=...)
  const initialSearchFromUrl = searchParams.get('q') || '';

  const [activeSlug, setActiveSlug] = useState<string>(activeCategorySlug || 'all');
  const [searchQuery, setSearchQuery] = useState(initialSearchFromUrl);
  const [sortBy, setSortBy] = useState<SortOption>('recommended');
  const [isSortOpen, setIsSortOpen] = useState(false);
  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const [favorites, setFavorites] = useState<Set<number>>(new Set());
  const [prevActiveSlugProp, setPrevActiveSlugProp] = useState(activeCategorySlug);

  // Sync state if activeCategorySlug prop changes (without setState in useEffect)
  if (activeCategorySlug !== prevActiveSlugProp) {
    setPrevActiveSlugProp(activeCategorySlug);
    setActiveSlug(activeCategorySlug || 'all');
  }

  const sortRef = useRef<HTMLDivElement>(null);
  const categoryBarRef = useRef<HTMLDivElement>(null);

  // Handle outside click for sort dropdown
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (sortRef.current && !sortRef.current.contains(event.target as Node)) {
        setIsSortOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Update URL search param on live search query change without full refresh
  const handleSearchChange = (value: string) => {
    setSearchQuery(value);

    startTransition(() => {
      const params = new URLSearchParams(searchParams.toString());
      if (value.trim()) {
        params.set('q', value.trim());
      } else {
        params.delete('q');
      }
      const queryStr = params.toString();
      const newUrl = queryStr ? `${pathname}?${queryStr}` : pathname;
      router.replace(newUrl, { scroll: false });
    });
  };

  // Scroll category bar smoothly left / right
  const scrollCategories = (direction: 'left' | 'right') => {
    if (!categoryBarRef.current) return;
    const scrollAmount = 240;
    const isRtl = locale === 'ar';
    const sign = direction === 'left' ? -1 : 1;
    const delta = isRtl ? -sign * scrollAmount : sign * scrollAmount;
    categoryBarRef.current.scrollBy({ left: delta, behavior: 'smooth' });
  };

  // Format category list including "All"
  const allCategories = useMemo(() => {
    const list: Array<{ id: number | string; slug: string; nameEn: string; nameAr: string; image: string | null }> = [
      { id: 'all', slug: 'all', nameEn: 'All', nameAr: 'الكل', image: null },
    ];
    categories.forEach((cat) => {
      const catSlug = cat.slug || slugify(cat.name);
      list.push({
        id: cat.id,
        slug: catSlug,
        nameEn: cat.name,
        nameAr: cat.name,
        image: cat.category_image || null,
      });
    });
    return list;
  }, [categories]);

  // Find active category object
  const activeCategoryObject = useMemo(() => {
    if (activeSlug === 'all') return null;
    return (
      categories.find((c) => {
        const cSlug = c.slug?.toLowerCase();
        const cNameSlug = slugify(c.name);
        const target = activeSlug.toLowerCase();
        return (
          cSlug === target ||
          cNameSlug === target ||
          cSlug?.replace(/-/g, '') === target.replace(/-/g, '') ||
          cNameSlug.replace(/-/g, '') === target.replace(/-/g, '')
        );
      }) || null
    );
  }, [categories, activeSlug]);

  // Resolve SEO Header info - Prioritize live API Category Description
  const seoHeader = useMemo(() => {
    const slugKey = activeSlug.toLowerCase();

    if (slugKey === 'all' || !activeSlug) {
      return CATEGORY_SEO_MAP.all;
    }

    if (activeCategoryObject) {
      const knownSeo = CATEGORY_SEO_MAP[slugKey];
      // Live API description takes highest priority
      const apiDesc = activeCategoryObject.description?.trim();

      return {
        titleEn: activeCategoryObject.name || knownSeo?.titleEn || 'Services',
        titleAr: activeCategoryObject.name || knownSeo?.titleAr || 'الخدمات',
        descriptionEn:
          apiDesc ||
          knownSeo?.descriptionEn ||
          `Browse professional ${activeCategoryObject.name.toLowerCase()} treatments delivered to your door in Dubai. Hospital-grade sterilization, vetted top 1% artists, and guaranteed satisfaction.`,
        descriptionAr:
          apiDesc ||
          knownSeo?.descriptionAr ||
          `تصفحي أرقى علاجات وخدمات ${activeCategoryObject.name} المنزلية في دبي. معايير تعقيم طبية، نخبة الخبراء، وراحة تامة في منزلك.`,
      };
    }

    const knownSeo = CATEGORY_SEO_MAP[slugKey];
    if (knownSeo) return knownSeo;

    return CATEGORY_SEO_MAP.all;
  }, [activeSlug, activeCategoryObject]);

  // Handle Category Selection with instant client-side state + subtle URL sync
  const handleCategoryClick = (slug: string) => {
    setActiveSlug(slug);
    setIsDescExpanded(false);

    startTransition(() => {
      const params = new URLSearchParams(searchParams.toString());
      const queryParam = params.get('q') ? `?q=${encodeURIComponent(params.get('q')!)}` : '';

      if (slug === 'all') {
        if (pathname.includes('/categories/')) {
          router.push(`/${locale}/services${queryParam}`, { scroll: false });
        }
      } else {
        if (pathname.includes('/categories/')) {
          router.push(`/${locale}/categories/${slug}${queryParam}`, { scroll: false });
        }
      }
    });
  };

  // Toggle favorite with API persistence & optimistic state
  const toggleFavorite = async (serviceId: number, e?: React.MouseEvent) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    const isCurrentlyFav = favorites.has(serviceId);
    setFavorites((prev) => {
      const next = new Set(prev);
      if (isCurrentlyFav) {
        next.delete(serviceId);
      } else {
        next.add(serviceId);
      }
      return next;
    });

    try {
      await saveFavourite(serviceId, token || undefined);
    } catch {
      // Keep optimistic state for seamless UX
    }
  };

  // Filter & Sort services with Priority Sort & Strict Search Logic
  const filteredAndSortedServices = useMemo(() => {
    const term = searchQuery.toLowerCase().trim();
    const activeCatId = activeCategoryObject?.id;
    const targetSlug = activeSlug.toLowerCase();

    return [...initialServices]
      // 1. Filter by Category
      .filter((s) => {
        if (activeSlug === 'all') return true;
        if (activeCatId && s.category_id === activeCatId) return true;
        const sCatNameSlug = slugify(s.category_name || '');
        return (
          sCatNameSlug === targetSlug ||
          sCatNameSlug.replace(/-/g, '') === targetSlug.replace(/-/g, '') ||
          sCatNameSlug.includes(targetSlug) ||
          targetSlug.includes(sCatNameSlug)
        );
      })
      // 2. Filter by Search (Strict: require min 2 chars, prioritize Name & Description)
      .filter((s) => {
        if (term.length < 2) return true;
        const nameMatch = s.name ? s.name.toLowerCase().includes(term) : false;
        const descMatch = s.description ? s.description.toLowerCase().includes(term) : false;
        const catMatch = s.category_name ? s.category_name.toLowerCase().includes(term) : false;
        if (nameMatch || descMatch || catMatch) return true;
        if (term.length >= 3) {
          return isFuzzyMatch(s.name || '', term) || isFuzzyMatch(s.category_name || '', term);
        }
        return false;
      })
      // 3. Sort Results with robust numeric parsing
      .sort((a, b) => {
        const priceA = parseFloat(String(a.discount_price ?? a.price ?? 0));
        const priceB = parseFloat(String(b.discount_price ?? b.price ?? 0));
        const rateA = parseFloat(String(a.rating || a.total_rating || 0));
        const rateB = parseFloat(String(b.rating || b.total_rating || 0));
        const popA = parseInt(String(a.review_count || a.total_review || 0), 10);
        const popB = parseInt(String(b.review_count || b.total_review || 0), 10);
        const featA = a.is_featured ? 1 : 0;
        const featB = b.is_featured ? 1 : 0;

        if (sortBy === 'price-asc') return priceA - priceB;
        if (sortBy === 'price-desc') return priceB - priceA;
        if (sortBy === 'rating') return rateB - rateA;
        if (sortBy === 'popular') return popB - popA;
        if (sortBy === 'recommended') {
          if (featA !== featB) return featB - featA;
          return rateB - rateA;
        }
        return 0;
      });
  }, [initialServices, activeSlug, activeCategoryObject, searchQuery, sortBy]);

  const currentSortLabel = useMemo(() => {
    const opt = SORT_OPTIONS.find((o) => o.id === sortBy);
    return isAr ? opt?.labelAr : opt?.labelEn;
  }, [sortBy, isAr]);

  // Clear search & restore full grid
  const handleClearSearch = () => {
    setSearchQuery('');
    setActiveSlug('all');
    startTransition(() => {
      router.replace(pathname, { scroll: false });
    });
  };

  return (
    <div className="w-full min-h-screen bg-zinc-50/50 dark:bg-zinc-950/50 pb-20">
      
      {/* ── Sticky Control Header (Docks seamlessly at top-[72px] beneath site header) ── */}
      <div className="sticky top-[72px] z-40 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-xl border-b border-zinc-200/80 dark:border-zinc-800/80 pt-3.5 pb-2.5 shadow-sm transition-all duration-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          
          {/* Top Controls Row: Search Input (left) & Sort Dropdown (right) */}
          <div className="flex items-center justify-between gap-3 mb-3">
            
            {/* Search Input with Clear Button */}
            <div className="relative flex-1 max-w-md">
              <Search className="w-4 h-4 text-zinc-400 dark:text-zinc-500 absolute start-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
              <Input
                type="text"
                value={searchQuery}
                onChange={(e) => handleSearchChange(e.target.value)}
                placeholder={isAr ? 'ابحث عن علاج أو خدمة (مثال: كيراتين، باديكير)...' : 'Search treatments (e.g. Keratin, Pedicure)...'}
                className="ps-10 pe-9 h-10 bg-zinc-100/80 dark:bg-zinc-900 border-zinc-200/80 dark:border-zinc-800 rounded-full text-xs sm:text-sm focus-visible:ring-zinc-900 dark:focus-visible:ring-white transition-all shadow-none"
                aria-label="Search treatments"
              />
              {searchQuery && (
                <button
                  type="button"
                  onClick={handleClearSearch}
                  className="absolute end-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 p-1 rounded-full transition-colors cursor-pointer"
                  aria-label="Clear search"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              )}
            </div>

            {/* Custom Sort Dropdown */}
            <div ref={sortRef} className="relative shrink-0">
              <button
                type="button"
                onClick={() => setIsSortOpen((prev) => !prev)}
                className="h-10 px-4 bg-white dark:bg-zinc-900 border border-zinc-200/80 dark:border-zinc-800 rounded-full text-xs sm:text-sm font-semibold text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-white flex items-center gap-2 transition-all cursor-pointer select-none shadow-2xs"
                aria-expanded={isSortOpen}
                aria-haspopup="listbox"
                aria-label="Sort treatments"
              >
                <ArrowUpDown className="w-3.5 h-3.5 text-zinc-400 dark:text-zinc-500 shrink-0" />
                <span className="hidden sm:inline font-medium text-zinc-500 dark:text-zinc-400">
                  {isAr ? 'الترتيب:' : 'Sort:'}
                </span>
                <span className="truncate max-w-[120px] sm:max-w-none">{currentSortLabel}</span>
                <ChevronDown
                  className={cn(
                    'w-3.5 h-3.5 text-zinc-400 transition-transform duration-200 shrink-0',
                    isSortOpen && 'rotate-180 text-zinc-700 dark:text-zinc-200'
                  )}
                />
              </button>

              <AnimatePresence>
                {isSortOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: 6, scale: 0.96 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 4, scale: 0.96 }}
                    transition={{ duration: 0.15, ease: 'easeOut' }}
                    className="absolute end-0 mt-2 w-56 bg-white dark:bg-zinc-900 border border-zinc-200/80 dark:border-zinc-800 rounded-2xl shadow-xl p-1.5 z-50 overflow-hidden"
                    role="listbox"
                  >
                    {SORT_OPTIONS.map((opt) => {
                      const isSelected = sortBy === opt.id;
                      return (
                        <button
                          key={opt.id}
                          type="button"
                          onClick={() => {
                            setSortBy(opt.id);
                            setIsSortOpen(false);
                          }}
                          className={cn(
                            'w-full px-3.5 py-2.5 text-xs sm:text-sm font-medium rounded-xl flex items-center justify-between text-start transition-colors cursor-pointer',
                            isSelected
                              ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-bold'
                              : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 hover:text-zinc-900 dark:hover:text-white'
                          )}
                          role="option"
                          aria-selected={isSelected}
                        >
                          <span>{isAr ? opt.labelAr : opt.labelEn}</span>
                          {isSelected && (
                            <Check className="w-4 h-4 text-zinc-900 dark:text-white shrink-0" />
                          )}
                        </button>
                      );
                    })}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

          </div>

          {/* ── Category Bar Row: In-line Navigation Arrows + Scroll Viewport with Blur/Fade Masks ── */}
          <div className="relative w-full flex items-center gap-1.5 sm:gap-2 py-0.5">
            {/* In-line Left Arrow Button */}
            <button
              type="button"
              onClick={() => scrollCategories('left')}
              className="shrink-0 w-10 h-10 sm:w-10.5 sm:h-10.5 rounded-full bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200/90 dark:border-zinc-800 text-zinc-700 dark:text-zinc-200 shadow-xs flex items-center justify-center transition-all cursor-pointer hover:scale-105 active:scale-95 z-20 self-center"
              aria-label={isAr ? 'التمرير لليمين' : 'Scroll left'}
            >
              <ChevronLeft className="w-4 h-4 rtl:rotate-180" />
            </button>

            {/* Category Scroll Viewport with Soft Blur & Gradient Fade Overlays */}
            <div className="relative flex-1 min-w-0 overflow-hidden flex items-center">
              {/* Left Edge Soft Gradient & Blur Overlay (Always visible) */}
              <div className="pointer-events-none absolute start-0 top-0 bottom-0 w-10 sm:w-14 bg-gradient-to-r rtl:bg-gradient-to-l from-white dark:from-zinc-950 via-white/70 dark:via-zinc-950/70 to-transparent z-10 backdrop-blur-[2px]" />

              {/* Scrollable Pills Container with Progressive Alpha Gradient Mask */}
              <div
                ref={categoryBarRef}
                style={{
                  maskImage: 'linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)',
                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)',
                }}
                className="flex items-center gap-2 sm:gap-2.5 overflow-x-auto snap-x snap-mandatory scroll-smooth w-full hide-scrollbar [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden px-4 sm:px-6 py-0.5"
              >
                {allCategories.map((cat) => {
                  const isActive =
                    activeSlug === cat.slug ||
                    (cat.slug === 'all' && (!activeSlug || activeSlug === 'all'));
                  const IconComponent = getCategoryIcon(cat.slug);

                  return (
                    <button
                      key={cat.id}
                      type="button"
                      onClick={() => handleCategoryClick(cat.slug)}
                      className={cn(
                        'h-10 sm:h-10.5 whitespace-nowrap rounded-full px-3.5 sm:px-4 text-xs sm:text-sm font-semibold transition-all border snap-start cursor-pointer inline-flex items-center justify-center gap-2 select-none shrink-0',
                        isActive
                          ? 'bg-zinc-900 text-white border-zinc-900 shadow-md dark:bg-white dark:text-zinc-900 dark:border-white'
                          : 'bg-white text-zinc-600 border-zinc-200 hover:border-zinc-900 hover:text-zinc-900 dark:bg-zinc-900 dark:text-zinc-400 dark:border-zinc-800 dark:hover:border-zinc-100 dark:hover:text-zinc-100'
                      )}
                      aria-pressed={isActive}
                    >
                      {cat.image ? (
                        <div
                          className={cn(
                            'relative w-6 h-6 sm:w-6.5 sm:h-6.5 rounded-full overflow-hidden shrink-0 transition-transform bg-zinc-100 dark:bg-zinc-800',
                            isActive
                              ? 'ring-1.5 ring-white/80 dark:ring-zinc-900/80 shadow-2xs'
                              : 'ring-1 ring-zinc-200/90 dark:ring-zinc-700/90'
                          )}
                        >
                          <ImageWithFallback
                            src={cat.image}
                            alt={isAr ? cat.nameAr : cat.nameEn}
                            width={26}
                            height={26}
                            className="w-full h-full object-cover rounded-full"
                          />
                        </div>
                      ) : (
                        <div
                          className={cn(
                            'w-6 h-6 sm:w-6.5 sm:h-6.5 rounded-full flex items-center justify-center shrink-0 transition-colors',
                            isActive
                              ? 'bg-white/20 text-white dark:bg-zinc-900/20 dark:text-zinc-900'
                              : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300'
                          )}
                        >
                          <IconComponent className="w-3.5 h-3.5 shrink-0" />
                        </div>
                      )}
                      <span className="leading-none">{isAr ? cat.nameAr : cat.nameEn}</span>
                    </button>
                  );
                })}
              </div>

              {/* Right Edge Soft Gradient & Blur Overlay (Always visible) */}
              <div className="pointer-events-none absolute end-0 top-0 bottom-0 w-10 sm:w-14 bg-gradient-to-l rtl:bg-gradient-to-r from-white dark:from-zinc-950 via-white/70 dark:via-zinc-950/70 to-transparent z-10 backdrop-blur-[2px]" />
            </div>

            {/* In-line Right Arrow Button */}
            <button
              type="button"
              onClick={() => scrollCategories('right')}
              className="shrink-0 w-10 h-10 sm:w-10.5 sm:h-10.5 rounded-full bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200/90 dark:border-zinc-800 text-zinc-700 dark:text-zinc-200 shadow-xs flex items-center justify-center transition-all cursor-pointer hover:scale-105 active:scale-95 z-20 self-center"
              aria-label={isAr ? 'التمرير لليسار' : 'Scroll right'}
            >
              <ChevronRight className="w-4 h-4 rtl:rotate-180" />
            </button>
          </div>

        </div>
      </div>

      {/* ── Main Body Container (Dynamic Header & Service Grid) ── */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 mt-6 sm:mt-8">
        
        {/* Dynamic Category SEO Header with Framer Motion Crossfade */}
        <div className="max-w-3xl mb-8 text-start">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeSlug}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.25, ease: 'easeOut' }}
            >
              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-zinc-900 dark:text-white tracking-tight mb-3">
                {isAr ? seoHeader.titleAr : seoHeader.titleEn}
              </h1>

              {(() => {
                const descText = isAr ? seoHeader.descriptionAr : seoHeader.descriptionEn;
                const isLongDesc = (descText?.length || 0) > 120;

                return (
                  <>
                    <p
                      className={cn(
                        'text-sm sm:text-base text-zinc-600 dark:text-zinc-400 leading-relaxed transition-all duration-300',
                        !isDescExpanded && isLongDesc && 'line-clamp-2 sm:line-clamp-3'
                      )}
                    >
                      {descText}
                    </p>

                    {/* Read More / Read Less Toggle for longer descriptions */}
                    {isLongDesc && (
                      <button
                        type="button"
                        onClick={() => setIsDescExpanded((prev) => !prev)}
                        className="text-xs sm:text-sm font-bold text-zinc-900 dark:text-white underline-offset-4 hover:underline mt-2 inline-flex items-center gap-1 cursor-pointer select-none transition-colors"
                      >
                        <span>
                          {isDescExpanded
                            ? isAr
                              ? 'عرض أقل'
                              : 'Read Less'
                            : isAr
                              ? 'قراءة المزيد'
                              : 'Read More'}
                        </span>
                      </button>
                    )}
                  </>
                );
              })()}
            </motion.div>
          </AnimatePresence>
        </div>

        {/* ── Service Grid / Empty State (Instant Framer Motion Transitions) ── */}
        <AnimatePresence mode="wait">
          {filteredAndSortedServices.length > 0 ? (
            <motion.div
              key={`${activeSlug}-${sortBy}-${searchQuery}`}
              layout
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.25, ease: 'easeOut' }}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
            >
              {filteredAndSortedServices.map((service) => {
                const firstAttachment = service.attchments?.[0];
                const imageUrl =
                  typeof firstAttachment === 'string'
                    ? firstAttachment
                    : firstAttachment?.url ||
                      service.provider_image ||
                      'https://images.unsplash.com/photo-1632345031435-8727f6897d53?w=800&h=600&fit=crop';

                const isFeatured = Boolean(service.is_featured);
                const rawRating = Number(service.total_rating ?? service.rating ?? 0);
                const rating = rawRating > 0 ? rawRating : 5.0;
                const reviewCount = Number(service.total_review ?? service.review_count ?? 0);
                const formattedDuration = formatDuration(service.duration, locale);

                return (
                  <ServiceCard
                    key={service.id}
                    id={service.id}
                    slug={service.slug}
                    name={service.name}
                    price={service.discount_price ?? service.price}
                    originalPrice={service.discount_price ? service.price : (service.discount ? service.price : undefined)}
                    discount={service.discount ?? undefined}
                    image={imageUrl}
                    description={service.description || undefined}
                    rating={rating}
                    reviewCount={reviewCount}
                    formattedDuration={formattedDuration}
                    isFeatured={isFeatured}
                    locale={locale}
                    isFavorite={favorites.has(service.id)}
                    onToggleFavorite={() => toggleFavorite(service.id)}
                  />
                );
              })}
            </motion.div>
          ) : (
            /* ── 6. Recovery Empty State UX ── */
            <motion.div
              key="empty-state"
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0 }}
              className="flex flex-col items-center justify-center py-20 text-center max-w-md mx-auto space-y-4"
            >
              <div className="w-16 h-16 rounded-3xl bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500 shadow-inner">
                <Search className="w-7 h-7 text-zinc-400 dark:text-zinc-500 stroke-1.5" />
              </div>
              <div className="space-y-1.5">
                <h3 className="text-xl font-extrabold text-zinc-900 dark:text-white">
                  {searchQuery
                    ? isAr
                      ? `لم نتمكن من العثور على نتائج مطابقة لـ "${searchQuery}"`
                      : `We couldn't find an exact match for "${searchQuery}".`
                    : isAr
                      ? 'لا توجد خدمات متاحة حالياً'
                      : 'No services available in this category.'}
                </h3>
                <p className="text-sm text-zinc-500 dark:text-zinc-400">
                  {searchQuery
                    ? isAr
                      ? 'تأكدي من صحة الكلمات أو استكشفي جميع خدماتنا المميزة في دبي.'
                      : 'Check for typos, try broader keywords, or view our complete catalog.'
                    : isAr
                      ? 'استكشفي جميع الخدمات الأخرى المتوفرة لدينا في دبي.'
                      : 'Explore our full luxury at-home treatments across Dubai.'}
                </p>
              </div>
              <button
                type="button"
                onClick={handleClearSearch}
                className="mt-2 inline-flex items-center gap-2 bg-zinc-100 hover:bg-zinc-200 active:bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 dark:text-white text-zinc-900 font-bold px-6 py-3 rounded-xl transition-all shadow-xs cursor-pointer"
              >
                <Sparkles className="w-4 h-4 text-brand-500" />
                <span>{isAr ? 'عرض جميع الخدمات' : 'View All Services'}</span>
              </button>
            </motion.div>
          )}
        </AnimatePresence>

      </div>
    </div>
  );
}

export function ServiceDiscovery(props: ServiceDiscoveryProps) {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-zinc-50/50 dark:bg-zinc-950/50 flex items-center justify-center text-sm font-semibold text-zinc-400">
          Loading catalog...
        </div>
      }
    >
      <ServiceDiscoveryContent {...props} />
    </Suspense>
  );
}

export default ServiceDiscovery;