/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/components/wd/StatsBar.tsx
 * Description: Sticky budget/telemetry bar — searches, reads, evidence, steps, live cost.
 */
"use client";

import type { UiBudget, UiBudgetUsed } from "@/lib/ui/api";

function Stat({ label, value, max }: { label: string; value: number | string; max?: number }) {
  return (
    <div className="flex min-w-0 flex-col items-center px-2 py-1 sm:px-3">
      <span className="font-mono text-sm font-medium text-ink">
        {value}
        {max !== undefined && <span className="text-ink-soft/70">/{max}</span>}
      </span>
      <span className="font-mono text-[9px] uppercase tracking-widest text-ink-soft">{label}</span>
    </div>
  );
}

export function StatsBar({
  budget,
  used,
  evidenceCount,
  hypothesisCount,
}: {
  budget: UiBudget;
  used: UiBudgetUsed;
  evidenceCount: number;
  hypothesisCount: number;
}) {
  return (
    <div className="flex items-center justify-between divide-x divide-line overflow-x-auto rounded-lg border border-line bg-card">
      <Stat label="steps" value={used.agentSteps} max={budget.maxAgentSteps} />
      <Stat label="searches" value={used.searches} max={budget.maxSearches} />
      <Stat label="reads" value={used.scrapes} max={budget.maxScrapes} />
      <Stat label="hypotheses" value={hypothesisCount} />
      <Stat label="evidence" value={evidenceCount} />
      <Stat label="cost" value={`$${used.costUsd.toFixed(2)}`} />
    </div>
  );
}