import { PanelFrame } from "./PanelFrame";
import type { NormalizeResultState } from "../state/types";

interface MetricsPanelProps {
  result: NormalizeResultState | null;
}

function metric(value: string | number | boolean | null | undefined): string {
  if (value === null || value === undefined || value === "") return "—";
  return String(value);
}

export function MetricsPanel({ result }: MetricsPanelProps) {
  return (
    <PanelFrame title="Runtime метрики" subtitle="trace_id, токены, latency и статус валидации.">
      <div className="metrics-grid">
        <div>
          <span>trace_id</span>
          <strong>{metric(result?.trace_id)}</strong>
        </div>
        <div>
          <span>request_started_at</span>
          <strong>{metric(result ? new Date(Date.now() - result.latency_ms).toISOString() : null)}</strong>
        </div>
        <div>
          <span>request_finished_at</span>
          <strong>{metric(result ? new Date().toISOString() : null)}</strong>
        </div>
        <div>
          <span>latency_ms</span>
          <strong>{metric(result?.latency_ms)}</strong>
        </div>
        <div>
          <span>input_tokens</span>
          <strong>{metric(result?.usage?.input_tokens)}</strong>
        </div>
        <div>
          <span>output_tokens</span>
          <strong>{metric(result?.usage?.output_tokens)}</strong>
        </div>
        <div>
          <span>total_tokens</span>
          <strong>{metric(result?.usage?.total_tokens)}</strong>
        </div>
        <div>
          <span>validation_status</span>
          <strong>{result?.validation?.passed ? "passed" : "failed"}</strong>
        </div>
        <div>
          <span>prompt_version</span>
          <strong>{metric(result?.prompt_version)}</strong>
        </div>
        <div>
          <span>schema_version</span>
          <strong>{metric(result?.schema_version)}</strong>
        </div>
      </div>
    </PanelFrame>
  );
}
