shopify-template/components/shopify/product-detail/product-detail-info.tsx

import React from 'react';
import { Button } from '@/components/ui/button';
import { Loader } from '@/components/ui/loader';
import { RiSubtractLine, RiAddLine } from '@remixicon/react';
import ShopPayButton from '@/components/shopify/shop-pay-button';
import type { ProductOption, ProductOptionValue } from '@/hooks/use-shopify-products';
import { isSwatchOptionName, swatchColorForName } from '@/config/swatches';
import { isDefaultTitleOption } from '@/services/shopify/catalog';

interface ProductPrice {
  amount: string;
  currencyCode: string;
}

interface ProductVariant {
  id: string;
  title: string;
  price: ProductPrice;
  availableForSale: boolean;
  selectedOptions: Array<{
    name: string;
    value: string;
  }>;
}

interface Product {
  id: string;
  title: string;
  description?: string;
  descriptionHtml?: string;
  handle: string;
  priceRange: {
    minVariantPrice: ProductPrice;
  };
  compareAtPriceRange?: {
    minVariantPrice: ProductPrice;
  };
  options: ProductOption[];
}

export interface ProductFeature {
  icon: string;
  label: string;
}

interface ProductDetailInfoProps {
  product: Product;
  selectedVariant: ProductVariant | null;
  selectedOptions: Record<string, string>;
  quantity: number;
  setQuantity: (quantity: number) => void;
  handleAddToCart: () => void;
  handleBuyNow?: () => void;
  onOptionChange: (optionName: string, value: string) => void;
  /** Whether an option value still has an in-stock variant behind it. */
  isOptionValueAvailable?: (optionName: string, value: string) => boolean;
  loading?: boolean;
  buyingNow?: boolean;
  addToCartLabel?: string;
}

// A swatch comes from the option value's own swatch (colour or image) or the
// colour its name implies (see config/swatches) — never a variant photo.
const swatchStyle = (
  value: ProductOptionValue
): { background?: string; image?: string } => {
  if (value.swatch?.color) return { background: value.swatch.color };

  const swatchImage = value.swatch?.image?.previewImage?.url;
  if (swatchImage) return { image: swatchImage };

  const namedColor = swatchColorForName(value.name);
  if (namedColor) return { background: namedColor };

  return {};
};

