bambuddy/frontend/src/pages/StreamOverlayPage.tsx

import { useEffect, useMemo, useRef } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Layers, Clock, Timer, Printer, Flame, Square, Box } from 'lucide-react';
import { useOverlayLogo } from '../hooks/useOverlayLogo';
import { overlayGradient, overlayProgressTextStyle } from '../utils/overlayBranding';
import { OverlayFrame } from '../components/OverlayFrame';
import { OVERLAY_DIMENSIONS, type OverlayLayout } from '../utils/overlayLayout';
import './StreamOverlayPage.css';
import { UpdatedStreamOverlay } from '../components/UpdatedStreamOverlay';
import { api, ApiError, withStreamToken } from '../api/client';
import { formatDuration, formatETA, type TimeFormat } from '../utils/date';
import { mapModelCode } from '../utils/printerModel';
import { useOverlayCameraRecovery } from '../hooks/useOverlayCameraRecovery';
import { isSideways, useSidewaysBox } from '../hooks/useSidewaysBox';
import { useStreamImgRef } from '../hooks/useStreamImgRef';

type TFunction = (key: string, options?: Record<string, unknown>) => string;

type OverlaySize = 'small' | 'medium' | 'large';

interface OverlayConfig {
  layout: OverlayLayout | null;
  size: OverlaySize;
  updatedArtwork: boolean;
  backgroundTransparency: number;
  fps: number;
  showCamera: boolean;
  showProgress: boolean;
  showLayers: boolean;
  showEta: boolean;
  showFilename: boolean;
  showStatus: boolean;
  showPrinter: boolean;
  showModel: boolean;
  showNozzle: boolean;
  showBed: boolean;
  showChamber: boolean;
}

function formatPrintName(name: string | null, gcodeFile: string | null | undefined, t: (key: string, fallback: string, opts?: Record<string, unknown>) => string): string {
  if (!name) return '';
  if (!gcodeFile) return name;
  const match = gcodeFile.match(/plate_(\d+)\.gcode/);
  if (match && parseInt(match[1], 10) > 1) {
    return `${name} — ${t('printers.plateNumber', 'Plate {{number}}', { number: match[1] })}`;
  }
  return name;
}

function parseConfig(params: URLSearchParams): OverlayConfig {
  // The default set is deliberately unchanged by #1422: temperatures are opt-in,
  // so every overlay URL already pasted into an OBS scene keeps looking the same
  // after upgrading.
  const show = params.get('show')?.split(',') || ['progress', 'layers', 'eta', 'filename', 'status'];

  // Parse FPS (default 15, max 30, min 1)
  const fpsParam = parseInt(params.get('fps') || '15', 10);
  const fps = Math.min(Math.max(isNaN(fpsParam) ? 15 : fpsParam, 1), 30);

  // Parse camera toggle (default true, set camera=false to hide)
  const cameraParam = params.get('camera');
  const showCamera = cameraParam !== 'false' && cameraParam !== '0';

  const transparencyParam = Number(params.get('backgroundTransparency'));
  const backgroundTransparency = Number.isFinite(transparencyParam)
    ? Math.min(100, Math.max(0, transparencyParam))
    : 0;

  const layout = params.get('layout');
  return {
    layout: layout === 'portrait' || layout === 'landscape' ? layout : null,
    backgroundTransparency,
    size: (params.get('size') as OverlaySize) || 'medium',
    fps,
    updatedArtwork: params.get('artwork') === '2',
    showCamera,
    showProgress: show.includes('progress'),
    showLayers: show.includes('layers'),
    showEta: show.includes('eta'),
    showFilename: show.includes('filename'),
    showStatus: show.includes('status'),
    showPrinter: show.includes('printer'),
    showModel: show.includes('model'),
    showNozzle: show.includes('nozzle'),
    showBed: show.includes('bed'),
    showChamber: show.includes('chamber'),
  };
}

