dragonflight/services/web-ui/public/screens-ingest.jsx

// screens-ingest.jsx — Upload, Recorders, Capture, Monitors

/* ===== Upload helpers ===== */
const _SIMPLE_MAX = 50 * 1024 * 1024;  // 50 MB → simple upload
const _PART_SIZE  = 10 * 1024 * 1024;  // 10 MB chunks for multipart

function _xhrPost(url, formData, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.upload.onprogress = (e) => { if (e.lengthComputable) onProgress(e.loaded, e.total); };
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try { resolve(JSON.parse(xhr.responseText)); } catch { resolve({}); }
      } else {
        let msg = xhr.status + ' ' + xhr.statusText;
        try { const j = JSON.parse(xhr.responseText); msg = j.error || j.message || msg; } catch {}
        reject(new Error(msg));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.open('POST', url);
    xhr.send(formData);
  });
}

async function _uploadFile(file, projectId, onProgress) {
  const mime = file.type || 'application/octet-stream';

  if (file.size <= _SIMPLE_MAX) {
    const fd = new FormData();
    fd.append('file', file, file.name);
    fd.append('filename', file.name);
    fd.append('projectId', projectId);
    fd.append('contentType', mime);
    return _xhrPost('/api/v1/upload/simple', fd,
      (loaded, total) => onProgress(Math.round((loaded / total) * 100)));
  }

  // — Multipart —
  const init = await window.ZAMPP_API.fetch('/upload/init', {
    method: 'POST',
    body: JSON.stringify({ filename: file.name, fileSize: file.size, contentType: mime, projectId }),
  });
  const { assetId, uploadId, key } = init;
  const totalParts = Math.ceil(file.size / _PART_SIZE);
  const parts = [];

  for (let i = 0; i < totalParts; i++) {
    const chunk = file.slice(i * _PART_SIZE, Math.min((i + 1) * _PART_SIZE, file.size));
    const fd = new FormData();
    fd.append('file', chunk, file.name);
    fd.append('uploadId', uploadId);
    fd.append('key', key);
    fd.append('partNumber', String(i + 1));
    const partRes = await _xhrPost('/api/v1/upload/part', fd,
      (loaded, total) => onProgress(Math.round(((i + loaded / total) / totalParts) * 100)));
    parts.push({ PartNumber: i + 1, ETag: partRes.etag || partRes.ETag });
  }

  await window.ZAMPP_API.fetch('/upload/complete', {
    method: 'POST',
    body: JSON.stringify({ uploadId, key, assetId, parts }),
  });
  return { id: assetId };
}

