siftlode/frontend/src/components/Stats.tsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import { api, type AdminQuotaRow } from "../lib/api";
import { quotaActionLabel } from "../lib/format";

const RANGES = [7, 30, 90] as const;

export default function Stats() {
  const { t } = useTranslation();
  const [days, setDays] = useState<number>(30);
  const q = useQuery({
    queryKey: ["admin-quota", days],
    queryFn: () => api.adminQuota(days),
  });
  const data = q.data;
  const maxDaily = Math.max(1, ...(data?.daily ?? []).map((d) => d.total));
  const grandTotal = (data?.rows ?? []).reduce((s, r) => s + r.total, 0);

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <div className="flex items-center justify-between gap-3 mb-4">
        <h2 className="text-lg font-semibold">{t("stats.title")}</h2>
        <div className="flex items-center gap-1">
          {RANGES.map((d) => (
            <button
              key={d}
              onClick={() => setDays(d)}
              className={`px-3 py-1.5 rounded-full text-sm border transition ${
                days === d
                  ? "bg-accent text-accent-fg border-accent"
                  : "bg-card border-border text-muted hover:border-accent"
              }`}
            >
              {t("stats.rangeDays", { count: d })}
            </button>
          ))}
        </div>
      </div>

      <p className="text-xs text-muted mb-4 leading-relaxed">
        {t("stats.introBefore")}
        <b className="text-fg/80">{t("stats.introSystem")}</b>
        {t("stats.introAfter")}
      </p>

      {q.isLoading ? (
        <div className="text-muted py-8">{t("stats.loading")}</div>
      ) : !data ? (
        <div className="text-muted py-8">{t("stats.noData")}</div>
      ) : (
        <>
          {/* Daily totals (instance-wide, Pacific days) */}
          <div className="glass-card rounded-xl p-3 mb-4">
            <div className="text-xs text-muted mb-2">
              {t("stats.dailyTotal", {
                count: data.range_days,
                units: grandTotal.toLocaleString(),
              })}
            </div>
            {data.daily.length === 0 ? (
              <div className="text-muted text-sm">{t("stats.noUsageInRange")}</div>
            ) : (
              <div className="flex items-end gap-0.5 h-24">
                {data.daily.map((d) => (
                  // Each day gets a full-height track so the column is always visible
                  // (even on near-zero days); the accent fill renders the value on top.
                  <div
                    key={d.day}
                    className="flex-1 h-full flex items-end bg-card/50 rounded-t"
                    title={t("stats.dailyTooltip", {
                      day: d.day,
                      units: d.total.toLocaleString(),
                    })}
                  >
                    <div
                      className="w-full bg-accent hover:opacity-80 rounded-t transition"
                      style={{ height: `${Math.max(3, (d.total / maxDaily) * 100)}%` }}
                    />
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Per-user breakdown */}
          <div className="flex flex-col gap-1.5">
            {data.rows.length === 0 ? (
              <div className="text-muted py-4">{t("stats.noUsageInRange")}</div>
            ) : (
              data.rows.map((r) => (
                <UserRow key={r.user_id ?? "system"} row={r} max={data.rows[0]?.total || 1} />
              ))
            )}
          </div>
        </>
      )}
    </div>
  );
}

function UserRow({ row, max }: { row: AdminQuotaRow; max: number }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const actions = Object.entries(row.by_action).sort((a, b) => b[1] - a[1]);
  const isSystem = row.user_id === null;
  return (
    <div className="glass-card rounded-xl p-3">
      <button
        onClick={() => setOpen((o) => !o)}
        className="w-full flex items-center gap-3 text-left"
      >
        <span className={`text-sm font-medium truncate flex-1 ${isSystem ? "text-muted" : ""}`}>
          {isSystem ? t("stats.system") : row.email}
        </span>
        <span className="text-sm font-semibold tabular-nums shrink-0">
          {row.total.toLocaleString()}
        </span>
      </button>
      {/* Proportion bar */}
      <div className="mt-2 h-1.5 bg-border/40 rounded-full overflow-hidden">
        <div
          className="h-full bg-accent rounded-full"
          style={{ width: `${Math.max(2, (row.total / max) * 100)}%` }}
        />
      </div>
      {open && actions.length > 0 && (
        <div className="mt-2 space-y-1 text-xs text-muted">
          {actions.map(([action, units]) => (
            <div key={action} className="flex items-center justify-between gap-2">
              <span>{quotaActionLabel(action)}</span>
              <span className="tabular-nums">{units.toLocaleString()}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}