// Accepts the minimal shape shared by PrinterStatus (logged-in path) and the
// token-authed OverlayStatus (kiosk path) — both carry state + stg_cur_name.
function getStatusText(status: { state: string | null; stg_cur_name?: string | null }, t: TFunction): string {
  if (status.stg_cur_name) return status.stg_cur_name;

  switch (status.state) {
    case 'RUNNING': return t('streamOverlay.status.printing');
    case 'PAUSE': return t('streamOverlay.status.paused');
    case 'FINISH': return t('streamOverlay.status.finished');
    case 'FAILED': return t('streamOverlay.status.failed');
    case 'IDLE': return t('streamOverlay.status.idle');
    default: return status.state || t('streamOverlay.status.unknown');
  }
}

// Reads one reading out of either status shape. The kiosk feed types
// temperatures as Record<string, number>; the logged-in PrinterStatus types it
// as a named object that also carries `*_heating` booleans. Narrowing here lets
// one render path serve both without casting.
function readTemp(temps: Record<string, unknown>, key: string): number | null {
  const value = temps[key];
  return typeof value === 'number' ? value : null;
}

interface TempReadingProps {
  icon: React.ReactNode;
  label: string;
  current: number;
  target: number | null;
  sizes: ReturnType<typeof getSizeClasses>;
}

// One "Nozzle 220°C" reading. The target is appended only while it is set and
// still differs from the current value, so a hotend that has reached
// temperature reads "220°C" for the rest of the print instead of the noisier
// "220 / 220°C".
function TempReading({ icon, label, current, target, sizes }: TempReadingProps) {
  const heating = target != null && target > 0 && Math.round(target) !== Math.round(current);
  return (
    <div className={`flex items-center ${sizes.gap} text-white/70`}>
      {icon}
      <span className={`classic-overlay__text ${sizes.text}`}>
        <span className="mr-1">{label}</span>
        <span className="text-white">{Math.round(current)}°C</span>
        {heating && (
          <>
            <span className="mx-1">/</span>
            <span>{Math.round(target)}°C</span>
          </>
        )}
      </span>
    </div>
  );
}

function getSizeClasses(size: OverlaySize) {
  switch (size) {
    case 'small':
      return {
        container: 'p-3',
        text: 'text-sm',
        textLarge: 'text-lg',
        progressHeight: 'h-2',
        icon: 'w-3 h-3',
        gap: 'gap-2',
        logoHeight: 'h-12',
      };
    case 'large':
      return {
        container: 'p-6',
        text: 'text-xl',
        textLarge: 'text-3xl',
        progressHeight: 'h-4',
        icon: 'w-6 h-6',
        gap: 'gap-4',
        logoHeight: 'h-24',
      };
    case 'medium':
    default:
      return {
        container: 'p-4',
        text: 'text-base',
        textLarge: 'text-xl',
        progressHeight: 'h-3',
        icon: 'w-4 h-4',
        gap: 'gap-3',
        logoHeight: 'h-16',
      };
  }
}