/* ===== Upload ===== */
function Upload({ navigate }) {
  const PROJECTS = window.ZAMPP_DATA?.PROJECTS || [];
  const [files, setFiles] = React.useState([]);
  const [projectId, setProjectId] = React.useState(PROJECTS[0]?.id || '');

  const updateFile = React.useCallback((id, patch) => {
    setFiles(prev => prev.map(f => f.id === id ? { ...f, ...patch } : f));
  }, []);

  const startUpload = React.useCallback((entry, pid) => {
    _uploadFile(entry.file, pid, (pct) => updateFile(entry.id, { progress: pct }))
      .then(() => updateFile(entry.id, { status: 'done', progress: 100 }))
      .catch(e => updateFile(entry.id, { status: 'error', progress: 0, error: e.message }));
  }, [updateFile]);

  const handleDrop = React.useCallback((e) => {
    e.preventDefault();
    const dropped = Array.from(e.dataTransfer ? e.dataTransfer.files : e.target.files);
    const pid = projectId || PROJECTS[0]?.id || '';
    const newEntries = dropped.map((f, i) => ({
      id: Date.now() + i,
      name: f.name,
      size: window.ZAMPP_API.fmtSize(f.size),
      file: f,
      progress: 0,
      status: 'uploading',
      error: null,
    }));
    setFiles(prev => [...prev, ...newEntries]);
    newEntries.forEach(entry => startUpload(entry, pid));
  }, [projectId, startUpload]);

  return (
    <div className="page">
      <div className="page-header">
        <h1>Upload</h1>
        <span className="subtitle">Drop video, audio, or stills — we proxy and index automatically.</span>
      </div>
      <div className="page-body">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
          <div>
            <label className="field-label">Project</label>
            <select className="field-input" value={projectId} onChange={e => setProjectId(e.target.value)}
              style={{ appearance: 'auto' }}>
              {PROJECTS.length === 0
                ? <option value="">No projects</option>
                : PROJECTS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
        </div>

        <div className="dropzone"
          onDrop={handleDrop}
          onDragOver={e => e.preventDefault()}
          onClick={() => {
            const inp = document.createElement('input');
            inp.type = 'file'; inp.multiple = true;
            inp.onchange = handleDrop;
            inp.click();
          }}>
          <Icon name="upload" size={32} style={{ color: 'var(--text-3)' }} />
          <div style={{ fontSize: 15, fontWeight: 500 }}>Drop files here or click to browse</div>
          <div className="muted" style={{ fontSize: 12.5 }}>Video, audio, and image files</div>
          <div className="dropzone-formats">
            {['MOV', 'MP4', 'MXF', 'ProRes', 'DNxHR', 'WAV', 'AIFF'].map(f =>
              <span key={f} className="badge outline">{f}</span>)}
          </div>
        </div>

        {files.length > 0 && (
          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
              Queue <span className="badge neutral">{files.length}</span>
              <span style={{ flex: 1 }} />
              <button className="btn ghost sm" onClick={() => setFiles(f => f.filter(x => x.status === 'uploading'))}>Clear done</button>
            </div>
            <div className="panel">
              {files.map(f => (
                <div key={f.id} className="upload-row">
                  <Icon name={f.name.match(/\.(wav|aif|mp3|aiff)$/i) ? 'audio' : 'video'} size={16}
                    style={{ color: 'var(--text-3)' }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                      <span style={{ fontWeight: 500, fontSize: 12.5 }}>{f.name}</span>
                      <span className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)' }}>{f.size}</span>
                    </div>
                    <div style={{ marginTop: 6, height: 4, background: 'var(--bg-3)', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{
                        width: f.progress + '%', height: '100%',
                        background: f.status === 'done' ? 'var(--success)' : f.status === 'error' ? 'var(--danger)' : 'var(--accent)',
                        transition: 'width 200ms',
                      }} />
                    </div>
                    {f.status === 'error' && (
                      <div style={{ marginTop: 3, fontSize: 11, color: 'var(--danger)' }}>{f.error}</div>
                    )}
                  </div>
                  <span className="mono" style={{
                    fontSize: 11.5, minWidth: 60, textAlign: 'right',
                    color: f.status === 'done' ? 'var(--success)' : f.status === 'error' ? 'var(--danger)' : 'var(--text-3)',
                  }}>
                    {f.status === 'done' ? '✓ done'
                     : f.status === 'error' ? '✗ failed'
                     : f.progress + '%'}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ===== Live preview (HLS) ====================================
   Shared by RecorderRow + MonitorTile. The capture container writes
   HLS segments to /live/{assetId}/index.m3u8 (see capture-manager.js
   and nginx.conf); we attach hls.js to a <video> when a recorder is
   actively recording and has a live asset.
   ============================================================ */
function HlsPreview({ assetId, muted = true, controls = false, className }) {
  const videoRef = React.useRef(null);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    if (!assetId || !videoRef.current) return;
    const url = '/live/' + assetId + '/index.m3u8';
    const v = videoRef.current;

    // Safari can play HLS natively; everything else needs hls.js.
    if (v.canPlayType('application/vnd.apple.mpegurl')) {
      v.src = url;
      const onErr = () => setErr('playback failed');
      v.addEventListener('error', onErr);
      return () => v.removeEventListener('error', onErr);
    }
    if (!window.Hls) { setErr('hls.js missing'); return; }

    const hls = new window.Hls({ liveSyncDurationCount: 2, lowLatencyMode: true });
    hls.loadSource(url);
    hls.attachMedia(v);
    hls.on(window.Hls.Events.ERROR, (_e, data) => {
      if (data.fatal) setErr(data.details || 'hls error');
    });
    return () => { try { hls.destroy(); } catch (_) {} };
  }, [assetId]);

  return (
    <div className={className} style={{ position: 'relative', width: '100%', height: '100%', background: '#000', overflow: 'hidden' }}>
      <video
        ref={videoRef}
        autoPlay
        playsInline
        muted={muted}
        controls={controls}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
      {err && (
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                      color: 'var(--text-3)', fontSize: 11, background: 'rgba(0,0,0,0.5)' }}>
          {err}
        </div>
      )}
    </div>
  );
}

/* ===== Recorders ===== */
function _normRecorder(r) {
  let elapsed = '—';
  if (r.status === 'recording' && r.started_at) {
    const s = Math.floor((Date.now() - new Date(r.started_at)) / 1000);
    elapsed = String(Math.floor(s / 3600)).padStart(2, '0') + ':' +
              String(Math.floor((s % 3600) / 60)).padStart(2, '00') + ':' +
              String(s % 60).padStart(2, '0');
  }
  const cfg = r.source_config || {};
  return {
    ...r,
    source: r.source_type || '—',
    url: cfg.url || cfg.address || cfg.srt_url || cfg.rtmp_url || r.source_type || '—',
    codec: r.recording_codec || '—',
    res: r.recording_resolution || '—',
    node: r.node_id ? r.node_id.slice(0, 8) : 'primary',
    elapsed,
    bitrate: '—',
    health: 100,
    audio: false,
  };
}

function Recorders({ navigate, onNew }) {
  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA?.RECORDERS || []);

  const refresh = React.useCallback(() => {
    window.ZAMPP_API.fetch('/recorders')
      .then(raw => {
        const norm = (raw || []).map(_normRecorder);
        window.ZAMPP_DATA.RECORDERS = norm;
        setRecorders(norm);
      })
      .catch(() => {});
  }, []);

  React.useEffect(() => {
    refresh();
    const id = setInterval(refresh, 10000);
    // Any screen that creates/starts/stops/deletes a recorder dispatches
    // df:recorders-changed; refresh immediately instead of waiting for the tick.
    const onChange = () => refresh();
    window.addEventListener('df:recorders-changed', onChange);
    return () => {
      clearInterval(id);
      window.removeEventListener('df:recorders-changed', onChange);
    };
  }, [refresh]);

  const liveCount = recorders.filter(r => r.status === 'recording').length;
  const errCount  = recorders.filter(r => r.status === 'error').length;

  return (
    <div className="page">
      <div className="page-header">
        <h1>Recorders</h1>
        <span className="subtitle">Live ingest from SRT, RTMP, and SDI sources</span>
        <div className="spacer" />
        {(liveCount > 0 || errCount > 0) && (
          <div className="status-pip">
            <span className="dot" />
            <span>{liveCount > 0 ? liveCount + ' recording' : ''}{errCount > 0 ? (liveCount > 0 ? ' · ' : '') + errCount + ' error' : ''}</span>
          </div>
        )}
        <button className="btn ghost sm" onClick={refresh}><Icon name="refresh" />Refresh</button>
        <button className="btn primary" onClick={onNew}><Icon name="plus" />New recorder</button>
      </div>
      <div className="page-body">
        {recorders.length === 0 ? (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>
            No recorders configured.
            <div style={{ marginTop: 12 }}><button className="btn primary" onClick={onNew}><Icon name="plus" />Add recorder</button></div>
          </div>
        ) : (
          <div className="recorders-list">
            {recorders.map(r => <RecorderRow key={r.id} recorder={r} onRefresh={refresh} />)}
          </div>
        )}
      </div>
    </div>
  );
}

function RecorderRow({ recorder: initialRecorder, onRefresh }) {
  const [recorder, setRecorder] = React.useState(initialRecorder);
  const [pending, setPending] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [liveStatus, setLiveStatus] = React.useState(null);
  const [clipName, setClipName] = React.useState('');
  const isRec = recorder.status === 'recording';

  React.useEffect(() => { setRecorder(initialRecorder); }, [initialRecorder.id, initialRecorder.status]);

  // Poll the status endpoint every 3s while recording for live feedback.
  React.useEffect(() => {
    if (!isRec) { setLiveStatus(null); return; }
    const poll = () => {
      window.ZAMPP_API.fetch('/recorders/' + recorder.id + '/status')
        .then(s => setLiveStatus(s))
        .catch(() => {});
    };
    poll();
    const id = setInterval(poll, 3000);
    return () => clearInterval(id);
  }, [isRec, recorder.id]);

  const displayElapsed = React.useMemo(() => {
    if (liveStatus && liveStatus.duration != null) {
      const d = Math.max(0, liveStatus.duration);
      return String(Math.floor(d / 3600)).padStart(2, '0') + ':' +
             String(Math.floor((d % 3600) / 60)).padStart(2, '0') + ':' +
             String(d % 60).padStart(2, '0');
    }
    return recorder.elapsed;
  }, [liveStatus, recorder.elapsed]);

  const displaySignal = liveStatus
    ? (liveStatus.signal || '—')
    : (isRec ? 'connecting…' : '—');

  const signalColor = displaySignal === 'receiving' ? 'var(--success)'
    : displaySignal === 'stopped' ? 'var(--danger)'
    : 'var(--text-3)';

  const toggle = () => {
    if (pending) return;
    const action = isRec ? 'stop' : 'start';
    setPending(true);
    setErr(null);
    setRecorder(r => ({ ...r, status: isRec ? 'idle' : 'recording' }));
    // Ship the operator-typed clip name on start; stop has no body.
    const body = (action === 'start' && clipName.trim())
      ? JSON.stringify({ clipName: clipName.trim() })
      : undefined;
    window.ZAMPP_API.fetch('/recorders/' + recorder.id + '/' + action, { method: 'POST', body })
      .then(() => {
        setPending(false);
        // Clear the input on a successful stop so the next take starts fresh.
        if (action === 'stop') setClipName('');
        onRefresh();
        window.dispatchEvent(new CustomEvent('df:recorders-changed'));
        // Stopping a recorder flips its asset from 'live' to 'ready' on the
        // server side; tell the library/dashboard to re-pull.
        if (action === 'stop') {
          window.dispatchEvent(new CustomEvent('df:assets-changed'));
        }
      })
      .catch(e => { setPending(false); setErr(e.message || 'Failed'); setRecorder(initialRecorder); });
  };

  const handleDelete = () => {
    if (!window.confirm('Delete recorder "' + recorder.name + '"?\nThis will stop any active recording and cannot be undone.')) return;
    window.ZAMPP_API.fetch('/recorders/' + recorder.id, { method: 'DELETE' })
      .then(() => {
        onRefresh();
        window.dispatchEvent(new CustomEvent('df:recorders-changed'));
        window.dispatchEvent(new CustomEvent('df:assets-changed'));
      })
      .catch(e => setErr(e.message || 'Delete failed'));
  };

  return (
    <div className={'recorder-row ' + recorder.status}>
      <div className="recorder-preview">
        {isRec && recorder.live_asset_id
          ? <HlsPreview assetId={recorder.live_asset_id} />
          : isRec
            ? <LiveStrip seed={recorder.id.length * 3} count={6} />
            : <div className="recorder-empty"><Icon name={recorder.status === 'error' ? 'alert' : 'video'} size={20} style={{ opacity: 0.4 }} /></div>}
      </div>
      <div className="recorder-info">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontWeight: 600, fontSize: 13 }}>{recorder.name}</span>
          <span className={'badge ' + badgeForStatus(recorder.status)}>
            <StatusDot status={recorder.status} /> {recorder.status.toUpperCase()}
          </span>
          <span className="badge outline">{recorder.source}</span>
        </div>
        <div className="recorder-sub mono">{recorder.url}</div>
        <div className="recorder-sub">
          <span>{recorder.codec}</span><span>·</span>
          <span>{recorder.res}</span>
        </div>
        {err && <div style={{ marginTop: 4, fontSize: 11, color: 'var(--danger)' }}>{err}</div>}
        {liveStatus?.lastError && isRec && (
          <div style={{ marginTop: 4, fontSize: 11, color: 'var(--danger)' }}>{liveStatus.lastError}</div>
        )}
      </div>
      <div className="recorder-stats">
        <div className="recorder-stat">
          <div className="stat-label">Elapsed</div>
          <div className="stat-val mono">{displayElapsed}</div>
        </div>
        <div className="recorder-stat">
          <div className="stat-label">Signal</div>
          <div className="stat-val signal-val" style={{ fontSize: 11, color: signalColor }}>
            <span className={'signal-dot ' + displaySignal} style={{ background: signalColor }} />
            {displaySignal}
          </div>
        </div>
        {liveStatus?.currentFps != null && (
          <div className="recorder-stat">
            <div className="stat-label">FPS</div>
            <div className="stat-val mono">{Number(liveStatus.currentFps).toFixed(1)}</div>
          </div>
        )}
      </div>
      <div className="recorder-actions">
        {!isRec && (
          <input
            className="field-input"
            value={clipName}
            onChange={e => setClipName(e.target.value)}
            placeholder="Clip name (optional)"
            disabled={pending}
            maxLength={80}
            onKeyDown={e => { if (e.key === 'Enter') toggle(); }}
            style={{ width: 180, padding: '5px 8px', fontSize: 12 }}
            title="Letters, numbers, spaces, dot, dash, underscore. Blank = auto timestamp."
          />
        )}
        {isRec
          ? <button className="btn danger sm" onClick={toggle} disabled={pending}>
              {pending ? '…' : <><span className="rec-dot" />Stop</>}
            </button>
          : <button className="btn subtle sm" onClick={toggle} disabled={pending}>
              {pending ? '…' : <><span className="rec-dot" style={{ background: 'var(--live)' }} />Record</>}
            </button>}
        <button className="icon-btn" onClick={handleDelete} title="Delete recorder" style={{ color: 'var(--text-3)' }}>
          <Icon name="x" />
        </button>
      </div>
    </div>
  );
}

function badgeForStatus(s) {
  return { recording: 'live', armed: 'accent', idle: 'neutral', error: 'danger', offline: 'neutral', stopped: 'neutral' }[s] || 'neutral';
}

/* ===== Capture ===== */
function Capture({ navigate }) {
  const [devices, setDevices] = React.useState([]);
  const [activeIdx, setActiveIdx] = React.useState(0);

  const loadDevices = () => {
    window.ZAMPP_API.fetch('/cluster/devices/blackmagic')
      .then(devs => setDevices(Array.isArray(devs) ? devs : []))
      .catch(() => setDevices([]));
  };

  React.useEffect(() => { loadDevices(); }, []);

  if (devices.length === 0) {
    return (
      <div className="page">
        <div className="page-header">
          <h1>Capture</h1>
          <span className="subtitle">DeckLink SDI ingest</span>
          <div className="spacer" />
          <button className="btn ghost sm" onClick={loadDevices}><Icon name="refresh" />Refresh</button>
        </div>
        <div className="page-body">
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>
            No DeckLink devices found in cluster.
          </div>
        </div>
      </div>
    );
  }

  const active = devices[activeIdx] || devices[0];

  return (
    <div className="page">
      <div className="page-header">
        <h1>Capture</h1>
        <span className="subtitle">DeckLink SDI ingest — {devices.length} device{devices.length > 1 ? 's' : ''} in cluster</span>
        <div className="spacer" />
        <button className="btn ghost sm" onClick={loadDevices}><Icon name="refresh" />Refresh</button>
      </div>
      <div className="page-body">
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
          {devices.map((d, i) => (
            <button key={i} className={'btn ' + (activeIdx === i ? 'primary' : 'ghost') + ' sm'} onClick={() => setActiveIdx(i)}>
              {d.model || d.device || 'DeckLink'} — {d.hostname}
            </button>
          ))}
        </div>
        <div className="panel" style={{ padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <StatusDot status={active.online ? 'online' : 'offline'} />
            <div>
              <div style={{ fontWeight: 600 }}>{active.model || active.device || 'DeckLink'}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{active.hostname} · {active.ip_address}</div>
            </div>
          </div>
          <div style={{ color: 'var(--text-3)', fontSize: 12.5 }}>Connect a source and click Refresh to see port status.</div>
        </div>
      </div>
    </div>
  );
}

/* ===== Monitors ===== */
function Monitors({ navigate }) {
  const [recorders, setRecorders] = React.useState(window.ZAMPP_DATA?.RECORDERS || []);
  const [grid, setGrid] = React.useState(4);

  React.useEffect(() => {
    const refresh = () => {
      window.ZAMPP_API.fetch('/recorders')
        .then(raw => {
          const norm = (raw || []).map(_normRecorder);
          window.ZAMPP_DATA.RECORDERS = norm;
          setRecorders(norm);
        })
        .catch(() => {});
    };
    refresh();
    const id = setInterval(refresh, 5000);
    return () => clearInterval(id);
  }, []);

  const videoFeeds = recorders.filter(r => !r.audio);
  const audioFeeds = recorders.filter(r => r.audio).map(r => ({ ...r, kind: 'audio' }));
  const allFeeds = [...videoFeeds.map(r => ({ ...r, kind: 'video' })), ...audioFeeds];
  const feeds = allFeeds.slice(0, grid * grid);

  return (
    <div className="page">
      <div className="page-header">
        <h1>Monitors</h1>
        <span className="subtitle">Multi-cam live monitoring</span>
        <div className="spacer" />
        <div className="tab-group">
          {[2, 3, 4].map(n => (
            <button key={n} className={grid === n ? 'active' : ''} onClick={() => setGrid(n)}>{n}×{n}</button>
          ))}
        </div>
      </div>
      <div className="page-body">
        {feeds.length === 0 ? (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>No active feeds. Start a recorder to see live video here.</div>
        ) : (
          <div className="monitors-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(' + grid + ', 1fr)', gap: 8 }}>
            {feeds.map((f, i) => <MonitorTile key={f.id} feed={f} seed={i + 1} />)}
          </div>
        )}
      </div>
    </div>
  );
}

function MonitorTile({ feed, seed }) {
  const [levels, setLevels] = React.useState([0.65, 0.78]);
  const isLive = feed.status === 'recording';

  React.useEffect(() => {
    if (!isLive) return;
    const id = setInterval(() => {
      setLevels([0.3 + Math.random() * 0.55, 0.3 + Math.random() * 0.55]);
    }, 180);
    return () => clearInterval(id);
  }, [isLive]);

  if (feed.kind === 'audio') {
    return (
      <div className="monitor-tile audio">
        <div style={{ flex: 1, display: 'grid', placeItems: 'center', padding: 24 }}>
          <Waveform seed={seed * 7} color="var(--accent)" />
        </div>
        <div style={{ display: 'flex', gap: 4, padding: '0 16px 16px', justifyContent: 'center' }}>
          <AudioMeter level={levels[0]} vertical />
          <AudioMeter level={levels[1]} vertical />
        </div>
        <div className="monitor-tile-label">
          <span className="badge live">LIVE</span>
          <span className="name">{feed.name}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="monitor-tile">
      {isLive && feed.live_asset_id
        ? <HlsPreview assetId={feed.live_asset_id} />
        : <FauxFrame />}
      {isLive && <div style={{ position: 'absolute', inset: 0, border: '2px solid var(--live)', pointerEvents: 'none', borderRadius: 'inherit' }} />}
      <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', gap: 6 }}>
        {isLive                    && <span className="badge live">REC</span>}
        {feed.status === 'stopped' && <span className="badge neutral">IDLE</span>}
        {feed.status === 'idle'    && <span className="badge neutral">IDLE</span>}
        {feed.status === 'error'   && <span className="badge danger">ERR</span>}
      </div>
      {isLive && (
        <div style={{ position: 'absolute', top: 8, right: 8, display: 'flex', gap: 4 }}>
          <AudioMeter level={levels[0]} vertical />
          <AudioMeter level={levels[1]} vertical />
        </div>
      )}
      <div className="monitor-tile-label">
        <span className="name">{feed.name}</span>
        {feed.elapsed && feed.elapsed !== '—' && <span className="time mono">{feed.elapsed}</span>}
      </div>
    </div>
  );
}

/* ===== Schedule ===== */

const _STATUS_BADGE = {
  pending:   { cls: 'neutral',  label: 'pending' },
  running:   { cls: 'success',  label: 'recording' },
  completed: { cls: 'accent',   label: 'completed' },
  cancelled: { cls: 'warning',  label: 'cancelled' },
  failed:    { cls: 'danger',   label: 'failed' },
};

function _fmtWhen(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  // Local-time, short, human; e.g. "May 22 · 7:30 PM"
  return d.toLocaleString(undefined, {
    month: 'short', day: 'numeric',
    hour: 'numeric', minute: '2-digit',
  });
}

function _durationMin(startISO, endISO) {
  return Math.round((new Date(endISO) - new Date(startISO)) / 60000);
}

// ── Calendar helpers ─────────────────────────────────────────────────────────
function _ymd(d) {
  // Local-zone yyyy-mm-dd key for grouping events into day cells.
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return y + '-' + m + '-' + day;
}
function _startOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); }
function _addMonths(d, n) { return new Date(d.getFullYear(), d.getMonth() + n, 1); }
function _gridStart(viewMonth) {
  // Sunday before (or equal to) the 1st of viewMonth — gives a fixed 6-row grid.
  const first = _startOfMonth(viewMonth);
  return new Date(first.getFullYear(), first.getMonth(), 1 - first.getDay());
}
function _sameDay(a, b) {
  return a.getFullYear() === b.getFullYear()
      && a.getMonth()    === b.getMonth()
      && a.getDate()     === b.getDate();
}
function _fmtTime(d) {
  return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
}

function ScheduleCalendar({ schedules, viewMonth, onDayClick, onEventClick }) {
  const today = new Date();
  const gridStart = _gridStart(viewMonth);
  const days = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(gridStart);
    d.setDate(gridStart.getDate() + i);
    days.push(d);
  }

  const byDay = React.useMemo(() => {
    const m = {};
    (schedules || []).forEach(s => {
      const key = _ymd(new Date(s.start_at));
      (m[key] || (m[key] = [])).push(s);
    });
    Object.values(m).forEach(list => list.sort((a, b) => new Date(a.start_at) - new Date(b.start_at)));
    return m;
  }, [schedules]);

  return (
    <div className="cal">
      <div className="cal-weekheads">
        {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(w => <div key={w}>{w}</div>)}
      </div>
      <div className="cal-grid">
        {days.map(d => {
          const inMonth = d.getMonth() === viewMonth.getMonth();
          const isToday = _sameDay(d, today);
          const dayEvents = byDay[_ymd(d)] || [];
          const visible = dayEvents.slice(0, 3);
          const overflow = dayEvents.length - visible.length;
          return (
            <div key={d.toISOString()}
                 className={'cal-cell' + (inMonth ? '' : ' off-month') + (isToday ? ' today' : '')}
                 onClick={() => onDayClick(d)}
                 title="Click to schedule on this day">
              <div className="cal-cell-head">
                <span className="cal-daynum">{d.getDate()}</span>
                {isToday && <span className="cal-today-pip">today</span>}
              </div>
              <div className="cal-events">
                {visible.map(s => {
                  const badge = _STATUS_BADGE[s.status] || _STATUS_BADGE.pending;
                  return (
                    <button key={s.id}
                      className={'cal-event ' + badge.cls}
                      onClick={(e) => { e.stopPropagation(); onEventClick(s); }}
                      title={s.name + ' · ' + _fmtWhen(s.start_at) + ' → ' + _fmtWhen(s.end_at) + ' · ' + badge.label}>
                      <span className="cal-event-time mono">{_fmtTime(new Date(s.start_at))}</span>
                      <span className="cal-event-name">{s.name}</span>
                    </button>
                  );
                })}
                {overflow > 0 && (
                  <div className="cal-event-overflow">+{overflow} more</div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Schedule({ navigate }) {
  const [schedules, setSchedules]   = React.useState(null);
  const [recorders, setRecorders]   = React.useState([]);
  const [showNew, setShowNew]       = React.useState(false);
  const [newDefaults, setNewDefaults] = React.useState(null); // { start: Date, end: Date }
  const [editing, setEditing]       = React.useState(null);
  const [filter, setFilter]         = React.useState('upcoming');
  const [view, setView]             = React.useState('calendar'); // 'calendar' | 'list'
  const [viewMonth, setViewMonth]   = React.useState(() => _startOfMonth(new Date()));

  // Calendar mode wants every schedule in the visible window — the upcoming/past
  // filter only applies to the list view, so swap the API query accordingly.
  const apiFilter = view === 'calendar' ? 'all' : filter;
  const load = React.useCallback(() => {
    window.ZAMPP_API.fetch('/schedules?status=' + apiFilter)
      .then(d => setSchedules(d.schedules || []))
      .catch(() => setSchedules([]));
  }, [apiFilter]);

  React.useEffect(() => { load(); }, [load]);
  React.useEffect(() => { window.ZAMPP_API.fetch('/recorders').then(setRecorders).catch(() => setRecorders([])); }, []);

  // Auto-refresh every 10s so the list reflects the tick loop's transitions
  React.useEffect(() => {
    const t = setInterval(load, 10_000);
    return () => clearInterval(t);
  }, [load]);

  const cancel = (s) => {
    if (!confirm(`Cancel scheduled recording "${s.name}"?`)) return;
    window.ZAMPP_API.fetch('/schedules/' + s.id + '/cancel', { method: 'POST' })
      .then(load)
      .catch(e => alert('Cancel failed: ' + e.message));
  };
  const remove = (s) => {
    if (!confirm(`Delete schedule "${s.name}"?`)) return;
    window.ZAMPP_API.fetch('/schedules/' + s.id, { method: 'DELETE' })
      .then(load)
      .catch(e => alert('Delete failed: ' + e.message));
  };

  // Calendar: clicking a day pre-fills the new-schedule modal with a 30-minute
  // window starting at 10:00 AM that day (or +5min if the day is today and
  // 10:00 has already passed). Gives the operator a sensible starting point
  // instead of dropping them into empty datetime-local fields.
  const openNewOnDay = (day) => {
    const now = new Date();
    const isToday = _sameDay(day, now);
    const start = new Date(day);
    if (isToday && now.getHours() >= 10) {
      start.setHours(now.getHours(), now.getMinutes() + 5, 0, 0);
    } else {
      start.setHours(10, 0, 0, 0);
    }
    const end = new Date(start.getTime() + 30 * 60 * 1000);
    setNewDefaults({ start, end });
    setShowNew(true);
  };
  const openNewBlank = () => { setNewDefaults(null); setShowNew(true); };

  const monthLabel = viewMonth.toLocaleString(undefined, { month: 'long', year: 'numeric' });

  return (
    <div className="page">
      <div className="page-header">
        <h1>Schedule</h1>
        <span className="subtitle">
          {view === 'calendar'
            ? 'Click a day to schedule · ' + (schedules?.length || 0) + ' total'
            : 'Plan recorder windows · ' + (schedules?.length || 0) + ' ' + filter}
        </span>
        <div className="spacer" />
        <div className="tab-group" style={{ marginRight: 8 }}>
          <button className={view === 'calendar' ? 'active' : ''} onClick={() => setView('calendar')} title="Month calendar"><Icon name="jobs" />Calendar</button>
          <button className={view === 'list' ? 'active' : ''}     onClick={() => setView('list')}     title="Linear list"><Icon name="list" />List</button>
        </div>
        {view === 'list' && (
          <div className="tab-group" style={{ marginRight: 8 }}>
            <button className={filter === 'upcoming' ? 'active' : ''} onClick={() => setFilter('upcoming')}>Upcoming</button>
            <button className={filter === 'past' ? 'active' : ''}     onClick={() => setFilter('past')}>Past</button>
            <button className={filter === 'all' ? 'active' : ''}      onClick={() => setFilter('all')}>All</button>
          </div>
        )}
        <button className="btn ghost sm" onClick={load}><Icon name="refresh" />Refresh</button>
        <button className="btn primary" onClick={openNewBlank} disabled={recorders.length === 0}>
          <Icon name="plus" />New schedule
        </button>
      </div>

      <div className="page-body">
        {view === 'calendar' && (
          <>
            <div className="cal-toolbar">
              <button className="btn ghost sm" onClick={() => setViewMonth(_addMonths(viewMonth, -1))} title="Previous month">
                <Icon name="chevron" style={{ transform: 'rotate(90deg)' }} />
              </button>
              <div className="cal-month-label">{monthLabel}</div>
              <button className="btn ghost sm" onClick={() => setViewMonth(_addMonths(viewMonth, 1))} title="Next month">
                <Icon name="chevron" style={{ transform: 'rotate(-90deg)' }} />
              </button>
              <button className="btn ghost sm" onClick={() => setViewMonth(_startOfMonth(new Date()))} style={{ marginLeft: 8 }}>
                Today
              </button>
              <div style={{ flex: 1 }} />
              {recorders.length === 0 && (
                <div style={{ fontSize: 11.5, color: 'var(--text-3)' }}>Create a recorder before scheduling.</div>
              )}
            </div>
            {schedules === null
              ? <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--text-3)' }}>Loading…</div>
              : <ScheduleCalendar
                  schedules={schedules}
                  viewMonth={viewMonth}
                  onDayClick={openNewOnDay}
                  onEventClick={(s) => setEditing(s)} />}
          </>
        )}

        {view === 'list' && schedules === null && (
          <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--text-3)' }}>Loading…</div>
        )}
        {view === 'list' && schedules !== null && schedules.length === 0 && (
          <div style={{ textAlign: 'center', padding: '64px 0', color: 'var(--text-3)' }}>
            <div style={{ fontSize: 32, marginBottom: 12 }}>📅</div>
            <div style={{ fontWeight: 500, fontSize: 14 }}>No {filter} recordings</div>
            {filter === 'upcoming' && recorders.length === 0 && (
              <div style={{ fontSize: 12, marginTop: 6 }}>Create a recorder first, then schedule it here.</div>
            )}
            {filter === 'upcoming' && recorders.length > 0 && (
              <div style={{ fontSize: 12, marginTop: 6 }}>Click <em>New schedule</em> to plan a future recording.</div>
            )}
          </div>
        )}
        {view === 'list' && schedules !== null && schedules.length > 0 && (
          <div className="panel">
            <div className="schedule-row head">
              <div>Name</div>
              <div>Recorder</div>
              <div>Starts</div>
              <div>Duration</div>
              <div>Recurrence</div>
              <div>Status</div>
              <div></div>
            </div>
            {schedules.map(s => {
              const badge = _STATUS_BADGE[s.status] || _STATUS_BADGE.pending;
              return (
                <div key={s.id} className="schedule-row">
                  <div style={{ fontWeight: 500, fontSize: 13 }}>
                    {s.name}
                    {s.error_message && (
                      <div style={{ fontSize: 11, color: 'var(--danger)', marginTop: 3 }}>{s.error_message}</div>
                    )}
                  </div>
                  <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-2)' }}>{s.recorder_name || s.recorder_id.slice(0, 8)}</div>
                  <div className="mono" style={{ fontSize: 11.5 }}>{_fmtWhen(s.start_at)}</div>
                  <div className="mono" style={{ fontSize: 11.5 }}>{_durationMin(s.start_at, s.end_at)} min</div>
                  <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{s.recurrence === 'none' ? 'one-shot' : s.recurrence}</div>
                  <div><span className={`badge ${badge.cls}`}>{badge.label}</span></div>
                  <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                    {s.status === 'pending' && (
                      <button className="btn ghost sm" onClick={() => setEditing(s)} title="Edit name / time / recurrence">Edit</button>
                    )}
                    {(s.status === 'pending' || s.status === 'running') && (
                      <button className="btn ghost sm" onClick={() => cancel(s)}>Cancel</button>
                    )}
                    {(s.status === 'completed' || s.status === 'failed' || s.status === 'cancelled' || s.status === 'pending') && (
                      <button className="btn ghost sm" onClick={() => remove(s)} title="Delete schedule row">Delete</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {showNew && <NewScheduleModal
        recorders={recorders}
        defaultStart={newDefaults?.start}
        defaultEnd={newDefaults?.end}
        onClose={() => { setShowNew(false); setNewDefaults(null); }}
        onCreated={() => { setShowNew(false); setNewDefaults(null); load(); }} />}
      {editing && <EditScheduleModal schedule={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load(); }} />}
    </div>
  );
}

function EditScheduleModal({ schedule, onClose, onSaved }) {
  const toLocalInput = (iso) => {
    const d = new Date(iso);
    const tz = d.getTimezoneOffset() * 60_000;
    return new Date(d.getTime() - tz).toISOString().slice(0, 16);
  };
  const [form, setForm] = React.useState({
    name:       schedule.name,
    start_at:   toLocalInput(schedule.start_at),
    end_at:     toLocalInput(schedule.end_at),
    recurrence: schedule.recurrence || 'none',
  });
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const submit = () => {
    setErr(null);
    if (!form.name.trim()) return setErr('Name is required');
    const startD = new Date(form.start_at);
    const endD   = new Date(form.end_at);
    if (endD <= startD) return setErr('End must be after start');
    setSaving(true);
    window.ZAMPP_API.fetch('/schedules/' + schedule.id, {
      method: 'PUT',
      body: JSON.stringify({
        name: form.name.trim(),
        start_at: startD.toISOString(),
        end_at:   endD.toISOString(),
        recurrence: form.recurrence,
      }),
    })
      .then(onSaved)
      .catch(e => { setSaving(false); setErr(e.message || 'Save failed'); });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{ fontSize: 15, fontWeight: 600 }}>Edit scheduled recording</div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label className="field-label">Name</label>
            <input className="field-input" autoFocus value={form.name}
                   onChange={e => set('name', e.target.value)} />
          </div>
          <div className="field">
            <label className="field-label">Recorder</label>
            <input className="field-input mono" value={schedule.recorder_name || schedule.recorder_id} readOnly
                   style={{ color: 'var(--text-3)' }} />
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>Recorder can't be reassigned — delete + recreate to change.</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field">
              <label className="field-label">Start</label>
              <input className="field-input mono" type="datetime-local"
                     value={form.start_at} onChange={e => set('start_at', e.target.value)} />
            </div>
            <div className="field">
              <label className="field-label">End</label>
              <input className="field-input mono" type="datetime-local"
                     value={form.end_at} onChange={e => set('end_at', e.target.value)} />
            </div>
          </div>
          <div className="field">
            <label className="field-label">Recurrence</label>
            <select className="field-input" value={form.recurrence}
                    onChange={e => set('recurrence', e.target.value)}
                    style={{ appearance: 'auto' }}>
              <option value="none">One-shot (no repeat)</option>
              <option value="daily">Daily</option>
              <option value="weekly">Weekly</option>
            </select>
          </div>
          {err && <div style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>{err}</div>}
        </div>
        <div className="modal-foot">
          <button className="btn ghost sm" onClick={onClose}>Cancel</button>
          <button className="btn primary sm" onClick={submit} disabled={saving}>{saving ? 'Saving…' : 'Save changes'}</button>
        </div>
      </div>
    </div>
  );
}

function NewScheduleModal({ recorders, onClose, onCreated, defaultStart, defaultEnd }) {
  // If the user clicked a day on the calendar we honour that; otherwise default
  // to "start in 5 minutes, run for 30 min" so the modal is immediately usable.
  const toLocalInput = (d) => {
    const tz = d.getTimezoneOffset() * 60_000;
    return new Date(d.getTime() - tz).toISOString().slice(0, 16);
  };
  const now = new Date();
  now.setSeconds(0, 0);
  const startDefault = defaultStart || new Date(now.getTime() + 5 * 60 * 1000);
  const endDefault   = defaultEnd   || new Date(startDefault.getTime() + 30 * 60 * 1000);

  const [form, setForm] = React.useState({
    name: '',
    recorder_id: recorders[0]?.id || '',
    start_at: toLocalInput(startDefault),
    end_at:   toLocalInput(endDefault),
    recurrence: 'none',
  });
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  const submit = () => {
    setErr(null);
    if (!form.name.trim())   return setErr('Name is required');
    if (!form.recorder_id)   return setErr('Pick a recorder');
    if (!form.start_at)      return setErr('Start time is required');
    if (!form.end_at)        return setErr('End time is required');
    const startD = new Date(form.start_at);
    const endD   = new Date(form.end_at);
    if (endD <= startD) return setErr('End must be after start');

    // Warn (but allow) start times in the past — the scheduler tick will fire
    // them immediately, which is occasionally what the operator wants
    // (e.g. "record the next 30 minutes starting now").
    if (startD < new Date(Date.now() - 60_000)) {
      if (!confirm('Start time is in the past — recorder will fire immediately when saved.\nContinue?')) return;
    }

    // Datetime-local inputs are in the browser's local zone; ship as ISO so
    // Postgres stores them as TIMESTAMPTZ properly.
    const body = {
      name:        form.name.trim(),
      recorder_id: form.recorder_id,
      start_at:    startD.toISOString(),
      end_at:      endD.toISOString(),
      recurrence:  form.recurrence,
    };

    setSaving(true);
    window.ZAMPP_API.fetch('/schedules', { method: 'POST', body: JSON.stringify(body) })
      .then(() => onCreated())
      .catch(e => { setSaving(false); setErr(e.message || 'Failed to schedule'); });
  };

  const onKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) submit(); };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ width: 480 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{ fontSize: 15, fontWeight: 600 }}>New scheduled recording</div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label className="field-label">Name</label>
            <input className="field-input" autoFocus value={form.name}
                   onChange={e => set('name', e.target.value)}
                   onKeyDown={onKey} placeholder="Morning service stream" />
          </div>
          <div className="field">
            <label className="field-label">Recorder</label>
            <select className="field-input" value={form.recorder_id}
                    onChange={e => set('recorder_id', e.target.value)}
                    style={{ appearance: 'auto' }}>
              {recorders.length === 0 && <option value="">— No recorders defined —</option>}
              {recorders.map(r => (
                <option key={r.id} value={r.id}>
                  {r.name} · {r.source_type?.toUpperCase() || '?'}
                </option>
              ))}
            </select>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field">
              <label className="field-label">Start</label>
              <input className="field-input mono" type="datetime-local"
                     value={form.start_at}
                     onChange={e => set('start_at', e.target.value)} />
            </div>
            <div className="field">
              <label className="field-label">End</label>
              <input className="field-input mono" type="datetime-local"
                     value={form.end_at}
                     onChange={e => set('end_at', e.target.value)} />
            </div>
          </div>
          <div className="field">
            <label className="field-label">Recurrence</label>
            <select className="field-input" value={form.recurrence}
                    onChange={e => set('recurrence', e.target.value)}
                    style={{ appearance: 'auto' }}>
              <option value="none">One-shot (no repeat)</option>
              <option value="daily">Daily</option>
              <option value="weekly">Weekly</option>
            </select>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
              Recurring schedules queue the next occurrence as soon as the current one completes.
            </div>
          </div>
          {err && <div style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>{err}</div>}
        </div>
        <div className="modal-foot">
          <button className="btn ghost sm" onClick={onClose}>Cancel</button>
          <button className="btn primary sm" onClick={submit} disabled={saving}>
            {saving ? 'Scheduling…' : 'Schedule recording'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Upload, Recorders, Capture, Monitors, Schedule });