"use client";
import * as React from "react";
import { ArrowDownRight, ArrowUpRight } from "lucide-react";
import { Skeleton } from "@/components/ui/misc";
import { Tooltip } from "@/components/ui/tooltip";
import { cn, formatUsd, formatTokens, formatNumber, formatMs } from "@/lib/utils";
import { formatPercent } from "@/lib/client/humanize";
import { Sparkline } from "./charts";
import type { UsageKpis, UsageProjection, UsageSeriesPoint } from "./types";

/**
 * Stat tile contract (dataviz): label (sentence case) · value (semibold, proportional figures,
 * auto-compact) · optional delta (signed, vs the previous period; colour = direction × whether up is good)
 * · optional sparkline (de-emphasised).
 */
export function KpiTile({ label, value, hint, delta, upIsGood = true, spark, sparkColor, className, tooltip }: { label: string; value: React.ReactNode; hint?: React.ReactNode; delta?: number | null; upIsGood?: boolean; spark?: number[]; sparkColor?: string; className?: string; tooltip?: string }) {
  const showDelta = typeof delta === "number" && Number.isFinite(delta) && Math.abs(delta) >= 0.5;
  const good = showDelta ? (delta! > 0) === upIsGood : true;
  const inner = (
    <div className={cn("panel flex min-h-[88px] flex-col justify-between px-4 py-3.5", className)}>
      <div className="flex items-start justify-between gap-2">
        <p className="text-[12px] font-medium text-fg-muted">{label}</p>
        {spark ? <Sparkline values={spark} color={sparkColor} /> : null}
      </div>
      <div>
        <p className="mt-1 text-[22px] font-semibold leading-7 tracking-tight">{value}</p>
        <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-fg-subtle">
          {showDelta ? (
            <span className={cn("inline-flex items-center gap-0.5 font-medium", good ? "text-success" : "text-danger")}>
              {delta! > 0 ? <ArrowUpRight className="size-3" /> : <ArrowDownRight className="size-3" />}
              {Math.abs(delta!).toFixed(delta! >= 100 ? 0 : 1)}%
            </span>
          ) : null}
          {hint ? <span className="truncate">{hint}</span> : null}
        </div>
      </div>
    </div>
  );
  return tooltip ? (
    <Tooltip content={tooltip}>
      <div className="min-w-0">{inner}</div>
    </Tooltip>
  ) : (
    inner
  );
}

export function KpiSkeleton({ count = 8 }: { count?: number }) {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {Array.from({ length: count }).map((_, i) => (
        <Skeleton key={i} className="h-[88px] rounded-xl" />
      ))}
    </div>
  );
}

export function KpiGrid({ kpis, projection, series }: { kpis: UsageKpis; projection: UsageProjection; series: UsageSeriesPoint[] }) {
  const cost = series.map((s) => s.costUsd);
  const req = series.map((s) => s.requests);
  const tok = series.map((s) => s.inputTokens + s.outputTokens);
  const cacheShare = kpis.inputTokens ? kpis.cachedTokens / kpis.inputTokens : 0;
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      <KpiTile label="Estimated cost" value={formatUsd(kpis.costUsd)} delta={projection.costTrendPct} upIsGood={false} hint={projection.previous ? "vs previous period" : "public list prices"} spark={cost} tooltip={kpis.unpricedRequests ? `${formatNumber(kpis.unpricedRequests)} request(s) have no known price and are counted as $0.` : "Estimated from public list prices at request time; your provider invoice is the source of truth."} />
      <KpiTile label="Requests" value={formatNumber(kpis.requests)} delta={projection.requestsTrendPct} hint={kpis.failures ? `${formatNumber(kpis.failures)} failed` : kpis.stopped ? `${formatNumber(kpis.stopped)} stopped` : "all succeeded"} spark={req} />
      <KpiTile label="Tokens" value={formatTokens(kpis.totalTokens)} hint={`${formatTokens(kpis.inputTokens)} in · ${formatTokens(kpis.outputTokens)} out`} spark={tok} sparkColor="var(--fg-muted)" />
      <KpiTile label="Reasoning tokens" value={formatTokens(kpis.reasoningTokens)} hint={kpis.outputTokens ? `${formatPercent(kpis.reasoningTokens / kpis.outputTokens, 0)} of output` : "billed as output"} />
      <KpiTile label="Cached input" value={formatTokens(kpis.cachedTokens)} hint={kpis.cachedTokens ? `${formatPercent(cacheShare, 0)} of input` : "no cache hits"} />
      <KpiTile label="Avg first token" value={kpis.avgTtftMs === null ? "—" : formatMs(kpis.avgTtftMs)} hint={kpis.avgTokensPerSec === null ? `avg latency ${formatMs(kpis.avgLatencyMs)}` : `${kpis.avgTokensPerSec.toFixed(0)} tok/s output`} />
      <KpiTile label="Avg context" value={kpis.avgContextTokens === null ? "—" : formatTokens(Math.round(kpis.avgContextTokens))} hint="input tokens per request" />
      <KpiTile label="Error rate" value={formatPercent(kpis.errorRate, kpis.errorRate > 0 && kpis.errorRate < 0.01 ? 2 : 1)} hint={kpis.errorRate > 0.05 ? "check provider status" : kpis.requests ? "healthy" : undefined} className={cn(kpis.errorRate > 0.05 && "ring-1 ring-warning/40")} />
    </div>
  );
}