import { useState, useEffect } from 'react';
import { barProgress, statusIndexFor, elapsedTenths } from '../processingProgress';
import type { WidgetTranslations } from '../i18n';

/** How often the elapsed readout ticks. Tenths are visible, so keep it 100ms. */
const TICK_MS = 100;

interface ProcessingViewProps {
  /** Date.now() captured when the try-on request started. */
  startedAt: number;
  /** The shopper's own photo, shown faded behind the progress readout. */
  avatarImage?: string;
  t: WidgetTranslations['processing'];
}

export function ProcessingView({ startedAt, avatarImage, t }: ProcessingViewProps) {
  const [elapsedMs, setElapsedMs] = useState(() => Date.now() - startedAt);

  useEffect(() => {
    const id = setInterval(() => setElapsedMs(Date.now() - startedAt), TICK_MS);
    return () => clearInterval(id);
  }, [startedAt]);

  // Both derived from the same elapsed value, so they cannot drift apart.
  const fill = barProgress(elapsedMs);
  const status = t.statuses[statusIndexFor(elapsedMs)];

  return (
    <div className="aisthetix-processing">
      <div className="aisthetix-processing-stage">
        {avatarImage && (
          <img
            src={avatarImage}
            alt=""
            aria-hidden="true"
            className="aisthetix-processing-avatar ph-no-capture"
          />
        )}

        <div className="aisthetix-processing-hud">
          <span className="aisthetix-elapsed">{t.elapsed(elapsedTenths(elapsedMs))}</span>

          <div className="aisthetix-progress-bar">
            <div
              className="aisthetix-progress-fill"
              style={{ width: `${fill * 100}%` }}
            />
          </div>

          {/* keyed on the string so React remounts it and the fade-in replays */}
          <p className="aisthetix-status" key={status} aria-live="polite">
            {status}
          </p>
        </div>
      </div>
    </div>
  );
}