/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/product/[slug]/page.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Import React — core UI library (components, hooks, JSX)
import { useState } from 'react';
// Import project module (@/ alias = src/ folder in tsconfig)
import AppImage from '@/components/ui/AppImage';
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Next.js App Router hooks — useRouter, useParams, useSearchParams
import { notFound, useParams } from 'next/navigation';
// Import external package or local module
import {
  // Property or array item — trailing comma allowed in TypeScript
  ShoppingCart,
  // Property or array item — trailing comma allowed in TypeScript
  Heart,
  // Property or array item — trailing comma allowed in TypeScript
  ChevronLeft,
  // Property or array item — trailing comma allowed in TypeScript
  Minus,
  // Property or array item — trailing comma allowed in TypeScript
  Plus,
  // Property or array item — trailing comma allowed in TypeScript
  Check,
  // Property or array item — trailing comma allowed in TypeScript
  ShieldCheck,
// Closing brace — end of block (function, if, object, JSX)
} from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import CustomizationSelector from '@/components/product/CustomizationSelector';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import { getProductBySlug } from '@/lib/products';
// Import project module (@/ alias = src/ folder in tsconfig)
import { getDefaultCustomization, getCustomizationLabel } from '@/lib/customization';
// Import project module (@/ alias = src/ folder in tsconfig)
import { localizeProduct } from '@/lib/product-i18n';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, getFormatLocale } from '@/lib/utils';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useCartStore } from '@/store/cart';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useWishlistStore } from '@/store/wishlist';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { ProductCustomization } from '@/types';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function ProductPage() {
  // Read dynamic route segment ([slug] from URL)
  const params = useParams();
  // Line 29: const slug = params.slug as string;
  const slug = params.slug as string;
  // Line 30: const rawProduct = getProductBySlug(slug);
  const rawProduct = getProductBySlug(slug);
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
// (blank line — separates logical blocks for readability)
  // React useState — local component state that triggers re-render on change
  const [customization, setCustomization] = useState<ProductCustomization>(
    // Line 34: rawProduct ? getDefaultCustomization(rawProduct.category)...
    rawProduct ? getDefaultCustomization(rawProduct.category) : { type: 'fish' }
  // Line 35: );
  );
  // React useState — local component state that triggers re-render on change
  const [quantity, setQuantity] = useState(1);
  // React useState — local component state that triggers re-render on change
  const [selectedImage, setSelectedImage] = useState(0);
  // React useState — local component state that triggers re-render on change
  const [added, setAdded] = useState(false);
// (blank line — separates logical blocks for readability)
  // Zustand selector — subscribe to slice of global store
  const addItem = useCartStore((s) => s.addItem);
  // Zustand selector — subscribe to slice of global store
  const { isInWishlist, toggleItem } = useWishlistStore();
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (!rawProduct) {
    // Line 44: notFound();
    notFound();
  // Closing brace — end of block (function, if, object, JSX)
  }
// (blank line — separates logical blocks for readability)
  // Line 47: const product = localizeProduct(rawProduct, t);
  const product = localizeProduct(rawProduct, t);
  // Line 48: const inWishlist = isInWishlist(product.id);
  const inWishlist = isInWishlist(product.id);
// (blank line — separates logical blocks for readability)
  // Line 50: const handleAddToCart = () => {
  const handleAddToCart = () => {
    // Line 51: const label = getCustomizationLabel(customization, t);
    const label = getCustomizationLabel(customization, t);
    // Line 52: addItem(rawProduct, customization, label, quantity);
    addItem(rawProduct, customization, label, quantity);
    // Line 53: setAdded(true);
    setAdded(true);
    // Line 54: setTimeout(() => setAdded(false), 2000);
    setTimeout(() => setAdded(false), 2000);
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div className="bg-white">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <Link
          // Link target URL — internal route or external https://
          href="/shop"
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-gray-500 transition-colors hover:text-brand-700"
        // Line 63: >
        >
          // JSX element — HTML-like tag becomes React component in browser
          <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
          // Line 65: {t('product.backToShop')}
          {t('product.backToShop')}
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <div className="grid gap-10 lg:grid-cols-2">
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="relative mb-4 aspect-square overflow-hidden rounded-2xl bg-gray-50">
              // JSX element — HTML-like tag becomes React component in browser
              <AppImage
                // Line 72: src={product.images[selectedImage] || product.image}
                src={product.images[selectedImage] || product.image}
                // Line 73: alt={product.name}
                alt={product.name}
                // Line 74: fill
                fill
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="object-cover"
                // Line 76: priority
                priority
                // Line 77: sizes="(max-width: 1024px) 100vw, 640px"
                sizes="(max-width: 1024px) 100vw, 640px"
              // Line 78: />
              />
              // Line 79: {product.badge && (
              {product.badge && (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="absolute start-4 top-4 rounded-full bg-gold-500 px-4 py-1.5 text-sm font-semibold text-white shadow-gold">
                  // Line 81: {product.badge}
                  {product.badge}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // Line 83: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </div>
            // Line 85: {product.images.length > 1 && (
            {product.images.length > 1 && (
              // JSX element — HTML-like tag becomes React component in browser
              <div className="flex gap-3">
                // Array.map — transform each item (often render a list of components)
                {product.images.map((img, i) => (
                  // JSX element — HTML-like tag becomes React component in browser
                  <button
                    // Line 89: key={img}
                    key={img}
                    // Click handler — runs when user clicks (must be client component)
                    onClick={() => setSelectedImage(i)}
                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
                    className={`relative h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${
                      // Line 92: selectedImage === i
                      selectedImage === i
                        // Line 93: ? 'border-brand-700'
                        ? 'border-brand-700'
                        // Line 94: : 'border-transparent opacity-60 hover:opacity-100'
                        : 'border-transparent opacity-60 hover:opacity-100'
                    // Closing brace — end of block (function, if, object, JSX)
                    }`}
                  // Line 96: >
                  >
                    // JSX element — HTML-like tag becomes React component in browser
                    <AppImage src={img} alt="" fill className="object-cover" sizes="80px" />
                  // JSX element — HTML-like tag becomes React component in browser
                  </button>
                // Line 99: ))}
                ))}
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // Line 101: )}
            )}
          // JSX element — HTML-like tag becomes React component in browser
          </div>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-2 flex items-center gap-2">
              // JSX element — HTML-like tag becomes React component in browser
              <Link
                // Link target URL — internal route or external https://
                href={`/shop?category=${product.category}`}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-brand-700 transition-colors hover:bg-brand-100"
              // Line 109: >
              >
                // Line 110: {t(`categories.${product.category}.name`)}
                {t(`categories.${product.category}.name`)}
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
              // Line 112: {product.inStock ? (
              {product.inStock ? (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="flex items-center gap-1 text-xs font-medium text-brand-700">
                  // JSX element — HTML-like tag becomes React component in browser
                  <Check className="h-3 w-3" /> {t('product.inStock')}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // Line 116: ) : (
              ) : (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="text-xs font-medium text-red-500">
                  // Line 118: {t('product.outOfStock')}
                  {t('product.outOfStock')}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // Line 120: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <h1 className="mb-2 font-display text-3xl font-bold text-brand-900 lg:text-4xl">
              // Line 124: {product.name}
              {product.name}
            // JSX element — HTML-like tag becomes React component in browser
            </h1>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mb-4 text-gray-500">{product.description}</p>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-6 flex items-baseline gap-2">
              // JSX element — HTML-like tag becomes React component in browser
              <span className="text-3xl font-bold text-brand-800">
                // Line 131: {formatPrice(product.price, getFormatLocale(locale))}
                {formatPrice(product.price, getFormatLocale(locale))}
              // JSX element — HTML-like tag becomes React component in browser
              </span>
              // JSX element — HTML-like tag becomes React component in browser
              <span className="text-sm text-gray-400">{product.priceUnit}</span>
              // Line 134: {product.weight && (
              {product.weight && (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="text-sm text-gray-400">· {product.weight}</span>
              // Line 136: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-6 flex items-center gap-2 rounded-lg border border-brand-100 bg-brand-50/50 px-4 py-3">
              // JSX element — HTML-like tag becomes React component in browser
              <ShieldCheck className="h-5 w-5 shrink-0 text-brand-700" />
              // JSX element — HTML-like tag becomes React component in browser
              <span className="text-sm text-brand-800">{t('product.halalTrust')}</span>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-6 rounded-2xl border border-gray-100 bg-gray-50 p-6">
              // JSX element — HTML-like tag becomes React component in browser
              <CustomizationSelector
                // Line 146: category={product.category}
                category={product.category}
                // Line 147: customization={customization}
                customization={customization}
                // Change handler — runs when input/select value changes
                onChange={setCustomization}
              // Line 149: />
              />
              // JSX element — HTML-like tag becomes React component in browser
              <div className="mt-4 rounded-lg bg-white px-4 py-3">
                // JSX element — HTML-like tag becomes React component in browser
                <p className="text-xs text-gray-500">{t('product.yourSelection')}</p>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="text-sm font-semibold text-brand-800">
                  // Line 153: {getCustomizationLabel(customization, t)}
                  {getCustomizationLabel(customization, t)}
                // JSX element — HTML-like tag becomes React component in browser
                </p>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-6 flex items-center gap-4">
              // JSX element — HTML-like tag becomes React component in browser
              <div className="flex items-center rounded-lg border border-gray-200">
                // JSX element — HTML-like tag becomes React component in browser
                <button
                  // Click handler — runs when user clicks (must be client component)
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
                  // Accessibility attribute — screen readers and assistive tech
                  aria-label={t('product.decreaseQty')}
                // Line 164: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <Minus className="h-4 w-4" />
                // JSX element — HTML-like tag becomes React component in browser
                </button>
                // JSX element — HTML-like tag becomes React component in browser
                <span className="w-12 text-center font-semibold">{quantity}</span>
                // JSX element — HTML-like tag becomes React component in browser
                <button
                  // Click handler — runs when user clicks (must be client component)
                  onClick={() => setQuantity(quantity + 1)}
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="flex h-12 w-12 items-center justify-center text-gray-500 transition-colors hover:text-brand-700"
                  // Accessibility attribute — screen readers and assistive tech
                  aria-label={t('product.increaseQty')}
                // Line 172: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <Plus className="h-4 w-4" />
                // JSX element — HTML-like tag becomes React component in browser
                </button>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
// (blank line — separates logical blocks for readability)
              // JSX element — HTML-like tag becomes React component in browser
              <Button
                // Click handler — runs when user clicks (must be client component)
                onClick={handleAddToCart}
                // Line 179: disabled={!product.inStock}
                disabled={!product.inStock}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="flex-1"
                // Line 181: size="lg"
                size="lg"
              // Line 182: >
              >
                // Line 183: {added ? (
                {added ? (
                  // React Fragment — group elements without extra wrapper DOM node
                  <>
                    // JSX element — HTML-like tag becomes React component in browser
                    <Check className="h-4 w-4" />
                    // Line 186: {t('product.addedToCart')}
                    {t('product.addedToCart')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </>
                // Line 188: ) : (
                ) : (
                  // React Fragment — group elements without extra wrapper DOM node
                  <>
                    // JSX element — HTML-like tag becomes React component in browser
                    <ShoppingCart className="h-4 w-4" />
                    // Line 191: {t('product.addToCart')}
                    {t('product.addToCart')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </>
                // Line 193: )}
                )}
              // JSX element — HTML-like tag becomes React component in browser
              </Button>
// (blank line — separates logical blocks for readability)
              // JSX element — HTML-like tag becomes React component in browser
              <button
                // Click handler — runs when user clicks (must be client component)
                onClick={() => toggleItem(rawProduct)}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className={`flex h-12 w-12 items-center justify-center rounded-lg border-2 transition-all ${
                  // Line 199: inWishlist
                  inWishlist
                    // Line 200: ? 'border-red-200 bg-red-50 text-red-500'
                    ? 'border-red-200 bg-red-50 text-red-500'
                    // Line 201: : 'border-gray-200 text-gray-400 hover:border-brand-300 h...
                    : 'border-gray-200 text-gray-400 hover:border-brand-300 hover:text-brand-700'
                // Closing brace — end of block (function, if, object, JSX)
                }`}
                // Accessibility attribute — screen readers and assistive tech
                aria-label={
                  // Line 204: inWishlist ? t('product.removeWishlist') : t('product.add...
                  inWishlist ? t('product.removeWishlist') : t('product.addWishlist')
                // Closing brace — end of block (function, if, object, JSX)
                }
              // Line 206: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <Heart className={`h-5 w-5 ${inWishlist ? 'fill-current' : ''}`} />
              // JSX element — HTML-like tag becomes React component in browser
              </button>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="border-t border-gray-100 pt-6">
              // JSX element — HTML-like tag becomes React component in browser
              <h2 className="mb-3 font-display text-lg font-semibold text-brand-900">
                // Line 213: {t('product.aboutProduct')}
                {t('product.aboutProduct')}
              // JSX element — HTML-like tag becomes React component in browser
              </h2>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-sm leading-relaxed text-gray-600">
                // Line 216: {product.longDescription}
                {product.longDescription}
              // JSX element — HTML-like tag becomes React component in browser
              </p>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 223: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
