import { useState } from 'react';
import type { CSSProperties } from 'react';
import type { ResultComparisonTranslations } from '../i18n/resultComparison';

interface ResultComparisonProps {
  resultImage: string;
  /** The shopper photo supplied to inference. */
  originalPhotoImage?: string;
  /** The garment supplied to inference. */
  originalClothingImage?: string;
  t: ResultComparisonTranslations;
  initialViewMode?: 'result' | 'compare';
}

/** Shared Shopify and Woo result media, retaining the native range interaction. */
export function ResultComparison({
  resultImage,
  originalPhotoImage,
  originalClothingImage,
  t,
  initialViewMode = 'result',
}: ResultComparisonProps) {
  const [viewMode, setViewMode] = useState<'result' | 'compare'>(initialViewMode);
  const [beforeAfterPosition, setBeforeAfterPosition] = useState(50);

  return (
    <>
      {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' || !originalClothingImage ? (
          <div className="aisthetix-result-single">
            {originalPhotoImage ? (
              <div
                className="aisthetix-before-after"
                style={{ '--aisthetix-split': `${beforeAfterPosition}%` } as CSSProperties}
              >
                <img
                  src={originalPhotoImage}
                  alt={t.beforePhoto}
                  className="aisthetix-before-after-original ph-no-capture"
                />
                <img
                  src={resultImage}
                  alt={t.afterTryOn}
                  className="aisthetix-result-image aisthetix-before-after-result ph-no-capture"
                />
                <span className="aisthetix-before-after-label aisthetix-before-after-label-left" aria-hidden="true">{t.before}</span>
                <span className="aisthetix-before-after-label aisthetix-before-after-label-right" aria-hidden="true">{t.after}</span>
                <span className="aisthetix-before-after-divider" aria-hidden="true"><span>↔</span></span>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value={beforeAfterPosition}
                  onChange={(event) => setBeforeAfterPosition(Number(event.target.value))}
                  aria-label={t.beforeAfterSlider}
                  className="aisthetix-before-after-range"
                />
              </div>
            ) : (
              <img
                src={resultImage}
                alt={t.toggleResult}
                className="aisthetix-result-image ph-no-capture"
              />
            )}
          </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>

    </>
  );
}