"use client";
import * as React from "react";
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { formatCompact, formatNumber } from "@/lib/format";
import { AXIS_TICK, CHART_COLORS, CHART_MARGIN, formatBucketLabel, formatTick } from "./chart-theme";
import { ChartTooltip } from "./chart-tooltip";
import { ChartLegend } from "./chart-frame";

export interface RequestsBarPoint {
  t: string;
  success: number;
  failed: number;
}

/** Stacked success/failed bars per bucket. Legend + 1px surface gap between segments keep the two readable without color. */
export function RequestsBarChart({ data, bucket, height = 240 }: { data: RequestsBarPoint[]; bucket: "hour" | "day"; height?: number }) {
  const totalSuccess = data.reduce((a, d) => a + d.success, 0);
  const totalFailed = data.reduce((a, d) => a + d.failed, 0);
  const tickEvery = Math.max(1, Math.ceil(data.length / (bucket === "hour" ? 8 : 10)));
  return (
    <div>
      <ChartLegend
        className="mb-3"
        items={[
          { label: "Successful", color: CHART_COLORS.success, value: formatNumber(totalSuccess) },
          { label: "Failed", color: CHART_COLORS.danger, value: formatNumber(totalFailed) },
        ]}
      />
      <ResponsiveContainer width="100%" height={height}>
        <BarChart data={data} margin={CHART_MARGIN} barCategoryGap="30%">
          <CartesianGrid vertical={false} stroke={CHART_COLORS.grid} />
          <XAxis dataKey="t" tickFormatter={(v: string) => formatTick(v, bucket)} tick={AXIS_TICK} axisLine={false} tickLine={false} interval={tickEvery - 1} minTickGap={16} />
          <YAxis tick={AXIS_TICK} axisLine={false} tickLine={false} width={40} allowDecimals={false} tickFormatter={(v: number) => formatCompact(v)} />
          <Tooltip
            cursor={{ fill: CHART_COLORS.cursor, opacity: 0.6 }}
            content={
              <ChartTooltip
                labelFormatter={(l) => formatBucketLabel(String(l), bucket)}
                names={{ success: "Successful", failed: "Failed" }}
                footer={(p) => {
                  const total = p.reduce((a, e) => a + Number(e.value ?? 0), 0);
                  return (
                    <span className="flex justify-between">
                      <span>Total</span>
                      <span className="font-mono tabular text-fg">{formatNumber(total)}</span>
                    </span>
                  );
                }}
              />
            }
          />
          <Bar dataKey="success" stackId="r" fill={CHART_COLORS.success} stroke={CHART_COLORS.surface} strokeWidth={1} maxBarSize={28} isAnimationActive={false} />
          <Bar dataKey="failed" stackId="r" fill={CHART_COLORS.danger} stroke={CHART_COLORS.surface} strokeWidth={1} radius={[3, 3, 0, 0]} maxBarSize={28} isAnimationActive={false} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}