import { usePanelChannel } from 'hooks/usePanelChannel';

// The left panel picks a scope; the right panel renders it. Coordinated over a panel channel, like the
// /music browser → detail split.
export type MonitorScope = 'btop' | 'pm2' | 'docker';

export const MONITOR_SCOPE_CHANNEL = 'monitor:scope';

export const SCOPES: { id: MonitorScope; label: string }[] = [
  { id: 'btop', label: 'bTop' },
  { id: 'pm2', label: 'pm2 processes' },
  { id: 'docker', label: 'dockers' },
];

export const useMonitorScope = () => usePanelChannel<MonitorScope>(MONITOR_SCOPE_CHANNEL, 'btop');

export function fmtBytes(n: number): string {
  if (!n) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)));
  return `${(n / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
}

export function fmtDuration(ms: number): string {
  if (!ms || ms < 0) return '—';
  const s = Math.floor(ms / 1000);
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  const m = Math.floor((s % 3600) / 60);
  return [d && `${d}d`, (d || h) && `${h}h`, `${m}m`].filter(Boolean).join(' ') || `${s}s`;
}