const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
  product,
  selectedVariant,
  selectedOptions,
  quantity,
  setQuantity,
  handleAddToCart,
  handleBuyNow,
  onOptionChange,
  isOptionValueAvailable,
  loading = false,
  buyingNow = false,
  addToCartLabel = 'Add to Cart',
}) => {
  const formatPrice = (amount: string) => {
    return `$${parseFloat(amount).toFixed(2)}`;
  };

  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
  const hasDiscount =
    compareAtPrice &&
    parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
  const isAvailable = selectedVariant?.availableForSale ?? false;

  const isSwatchOption = (option: ProductOption) =>
    isSwatchOptionName(option.name);

  // Some products return Size before Color; show the swatches first either way.
  // Single-SKU products expose a synthetic `Title: Default Title` option — drop it.
  const orderedOptions = [...(product.options ?? [])]
    .filter((option) => !isDefaultTitleOption(option))
    .sort((a, b) => Number(isSwatchOption(b)) - Number(isSwatchOption(a)));

  // `optionValues` carries the swatch data; fall back to plain `values`.
  const optionValuesFor = (option: ProductOption): ProductOptionValue[] =>
    option.optionValues?.length
      ? option.optionValues
      : option.values.map((value) => ({ id: value, name: value }));

  return (
    <div>
      <h1 className="text-2xl md:text-3xl font-normal text-foreground">
        {product.title}
      </h1>
      <div className="flex items-baseline gap-x-3 mt-1">
        <span className="font-mono tabular-nums tracking-tight text-base text-foreground">
          {formatPrice(price.amount)}
        </span>
        {hasDiscount && compareAtPrice && (
          <span className="font-mono tabular-nums tracking-tight text-sm line-through text-muted-foreground">
            {formatPrice(compareAtPrice.amount)}
          </span>
        )}
      </div>

      {/* Product Options — colour swatches lead, whatever order the API returns */}
      {orderedOptions.map((option) => {
        const isSwatch = isSwatchOption(option);
        const selected = selectedOptions[option.name];

        return (
          <div key={option.id} className="mt-8">
            <div className="text-sm text-muted-foreground mb-2">
              {option.name}
              {isSwatch && selected && (
                <span className="text-foreground font-medium">: {selected}</span>
              )}
            </div>

            <div className="flex flex-wrap gap-2">
              {optionValuesFor(option).map((value) => {
                const isSelected = selected === value.name;
                const isSoldOut =
                  isOptionValueAvailable?.(option.name, value.name) === false;

                if (isSwatch) {
                  const { background, image } = swatchStyle(value);

                  return (
                    <Button
                      key={value.id}
                      onClick={() => onOptionChange(option.name, value.name)}
                      variant="ghost"
                      size="icon-sm"
                      aria-label={value.name}
                      aria-pressed={isSelected}
                      title={
                        isSoldOut ? `${value.name} — out of stock` : value.name
                      }
                      data-available={!isSoldOut}
                      className={`rounded-full bg-cover bg-center hover:bg-transparent ${
                        isSelected
                          ? 'ring-2 ring-foreground ring-offset-2'
                          : 'ring-1 ring-border hover:ring-foreground/40'
                      } ${isSoldOut ? 'option-unavailable text-foreground/60 opacity-60' : ''}`}
                      style={{
                        // With no colour and no image the circle would be fully
                        // transparent, leaving just a hairline ring that
                        // antialiases unevenly and reads as a speckled border.
                        // A neutral fill makes the initial-letter fallback look
                        // deliberate. Set inline so it beats the ghost variant's
                        // hover background.
                        backgroundColor:
                          background ??
                          (image ? undefined : 'var(--color-muted)'),
                        backgroundImage: image ? `url(${image})` : undefined,
                      }}
                    >
                      {!background && !image && (
                        <span className="text-[10px] font-medium uppercase text-muted-foreground">
                          {value.name.at(0)}
                        </span>
                      )}
                    </Button>
                  );
                }

                return (
                  <Button
                    key={value.id}
                    onClick={() => onOptionChange(option.name, value.name)}
                    variant="outline"
                    aria-pressed={isSelected}
                    title={isSoldOut ? `${value.name} — out of stock` : undefined}
                    className={`min-w-14 px-5 font-normal shadow-none ${
                      isSelected
                        ? 'border-foreground text-foreground'
                        : 'text-muted-foreground hover:border-foreground hover:text-foreground'
                    } ${isSoldOut ? 'option-unavailable text-muted-foreground/60' : ''}`}
                  >
                    {value.name}
                  </Button>
                );
              })}
            </div>
          </div>
        );
      })}

      {/* Quantity + Add to Cart */}
      <div className="mt-8 flex items-stretch gap-3">
        <div className="flex items-center rounded-md border border-border h-11">
          <Button
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            disabled={quantity <= 1}
            variant="ghost"
            size="icon"
            aria-label="Decrease quantity"
            className="h-full rounded-none rounded-l-md"
          >
            <RiSubtractLine size={16} />
          </Button>
          <span className="w-8 text-center text-sm tabular-nums">
            {quantity}
          </span>
          <Button
            onClick={() => setQuantity(quantity + 1)}
            variant="ghost"
            size="icon"
            aria-label="Increase quantity"
            className="h-full rounded-none rounded-r-md"
          >
            <RiAddLine size={16} />
          </Button>
        </div>

        <Button
          onClick={handleAddToCart}
          disabled={!isAvailable || loading}
          className="flex-1 h-11"
        >
          {loading && <Loader size={16} />}
          {isAvailable ? addToCartLabel : 'Out of Stock'}
        </Button>
      </div>

      {/* Cart permalink into Shop Pay; falls back to the cart checkout URL. */}
      <ShopPayButton
        className="mt-3"
        variants={
          selectedVariant ? [{ id: selectedVariant.id, quantity }] : []
        }
        disabled={!isAvailable || buyingNow}
        loading={buyingNow}
        onFallbackClick={handleBuyNow}
      />

      {/* Description */}
      {(product.descriptionHtml || product.description) && (
        <div className="mt-10 text-sm leading-6 text-foreground product-description">
          {product.descriptionHtml ? (
            <div
              dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
            />
          ) : (
            <p>{product.description}</p>
          )}
        </div>
      )}
    </div>
  );
};

export default ProductDetailInfo;