import { Activity } from "lucide-react"
import { useTokenStats } from "@/lib/queries"
import { useTokHistory } from "@/lib/metricsStore"
import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"

const SERIES: ChartSeries[] = [
  { key: "prompt", label: "Prompt", color: "#f59e0b" },
  { key: "completion", label: "Antwort", color: "#2dd4bf" },
]

export function TokenPerformanceCard() {
  const { data: ts } = useTokenStats(3_000)
  const hist = useTokHistory()   // Durchsatz-Verlauf aus dem modul-globalen Store

  const last = hist[hist.length - 1]
  const curRate = last ? Math.round(last.prompt + last.completion) : 0

  return (
    <div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/15">
      <div className="mb-3 flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Activity className="h-4.5 w-4.5 text-primary" />
            <h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">Token-Durchsatz</h2>
            <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
            </span>
          </div>
          {ts && (
            <div className="mt-2 flex items-baseline gap-2">
              <span className="font-space text-3xl font-bold tracking-tight text-foreground tabular-nums">
                {curRate.toLocaleString("de-DE")}
              </span>
              <span className="text-xs text-muted-foreground">tok/s aktuell</span>
            </div>
          )}
          {ts && (
            <div className="mt-0.5 space-y-0.5 font-mono text-[11px] text-muted-foreground/70">
              <div>
                {ts.total_tokens.toLocaleString("de-DE")} Tokens gesamt · <span className="text-emerald-400/90">{ts.saved_eur.toLocaleString("de-DE", { minimumFractionDigits: 2 })} € gespart</span>
              </div>
              <div className="text-muted-foreground/55">
                Input {ts.prompt_tokens.toLocaleString("de-DE")} · Output {ts.completion_tokens.toLocaleString("de-DE")}
              </div>
            </div>
          )}
        </div>
        <div className="flex shrink-0 flex-col items-end gap-1.5 pt-1">
          {SERIES.map((s) => (
            <div key={s.key} className="flex items-center gap-1.5">
              <span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
              <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
              <span className="font-mono text-xs font-bold tabular-nums text-foreground">
                {Math.round((last?.[s.key as "prompt" | "completion"]) ?? 0)}
              </span>
            </div>
          ))}
        </div>
      </div>

      {ts ? (
        <LiveAreaChart data={hist} series={SERIES} unit=" tok/s" yMode="auto" height={150} />
      ) : (
        <div className="flex h-[150px] items-center justify-center text-xs text-muted-foreground">Lade Durchsatz…</div>
      )}

      <div className="mt-2 border-t border-border/30 pt-2 text-[10px] text-muted-foreground/70">
        Durchsatz aus dem Gateway abgeleitet (Prefill vs. Generierung). Flach bei Leerlauf.
      </div>
    </div>
  )
}