import { ResultComparison } from '../components/ResultComparison';
import type { WidgetTranslations } from '../i18n';
import { SharePanel, type ShareIntentProperties } from '../components/SharePanel';

interface DemoResultViewProps {
  resultImage: string;
  /** The shopper photo supplied to inference. */
  originalPhotoImage?: string;
  originalClothingImage?: string;
  productTitle?: string;
  /** Product page, used by the share fallbacks. */
  productUrl?: string;
  brandName?: string;
  productImage?: string;
  productId: string;
  variantId?: string | null;
  runId?: string;
  onShareIntent: (properties: ShareIntentProperties) => void;
  onTryAnother: () => void;
  onClose: () => void;
  t: WidgetTranslations['result'];
}

/** Demo result screen, with the same mandatory branded share flow as storefront results. */
export function DemoResultView({
  resultImage,
  originalPhotoImage,
  originalClothingImage,
  productTitle,
  productUrl,
  brandName,
  productImage,
  productId,
  variantId,
  runId,
  onShareIntent,
  onTryAnother,
  onClose,
  t,
}: DemoResultViewProps) {
  return (
    <div className="aisthetix-result">
      <ResultComparison
        resultImage={resultImage}
        originalPhotoImage={originalPhotoImage}
        originalClothingImage={originalClothingImage}
        t={t}
      />

      <SharePanel
        resultImage={resultImage}
        productUrl={productUrl ?? null}
        productName={productTitle ?? ''}
        brandName={brandName}
        productImage={productImage}
        productId={productId}
        variantId={variantId}
        runId={runId}
        t={t.viralShare}
        onIntent={onShareIntent}
      />

      <div className="aisthetix-result-actions">
        <button
          type="button"
          onClick={onTryAnother}
          className="aisthetix-btn aisthetix-btn-secondary"
        >
          {t.tryDifferent}
        </button>
        <button
          type="button"
          onClick={onClose}
          className="aisthetix-btn aisthetix-btn-primary"
        >
          {t.continueShopping}
        </button>
      </div>

      {productTitle && (
        <div className="aisthetix-result-product">
          <span>{t.tryingOn(productTitle)}</span>
        </div>
      )}
    </div>
  );
}