'use client';

import { CdnImage as Image } from '@/ui/shared/cdn-image';
import type { Product, ProductMetafield, DownloadFile } from 'brainerce';
import { useProductPage } from '@/core/hooks/use-product-page';
import { PriceDisplay } from '@/ui/product/price-display';
import { VariantSelector } from '@/ui/product/variant-selector';
import { StockBadge } from '@/ui/product/stock-badge';
import { DiscountBadge } from '@/ui/product/discount-badge';
import { BackInStockForm, canOfferStockAlert } from '@/ui/product/back-in-stock-form';
import { RecommendationSection } from '@/ui/product/recommendation-section';
import { FrequentlyBoughtTogether } from '@/ui/product/frequently-bought-together';
import { CustomizationFields } from '@/ui/product/customization-fields';
import { ModifierGroupSelector } from '@/ui/product/modifier-group-selector';
import { useTranslations } from '@/core/lib/translations';
import { sanitizeProductHtml } from '@/core/lib/sanitize-html';

/** Render a metafield value based on its type */
function MetafieldValue({ field }: { field: ProductMetafield }) {
  const tc = useTranslations('common');
  switch (field.type) {
    case 'IMAGE': {
      if (!field.value) return <span>-</span>;
      return <img src={field.value} alt={field.definitionName} className="h-16 w-16" />;
    }
    case 'GALLERY': {
      let urls: string[] = [];
      try {
        const parsed = JSON.parse(field.value);
        urls = Array.isArray(parsed)
          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
          : [];
      } catch {
        urls = field.value ? [field.value] : [];
      }
      if (urls.length === 0) return <span>-</span>;
      return (
        <span className="flex flex-wrap gap-2">
          {urls.map((url, i) => (
            <img key={i} src={url} alt={`${field.definitionName} ${i + 1}`} className="h-16 w-16" />
          ))}
        </span>
      );
    }
    case 'URL':
      return field.value ? (
        <a href={field.value} target="_blank" rel="noopener noreferrer">
          {field.value}
        </a>
      ) : (
        <span>-</span>
      );
    case 'COLOR':
      return field.value ? <span>{field.value}</span> : <span>-</span>;
    case 'BOOLEAN':
      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
    case 'DATE':
    case 'DATETIME': {
      if (!field.value) return <span>-</span>;
      try {
        const date = new Date(field.value);
        return (
          <span>
            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
          </span>
        );
      } catch {
        return <span>{field.value}</span>;
      }
    }
    default:
      return <span>{field.value || '-'}</span>;
  }
}

interface ProductClientSectionProps {
  product: Product;
  /**
   * From `getStoreInfo().stockAlertsEnabled` — the merchant switch for
   * back-in-stock alerts on this storefront. Undefined on a public-storefront
   * (storeId) client, where the setting does not apply and the feature is on.
   */
  stockAlertsEnabled?: boolean;
}

