/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/cart/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 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';
// Lucide icons — lightweight SVG icon components
import { Minus, Plus, Trash2, ShoppingBag, ArrowRight } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useCartStore } from '@/store/cart';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, getFormatLocale } from '@/lib/utils';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { localizeProduct } from '@/lib/product-i18n';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function CartPage() {
  // Zustand selector — subscribe to slice of global store
  const { items, updateQuantity, removeItem, getTotal } = useCartStore();
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
  // Line 15: const total = getTotal();
  const total = getTotal();
  // Line 16: const deliveryFee = total > 500 ? 0 : 49;
  const deliveryFee = total > 500 ? 0 : 49;
  // Line 17: const grandTotal = total + deliveryFee;
  const grandTotal = total + deliveryFee;
  // Line 18: const fmt = (n: number) => formatPrice(n, getFormatLocale...
  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (items.length === 0) {
    // Return JSX — describes UI tree React renders to the DOM
    return (
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-brand-50">
          // JSX element — HTML-like tag becomes React component in browser
          <ShoppingBag className="h-10 w-10 text-brand-300" />
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <h1 className="mb-2 font-display text-2xl font-bold text-brand-900">
          // Line 27: {t('cart.empty')}
          {t('cart.empty')}
        // JSX element — HTML-like tag becomes React component in browser
        </h1>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mb-8 text-gray-500">{t('cart.emptyHint')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        <Link href="/shop">
          // JSX element — HTML-like tag becomes React component in browser
          <Button variant="primary" size="lg">
            // Line 32: {t('cart.startShopping')}
            {t('cart.startShopping')}
          // JSX element — HTML-like tag becomes React component in browser
          </Button>
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // Line 36: );
    );
  // 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-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">{t('cart.title')}</h1>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-gray-500">
            // Line 45: {t('cart.itemsCount', { count: items.length })}
            {t('cart.itemsCount', { count: items.length })}
          // 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="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="grid gap-8 lg:grid-cols-3">
          // JSX element — HTML-like tag becomes React component in browser
          <div className="space-y-4 lg:col-span-2">
            // Array.map — transform each item (often render a list of components)
            {items.map((item) => {
              // Line 54: const localized = localizeProduct(item.product, t);
              const localized = localizeProduct(item.product, t);
              // Return JSX — describes UI tree React renders to the DOM
              return (
                // JSX element — HTML-like tag becomes React component in browser
                <div key={item.id} className="card-premium flex gap-4 p-4 sm:p-6">
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="relative h-24 w-24 shrink-0 overflow-hidden rounded-xl sm:h-28 sm:w-28">
                    // JSX element — HTML-like tag becomes React component in browser
                    <AppImage
                      // Line 59: src={item.product.image}
                      src={item.product.image}
                      // Line 60: alt={localized.name}
                      alt={localized.name}
                      // Line 61: fill
                      fill
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="object-cover"
                      // Line 63: sizes="(max-width: 640px) 96px, 112px"
                      sizes="(max-width: 640px) 96px, 112px"
                    // Line 64: />
                    />
                  // 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="flex flex-1 flex-col">
                    // JSX element — HTML-like tag becomes React component in browser
                    <div className="flex items-start justify-between">
                      // JSX element — HTML-like tag becomes React component in browser
                      <div>
                        // JSX element — HTML-like tag becomes React component in browser
                        <Link
                          // Link target URL — internal route or external https://
                          href={`/product/${item.product.slug}`}
                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
                          className="font-display text-lg font-semibold text-brand-900 hover:text-brand-700"
                        // Line 73: >
                        >
                          // Line 74: {localized.name}
                          {localized.name}
                        // JSX element — HTML-like tag becomes React component in browser
                        </Link>
                        // JSX element — HTML-like tag becomes React component in browser
                        <p className="mt-1 text-xs uppercase tracking-wider text-brand-600">
                          // Line 77: {t(`categories.${item.product.category}.name`)}
                          {t(`categories.${item.product.category}.name`)}
                        // 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
                      <button
                        // Click handler — runs when user clicks (must be client component)
                        onClick={() => removeItem(item.id)}
                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
                        className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500"
                        // Accessibility attribute — screen readers and assistive tech
                        aria-label={t('cart.removeItem')}
                      // Line 84: >
                      >
                        // JSX element — HTML-like tag becomes React component in browser
                        <Trash2 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
                    <div className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-gold-50 px-3 py-1">
                      // JSX element — HTML-like tag becomes React component in browser
                      <span className="text-xs font-medium text-gold-700">
                        // Line 91: {t('cart.customization')}
                        {t('cart.customization')}
                      // JSX element — HTML-like tag becomes React component in browser
                      </span>
                      // JSX element — HTML-like tag becomes React component in browser
                      <span className="text-xs font-semibold text-gold-800">
                        // Line 94: {item.customizationLabel}
                        {item.customizationLabel}
                      // JSX element — HTML-like tag becomes React component in browser
                      </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="mt-auto flex items-center justify-between pt-3">
                      // 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={() => updateQuantity(item.id, item.quantity - 1)}
                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
                          // Accessibility attribute — screen readers and assistive tech
                          aria-label={t('product.decreaseQty')}
                        // Line 104: >
                        >
                          // JSX element — HTML-like tag becomes React component in browser
                          <Minus className="h-3 w-3" />
                        // JSX element — HTML-like tag becomes React component in browser
                        </button>
                        // JSX element — HTML-like tag becomes React component in browser
                        <span className="w-8 text-center text-sm font-semibold">
                          // Line 108: {item.quantity}
                          {item.quantity}
                        // JSX element — HTML-like tag becomes React component in browser
                        </span>
                        // JSX element — HTML-like tag becomes React component in browser
                        <button
                          // Click handler — runs when user clicks (must be client component)
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
                          className="flex h-9 w-9 items-center justify-center text-gray-500 hover:text-brand-700"
                          // Accessibility attribute — screen readers and assistive tech
                          aria-label={t('product.increaseQty')}
                        // Line 114: >
                        >
                          // JSX element — HTML-like tag becomes React component in browser
                          <Plus className="h-3 w-3" />
                        // JSX element — HTML-like tag becomes React component in browser
                        </button>
                      // JSX element — HTML-like tag becomes React component in browser
                      </div>
                      // JSX element — HTML-like tag becomes React component in browser
                      <span className="text-lg font-bold text-brand-800">
                        // Line 119: {fmt(item.product.price * item.quantity)}
                        {fmt(item.product.price * item.quantity)}
                      // JSX element — HTML-like tag becomes React component in browser
                      </span>
                    // 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 124: );
              );
            // Closing brace — end of block (function, if, object, JSX)
            })}
          // 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="card-premium sticky top-24 p-6">
              // JSX element — HTML-like tag becomes React component in browser
              <h2 className="mb-4 font-display text-lg font-semibold text-brand-900">
                // Line 131: {t('cart.orderSummary')}
                {t('cart.orderSummary')}
              // JSX element — HTML-like tag becomes React component in browser
              </h2>
// (blank line — separates logical blocks for readability)
              // JSX element — HTML-like tag becomes React component in browser
              <div className="space-y-3 border-b border-gray-100 pb-4">
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex justify-between text-sm">
                  // JSX element — HTML-like tag becomes React component in browser
                  <span className="text-gray-500">{t('cart.subtotal')}</span>
                  // JSX element — HTML-like tag becomes React component in browser
                  <span className="font-medium">{fmt(total)}</span>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex justify-between text-sm">
                  // JSX element — HTML-like tag becomes React component in browser
                  <span className="text-gray-500">{t('cart.delivery')}</span>
                  // JSX element — HTML-like tag becomes React component in browser
                  <span className="font-medium">
                    // Line 142: {deliveryFee === 0 ? (
                    {deliveryFee === 0 ? (
                      // JSX element — HTML-like tag becomes React component in browser
                      <span className="text-brand-700">{t('cart.free')}</span>
                    // Line 144: ) : (
                    ) : (
                      // Line 145: fmt(deliveryFee)
                      fmt(deliveryFee)
                    // Line 146: )}
                    )}
                  // JSX element — HTML-like tag becomes React component in browser
                  </span>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
                // Line 149: {deliveryFee > 0 && (
                {deliveryFee > 0 && (
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-xs text-gray-400">{t('cart.freeDeliveryHint')}</p>
                // Line 151: )}
                )}
              // 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="flex justify-between py-4">
                // JSX element — HTML-like tag becomes React component in browser
                <span className="font-semibold text-brand-900">{t('cart.total')}</span>
                // JSX element — HTML-like tag becomes React component in browser
                <span className="text-xl font-bold text-brand-800">{fmt(grandTotal)}</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
              <Link href="/checkout">
                // JSX element — HTML-like tag becomes React component in browser
                <Button variant="gold" size="lg" className="w-full">
                  // Line 161: {t('cart.proceedCheckout')}
                  {t('cart.proceedCheckout')}
                  // JSX element — HTML-like tag becomes React component in browser
                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                // JSX element — HTML-like tag becomes React component in browser
                </Button>
              // 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
              <Link
                // Link target URL — internal route or external https://
                href="/shop"
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="mt-3 block text-center text-sm font-medium text-brand-600 hover:text-brand-800"
              // Line 169: >
              >
                // Line 170: {t('cart.continueShopping')}
                {t('cart.continueShopping')}
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
            // 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 177: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