export function StreamOverlayPage() {
  const { printerId } = useParams<{ printerId: string }>();
  const [searchParams] = useSearchParams();
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const id = parseInt(printerId || '0', 10);

  const config = useMemo(() => parseConfig(searchParams), [searchParams]);
  const sizes = getSizeClasses(config.size);

  // Kiosk mode (#2613): OBS and other embeds have no login session, so they
  // pass an `overlay`-scoped token in the URL. When present, every data call
  // (status + camera stream) is authenticated by that token instead of a JWT.
  const token = searchParams.get('token');
  const kiosk = token != null && token !== '';
  const logo = useOverlayLogo(searchParams.get('logo') === '1', token);
  const progressBackground = overlayGradient(searchParams.get('progressFrom'), searchParams.get('progressTo'));
  const progressTextStyle = overlayProgressTextStyle(progressBackground);
  const customLogo = logo ? (
    <img
      src={logo}
      alt={t('streamOverlay.branding.logo')}
      className="mb-2 object-contain"
      style={{
        maxHeight: config.layout ? OVERLAY_DIMENSIONS[config.layout].height * 0.14 : '14vh',
        maxWidth: config.layout ? OVERLAY_DIMENSIONS[config.layout].width * 0.2 : '20vw',
      }}
    />
  ) : null;

  // Kiosk path: one token-authenticated call for name + live status + the one
  // setting the overlay reads. No JWT, so this is the only feed available.
  const { data: overlay } = useQuery({
    queryKey: ['overlayStatus', id, token],
    queryFn: () => api.getOverlayStatus(id, token ?? undefined),
    enabled: id > 0 && kiosk,
    refetchInterval: 2000,
  });

  // Logged-in path: the ordinary JWT-authenticated queries, unchanged. Disabled
  // in kiosk mode so an unauthenticated OBS browser never fires a doomed 401.
  const { data: printerData } = useQuery({
    queryKey: ['printer', id],
    queryFn: () => api.getPrinter(id),
    enabled: id > 0 && !kiosk,
  });

  const { data: statusData } = useQuery({
    queryKey: ['printerStatus', id],
    queryFn: () => api.getPrinterStatus(id),
    enabled: id > 0 && !kiosk,
    refetchInterval: 2000,
  });

  const { data: settings } = useQuery({
    queryKey: ['settings'],
    queryFn: api.getSettings,
    enabled: !kiosk,
  });

  // Normalize the two sources into the shape the render below reads. Memoized
  // because the title effect depends on `printer` — a fresh object literal each
  // render would re-run it (and reset document.title) on every poll tick.
  const printer = useMemo(
    () =>
      kiosk
        ? overlay && { name: overlay.name, model: overlay.model, camera_rotation: overlay.camera_rotation }
        : printerData,
    [kiosk, overlay, printerData],
  );
  const printerIdentity = [
    config.showPrinter ? printer?.name : null,
    config.showModel ? mapModelCode(printer?.model ?? null) : null,
  ].filter(Boolean).join(' · ');
  const status = kiosk ? overlay : statusData;
  const { imageKey, closing, imgRef, handleStreamError } = useOverlayCameraRecovery(id > 0 && config.showCamera && status != null);
  const timeFormat: TimeFormat = (kiosk ? overlay?.time_format : settings?.time_format) || 'system';

  // WebSocket for real-time updates (JWT-authenticated; skipped in kiosk mode,
  // where the token can't mint a ws-token — the 2s poll above is the feed).
  useEffect(() => {
    if (!id || kiosk) return;

    let ws: WebSocket | null = null;
    let cancelled = false;

    // GHSA-r2qv follow-up: mint a ws-token before connecting. Uses
    // api.getWebSocketToken so the JWT Authorization header rides along
    // (raw fetch+credentials:'include' would miss it — Bambuddy uses
    // Bearer tokens, not cookies, for JWT auth). Auth-disabled deployments
    // succeed even without a token.
    (async () => {
      let wsToken: string | undefined;
      try {
        const resp = await api.getWebSocketToken();
        wsToken = resp.token;
      } catch (err) {
        // A 401 (JWT expired) / 403 (no WEBSOCKET_CONNECT permission) is an
        // auth decision — a tokenless socket would just be closed 4401, so
        // skip opening one and let the REST polling fallback keep the overlay
        // fresh. There's no reconnect loop on this page, so this is purely
        // avoiding one doomed socket per mount. A network/5xx error is not
        // auth: fall through and try anyway (auth-disabled deployments land
        // here with no token and connect fine).
        const status = err instanceof ApiError ? err.status : 0;
        if (status === 401 || status === 403) return;
      }
      if (cancelled) return;

      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
      const tokenParam = wsToken ? `?token=${encodeURIComponent(wsToken)}` : '';
      const wsUrl = `${protocol}//${window.location.host}/api/v1/ws${tokenParam}`;
      ws = new WebSocket(wsUrl);

      ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        if (data.type === 'printer_status' && data.printer_id === id) {
          // The update is the status itself, under `data`; merge it, as the
          // app's own socket does, in case it carries only some fields.
          queryClient.setQueryData(['printerStatus', id], (old: Record<string, unknown> | undefined) =>
            old ? { ...old, ...data.data } : data.data,
          );
        }
      } catch {
        // Ignore parse errors
      }
    };

      ws.onerror = () => {
        // WebSocket error - polling will continue as fallback
      };
    })();

    return () => {
      cancelled = true;
      if (ws) ws.close();
    };
  }, [id, kiosk, queryClient]);

  // Update document title
  useEffect(() => {
    document.title = printer ? `${printer.name} - ${t('streamOverlay.title')}` : t('streamOverlay.title');
    return () => {
      document.title = 'Bambuddy';
    };
  }, [printer, t]);

  // The classic artwork without a fixed layout fills the window: a sideways
  // camera is laid out at the window's sides swapped, or it is cut off (#3362).
  const artworkRef = useRef<HTMLDivElement>(null);
  const sideways = isSideways(printer?.camera_rotation);
  // Measured once the artwork is on screen, which is after the status loads.
  const fitsWindow = sideways && !config.layout && !config.updatedArtwork && config.showCamera && status != null;
  const windowBox = useSidewaysBox(artworkRef, fitsWindow);

  // Append the kiosk token directly rather than leaning on withStreamToken's
  // module cache — the cache is populated by an effect and would miss the first
  // render (a 401 flash before the retry). The logged-in path keeps the cache.
  const camPath = `/api/v1/printers/${id}/camera/stream?fps=${config.fps}&t=${imageKey}`;
  const streamUrl = kiosk && token
    ? `${camPath}&token=${encodeURIComponent(token)}`
    : withStreamToken(camPath);
  // The classic overlay's img gets its src from here, at commit, never from a
  // prop (#3431). Called above the early returns, as every hook must be.
  const attachImg = useStreamImgRef(imgRef, closing ? undefined : streamUrl);

  if (!id) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <p className="text-white">{t('streamOverlay.invalidPrinterId')}</p>
      </div>
    );
  }

  if (!status) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <p className="text-gray-400">{t('common.loading')}</p>
      </div>
    );
  }

  const isPrinting = status.connected && (status.state === 'RUNNING' || status.state === 'PAUSE');
  const progress = status.progress || 0;

  // Temperature readings the URL asked for, in a fixed order, skipping any the
  // printer doesn't report. Labels reuse printers.heaterHistory.* so the naming
  // matches the heater chart rather than inventing a second vocabulary.
  const temps: Record<string, unknown> = status.temperatures ?? {};
  const tempReadings: {
    key: string;
    icon: React.ReactNode;
    label: string;
    current: number;
    target: number | null;
  }[] = [];
  if (config.showNozzle) {
    const nozzle = readTemp(temps, 'nozzle');
    const nozzle2 = readTemp(temps, 'nozzle_2');
    if (nozzle != null) {
      tempReadings.push({
        key: 'nozzle',
        icon: <Flame className={`classic-overlay__icon ${sizes.icon}`} />,
        label: t('printers.heaterHistory.nozzle', 'Nozzle'),
        current: nozzle,
        target: readTemp(temps, 'nozzle_target'),
      });
    }
    if (nozzle2 != null) {
      tempReadings.push({
        key: 'nozzle_2',
        icon: <Flame className={`classic-overlay__icon ${sizes.icon}`} />,
        label: t('printers.heaterHistory.nozzle2', 'Nozzle 2'),
        current: nozzle2,
        target: readTemp(temps, 'nozzle_2_target'),
      });
    }
  }
  if (config.showBed) {
    const bed = readTemp(temps, 'bed');
    if (bed != null) {
      tempReadings.push({
        key: 'bed',
        icon: <Square className={`classic-overlay__icon ${sizes.icon}`} />,
        label: t('printers.heaterHistory.bed', 'Bed'),
        current: bed,
        target: readTemp(temps, 'bed_target'),
      });
    }
  }
  if (config.showChamber) {
    const chamber = readTemp(temps, 'chamber');
    if (chamber != null) {
      tempReadings.push({
        key: 'chamber',
        icon: <Box className={`classic-overlay__icon ${sizes.icon}`} />,
        label: t('printers.heaterHistory.chamber', 'Chamber'),
        current: chamber,
        target: readTemp(temps, 'chamber_target'),
      });
    }
  }

  if (config.updatedArtwork) {
    const active = status.connected && isPrinting;
    const remainingTime = status.remaining_time;
    const hasRemaining = active && config.showEta && remainingTime != null && remainingTime > 0;
    const artwork = <UpdatedStreamOverlay
      layout={config.layout ?? undefined}
      backgroundTransparency={config.backgroundTransparency}
      customLogo={customLogo}
      progressBackground={progressBackground}
      size={config.size}
      camera={config.showCamera ? { url: closing ? undefined : streamUrl, rotation: printer?.camera_rotation ?? 0, onError: handleStreamError, imgRef } : null}
      name={config.showPrinter ? printer?.name ?? null : null}
      model={config.showModel ? mapModelCode(printer?.model ?? null) || null : null}
      filename={config.showFilename && status.current_print ? formatPrintName(status.current_print.replace(/\.gcode\.3mf$|\.3mf$|\.gcode$/i, ''), status.gcode_file, t) : null}
      status={config.showStatus ? (status.connected ? getStatusText(status, t) : t('streamOverlay.printerOffline')) : null}
      state={status.connected ? status.state : null}
      progress={active && config.showProgress ? Math.min(100, Math.max(0, Number.isFinite(progress) ? progress : 0)) : null}
      layers={active && config.showLayers && status.layer_num != null && status.total_layers != null && status.total_layers > 0 ? `${status.layer_num} / ${status.total_layers}` : null}
      remaining={hasRemaining ? formatDuration(remainingTime * 60) : null}
      eta={hasRemaining ? formatETA(remainingTime, timeFormat, t) : null}
      temperatures={status.connected ? tempReadings : []}
    />;
    return config.layout ? <OverlayFrame layout={config.layout}>{artwork}</OverlayFrame> : artwork;
  }

  const dimensions = config.layout ? OVERLAY_DIMENSIONS[config.layout] : null;
  const rotation = printer?.camera_rotation ?? 0;
  const artwork = (
    <div ref={artworkRef} className="classic-overlay min-h-screen bg-black relative overflow-hidden" data-layout={config.layout ?? undefined} data-size={config.size}>
      {/* Camera feed - fullscreen background (optional) */}
      {config.showCamera && (
        <img
          ref={attachImg}
          key={imageKey}
          alt={t('streamOverlay.cameraStream')}
          className="absolute inset-0 w-full h-full object-contain"
          style={dimensions ? {
            left: '50%', top: '50%', maxWidth: 'none',
            width: sideways ? dimensions.height : dimensions.width,
            height: sideways ? dimensions.width : dimensions.height,
            transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
          } : windowBox ? {
            left: '50%', top: '50%', maxWidth: 'none',
            width: windowBox.height,
            height: windowBox.width,
            transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
          } : rotation ? { transform: `rotate(${rotation}deg)` } : undefined}
          onError={handleStreamError}
        />
      )}

      {/* Channel branding above the Bambuddy mark. */}
      <div className="absolute top-4 right-4 z-10 flex flex-col items-end">
        {customLogo}
        <a
          href="https://github.com/maziggy/bambuddy"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            src="/img/bambuddy_logo_dark_transparent.png"
            alt="Bambuddy"
            className={`classic-overlay__logo ${sizes.logoHeight} object-contain drop-shadow-lg hover:scale-105 transition-transform`}
          />
        </a>
      </div>

      {/* Status overlay - bottom */}
      <div className="absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/80 via-black/60 to-transparent">
        <div className={`classic-overlay__panel ${sizes.container}`}>
          {/* Printer name and model can each be selected independently. */}
          {printerIdentity && (
            <div className={`flex items-center ${sizes.gap} mb-2`}>
              <Printer className={`classic-overlay__icon ${sizes.icon} shrink-0 text-white/70`} />
              <span className={`classic-overlay__text ${sizes.text} min-w-0 truncate text-white font-medium`}>{printerIdentity}</span>
            </div>
          )}

          {/* Filename */}
          {config.showFilename && status.current_print && (
            <div className={`classic-overlay__filename ${sizes.textLarge} text-white font-semibold mb-2 truncate drop-shadow-md`}>
              {formatPrintName(status.current_print.replace(/\.gcode\.3mf$|\.3mf$|\.gcode$/i, ''), status.gcode_file, t)}
            </div>
          )}

          {/* Status text */}
          {config.showStatus && (
            <div className={`classic-overlay__text ${sizes.text} text-white/70 mb-2`}>
              {!status.connected ? t('streamOverlay.printerOffline') : getStatusText(status, t)}
            </div>
          )}

          {/* Progress bar */}
          {config.showProgress && isPrinting && (
            <div className="mb-3">
              <div className={`flex items-center justify-between mb-1 classic-overlay__text ${sizes.text}`}>
                <span className="text-white/70" style={progressTextStyle}>{t('streamOverlay.progress')}</span>
                <span className="text-white font-bold" style={progressTextStyle}>{Math.round(progress)}%</span>
              </div>
              <div className={`w-full bg-white/20 rounded-full ${sizes.progressHeight}`}>
                <div
                  className={`bg-bambu-green ${sizes.progressHeight} rounded-full transition-all duration-500`}
                  style={{ width: `${progress}%`, background: progressBackground }}
                />
              </div>
            </div>
          )}

          {/* Stats row */}
          {isPrinting && (config.showLayers || config.showEta) && (
            <div className={`flex items-center ${sizes.gap} flex-wrap`}>
              {/* Layers */}
              {config.showLayers && status.layer_num != null && status.total_layers != null && status.total_layers > 0 && (
                <div className={`flex items-center ${sizes.gap} text-white/70`}>
                  <Layers className={`classic-overlay__icon ${sizes.icon}`} />
                  <span className={`classic-overlay__text ${sizes.text}`}>
                    <span className="text-white">{status.layer_num}</span>
                    <span className="mx-1">/</span>
                    <span>{status.total_layers}</span>
                  </span>
                </div>
              )}

              {/* Remaining time */}
              {config.showEta && status.remaining_time != null && status.remaining_time > 0 && (
                <>
                  <div className={`flex items-center ${sizes.gap} text-white/70`}>
                    <Timer className={`classic-overlay__icon ${sizes.icon}`} />
                    <span className={`classic-overlay__text ${sizes.text} text-white`}>
                      {formatDuration(status.remaining_time * 60)}
                    </span>
                  </div>

                  <div className={`flex items-center ${sizes.gap} text-white/70`}>
                    <Clock className={`classic-overlay__icon ${sizes.icon}`} />
                    <span className={`classic-overlay__text ${sizes.text} text-white`}>
                      {t('streamOverlay.eta')} {formatETA(status.remaining_time, timeFormat, t)}
                    </span>
                  </div>
                </>
              )}
            </div>
          )}

          {/* Temperatures (#1422). Rendered whether or not a print is running —
              a preheating or cooling printer is exactly when these are worth
              watching. Each reading appears only when the printer reports it,
              so a single-nozzle machine shows one nozzle and a model without a
              chamber sensor shows no chamber row even if `chamber` is in
              ?show= (the backend omits the reading entirely for those). */}
          {tempReadings.length > 0 && status.connected && (
            <div className={`flex items-center ${sizes.gap} flex-wrap mt-2`}>
              {tempReadings.map((reading) => (
                <TempReading
                  key={reading.key}
                  icon={reading.icon}
                  label={reading.label}
                  current={reading.current}
                  target={reading.target}
                  sizes={sizes}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
  return config.layout ? <OverlayFrame layout={config.layout}>{artwork}</OverlayFrame> : artwork;
}