import { useState } from 'react';
import { downloadImage } from '../imageUtils';
import type { WidgetTranslations } from '../i18n';

interface ResultViewProps {
  resultImage: string;
  originalClothingImage?: string;
  productTitle?: string;
  onTryAnother: () => void;
  onClose: () => void;
  t: WidgetTranslations['result'];
}

export function ResultView({
  resultImage,
  originalClothingImage,
  productTitle,
  onTryAnother,
  onClose,
  t,
}: ResultViewProps) {
  const [viewMode, setViewMode] = useState<'result' | 'compare'>('result');

  const handleDownload = () => {
    const filename = `virtual-tryon-${productTitle?.replace(/\s+/g, '-').toLowerCase() || 'result'}-${Date.now()}.png`;
    downloadImage(resultImage, filename);
  };

  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">
            <img
              src={resultImage}
              alt={t.toggleResult}
              className="aisthetix-result-image"
            />
          </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"
              />
            </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"
              />
            </div>
          </div>
        )}
      </div>

      <div className="aisthetix-result-actions">
        <button
          type="button"
          onClick={handleDownload}
          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"
          >
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
            <polyline points="7 10 12 15 17 10" />
            <line x1="12" y1="15" x2="12" y2="3" />
          </svg>
          {t.download}
        </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>

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