// Composite preview of the timeline, laid out in output pixels and scaled to fit, so it matches the export.

import { useCallback, useEffect, useRef, useState, type CSSProperties, type SyntheticEvent } from 'react';
import type { Crop, Take, Video } from '../../shared/types.ts';
import { cropOf, systemVolumeOf } from '../../shared/types.ts';
import { computeGeometry, outputSize, placeCropped, type Box, type Camera } from '../../shared/layout.ts';
import { takeFileUrl } from '../api.ts';
import { usePlayerActiveTake, type TimelinePlayer } from '../lib/player.ts';

const boxStyle = (b: Box): CSSProperties => ({ left: b.x, top: b.y, width: b.w, height: b.h });

type Dims = { w: number; h: number } | null;

// The intrinsic size of a <video>, which the crop placement needs; it can change mid-stream.
function useVideoDims(): [Dims, (e: SyntheticEvent<HTMLVideoElement>) => void] {
  const [dims, setDims] = useState<Dims>(null);
  const onDims = (e: SyntheticEvent<HTMLVideoElement>) => {
    const { videoWidth: w, videoHeight: h } = e.currentTarget;
    if (w && h) setDims((d) => (d && d.w === w && d.h === h ? d : { w, h }));
  };
  return [dims, onDims];
}

// Styles for a (possibly cropped) frame fit into `box`: an overflow-hidden clip region, and the
// media inside it. Uncropped media simply use object-fit; cropped media stay hidden until their size is known.
function cropStyles(box: Box, dims: Dims, crop: Crop | undefined, fit: 'cover' | 'contain'): { clip: CSSProperties; media: CSSProperties } {
  const clipBase: CSSProperties = { position: 'absolute', overflow: 'hidden' };
  if (!crop || !dims) {
    return {
      clip: { ...clipBase, inset: 0 },
      media: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: fit, ...(crop ? { visibility: 'hidden' } : {}) },
    };
  }
  const { clip, media } = placeCropped(box, dims.w, dims.h, crop, fit);
  // Transforms (the scale behind a blur) are centered on the visible region, not on the whole frame.
  const origin = `${clip.w / 2 - media.x}px ${clip.h / 2 - media.y}px`;
  return { clip: { ...clipBase, ...boxStyle(clip) }, media: { position: 'absolute', ...boxStyle(media), maxWidth: 'none', transformOrigin: origin } };
}

export function Stage({ video, player }: { video: Video; player: TimelinePlayer }) {
  const active = usePlayerActiveTake(player);
  const outerRef = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(0.4);
  const { W, H } = outputSize(video.output);

  useEffect(() => {
    const el = outerRef.current;
    if (!el) return;
    const ro = new ResizeObserver(() => setScale(el.clientWidth / W));
    ro.observe(el);
    return () => ro.disconnect();
  }, [W]);

  const takes = video.takes.filter((t) => t.status === 'ready');
  return (
    <div className="stage" ref={outerRef} style={{ aspectRatio: `${W} / ${H}` }} onClick={() => player.toggle()}>
      <div className="stage-inner" style={{ width: W, height: H, transform: `scale(${scale})` }}>
        {takes.map((t) => {
          const g = computeGeometry(video.layout, video.output, t.tracks.screen, t.tracks.camera);
          return (
            <div key={t.id} style={{ display: t.id === active ? 'block' : 'none' }}>
              {t.tracks.screen && <ScreenLayer videoId={video.id} take={t} box={g.screen} crop={cropOf(video, t.id, 'screen')} player={player} />}
              {t.tracks.camera && <CameraLayer videoId={video.id} take={t} cam={g.camera} crop={cropOf(video, t.id, 'camera')} player={player} />}
              {t.systemAudio && <SystemAudio videoId={video.id} take={t} volume={systemVolumeOf(video.output)} player={player} />}
            </div>
          );
        })}
      </div>
      {!active && <div className="stage-empty">Nothing in the timeline yet</div>}
    </div>
  );
}

// The computer audio, played in sync with the take (a <video> element, since the player manages those).
function SystemAudio({ videoId, take, volume, player }: { videoId: string; take: Take; volume: number; player: TimelinePlayer }) {
  const ref = useRef<HTMLVideoElement | null>(null);
  useEffect(() => {
    if (ref.current) ref.current.volume = volume;
  }, [volume]);
  const register = player.refFor(take.id, 'system');
  // Stable, so that the player does not see the element re-registered (and re-seeked) on every render.
  const setRef = useCallback(
    (el: HTMLVideoElement | null) => {
      ref.current = el;
      register(el);
    },
    [register],
  );
  return (
    <video
      ref={setRef}
      src={takeFileUrl(videoId, take.id, 'system')}
      preload="auto"
      playsInline
      style={{ display: 'none' }}
    />
  );
}

// The screen track fit (letterboxed) into its box. The element stays mounted even when hidden, since it may carry the audio.
function ScreenLayer({ videoId, take, box, crop, player }: { videoId: string; take: Take; box: Box | null; crop: Crop | undefined; player: TimelinePlayer }) {
  const [dims, onDims] = useVideoDims();
  const props = {
    ref: player.refFor(take.id, 'screen'),
    src: takeFileUrl(videoId, take.id, 'screen'),
    muted: take.audio !== 'screen',
    preload: 'auto',
    playsInline: true,
    onLoadedMetadata: onDims,
    onResize: onDims,
  } as const;
  if (!box) return <video {...props} style={{ display: 'none' }} />;
  const st = cropStyles(box, dims, crop, 'contain');
  return (
    <div className="layer" style={{ ...boxStyle(box), background: '#000' }}>
      <div style={st.clip}>
        <video {...props} style={st.media} />
      </div>
    </div>
  );
}

