/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/account/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 { useEffect } from 'react';
// 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 { useRouter } from 'next/navigation';
// Lucide icons — lightweight SVG icon components
import { User, Package, MapPin, Phone, Mail, LogOut, Heart } 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 { useAuthStore } from '@/store/auth';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, formatDate, 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 AccountPage() {
  // Next.js router — programmatic navigation (router.push)
  const router = useRouter();
  // Zustand selector — subscribe to slice of global store
  const { user, isAuthenticated, orders, logout } = useAuthStore();
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Side effect hook — runs after paint; deps array controls when it re-runs
  useEffect(() => {
    // Conditional branch — different behavior based on runtime value
    if (!isAuthenticated) {
      // Line 20: router.push('/login');
      router.push('/login');
    // Closing brace — end of block (function, if, object, JSX)
    }
  // Closing brace — end of block (function, if, object, JSX)
  }, [isAuthenticated, router]);
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (!isAuthenticated || !user) {
    // Return value from function
    return null;
  // Closing brace — end of block (function, if, object, JSX)
  }
// (blank line — separates logical blocks for readability)
  // Line 28: const handleLogout = () => {
  const handleLogout = () => {
    // Line 29: logout();
    logout();
    // Line 30: router.push('/');
    router.push('/');
  // Closing brace — end of block (function, if, object, JSX)
  };
// (blank line — separates logical blocks for readability)
  // Line 33: const fmt = (n: number) => formatPrice(n, getFormatLocale...
  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
// (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('account.title')}</h1>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-gray-500">{t('account.welcome', { name: user.name })}</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-6">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="card-premium p-6">
              // JSX element — HTML-like tag becomes React component in browser
              <div className="mb-4 flex items-center gap-3">
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100">
                  // JSX element — HTML-like tag becomes React component in browser
                  <User className="h-6 w-6 text-brand-700" />
                // 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
                  <h2 className="font-display text-lg font-semibold">{user.name}</h2>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-sm text-gray-500">
                    // Line 55: {t('account.memberSince', { date: formatDate(user.created...
                    {t('account.memberSince', { date: formatDate(user.createdAt) })}
                  // 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="space-y-3 border-t border-gray-100 pt-4">
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  // JSX element — HTML-like tag becomes React component in browser
                  <Mail className="h-4 w-4 text-brand-600" />
                  // Line 63: {user.email}
                  {user.email}
                // JSX element — HTML-like tag becomes React component in browser
                </div>
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  // JSX element — HTML-like tag becomes React component in browser
                  <Phone className="h-4 w-4 text-brand-600" />
                  // Line 67: {user.phone}
                  {user.phone}
                // JSX element — HTML-like tag becomes React component in browser
                </div>
                // JSX element — HTML-like tag becomes React component in browser
                <div className="flex items-start gap-2 text-sm text-gray-600">
                  // JSX element — HTML-like tag becomes React component in browser
                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
                  // Line 71: {user.address.street}, {user.address.city}, {user.address...
                  {user.address.street}, {user.address.city}, {user.address.state}{' '}
                  // Line 72: {user.address.zip}
                  {user.address.zip}
                // 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>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="card-premium p-4">
              // JSX element — HTML-like tag becomes React component in browser
              <Link
                // Link target URL — internal route or external https://
                href="/wishlist"
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
              // Line 81: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <Heart className="h-4 w-4" />
                // Line 83: {t('account.myWishlist')}
                {t('account.myWishlist')}
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
              // JSX element — HTML-like tag becomes React component in browser
              <button
                // Click handler — runs when user clicks (must be client component)
                onClick={handleLogout}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
              // Line 88: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <LogOut className="h-4 w-4" />
                // Line 90: {t('account.signOut')}
                {t('account.signOut')}
              // 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
          </div>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="lg:col-span-2" id="orders">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="card-premium p-6">
              // JSX element — HTML-like tag becomes React component in browser
              <div className="mb-6 flex items-center gap-2">
                // JSX element — HTML-like tag becomes React component in browser
                <Package className="h-5 w-5 text-brand-700" />
                // JSX element — HTML-like tag becomes React component in browser
                <h2 className="font-display text-lg font-semibold">
                  // Line 100: {t('account.orderHistory')}
                  {t('account.orderHistory')}
                // JSX element — HTML-like tag becomes React component in browser
                </h2>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
// (blank line — separates logical blocks for readability)
              // Line 104: {orders.length === 0 ? (
              {orders.length === 0 ? (
                // JSX element — HTML-like tag becomes React component in browser
                <div className="py-12 text-center">
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="mb-2 text-gray-500">{t('account.noOrders')}</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">{t('account.startShopping')}</Button>
                  // JSX element — HTML-like tag becomes React component in browser
                  </Link>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // Line 111: ) : (
              ) : (
                // JSX element — HTML-like tag becomes React component in browser
                <div className="space-y-4">
                  // Array.map — transform each item (often render a list of components)
                  {orders.map((order) => (
                    // JSX element — HTML-like tag becomes React component in browser
                    <div
                      // Line 115: key={order.id}
                      key={order.id}
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="rounded-xl border border-gray-100 p-4 transition-colors hover:border-brand-200"
                    // Line 117: >
                    >
                      // JSX element — HTML-like tag becomes React component in browser
                      <div className="mb-3 flex items-center justify-between">
                        // JSX element — HTML-like tag becomes React component in browser
                        <div>
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-sm font-semibold text-brand-900">{order.id}</p>
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-xs text-gray-400">
                            // Line 122: {formatDate(order.createdAt)}
                            {formatDate(order.createdAt)}
                          // 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 className="text-end">
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="font-bold text-brand-800">{fmt(order.total)}</p>
                          // JSX element — HTML-like tag becomes React component in browser
                          <span className="inline-block rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium capitalize text-brand-700">
                            // Line 128: {t(`orderStatus.${order.status}`)}
                            {t(`orderStatus.${order.status}`)}
                          // 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 className="space-y-1">
                        // Array.map — transform each item (often render a list of components)
                        {order.items.map((item) => {
                          // Line 134: 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
                              // Line 137: key={item.id}
                              key={item.id}
                              // Tailwind CSS utility classes — styling (colors, spacing, layout)
                              className="flex justify-between text-sm text-gray-600"
                            // Line 139: >
                            >
                              // 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="hover:text-brand-700"
                              // Line 143: >
                              >
                                // Line 144: {localized.name} × {item.quantity}
                                {localized.name} × {item.quantity}
                                // JSX element — HTML-like tag becomes React component in browser
                                <span className="ms-2 text-xs text-gold-600">
                                  // Line 146: ({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
                              </Link>
                              // JSX element — HTML-like tag becomes React component in browser
                              <span>{fmt(item.product.price * item.quantity)}</span>
                            // JSX element — HTML-like tag becomes React component in browser
                            </div>
                          // Line 151: );
                          );
                        // Closing brace — end of block (function, if, object, JSX)
                        })}
                      // JSX element — HTML-like tag becomes React component in browser
                      </div>
                    // JSX element — HTML-like tag becomes React component in browser
                    </div>
                  // Line 155: ))}
                  ))}
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // Line 157: )}
              )}
            // 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 163: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
