bambuddy/frontend/src/pages/StreamOverlayPage.tsx

import { useEffect, useMemo, useState } 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 } from 'lucide-react';
import { api, withStreamToken } from '../api/client';
import type { PrinterStatus } from '../api/client';
import { formatDuration, formatETA, type TimeFormat } from '../utils/date';

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

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

interface OverlayConfig {
  size: OverlaySize;
  fps: number;
  showCamera: boolean;
  showProgress: boolean;
  showLayers: boolean;
  showEta: boolean;
  showFilename: boolean;
  showStatus: boolean;
  showPrinter: 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 {
  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';

  return {
    size: (params.get('size') as OverlaySize) || 'medium',
    fps,
    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'),
  };
}

function getStatusText(status: PrinterStatus, 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');
  }
}

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 [imageKey, setImageKey] = useState(Date.now());

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

  // Fetch printer info
  const { data: printer } = useQuery({
    queryKey: ['printer', id],
    queryFn: () => api.getPrinter(id),
    enabled: id > 0,
  });

  // Fetch printer status with polling
  const { data: status } = useQuery({
    queryKey: ['printerStatus', id],
    queryFn: () => api.getPrinterStatus(id),
    enabled: id > 0,
    refetchInterval: 2000,
  });

  // Fetch settings info
  const { data: settings } = useQuery({
    queryKey: ['settings'],
    queryFn: api.getSettings,
  });

  const timeFormat: TimeFormat = settings?.time_format || 'system';

  // WebSocket for real-time updates
  useEffect(() => {
    if (!id) 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 token: string | undefined;
      try {
        const resp = await api.getWebSocketToken();
        token = resp.token;
      } catch {
        // Token mint failed — auth disabled, no JWT yet, or transient
        // network error. Fall through; auth-disabled deployments still
        // succeed, auth-enabled ones close with 4401 and the page's
        // polling fallback continues to refresh the status.
      }
      if (cancelled) return;

      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
      const tokenParam = token ? `?token=${encodeURIComponent(token)}` : '';
      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) {
          queryClient.setQueryData(['printerStatus', id], data.status);
        }
      } catch {
        // Ignore parse errors
      }
    };

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

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

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

  // Refresh stream on error
  const handleStreamError = () => {
    setTimeout(() => {
      setImageKey(Date.now());
    }, 3000);
  };

  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.state === 'RUNNING' || status.state === 'PAUSE';
  const progress = status.progress || 0;
  const streamUrl = withStreamToken(`/api/v1/printers/${id}/camera/stream?fps=${config.fps}&t=${imageKey}`);

  return (
    <div className="min-h-screen bg-black relative overflow-hidden">
      {/* Camera feed - fullscreen background (optional) */}
      {config.showCamera && (
        <img
          key={imageKey}
          src={streamUrl}
          alt={t('streamOverlay.cameraStream')}
          className="absolute inset-0 w-full h-full object-contain"
          style={printer?.camera_rotation ? { transform: `rotate(${printer.camera_rotation}deg)` } : undefined}
          onError={handleStreamError}
        />
      )}

      {/* Bambuddy logo - top right */}
      <a
        href="https://github.com/maziggy/bambuddy"
        target="_blank"
        rel="noopener noreferrer"
        className="absolute top-4 right-4 z-10"
      >
        <img
          src="/img/bambuddy_logo_dark_transparent.png"
          alt="Bambuddy"
          className={`${sizes.logoHeight} object-contain drop-shadow-lg hover:scale-105 transition-transform`}
        />
      </a>

      {/* 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={`${sizes.container}`}>
          {/* Printer name */}
          {config.showPrinter && printer && (
            <div className={`flex items-center ${sizes.gap} mb-2`}>
              <Printer className={`${sizes.icon} text-white/70`} />
              <span className={`${sizes.text} text-white font-medium`}>{printer.name}</span>
            </div>
          )}

          {/* Filename */}
          {config.showFilename && status.current_print && (
            <div className={`${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={`${sizes.text} text-white/70 mb-2`}>
              {getStatusText(status, t)}
            </div>
          )}

          {/* Progress bar */}
          {config.showProgress && isPrinting && (
            <div className="mb-3">
              <div className={`flex items-center justify-between mb-1 ${sizes.text}`}>
                <span className="text-white/70">{t('streamOverlay.progress')}</span>
                <span className="text-white font-bold">{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}%` }}
                />
              </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={sizes.icon} />
                  <span className={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={sizes.icon} />
                    <span className={`${sizes.text} text-white`}>
                      {formatDuration(status.remaining_time * 60)}
                    </span>
                  </div>

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

          {/* Idle state */}
          {!isPrinting && (
            <div className={`${sizes.text} text-white/70 py-2`}>
              {status.connected ? t('streamOverlay.printerIdle') : t('streamOverlay.printerOffline')}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}