'use client';

import { Download, FileText, Image as ImageIcon } from 'lucide-react';
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 { LoadingSpinner } from '@/ui/shared/loading-spinner';
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 { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';
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 className="text-muted-foreground">-</span>;
      return (
        <img
          src={field.value}
          alt={field.definitionName}
          className="h-16 w-16 rounded object-cover"
        />
      );
    }
    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 className="text-muted-foreground">-</span>;
      return (
        <div 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 rounded object-cover"
            />
          ))}
        </div>
      );
    }
    case 'URL':
      return field.value ? (
        <a
          href={field.value}
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary break-all hover:underline"
        >
          {field.value}
        </a>
      ) : (
        <span className="text-muted-foreground">-</span>
      );
    case 'COLOR':
      return field.value ? (
        <span className="inline-flex items-center gap-2">
          <span
            className="border-border inline-block h-4 w-4 rounded-full border"
            style={{ backgroundColor: field.value }}
          />
          {field.value}
        </span>
      ) : (
        <span className="text-muted-foreground">-</span>
      );
    case 'BOOLEAN':
      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
    case 'DATE':
    case 'DATETIME': {
      if (!field.value) return <span className="text-muted-foreground">-</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's switch for
   * back-in-stock alerts on this storefront. Passed down rather than fetched
   * here because the page already holds storeInfo and a second call would be a
   * waterfall. 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 (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
        {/* Image Gallery */}
        <div className="space-y-4">
          {/* Main Image */}
          <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
            {mainImageUrl ? (
              <Image
                src={mainImageUrl}
                alt={product.name}
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-contain"
                priority
              />
            ) : (
              <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
                <ImageIcon className="h-24 w-24" strokeWidth={1} aria-hidden="true" />
              </div>
            )}
          </div>

          {/* Thumbnails */}
          {images.length > 1 && (
            <div className="flex gap-2 overflow-x-auto pb-2">
              {images.map((img, idx) => (
                <button
                  key={idx}
                  type="button"
                  onClick={() => setSelectedImageIndex(idx)}
                  className={cn(
                    'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded border-2 transition-colors',
                    selectedImageIndex === idx
                      ? 'border-primary'
                      : 'border-border hover:border-muted-foreground'
                  )}
                >
                  <Image
                    src={img.url}
                    alt={img.alt || `${product.name} ${idx + 1}`}
                    fill
                    sizes="64px"
                    className="object-cover"
                  />
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Product Info */}
        <div className="space-y-6">
          {/* Categories */}
          {product.categories && product.categories.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {product.categories.map((cat) => (
                <Badge
                  key={cat.id}
                  variant="secondary"
                  className="text-muted-foreground bg-muted rounded px-2 py-1 font-normal"
                >
                  {cat.name}
                </Badge>
              ))}
            </div>
          )}

          {/* Brand */}
          {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
            (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
              <div className="text-muted-foreground text-sm">
                {t('by')}{' '}
                <span className="text-foreground font-medium">
                  {(product as { brands: Array<{ id: string; name: string }> }).brands
                    .map((b) => b.name)
                    .join(', ')}
                </span>
              </div>
            )}

          {/* Title */}
          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{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 && (
              <div className="flex flex-wrap gap-1.5">
                {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
                  (tag) => (
                    <Badge
                      key={tag.id}
                      variant="outline"
                      className="border-border text-muted-foreground px-2.5 py-0.5 font-normal"
                    >
                      #{tag.name}
                    </Badge>
                  )
                )}
              </div>
            )}

          {/* 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} className="w-fit" />

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

          {/* Stock / Digital badge */}
          {product.isDownloadable ? (
            <Badge
              variant="outline"
              className="gap-1.5 border-transparent bg-green-100 px-3 py-1 font-medium text-green-800 dark:bg-green-950/30 dark:text-green-400"
            >
              <Download className="h-3.5 w-3.5" aria-hidden="true" />
              {t('instantDownload')}
            </Badge>
          ) : (
            <StockBadge inventory={inventory} />
          )}

          {/* Downloadable files info */}
          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
            <div className="bg-muted/50 rounded-lg border p-4">
              <p className="text-foreground mb-2 text-sm font-medium">
                {t('filesIncluded')} ({product.downloads.length})
              </p>
              <ul className="space-y-1.5">
                {product.downloads.map((file: DownloadFile) => (
                  <li
                    key={file.id}
                    className="text-muted-foreground flex items-center gap-2 text-sm"
                  >
                    <FileText
                      className="h-4 w-4 flex-shrink-0"
                      strokeWidth={1.5}
                      aria-hidden="true"
                    />
                    <span className="truncate">{file.name}</span>
                    {file.size && (
                      <span className="flex-shrink-0 text-xs">
                        (
                        {file.size < 1024 * 1024
                          ? `${(file.size / 1024).toFixed(0)} KB`
                          : `${(file.size / (1024 * 1024)).toFixed(1)} MB`}
                        )
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* 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 className="space-y-4">
              {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 className="text-destructive text-sm" role="alert">
                  {modifierError}
                </p>
              )}
            </div>
          )}

          {/* Quantity + Add to Cart */}
          <div className="flex items-center gap-4">
            <div className="border-border flex items-center rounded border">
              <button
                type="button"
                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
                aria-label={t('decreaseQuantity')}
              >
                -
              </button>
              <span className="text-foreground min-w-[3rem] px-4 py-2 text-center text-sm font-medium">
                {quantity}
              </span>
              <button
                type="button"
                onClick={() => setQuantity((q) => q + 1)}
                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
                aria-label={t('increaseQuantity')}
              >
                +
              </button>
            </div>

            <Button
              type="button"
              size="lg"
              onClick={handleAddToCart}
              disabled={!canPurchase || addingToCart}
              className={cn(
                'flex-1 rounded px-6 text-sm',
                !canPurchase && 'bg-muted text-muted-foreground hover:bg-muted disabled:opacity-100'
              )}
            >
              {addingToCart ? (
                <span className="inline-flex items-center gap-2">
                  <LoadingSpinner
                    size="sm"
                    className="border-primary-foreground/30 border-t-primary-foreground"
                  />
                  {t('addingToCart')}
                </span>
              ) : 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 className="text-destructive text-sm" 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. The selected variant is passed on purpose: without it a
            shopper who wanted the medium gets mailed when the small returns.
          */}
          {canOfferStockAlert(inventory, stockAlertsEnabled) && (
            <BackInStockForm productId={product.id} variantId={selectedVariant?.id} />
          )}

          {/* Download after purchase note */}
          {product.isDownloadable && (
            <p className="text-muted-foreground text-sm">{t('downloadAfterPurchase')}</p>
          )}

          {/* Description */}
          {description && (
            <div>
              <Separator className="mb-4" />
              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('description')}</h2>
              {'html' in description ? (
                // Security: merchant-authored product description HTML,
                // sanitized via `sanitizeProductHtml` (isomorphic-dompurify,
                // allowlisted tags) before injecting.
                <div
                  className="prose prose-sm text-muted-foreground max-w-none"
                  dangerouslySetInnerHTML={{ __html: sanitizeProductHtml(description.html) }}
                />
              ) : (
                <p className="text-muted-foreground whitespace-pre-wrap">{description.text}</p>
              )}
            </div>
          )}

          {/* Metafields / Specifications */}
          {product.metafields && product.metafields.length > 0 && (
            <div>
              <Separator className="mb-4" />
              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('specifications')}</h2>
              <table className="w-full text-sm">
                <tbody>
                  {product.metafields.map((field) => (
                    <tr key={field.id} className="border-border border-b last:border-0">
                      <td className="text-foreground whitespace-nowrap py-2 pe-4 font-medium">
                        {field.definitionName}
                      </td>
                      <td className="text-muted-foreground py-2">
                        <MetafieldValue field={field} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

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

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

      {/* Related products */}
      {recommendations?.related && recommendations.related.length > 0 && (
        <RecommendationSection
          title={t('similarProducts')}
          items={recommendations.related}
          className="mt-12"
        />
      )}
    </div>
  );
}