import type { CSSProperties } from 'react';
import type { components } from '../api/generated/v1';

// Renders where the on-screen bug lands, using the same percent-of-frame geometry the FFmpeg
// watermark filters use (WatermarkScaleFilter scales to widthPercent of output width; margins are
// percentages). This is an approximation for editing feedback, not a frame-accurate render.
/* eslint-disable react-refresh/only-export-components -- geometry math must stay colocated and pure for unit testing without the DOM */
export interface BugPreviewGeometry {
  horizontalMargin: number;
  location: components['schemas']['WatermarkLocation'];
  opacity: number;
  size: components['schemas']['WatermarkSize'];
  verticalMargin: number;
  width: number;
}

export function bugPreviewStyle(geometry: BugPreviewGeometry): CSSProperties {
  const horizontal = `${geometry.horizontalMargin}%`;
  const vertical = `${geometry.verticalMargin}%`;

  const placement: CSSProperties = (() => {
    switch (geometry.location) {
      case 'BottomLeft':
        return { bottom: vertical, left: horizontal };
      case 'BottomMiddle':
        return { bottom: vertical, left: '50%', transform: 'translateX(-50%)' };
      case 'BottomRight':
        return { bottom: vertical, right: horizontal };
      case 'LeftMiddle':
        return { left: horizontal, top: '50%', transform: 'translateY(-50%)' };
      // NOTE: FFmpeg currently renders MiddleCenter bottom-right (OverlayWatermarkFilter has no
      // arm for it, so it hits the bottom-right default) — see #503. We keep the semantically
      // correct centered preview here rather than encoding that defect.
      case 'MiddleCenter':
        return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };
      case 'RightMiddle':
        return { right: horizontal, top: '50%', transform: 'translateY(-50%)' };
      case 'TopLeft':
        return { left: horizontal, top: vertical };
      case 'TopMiddle':
        return { left: '50%', top: vertical, transform: 'translateX(-50%)' };
      case 'TopRight':
        return { right: horizontal, top: vertical };
      default:
        return { left: horizontal, top: vertical };
    }
  })();

  return {
    ...placement,
    objectFit: 'contain',
    opacity: geometry.opacity / 100,
    position: 'absolute',
    width: geometry.size === 'Scaled' ? `${geometry.width}%` : undefined
  };
}

export function BugPreview({
  alt = 'On-screen bug preview',
  src,
  ...geometry
}: BugPreviewGeometry & { alt?: string; src: null | string }) {
  return (
    <div
      style={{
        aspectRatio: '16 / 9',
        background: 'var(--ctv-surface-sunken, #1b1b1f)',
        border: '1px solid var(--ctv-border, #33343a)',
        borderRadius: 6,
        maxWidth: 320,
        overflow: 'hidden',
        position: 'relative',
        width: '100%'
      }}
    >
      {src && <img alt={alt} src={src} style={bugPreviewStyle(geometry)} />}
    </div>
  );
}
