// Saancha Shoes — Product Detail (Anatomical View)
const { useEffect, useState } = React;

function getLastShape(product) {
  const map = {
    buck: 'Elongated',
    dress: 'Elongated',
    loafer: 'Classic',
    slipon: 'Round',
    boat: 'Round',
  };
  return map[product.sub] || 'Classic';
}

function ProductPage() {
  const { route, navigate, addToCart, wish, toggleWish } = useStore();
  const toast = useToast();
  const products = window.PRODUCTS;
  const product = products.find(p => p.id === route.id);
  const [size, setSize] = useState(null);
  const [qty, setQty] = useState(1);
  const [zoomOpen, setZoomOpen] = useState(false);
  const [selectedImage, setSelectedImage] = useState(0);
  const [sizeError, setSizeError] = useState(false);

  useEffect(() => { setSize(null); setQty(1); setZoomOpen(false); setSelectedImage(0); setSizeError(false); }, [route.id]);
  useEscape(() => setZoomOpen(false), zoomOpen);
  useScrollLock(zoomOpen);

  if (!product) {
    return (
      <div className="empty-state">
        <h3>Product not found</h3>
        <button className="btn btn-outline" onClick={() => navigate({ name: 'home' })}>Go home</button>
      </div>
    );
  }

  const wished = wish.has(product.id);
  const sizes = product.sizes || ['EU 39', 'EU 40', 'EU 41', 'EU 42', 'EU 43', 'EU 44'];

  const related = products.filter(p => p.sub === product.sub && p.id !== product.id).slice(0, 4);

  const onAdd = () => {
    if (!size) { setSizeError(true); return; }
    setSizeError(false);
    addToCart(product, { qty, size });
    toast('Added to bag');
  };

  const onBuyNow = () => {
    if (!size) { setSizeError(true); return; }
    addToCart(product, { qty, size });
    navigate({ name: 'checkout' });
  };

  return (
    <>
      {/* Breadcrumbs */}
      <div className="container" style={{
        padding: 'var(--space-md) 0',
        fontFamily: 'var(--font-mono)',
        fontSize: 'var(--text-xs)',
        textTransform: 'uppercase',
        letterSpacing: '0.06em',
        color: 'var(--color-text-mute)',
      }}>
        <a onClick={() => navigate({ name: 'home' })} style={{ cursor: 'pointer' }}>Home</a>
        <span style={{ margin: '0 var(--space-xs)', color: 'var(--color-border)' }}>/</span>
        <a onClick={() => navigate({ name: 'category', group: 'shoes' })} style={{ cursor: 'pointer' }}>Shoes</a>
        <span style={{ margin: '0 var(--space-xs)', color: 'var(--color-border)' }}>/</span>
        <span style={{ color: 'var(--color-text)' }}>{product.name}</span>
      </div>

      {/* Product Detail — Anatomical View */}
      <div className="container product-detail">
        {/* Gallery */}
        <div>
          <div className="gallery" style={{ aspectRatio: '1', overflow: 'hidden', border: 'var(--rule-width) solid var(--color-border)', position: 'relative' }}>
            <img src={(product.images && product.images[selectedImage]) || product.img} alt={product.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 70%' }} />
            <button className="btn-icon" onClick={() => setZoomOpen(true)} aria-label="Zoom" style={{ position: 'absolute', top: 8, right: 8, background: 'var(--color-surface)', border: 'var(--rule-width) solid var(--color-border)' }}><Ic.zoom /></button>
          </div>
          {(product.images && product.images.length > 1) && (
            <div style={{ display: 'flex', gap: 'var(--rule-width)', marginTop: 'var(--rule-width)', overflowX: 'auto' }}>
              {product.images.map((img, i) => (
                <button key={i} onClick={() => setSelectedImage(i)} style={{
                  width: 72, height: 72, flexShrink: 0,
                  border: i === selectedImage ? 'var(--rule-width-heavy) solid var(--color-accent)' : 'var(--rule-width) solid var(--color-border)',
                  padding: 0, cursor: 'pointer', overflow: 'hidden', background: 'var(--color-paper-2)'
                }}>
                  <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 70%' }} />
                </button>
              ))}
            </div>
          )}

        </div>

        {/* Specs Panel */}
        <div className="specs">
          <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)', marginBottom: 'var(--space-xs)' }}>
            <span style={{ color: 'var(--color-accent)' }}>SPECIMEN_</span>{String(product.id).slice(-4)}
          </div>
          <h1>{product.name}</h1>
          <div className="price" style={{ color: 'var(--color-accent)' }}>
            {product.sale && (
              <span style={{ textDecoration: 'line-through', color: 'var(--color-text-mute)', fontSize: 'var(--text-base)', marginRight: 'var(--space-sm)' }}>
                {fmt(product.regular)}
              </span>
            )}
            {fmt(product.price)}
          </div>

          {/* Technical Specs Table */}
          <table className="spec-table">
            <tbody>
              <tr>
                <td>Construction</td>
                <td>{product.construction}</td>
              </tr>
              <tr>
                <td>Leather</td>
                <td>{product.leather}</td>
              </tr>
              <tr>
                <td>Sole</td>
                <td>{product.sole}</td>
              </tr>
              <tr>
                <td>Last Shape</td>
                <td>{getLastShape(product)}</td>
              </tr>
              <tr>
                <td>Stitch Count</td>
                <td>~180 SPI</td>
              </tr>
              <tr>
                <td>Made in</td>
                <td>Islamabad, Pakistan</td>
              </tr>
            </tbody>
          </table>

          {/* Description */}
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-soft)', lineHeight: 1.6, marginBottom: 'var(--space-lg)' }}>
            {product.desc}
          </p>

          {/* Size Selector */}
          <div style={{ marginBottom: 'var(--space-lg)' }}>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 'var(--text-xs)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              color: 'var(--color-text-mute)',
              marginBottom: 'var(--space-sm)',
            }}>
              Size &middot; {size || 'Choose'}
            </div>
            <div style={{ display: 'flex', gap: 'var(--rule-width)', flexWrap: 'wrap', background: sizeError ? 'var(--color-error)' : 'var(--color-border)' }}>
              {sizes.map(s => {
                const active = size === s;
                return (
                  <button
                    key={s}
                    onClick={() => { setSize(s); setSizeError(false); }}
                    style={{
                      fontFamily: 'var(--font-mono)',
                      fontSize: 'var(--text-sm)',
                      padding: 'var(--space-xs) var(--space-md)',
                      border: 'var(--rule-width-heavy) solid var(--color-ink)',
                      background: active ? 'var(--color-ink)' : 'var(--color-surface)',
                      color: active ? 'var(--color-surface)' : 'var(--color-ink)',
                      cursor: 'pointer',
                      minWidth: 64,
                    }}
                  >
                    {s}
                  </button>
                );
              })}
            </div>
            {sizeError && (
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--color-error)', marginTop: 'var(--space-xs)' }}>
                Please select a size before adding to cart
              </div>
            )}
          </div>

          {/* Qty + Add to Cart + Wishlist */}
          <div style={{ display: 'flex', gap: 'var(--rule-width)', alignItems: 'stretch', marginBottom: 'var(--space-md)' }}>
            <div style={{
              display: 'flex', alignItems: 'center',
              border: 'var(--rule-width-heavy) solid var(--color-ink)',
            }}>
              <button
                onClick={() => setQty(q => Math.max(1, q - 1))}
                style={{
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-lg)',
                  padding: '0 var(--space-md)', height: '100%',
                  border: 'none', background: 'transparent', cursor: 'pointer',
                }}
              >
                -
              </button>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)',
                padding: '0 var(--space-md)', minWidth: 40, textAlign: 'center',
                borderLeft: 'var(--rule-width) solid var(--color-border)',
                borderRight: 'var(--rule-width) solid var(--color-border)',
              }}>
                {qty}
              </span>
              <button
                onClick={() => setQty(q => q + 1)}
                style={{
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-lg)',
                  padding: '0 var(--space-md)', height: '100%',
                  border: 'none', background: 'transparent', cursor: 'pointer',
                }}
              >
                +
              </button>
            </div>
            <button className="btn btn-lg" style={{ flex: 1 }} onClick={onAdd}>
              Add to Bag
            </button>
            <button
              onClick={() => toggleWish(product.id)}
              aria-label="Wishlist"
              style={{
                width: 50, display: 'grid', placeItems: 'center',
                border: 'var(--rule-width-heavy) solid var(--color-ink)',
                background: wished ? 'var(--color-ink)' : 'transparent',
                color: wished ? 'var(--color-surface)' : 'var(--color-ink)',
                cursor: 'pointer',
              }}
            >
              <Ic.heart fill={wished ? 'currentColor' : 'none'} />
            </button>
          </div>

          {/* Buy Now */}
          <button className="btn btn-lg" onClick={onBuyNow} style={{
            width: '100%', background: 'var(--color-accent)',
            color: 'var(--color-surface)', borderColor: 'var(--color-accent)',
          }}>
            Buy Now &mdash; {fmt(product.price * qty)}
          </button>

          {/* Delivery Note */}
          <div style={{
            background: 'var(--color-paper-2)',
            padding: 'var(--space-md)',
            marginTop: 'var(--space-md)',
            border: 'var(--rule-width) solid var(--color-border)',
            fontSize: 'var(--text-sm)',
          }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 'var(--space-2xs)' }}>
              Free Shipping
            </div>
            <div style={{ color: 'var(--color-text-mute)' }}>
              Estimated delivery 3&ndash;5 business days within Pakistan.
            </div>
          </div>
        </div>
      </div>

      {/* Related Products */}
      {related.length > 0 && (
        <section className="section" style={{ background: 'var(--color-paper-2)' }}>
          <div className="container">
            <div className="section-head">
              <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)' }}>
                <span style={{ color: 'var(--color-accent)' }}>RELATED_</span>SPECIMENS
              </div>
              <h2 style={{ marginTop: 'var(--space-sm)' }}>More from the Collection</h2>
            </div>
            <div className="product-grid">
              {related.map(p => <ProductCard key={p.id} product={p} />)}
            </div>
          </div>
        </section>
      )}

      {/* Zoom Lightbox */}
      {zoomOpen && (
        <div
          className="lightbox"
          onClick={() => setZoomOpen(false)}
          role="dialog"
          aria-modal="true"
          aria-label="Product image zoom"
          style={{
            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
            zIndex: 300, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <button
            onClick={e => { e.stopPropagation(); setZoomOpen(false); }}
            aria-label="Close zoom"
            style={{
              position: 'absolute', top: 'var(--space-lg)', right: 'var(--space-lg)',
              width: 48, height: 48, display: 'grid', placeItems: 'center',
              background: 'transparent', border: 'var(--rule-width) solid rgba(255,255,255,0.3)',
              color: 'var(--color-surface)', cursor: 'pointer',
            }}
          >
            <Ic.close />
          </button>
          <img
            src={product.img}
            alt={product.name}
            onClick={e => e.stopPropagation()}
            style={{ maxWidth: '90vw', maxHeight: '85vh', objectFit: 'cover', objectPosition: 'center 70%' }}
          />
        </div>
      )}
    </>
  );
}

window.ProductPage = ProductPage;