// The camera box: the original camera, or (once background removal has run) the chosen background
// with the cutout on top. The camera element stays mounted even when hidden, since it carries the audio.
function CameraLayer({ videoId, take, cam, crop, player }: { videoId: string; take: Take; cam: Camera | null; crop: Crop | undefined; player: TimelinePlayer }) {
  const [dims, onDims] = useVideoDims();
  const camSrc = takeFileUrl(videoId, take.id, 'camera');
  const muted = take.audio !== 'camera';
  if (!cam) return <video ref={player.refFor(take.id, 'camera')} src={camSrc} muted={muted} preload="auto" playsInline style={{ display: 'none' }} />;
  const hasCutout = cam.background !== 'none' && take.matte?.status === 'done';
  const bg = hasCutout ? cam.background : 'none';
  // The cutout has the camera's aspect ratio, so the same placement applies to both.
  const { clip, media } = cropStyles(cam.box, dims, crop, cam.fit);
  return (
    <div className="layer" style={{ ...boxStyle(cam.box), borderRadius: cam.radius, overflow: 'hidden', background: bg === 'color' ? cam.color : bg === 'cutout' ? 'transparent' : '#000' }}>
      <div style={clip}>
        <video
          ref={player.refFor(take.id, 'camera')}
          src={camSrc}
          muted={muted}
          preload="auto"
          playsInline
          onLoadedMetadata={onDims}
          onResize={onDims}
          style={{
            ...media,
            visibility: bg === 'color' || bg === 'cutout' ? 'hidden' : media.visibility,
            // Scaled slightly so the blur does not fade out at the edges of the box.
            ...(bg === 'blur' ? { filter: `blur(${cam.blurSigma}px)`, transform: 'scale(1.06)' } : {}),
          }}
        />
        {hasCutout && <video ref={player.refFor(take.id, 'cutout')} src={takeFileUrl(videoId, take.id, 'cutout', take.matte!.updatedAt)} muted preload="auto" playsInline style={media} />}
      </div>
    </div>
  );
}

// Draw the (cropped) frame of `el` fit into box `b`; the crop is in fractions of the frame.
function drawFit(ctx: CanvasRenderingContext2D, el: HTMLVideoElement, b: Box, fit: 'contain' | 'cover', crop?: Crop) {
  const c = crop ?? { x: 0, y: 0, w: 1, h: 1 };
  const cx = c.x * el.videoWidth;
  const cy = c.y * el.videoHeight;
  const vw = c.w * el.videoWidth;
  const vh = c.h * el.videoHeight;
  if (!vw || !vh) return;
  if (fit === 'contain') {
    const s = Math.min(b.w / vw, b.h / vh);
    const w = vw * s;
    const h = vh * s;
    ctx.drawImage(el, cx, cy, vw, vh, b.x + (b.w - w) / 2, b.y + (b.h - h) / 2, w, h);
  } else {
    const s = Math.max(b.w / vw, b.h / vh);
    const sw = b.w / s;
    const sh = b.h / s;
    ctx.drawImage(el, cx + (vw - sw) / 2, cy + (vh - sh) / 2, sw, sh, b.x, b.y, b.w, b.h);
  }
}

// Render the current preview frame to a 640-wide JPEG (for the thumbnail).
export async function captureFrame(video: Video, player: TimelinePlayer): Promise<Blob | null> {
  const takeId = player.getSnapshot().activeTakeId;
  const take = video.takes.find((t) => t.id === takeId);
  if (!take) return null;
  const els = player.elementsFor(take.id);
  const g = computeGeometry(video.layout, video.output, take.tracks.screen, take.tracks.camera);
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = Math.round((640 * g.H) / g.W);
  const ctx = canvas.getContext('2d')!;
  ctx.scale(640 / g.W, 640 / g.W);
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, g.W, g.H);
  const screenCrop = cropOf(video, take.id, 'screen');
  const cameraCrop = cropOf(video, take.id, 'camera');
  if (g.screen && els.screen) drawFit(ctx, els.screen, g.screen, 'contain', screenCrop);
  if (g.camera && els.camera) {
    const { box, fit, radius, background, color, blurSigma } = g.camera;
    const cutout = background !== 'none' && take.matte?.status === 'done' ? els.cutout : undefined;
    ctx.save();
    ctx.beginPath();
    ctx.roundRect(box.x, box.y, box.w, box.h, radius);
    ctx.clip();
    if (!cutout) drawFit(ctx, els.camera, box, fit, cameraCrop);
    else {
      if (background === 'color') {
        ctx.fillStyle = color;
        ctx.fillRect(box.x, box.y, box.w, box.h);
      } else if (background === 'blur') {
        ctx.filter = `blur(${(blurSigma * 640) / g.W}px)`;
        drawFit(ctx, els.camera, box, fit, cameraCrop);
        ctx.filter = 'none';
      }
      drawFit(ctx, cutout, box, fit, cameraCrop);
    }
    ctx.restore();
  }
  return new Promise((resolve) => canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.88));
}