"use client";

import { BarChart3 } from "lucide-react";
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 totalCost = items.reduce((s, i) => s + (i.estimated_cost_usd || 0), 0);
  const platforms = new Set(items.map((i) => i.source));

  const stats = [
    { label: "Sessions", value: String(total) },
    { label: "Tokens (recent)", value: formatTokens(totalTokens) },
    { label: "Platforms", value: String(platforms.size) },
    ...(totalCost > 0 ? [{ label: "Est. Cost", value: "$" + totalCost.toFixed(2) }] : []),
  ];

  return (
    <div className="glass p-4">
      <div className="flex items-center gap-2 mb-3">
        <BarChart3 size={16} style={{ color: "#22c55e" }} />
        <span className="text-sm font-medium text-zinc-200">Stats</span>
      </div>
      <div className="grid grid-cols-3 gap-3">
        {stats.map((s) => (
          <div key={s.label} className="text-center">
            <div className="text-lg font-bold text-zinc-200">{s.value}</div>
            <div className="text-[10px] text-zinc-500">{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}