export function ProductClientSection({
  product: initialProduct,
  stockAlertsEnabled,
}: ProductClientSectionProps) {
  const t = useTranslations('productDetail');

  const {
    product,
    recommendations,
    images,
    selectedImageIndex,
    setSelectedImageIndex,
    mainImageUrl,
    selectedVariant,
    setSelectedVariant,
    priceInfo,
    displayPrice,
    inventory,
    canPurchase,
    description,
    quantity,
    setQuantity,
    addingToCart,
    addedMessage,
    addToCartError,
    handleAddToCart,
    customizationFields,
    customizationValues,
    setCustomizationValues,
    customizationErrors,
    modifierGroups,
    modifierSelections,
    setModifierSelection,
    modifierError,
  } = useProductPage(initialProduct);

  return (
    <article>
      {/* DESIGN ME — product page (PDP): gallery, buy box (price/stock/variants/customization/modifiers/quantity/add-to-cart), description, specs, cross-sells; everything comes from useProductPage(initialProduct). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
        {/* Image Gallery */}
        <figure>
          {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
          <div className="relative aspect-square">
            {mainImageUrl ? (
              <Image
                src={mainImageUrl}
                alt={product.name}
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                priority
              />
            ) : (
              <span className="sr-only">{product.name}</span>
            )}
          </div>

          {/* Thumbnails */}
          {images.length > 1 && (
            <div className="flex flex-wrap gap-2">
              {images.map((img, idx) => (
                <button
                  key={idx}
                  type="button"
                  onClick={() => setSelectedImageIndex(idx)}
                  aria-pressed={selectedImageIndex === idx}
                  className="relative h-16 w-16"
                >
                  <Image
                    src={img.url}
                    alt={img.alt || `${product.name} ${idx + 1}`}
                    fill
                    sizes="64px"
                  />
                </button>
              ))}
            </div>
          )}
          <figcaption className="sr-only">{product.name}</figcaption>
        </figure>

        {/* Product Info / buy box */}
        <section>
          {/* Categories */}
          {product.categories && product.categories.length > 0 && (
            <ul className="flex flex-wrap gap-2">
              {product.categories.map((cat) => (
                <li key={cat.id}>{cat.name}</li>
              ))}
            </ul>
          )}

          {/* Brand */}
          {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
            (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
              <p>
                {t('by')}{' '}
                <span>
                  {(product as { brands: Array<{ id: string; name: string }> }).brands
                    .map((b) => b.name)
                    .join(', ')}
                </span>
              </p>
            )}

          {/* Title */}
          <h1>{product.name}</h1>

          {/* Tags */}
          {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
            (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
              0 && (
              <ul className="flex flex-wrap gap-1">
                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
                  (tag) => (
                    <li key={tag.id}>#{tag.name}</li>
                  )
                )}
              </ul>
            )}

          {/* Active discount rule on this product, as a badge. `product.discount`
              is returned by getProductBySlug and is null/absent when no rule
              applies, and DiscountBadge returns null on a falsy `discount`, so
              this renders nothing on a store with no discounts configured. */}
          <DiscountBadge discount={product.discount} />

          {/* Price */}
          <PriceDisplay
            price={displayPrice.price}
            salePrice={displayPrice.salePrice ?? undefined}
            currency={displayPrice.currency}
            size="lg"
          />

          {/* Stock / Digital badge */}
          {product.isDownloadable ? (
            <p>{t('instantDownload')}</p>
          ) : (
            <StockBadge inventory={inventory} />
          )}

          {/* Downloadable files info */}
          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
            <section>
              <h2>
                {t('filesIncluded')} ({product.downloads.length})
              </h2>
              <ul>
                {product.downloads.map((file: DownloadFile) => (
                  <li key={file.id}>
                    <span>{file.name}</span>
                    {file.size && (
                      <span>
                        {' '}
                        (
                        {file.size < 1024 * 1024
                          ? `${(file.size / 1024).toFixed(0)} KB`
                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
                        )
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </section>
          )}

          {/* Variant Selector */}
          {/* A KIT is bought as ONE line, but the shopper needs to see what is
              in the box before deciding. These rows are display only — never add
              them to the cart individually; the kit reserves its components on
              its own. */}
          {product.type === 'KIT' && product.kitComponents?.length ? (
            <div className="mb-6">
              <h2 className="mb-3 text-sm font-medium">{t('whatsInTheBox')}</h2>
              <ul className="divide-y rounded-lg border">
                {product.kitComponents.map((c) => (
                  <li
                    key={`${c.productId}-${c.variantId ?? ''}`}
                    className="flex items-center gap-3 p-3"
                  >
                    {c.image ? (
                      <img
                        src={c.image}
                        alt={c.name}
                        className="h-10 w-10 shrink-0 rounded border object-cover"
                      />
                    ) : (
                      <div className="bg-muted h-10 w-10 shrink-0 rounded border" />
                    )}
                    <span className="flex-1 text-sm">{c.name}</span>
                    <span className="text-muted-foreground text-sm">x{c.quantity}</span>
                  </li>
                ))}
              </ul>
            </div>
          ) : null}

          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
            <VariantSelector
              product={product}
              selectedVariant={selectedVariant}
              onVariantChange={setSelectedVariant}
            />
          )}

          {/* Customization Fields (buyer input) */}
          {customizationFields.length > 0 && (
            <CustomizationFields
              fields={customizationFields}
              values={customizationValues}
              onChange={setCustomizationValues}
              errors={customizationErrors}
            />
          )}

          {/* Modifier groups (toppings, sauce, bread type, …) */}
          {modifierGroups.length > 0 && (
            <div>
              {modifierGroups.map((group) => (
                <ModifierGroupSelector
                  key={group.attachmentId ?? group.id}
                  group={group}
                  value={modifierSelections[group.id] ?? []}
                  onChange={(next) => setModifierSelection(group.id, next)}
                  disabled={addingToCart}
                />
              ))}
              {modifierError && <p role="alert">{modifierError}</p>}
            </div>
          )}

          {/* Quantity + Add to Cart */}
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                aria-label={t('decreaseQuantity')}
              >
                -
              </button>
              <span aria-live="polite">{quantity}</span>
              <button
                type="button"
                onClick={() => setQuantity((q) => q + 1)}
                aria-label={t('increaseQuantity')}
              >
                +
              </button>
            </div>

            <button type="button" onClick={handleAddToCart} disabled={!canPurchase || addingToCart}>
              {addingToCart
                ? t('addingToCart')
                : addedMessage
                  ? t('addedToCart')
                  : !canPurchase
                    ? t('outOfStock')
                    : t('addToCart')}
            </button>
          </div>

          {/*
            Why the add was refused. Deliberately OUTSIDE the modifier block
            above: that block only renders when the product HAS modifier
            groups, so a refusal shown there would be invisible on almost
            every product and the shopper would just watch the button reset.
          */}
          {addToCartError && (
            <p role="alert">
              {addToCartError === 'CART_FULL' ? t('cartFull') : t('addToCartFailed')}
            </p>
          )}

          {/*
            Sold out is not the end of the page. `canOfferStockAlert` is the whole
            gate — it also covers the merchant's switch and backorderable items,
            where an alert would tell someone to come back and do what they can
            already do. Pass the selected variant: without it a shopper who wanted
            the medium is mailed when the small returns.
          */}
          {canOfferStockAlert(inventory, stockAlertsEnabled) && (
            <BackInStockForm productId={product.id} variantId={selectedVariant?.id} />
          )}

          {/* Download after purchase note */}
          {product.isDownloadable && <p>{t('downloadAfterPurchase')}</p>}

          {/* Description */}
          {description && (
            <section>
              <h2>{t('description')}</h2>
              {'html' in description ? (
                // Security: merchant-authored product description HTML,
                // sanitized via `sanitizeProductHtml` (isomorphic-dompurify,
                // allowlisted tags) before injecting.
                <div dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }} />
              ) : (
                <p className="whitespace-pre-wrap">{description.text}</p>
              )}
            </section>
          )}

          {/* Metafields / Specifications */}
          {product.metafields && product.metafields.length > 0 && (
            <section>
              <h2>{t('specifications')}</h2>
              <table>
                <tbody>
                  {product.metafields.map((field) => (
                    <tr key={field.id}>
                      <th scope="row">{field.definitionName}</th>
                      <td>
                        <MetafieldValue field={field} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </section>
          )}
        </section>
      </div>

      {/* Frequently Bought Together (cross-sells) */}
      {recommendations?.crossSells && recommendations.crossSells.length > 0 && (
        <FrequentlyBoughtTogether items={recommendations.crossSells} currentProduct={product} />
      )}

      {/* Upsells */}
      {recommendations?.upsells && recommendations.upsells.length > 0 && (
        <RecommendationSection title={t('upgradeYourChoice')} items={recommendations.upsells} />
      )}

      {/* Related products */}
      {recommendations?.related && recommendations.related.length > 0 && (
        <RecommendationSection title={t('similarProducts')} items={recommendations.related} />
      )}
    </article>
  );
}