feat: add device detail page with charts and stats

app/devices/[slug]/device-detail-client.tsx

@@ -0,0 +1,371 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import Link from "next/link"
+import { motion } from "motion/react"
+import { Gamepad2Icon, TrendingUpIcon, DatabaseIcon, CheckCircleIcon, ArrowRightIcon, Loader2 } from "lucide-react"
+import { EChartWrapper, CHART_THEME, getDeviceColor } from "@/components/charts/EChartWrapper"
+import type { EChartsOption } from "echarts"
+
+interface DeviceInfo {
+  slug: string
+  name: string
+  deviceType: string
+}
+
+interface DeviceStats {
+  slug: string
+  name: string
+  deviceType: string
+  totalBenchmarks: number
+  avgFps: number | null
+  verifiedCount: number
+  gameCount: number
+  boxplot: Array<{
+    gameId: string
+    gameTitle: string
+    min: number
+    q1: number
+    median: number
+    q3: number
+    max: number
+    count: number
+  }>
+  historical: Array<{
+    period: string
+    avgFps: number
+    count: number
+  }>
+  topGames: Array<{
+    gameId: string
+    gameTitle: string
+    headerImage: string | null
+    avgFps: number
+    benchmarkCount: number
+  }>
+  genreBreakdown: Array<{ genre: string; count: number }>
+  protonBreakdown: Array<{ version: string; count: number }>
+  fsrBreakdown: Array<{ version: string; count: number; avgFps: number }>
+}
+
+const deviceTypeLabel: Record<string, string> = {
+  handled: "Handheld",
+  console: "Console",
+}
+
+export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
+  const [stats, setStats] = useState<DeviceStats | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    async function fetchStats() {
+      setLoading(true)
+      try {
+        const res = await fetch(`/api/hardware/${device.slug}/stats`)
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const data = await res.json()
+        if (!cancelled) setStats(data)
+      } catch (err) {
+        console.error("Failed to fetch device stats:", err)
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    fetchStats()
+    return () => { cancelled = true }
+  }, [device.slug])
+
+  const deviceColor = getDeviceColor(0)
+
+  // ── Chart Options ──────────────────────────────────────────
+  const historicalOption = useMemo<EChartsOption>(() => {
+    if (!stats || stats.historical.length === 0) return {}
+    return {
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: "#1a1020",
+        borderColor: CHART_THEME.border,
+        textStyle: { color: CHART_THEME.text },
+      },
+      grid: { left: 50, right: 20, top: 10, bottom: 30 },
+      xAxis: {
+        type: "category",
+        data: stats.historical.map((h) => h.period),
+        axisLine: { lineStyle: { color: CHART_THEME.border } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
+      },
+      yAxis: {
+        type: "value",
+        axisLine: { lineStyle: { color: CHART_THEME.border } },
+        splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
+      },
+      series: [
+        {
+          type: "line",
+          data: stats.historical.map((h) => h.avgFps),
+          smooth: true,
+          lineStyle: { color: deviceColor, width: 2 },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                { offset: 0, color: deviceColor + "40" },
+                { offset: 1, color: deviceColor + "05" },
+              ],
+            },
+          },
+          symbol: "circle",
+          symbolSize: 4,
+          itemStyle: { color: deviceColor },
+        },
+      ],
+    }
+  }, [stats, deviceColor])
+
+  const boxplotOption = useMemo<EChartsOption>(() => {
+    if (!stats || stats.boxplot.length === 0) return {}
+    return {
+      tooltip: {
+        trigger: "item",
+        backgroundColor: "#1a1020",
+        borderColor: CHART_THEME.border,
+        textStyle: { color: CHART_THEME.text },
+      },
+      grid: { left: 80, right: 20, top: 10, bottom: 40 },
+      xAxis: {
+        type: "category",
+        data: stats.boxplot.map((b) => b.gameTitle),
+        axisLine: { lineStyle: { color: CHART_THEME.border } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 10, rotate: 30 },
+      },
+      yAxis: {
+        type: "value",
+        name: "FPS",
+        axisLine: { lineStyle: { color: CHART_THEME.border } },
+        splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
+        axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
+        nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
+      },
+      series: [
+        {
+          type: "boxplot",
+          data: stats.boxplot.map((b) => [b.min, b.q1, b.median, b.q3, b.max]),
+          itemStyle: { color: deviceColor + "30", borderColor: deviceColor },
+        },
+      ],
+    }
+  }, [stats, deviceColor])
+
+  const genreOption = useMemo<EChartsOption>(() => {
+    if (!stats || stats.genreBreakdown.length === 0) return {}
+    return {
+      tooltip: {
+        trigger: "item",
+        backgroundColor: "#1a1020",
+        borderColor: CHART_THEME.border,
+        textStyle: { color: CHART_THEME.text },
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["40%", "70%"],
+          center: ["50%", "50%"],
+          data: stats.genreBreakdown.map((g, i) => ({
+            name: g.genre,
+            value: g.count,
+            itemStyle: { color: CHART_THEME.deviceColors[i % CHART_THEME.deviceColors.length] },
+          })),
+          label: {
+            color: CHART_THEME.textMuted,
+            fontSize: 10,
+          },
+          emphasis: {
+            itemStyle: { shadowBlur: 10, shadowColor: "rgba(0,0,0,0.5)" },
+          },
+        },
+      ],
+    }
+  }, [stats])
+
+  return (
+    <section className="w-full flex flex-col gap-8 pb-16">
+      {/* ── Hero Header ──────────────────────────────────── */}
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="px-4 md:px-[10svw]"
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-wrap items-center gap-3 mb-2">
+            <h1 className="text-2xl sm:text-3xl font-bold">{device.name}</h1>
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-secondary/20 text-secondary border border-secondary/30 capitalize">
+              <Gamepad2Icon className="h-3 w-3" />
+              {deviceTypeLabel[device.deviceType] || device.deviceType}
+            </span>
+          </div>
+          <p className="text-sm text-text/60">
+            Performance benchmarks and statistics
+          </p>
+        </div>
+      </motion.div>
+
+      {/* ── Overview Stats ────────────────────────────────── */}
+      {stats && (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.05 }}
+          className="px-4 md:px-[10svw]"
+        >
+          <div className="max-w-7xl mx-auto flex flex-wrap gap-4">
+            <StatCard icon={DatabaseIcon} label="Total Benchmarks" value={String(stats.totalBenchmarks)} />
+            <StatCard icon={TrendingUpIcon} label="Average FPS" value={stats.avgFps !== null ? String(stats.avgFps) : "—"} />
+            <StatCard icon={Gamepad2Icon} label="Games Tested" value={String(stats.gameCount)} />
+            <StatCard icon={CheckCircleIcon} label="Verified" value={String(stats.verifiedCount)} />
+          </div>
+        </motion.div>
+      )}
+
+      {/* ── Loading State ─────────────────────────────────── */}
+      {loading && (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      )}
+
+      {/* ── Charts Section ────────────────────────────────── */}
+      {stats && !loading && (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.1 }}
+          className="px-4 md:px-[10svw]"
+        >
+          <div className="max-w-7xl mx-auto flex flex-col gap-6">
+            {/* Row 1: Historical FPS */}
+            {stats.historical.length > 0 && (
+              <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                <h3 className="text-sm font-medium text-text/80 mb-2">Historical Performance</h3>
+                <EChartWrapper option={historicalOption} height={280} />
+              </div>
+            )}
+
+            {/* Row 2: FPS Distribution + Genre Breakdown */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {stats.boxplot.length > 0 && (
+                <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                  <h3 className="text-sm font-medium text-text/80 mb-2">FPS Distribution by Game</h3>
+                  <EChartWrapper option={boxplotOption} height={300} />
+                </div>
+              )}
+              {stats.genreBreakdown.length > 0 && (
+                <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                  <h3 className="text-sm font-medium text-text/80 mb-2">Genre Breakdown</h3>
+                  <EChartWrapper option={genreOption} height={300} />
+                </div>
+              )}
+            </div>
+
+            {/* Row 3: Proton & FSR Breakdown */}
+            {(stats.protonBreakdown.length > 0 || stats.fsrBreakdown.length > 0) && (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {stats.protonBreakdown.length > 0 && (
+                  <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                    <h3 className="text-sm font-medium text-text/80 mb-3">Proton Version Distribution</h3>
+                    <div className="space-y-2">
+                      {stats.protonBreakdown.map((p) => (
+                        <div key={p.version} className="flex items-center justify-between text-sm">
+                          <span className="text-text/70">{p.version}</span>
+                          <div className="flex items-center gap-2">
+                            <div className="w-24 h-1.5 rounded-full bg-text/10 overflow-hidden">
+                              <div
+                                className="h-full rounded-full bg-primary"
+                                style={{ width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%` }}
+                              />
+                            </div>
+                            <span className="text-text/50 text-xs">{p.count}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {stats.fsrBreakdown.length > 0 && (
+                  <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                    <h3 className="text-sm font-medium text-text/80 mb-3">FSR Version Performance</h3>
+                    <div className="space-y-2">
+                      {stats.fsrBreakdown.map((f) => (
+                        <div key={f.version} className="flex items-center justify-between text-sm">
+                          <span className="text-text/70 capitalize">{f.version === "none" ? "Native" : f.version.toUpperCase()}</span>
+                          <div className="flex items-center gap-2">
+                            <span className="text-text/80 font-medium tabular-nums">{f.avgFps} FPS</span>
+                            <span className="text-text/40 text-xs">({f.count})</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Row 4: Top Games */}
+            {stats.topGames.length > 0 && (
+              <div className="rounded-xl border border-border bg-text/[0.03] p-4">
+                <h3 className="text-sm font-medium text-text/80 mb-3">Top Games by Average FPS</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+                  {stats.topGames.slice(0, 8).map((game, i) => (
+                    <Link
+                      key={game.gameId}
+                      href={`/game/${game.gameId}`}
+                      className="flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group"
+                    >
+                      <div className="text-lg font-bold text-text/20 tabular-nums w-6">{i + 1}</div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium truncate group-hover:text-primary transition-colors">{game.gameTitle}</p>
+                        <div className="flex items-center gap-2 text-xs text-text/50">
+                          <span className="text-green-400 font-medium">{game.avgFps} FPS</span>
+                          <span>{game.benchmarkCount} runs</span>
+                        </div>
+                      </div>
+                      <ArrowRightIcon className="h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0" />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+
+      {/* ── Empty state ──────────────────────────────────── */}
+      {stats && !loading && stats.totalBenchmarks === 0 && (
+        <div className="max-w-7xl mx-auto px-4 md:px-[10svw]">
+          <div className="text-center py-16 text-text/40">
+            <Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
+            <p>No benchmark data yet for this device</p>
+            <p className="text-sm mt-1">Data will appear as benchmarks are submitted</p>
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
+function StatCard({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) {
+  return (
+    <div className="flex items-center gap-3 p-4 rounded-xl border border-border bg-text/[0.03] min-w-[160px]">
+      <div className="flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary">
+        <Icon className="h-4 w-4" />
+      </div>
+      <div className="flex flex-col">
+        <span className="text-xs text-text/50">{label}</span>
+        <span className="text-lg font-semibold tabular-nums">{value}</span>
+      </div>
+    </div>
+  )
+}