"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import type { Workout } from "@/db/schema";
import { isSameLocalDay } from "@/lib/utils";

// Bar chart: total workout minutes per day, last 7 days
export function StatChart({ workouts }: { workouts: Workout[] }) {
  const days: { label: string; minutes: number }[] = [];
  for (let i = 6; i >= 0; i--) {
    const day = new Date();
    day.setDate(day.getDate() - i);
    const minutes = workouts
      .filter((w) => isSameLocalDay(new Date(w.createdAt), day))
      .reduce((sum, w) => sum + w.duration, 0);
    days.push({
      label: day.toLocaleDateString("id-ID", { weekday: "short" }),
      minutes,
    });
  }

  return (
    <ResponsiveContainer width="100%" height={220}>
      <BarChart data={days}>
        <XAxis dataKey="label" fontSize={12} tickLine={false} axisLine={false} />
        <YAxis fontSize={12} tickLine={false} axisLine={false} width={32} />
        <Tooltip
          formatter={(value) => [`${value} menit`, "Durasi"]}
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: 8,
            color: "hsl(var(--foreground))",
          }}
        />
        <Bar
          dataKey="minutes"
          fill="hsl(142, 71%, 45%)"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}