/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/shop/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 { useCallback, useEffect, useMemo, useState } from 'react';
// Next.js App Router hooks — useRouter, useParams, useSearchParams
import { useRouter, useSearchParams } from 'next/navigation';
// Import project module (@/ alias = src/ folder in tsconfig)
import ProductCard from '@/components/product/ProductCard';
// Import project module (@/ alias = src/ folder in tsconfig)
import ShopFilters from '@/components/shop/ShopFilters';
// Import project module (@/ alias = src/ folder in tsconfig)
import { products } from '@/lib/products';
// Import project module (@/ alias = src/ folder in tsconfig)
import { localizeProduct } from '@/lib/product-i18n';
// Import project module (@/ alias = src/ folder in tsconfig)
import { Category, SortOption } from '@/types';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// Line 12: const CATEGORIES: Category[] = ['chicken', 'beef', 'lamb'...
const CATEGORIES: Category[] = ['chicken', 'beef', 'lamb', 'fish'];
// (blank line — separates logical blocks for readability)
// Function declaration — reusable logic in this file
function parseCategory(value: string | null): Category | 'all' {
  // Return value from function
  return CATEGORIES.includes(value as Category) ? (value as Category) : 'all';
// Closing brace — end of block (function, if, object, JSX)
}
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function ShopPage() {
  // Next.js router — programmatic navigation (router.push)
  const router = useRouter();
  // Read URL query string (?category=beef&q=steak)
  const searchParams = useSearchParams();
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // React useState — local component state that triggers re-render on change
  const [selectedCategory, setSelectedCategory] = useState<Category | 'all'>(
    // Line 24: parseCategory(searchParams.get('category'))
    parseCategory(searchParams.get('category'))
  // Line 25: );
  );
  // React useState — local component state that triggers re-render on change
  const [sortBy, setSortBy] = useState<SortOption>('featured');
  // React useState — local component state that triggers re-render on change
  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');
// (blank line — separates logical blocks for readability)
  // Side effect hook — runs after paint; deps array controls when it re-runs
  useEffect(() => {
    // Line 30: setSelectedCategory(parseCategory(searchParams.get('categ...
    setSelectedCategory(parseCategory(searchParams.get('category')));
    // Line 31: setSearchQuery(searchParams.get('q') || '');
    setSearchQuery(searchParams.get('q') || '');
  // Closing brace — end of block (function, if, object, JSX)
  }, [searchParams]);
// (blank line — separates logical blocks for readability)
  // React useCallback — stable function reference for useEffect/useMemo deps
  const pushParams = useCallback(
    // Line 35: (updates: { category?: Category | 'all'; q?: string }) => {
    (updates: { category?: Category | 'all'; q?: string }) => {
      // Line 36: const params = new URLSearchParams(searchParams.toString());
      const params = new URLSearchParams(searchParams.toString());
// (blank line — separates logical blocks for readability)
      // Conditional branch — different behavior based on runtime value
      if (updates.category !== undefined) {
        // Conditional branch — different behavior based on runtime value
        if (updates.category === 'all') params.delete('category');
        // Line 40: else params.set('category', updates.category);
        else params.set('category', updates.category);
      // Closing brace — end of block (function, if, object, JSX)
      }
// (blank line — separates logical blocks for readability)
      // Conditional branch — different behavior based on runtime value
      if (updates.q !== undefined) {
        // Conditional branch — different behavior based on runtime value
        if (updates.q) params.set('q', updates.q);
        // Line 45: else params.delete('q');
        else params.delete('q');
      // Closing brace — end of block (function, if, object, JSX)
      }
// (blank line — separates logical blocks for readability)
      // Line 48: const qs = params.toString();
      const qs = params.toString();
      // Line 49: router.push(qs ? `/shop?${qs}` : '/shop', { scroll: false...
      router.push(qs ? `/shop?${qs}` : '/shop', { scroll: false });
    // Closing brace — end of block (function, if, object, JSX)
    },
    // Line 51: [router, searchParams]
    [router, searchParams]
  // Line 52: );
  );
// (blank line — separates logical blocks for readability)
  // Line 54: const handleCategoryChange = (category: Category | 'all')...
  const handleCategoryChange = (category: Category | 'all') => {
    // Line 55: setSelectedCategory(category);
    setSelectedCategory(category);
    // Line 56: pushParams({ category });
    pushParams({ category });
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // Line 59: const handleSearchChange = (query: string) => {
  const handleSearchChange = (query: string) => {
    // Line 60: setSearchQuery(query);
    setSearchQuery(query);
    // Line 61: pushParams({ q: query });
    pushParams({ q: query });
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // React useMemo — cache expensive computed value until dependencies change
  const filteredProducts = useMemo(() => {
    // Array.map — transform each item (often render a list of components)
    let result = products.map((p) => localizeProduct(p, t));
// (blank line — separates logical blocks for readability)
    // Conditional branch — different behavior based on runtime value
    if (selectedCategory !== 'all') {
      // Array.filter — keep items matching condition (search, category)
      result = result.filter((p) => p.category === selectedCategory);
    // Closing brace — end of block (function, if, object, JSX)
    }
// (blank line — separates logical blocks for readability)
    // Conditional branch — different behavior based on runtime value
    if (searchQuery.trim()) {
      // Line 72: const query = searchQuery.toLowerCase();
      const query = searchQuery.toLowerCase();
      // Array.filter — keep items matching condition (search, category)
      result = result.filter(
        // Line 74: (p) =>
        (p) =>
          // Line 75: p.name.toLowerCase().includes(query) ||
          p.name.toLowerCase().includes(query) ||
          // Line 76: p.description.toLowerCase().includes(query) ||
          p.description.toLowerCase().includes(query) ||
          // Line 77: p.tags.some((tag) => tag.includes(query))
          p.tags.some((tag) => tag.includes(query))
      // Line 78: );
      );
    // Closing brace — end of block (function, if, object, JSX)
    }
// (blank line — separates logical blocks for readability)
    // Switch — multiple branches on one variable (e.g. sort order)
    switch (sortBy) {
      // Switch case — handle one specific value
      case 'price-asc':
        // Array.sort — reorder items (price, name, featured)
        result.sort((a, b) => a.price - b.price);
        // Line 84: break;
        break;
      // Switch case — handle one specific value
      case 'price-desc':
        // Array.sort — reorder items (price, name, featured)
        result.sort((a, b) => b.price - a.price);
        // Line 87: break;
        break;
      // Switch case — handle one specific value
      case 'name':
        // Array.sort — reorder items (price, name, featured)
        result.sort((a, b) => a.name.localeCompare(b.name));
        // Line 90: break;
        break;
      // Switch case — handle one specific value
      case 'featured':
      // Switch default — fallback when no case matches
      default:
        // Array.sort — reorder items (price, name, featured)
        result.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
        // Line 94: break;
        break;
    // Closing brace — end of block (function, if, object, JSX)
    }
// (blank line — separates logical blocks for readability)
    // Return value from function
    return result;
  // Closing brace — end of block (function, if, object, JSX)
  }, [selectedCategory, sortBy, searchQuery, t]);
// (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-gray-50">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="border-b border-gray-100 bg-white">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
          // JSX element — HTML-like tag becomes React component in browser
          <h1 className="section-heading mb-2">{t('shop.title')}</h1>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-gray-500">{t('shop.subtitle')}</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="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex flex-col gap-8 lg:flex-row">
          // JSX element — HTML-like tag becomes React component in browser
          <aside className="lg:w-64 lg:shrink-0">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="card-premium sticky top-24 p-6">
              // JSX element — HTML-like tag becomes React component in browser
              <ShopFilters
                // Line 114: selectedCategory={selectedCategory}
                selectedCategory={selectedCategory}
                // Line 115: onCategoryChange={handleCategoryChange}
                onCategoryChange={handleCategoryChange}
                // Line 116: sortBy={sortBy}
                sortBy={sortBy}
                // Line 117: onSortChange={setSortBy}
                onSortChange={setSortBy}
                // Line 118: searchQuery={searchQuery}
                searchQuery={searchQuery}
                // Line 119: onSearchChange={handleSearchChange}
                onSearchChange={handleSearchChange}
                // Line 120: totalResults={filteredProducts.length}
                totalResults={filteredProducts.length}
              // Line 121: />
              />
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </aside>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="flex-1">
            // Line 126: {filteredProducts.length === 0 ? (
            {filteredProducts.length === 0 ? (
              // JSX element — HTML-like tag becomes React component in browser
              <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
                // JSX element — HTML-like tag becomes React component in browser
                <p className="mb-2 text-lg font-semibold text-brand-900">
                  // Line 129: {t('shop.noProducts')}
                  {t('shop.noProducts')}
                // JSX element — HTML-like tag becomes React component in browser
                </p>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="text-sm text-gray-500">{t('shop.noProductsHint')}</p>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // Line 133: ) : (
            ) : (
              // JSX element — HTML-like tag becomes React component in browser
              <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
                // Array.map — transform each item (often render a list of components)
                {filteredProducts.map((product) => (
                  // JSX element — HTML-like tag becomes React component in browser
                  <ProductCard key={product.id} product={product} />
                // Line 137: ))}
                ))}
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // Line 139: )}
            )}
          // 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 144: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
