"use client";

import { useSessions } from "@/lib/hooks";
import { formatTokens } from "@/lib/utils";

export function StatsCard() {
  const { data } = useSessions(50);

  const items = data?.items || [];
  const total = data?.total || 0;
  const totalTokens = items.reduce((s, i) => s + i.input_tokens + i.output_tokens, 0);
  const platforms = new Set(items.map((i) => i.source));

  return (
    <div className="card p-4 grid grid-cols-3 gap-4">
      <Stat value={String(total)} label="Sessions" />
      <Stat value={formatTokens(totalTokens)} label="Tokens" />
      <Stat value={String(platforms.size)} label="Platforms" />
    </div>
  );
}

function Stat({ value, label }: { value: string; label: string }) {
  return (
    <div className="text-center">
      <div className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>{value}</div>
      <div className="text-[11px]" style={{ color: "var(--text-3)" }}>{label}</div>
    </div>
  );
}