import { KvList } from "./KvList";

function formatNumber(value, digits = 3) {
  return Number(value ?? 0).toFixed(digits);
}

export function StatusPanels({ app, performance, runtime, video }) {
  const budgetUsedPercent = Math.max(0, Math.min(100, Number(performance.budgetUsedPercent) || 0));

  return (
    <>
      <div className="panel panel--telemetry">
        <div className="telemetry-header">
          <h3>Status</h3>
          <div className="status-badges" aria-label="Current status">
            <span className={`mini-status${runtime.compileSucceeded ? " mini-status--ready" : " mini-status--error"}`}>
              {runtime.compileSucceeded ? "Ready" : "Error"}
            </span>
            <span className={`mini-status${video.hasSignal ? " mini-status--ready" : " mini-status--error"}`}>
              {video.hasSignal ? "Signal" : "No signal"}
            </span>
          </div>
        </div>

        <div className="telemetry-sections">
          <section className="telemetry-section" aria-labelledby="runtime-status-heading">
            <h4 id="runtime-status-heading">Runtime</h4>
            <KvList
              variant="rows"
              values={[
                ["Layers", `${runtime.layerCount || 0}`],
                ["Auto reload", app.autoReload ? "On" : "Off"],
                ["Temporal cap", `${app.maxTemporalHistoryFrames ?? 0}`],
                ["Control URL", `127.0.0.1:${app.serverPort}`],
                ["Render", `${formatNumber(performance.renderMs, 2)} ms`],
                ["Smoothed", `${formatNumber(performance.smoothedRenderMs, 2)} ms`],
                ["Frame budget", `${formatNumber(performance.frameBudgetMs, 2)} ms`],
              ]}
            />
            <div className="meter-row">
              <span>Budget used</span>
              <div className="progress-track" aria-hidden="true">
                <div className="progress-bar" style={{ width: `${budgetUsedPercent}%` }} />
              </div>
              <strong>{formatNumber(performance.budgetUsedPercent, 1)}%</strong>
            </div>
          </section>

          <section className="telemetry-section" aria-labelledby="video-status-heading">
            <h4 id="video-status-heading">Video</h4>
            <KvList
              variant="rows"
              values={[
                ["Input mode", video.modeName || "Unknown"],
                ["Input size", `${video.width || 0} x ${video.height || 0}`],
                ["Output", `${app.outputVideoFormat || "Unknown"}${app.outputFrameRate ? ` ${app.outputFrameRate}` : ""}`],
              ]}
            />
          </section>
        </div>
      </div>

      <div className="panel panel--compiler">
        <h3>Compiler</h3>
        <pre className="log-panel" aria-live="polite">
          {runtime.compileMessage || "No compiler output."}
        </pre>
      </div>
    </>
  );
}