// <ProductPage> — shop product detail at /shop/:productSlug.
//
// Composition:
//   ShopHeader
//   ├ ProductGallery (left column)
//   └ ProductInfo + ProductBuyPanel (right column)
//   TemplateGalleryForProduct (full width, customizable kind only)
//
// Loading / error / 404 states are handled inline (kept simple — no
// dedicated error boundary needed for a leaf route).
//
// The buy panel's "Customize this product" CTA scrolls the template
// gallery into view via a ref + scrollIntoView. The gallery section
// has id="templates" so the URL hash also works as a fallback.

import { useParams, Link } from 'react-router-dom';
import { useRef } from 'react';
import { ShopHeader } from './ShopHeader.jsx';
import { ProductGallery } from './ProductGallery.jsx';
import { ProductInfo } from './ProductInfo.jsx';
import { ProductBuyPanel } from './ProductBuyPanel.jsx';
import { TemplateGalleryForProduct } from './TemplateGalleryForProduct.jsx';
import { useShopProduct } from '../../hooks/useShopProduct.js';

export function ProductPage() {
  const { productSlug } = useParams();
  const { product, loading, error } = useShopProduct(productSlug);
  const templatesRef = useRef(null);

  const handleScrollToTemplates = () => {
    if (templatesRef.current) {
      templatesRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <div className="app-shell">
      <ShopHeader />
      <main className="shop-main">
        {loading && (
          <div className="shop-product-page shop-product-page--loading">
            <p>Loading…</p>
          </div>
        )}

        {error && (
          <div className="shop-product-page shop-product-page--error">
            <h1>Product not found</h1>
            <p>
              We couldn't find that product. <Link to="/shop">Back to the shop →</Link>
            </p>
          </div>
        )}

        {product && (
          <>
            <nav className="shop-breadcrumb" aria-label="Breadcrumb">
              <Link to="/shop">← Shop</Link>
            </nav>
            <article className="shop-product-page">
              <div className="shop-product-page__gallery">
                <ProductGallery product={product} />
              </div>
              <div className="shop-product-page__details">
                <ProductInfo product={product} />
                <ProductBuyPanel
                  product={product}
                  onScrollToTemplates={handleScrollToTemplates}
                />
              </div>
            </article>
            {product.kind === 'customizable' && (
              <div ref={templatesRef}>
                <TemplateGalleryForProduct product={product} />
              </div>
            )}
          </>
        )}
      </main>
    </div>
  );
}