import { useState } from 'react';
import { TryOnFigure } from './TryOnFigure';
import { tryOnFilename } from './share';
import { useShareAction } from './useShareAction';
import type { WidgetTranslations } from '../i18n';

interface DemoResultViewProps {
  resultImage: string;
  originalClothingImage?: string;
  productTitle?: string;
  /** Product page, used by the share fallbacks. */
  productUrl?: string;
  onTryAnother: () => void;
  onClose: () => void;
  t: WidgetTranslations['result'];
  shareT: WidgetTranslations['share'];
}

/**
 * The demo's result screen. The merchant one (`components/ResultView`) is left
 * untouched on purpose, so nothing here can regress a real storefront.
 *
 * Two differences: the garment sits on the render as a thumbnail, so fidelity
 * can be judged without switching screens, and Download became Share. Share
 * hands the file to the OS where that exists and quietly saves it where it does
 * not, so the render still never leaves the device either way.
 */
export function DemoResultView({
  resultImage,
  originalClothingImage,
  productTitle,
  productUrl,
  onTryAnother,
  onClose,
  t,
  shareT,
}: DemoResultViewProps) {
  const [viewMode, setViewMode] = useState<'result' | 'compare'>('result');
  const { notice, share } = useShareAction(shareT);

  const handleShare = () => {
    void share({
      image: resultImage,
      filename: tryOnFilename(productTitle),
      title: productTitle || t.toggleResult,
      url: productUrl,
    });
  };

  return (
    <div className="aisthetix-result">
      {originalClothingImage && (
        <div className="aisthetix-result-header">
          <div className="aisthetix-view-toggle">
            <button
              type="button"
              className={`aisthetix-toggle-btn ${viewMode === 'result' ? 'active' : ''}`}
              onClick={() => setViewMode('result')}
            >
              {t.toggleResult}
            </button>
            <button
              type="button"
              className={`aisthetix-toggle-btn ${viewMode === 'compare' ? 'active' : ''}`}
              onClick={() => setViewMode('compare')}
            >
              {t.toggleCompare}
            </button>
          </div>
        </div>
      )}

      <div className="aisthetix-result-content">
        {viewMode === 'result' ? (
          <div className="aisthetix-result-single">
            <TryOnFigure
              image={resultImage}
              garmentImage={originalClothingImage}
              alt={t.toggleResult}
              garmentAlt={t.garmentThumbnail}
            />
          </div>
        ) : (
          <div className="aisthetix-result-compare">
            <div className="aisthetix-compare-item">
              <span className="aisthetix-compare-label">{t.compareOriginal}</span>
              <img
                src={originalClothingImage}
                alt={t.compareOriginal}
                className="aisthetix-compare-image ph-no-capture"
              />
            </div>
            <div className="aisthetix-compare-divider">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <polyline points="9 18 15 12 9 6" />
              </svg>
            </div>
            <div className="aisthetix-compare-item">
              <span className="aisthetix-compare-label">{t.compareTryOn}</span>
              <img
                src={resultImage}
                alt={t.compareTryOn}
                className="aisthetix-compare-image ph-no-capture"
              />
            </div>
          </div>
        )}
      </div>

      <div className="aisthetix-result-actions">
        <button
          type="button"
          onClick={handleShare}
          className="aisthetix-btn aisthetix-btn-secondary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <circle cx="18" cy="5" r="3" />
            <circle cx="6" cy="12" r="3" />
            <circle cx="18" cy="19" r="3" />
            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
          </svg>
          {t.share}
        </button>
        <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>

      {notice && (
        <p
          className={notice.isError ? 'aisthetix-lead-error' : 'aisthetix-result-notice'}
          role="status"
        >
          {notice.text}
        </p>
      )}

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