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

import { useEffect, useRef, useState, type CSSProperties } from 'react';
import type { Take, Video } from '../../shared/types.ts';
import { computeGeometry, outputSize, 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 });

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 && (
                <video
                  ref={player.refFor(t.id, 'screen')}
                  src={takeFileUrl(video.id, t.id, 'screen')}
                  muted={t.audio !== 'screen'}
                  preload="auto"
                  playsInline
                  className="layer"
                  style={g.screen ? { ...boxStyle(g.screen), objectFit: 'contain' } : { display: 'none' }}
                />
              )}
              {t.tracks.camera && <CameraLayer videoId={video.id} take={t} cam={g.camera} player={player} />}
            </div>
          );
        })}
      </div>
      {!active && <div className="stage-empty">Nothing in the timeline yet</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, player }: { videoId: string; take: Take; cam: Camera | null; player: TimelinePlayer }) {
  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';
  const media: CSSProperties = { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: cam.fit };
  return (
    <div className="layer" style={{ ...boxStyle(cam.box), borderRadius: cam.radius, overflow: 'hidden', background: bg === 'color' ? cam.color : bg === 'cutout' ? 'transparent' : '#000' }}>
      <video
        ref={player.refFor(take.id, 'camera')}
        src={camSrc}
        muted={muted}
        preload="auto"
        playsInline
        style={{
          ...media,
          visibility: bg === 'color' || bg === 'cutout' ? 'hidden' : 'visible',
          // 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>
  );
}

function drawFit(ctx: CanvasRenderingContext2D, el: HTMLVideoElement, b: Box, fit: 'contain' | 'cover') {
  const vw = el.videoWidth;
  const vh = 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, 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, (vw - sw) / 2, (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);
  if (g.screen && els.screen) drawFit(ctx, els.screen, g.screen, 'contain');
  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);
    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);
        ctx.filter = 'none';
      }
      drawFit(ctx, cutout, box, fit);
    }
    ctx.restore();
  }
  return new Promise((resolve) => canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.88));
}