import type { Metadata } from "next";
import { SessionsSummaryCards } from "@/components/stats/SessionsSummaryCards";
import { DeviceUsageTable } from "@/components/stats/DeviceUsageTable";
import { getDeviceCommandCounts, getDeviceUsageStats, getSessionsSummary } from "@/lib/db/queries/stats";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Stats" };

export default async function StatsPage() {
  const [sessionsSummary, deviceUsage, commandCounts] = await Promise.all([
    getSessionsSummary(),
    getDeviceUsageStats(),
    getDeviceCommandCounts(),
  ]);

  const commandCountByDevice = new Map(commandCounts.map((c) => [c.deviceId, c.commandCount]));
  const devices = deviceUsage.map((d) => ({ ...d, commandCount: commandCountByDevice.get(d.deviceId) ?? 0 }));

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="font-heading text-2xl font-semibold">Stats</h1>
        <p className="text-sm text-muted-foreground">Usage across sessions and devices.</p>
      </div>

      <SessionsSummaryCards summary={sessionsSummary} />
      <DeviceUsageTable devices={devices} />
    </div>
  );
}