<script lang="ts">
  import Editor from "./Editor.svelte";
  import type { Extension } from "@codemirror/state";
  import type { Snippet } from "svelte";
  import type { TabTiming } from "../state/session.svelte.ts";

  type Props = {
    footer?: Snippet<[{ result: string }]>;
    streamIntervals?: number[];
    theme?: Extension;
    timing?: TabTiming | null;
    value: string;
  };

  let {
    footer,
    streamIntervals = [],
    theme,
    timing = null,
    value
  }: Props = $props();

  function median(values: number[]): number {
    if (values.length === 0)
      return 0;

    const sorted = [...values].sort((a, b) => a - b);
    const mid = Math.floor(sorted.length / 2);

    return sorted.length % 2 === 0 ?
      (sorted[mid - 1] + sorted[mid]) / 2 :
      sorted[mid];
  }

  let metadata = $derived.by(() => {
    if (!timing)
      return null;

    if (streamIntervals.length > 0) {
      const medianMs = Math.round(median(streamIntervals));
      const messages = streamIntervals.length + 1;
      return `→ ${messages} messages · median ${medianMs}ms`;
    }

    const totalMs = Math.round(timing.endMs - timing.startMs);
    const firstByteMs = Math.round(timing.firstByteMs - timing.startMs);
    return `→ ${totalMs}ms · first byte ${firstByteMs}ms`;
  });

  function noop(_v: string) {}
</script>

<style lang="scss">
  .result {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    height: 100%;
    min-height: 0;
  }

  .label {
    background: var(--graphiql-panel, #252526);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
  }

  .metadata {
    background: var(--graphiql-panel, #252526);
    border-top: 1px solid var(--graphiql-border, #333);
    color: var(--graphiql-muted, #858585);
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }

  .footer {
    background: var(--graphiql-panel, #252526);
    border-top: 1px solid var(--graphiql-border, #333);
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
</style>

<div class="result">
  <div class="label">Response</div>
  <Editor language="json" onChange={noop} readOnly {theme} {value}/>
  {#if metadata}
    <div class="metadata">{metadata}</div>
  {/if}
  {#if footer}
    <div class="footer">{@render footer({ result: value })}</div>
  {/if}
</div>
