"use client";

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

interface MetricData {
  after: number;
  before: number;
  metric: string;
}

interface PerformanceChartProps {
  afterLabel?: string;
  beforeLabel?: string;
  data: MetricData[];
  title?: string;
}

export function PerformanceChart({
  data,
  title,
  beforeLabel = "Before",
  afterLabel = "After",
}: PerformanceChartProps) {
  const chartConfig = {
    before: {
      label: beforeLabel,
      color: "#737373",
    },
    after: {
      label: afterLabel,
      color: "#fd105e",
    },
  } satisfies ChartConfig;

  return (
    <div className="my-8 rounded-xl border border-white/10 bg-white/[0.02] p-4 sm:p-6">
      {title && (
        <p className="mb-4 text-center font-semibold text-neutral-300 text-sm">
          {title}
        </p>
      )}
      <div className="mb-5 flex items-center justify-center gap-4">
        <div className="flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5">
          <span className="inline-block h-3 w-6 rounded-sm bg-[#737373]" />
          <span className="font-medium text-neutral-300 text-xs">
            {beforeLabel}
          </span>
        </div>
        <div className="flex items-center gap-2 rounded-full border border-[#fd105e]/20 bg-[#fd105e]/5 px-3 py-1.5">
          <span className="inline-block h-3 w-6 rounded-sm bg-[#fd105e]" />
          <span className="font-medium text-neutral-200 text-xs">
            {afterLabel}
          </span>
        </div>
      </div>
      <ChartContainer
        className="w-full"
        config={chartConfig}
        style={{ height: data.length * 56 + 40 }}
      >
        <BarChart
          accessibilityLayer
          barCategoryGap="30%"
          barGap={4}
          data={data}
          layout="vertical"
          margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
        >
          <CartesianGrid horizontal={false} stroke="rgba(255,255,255,0.05)" />
          <XAxis
            axisLine={false}
            tick={{ fill: "#737373", fontSize: 11 }}
            tickLine={false}
            type="number"
          />
          <YAxis
            axisLine={false}
            dataKey="metric"
            tick={{ fill: "#a3a3a3", fontSize: 11 }}
            tickLine={false}
            type="category"
            width={100}
          />
          <ChartTooltip
            content={<ChartTooltipContent indicator="line" />}
            cursor={{ fill: "rgba(255,255,255,0.03)" }}
          />
          <Bar
            dataKey="before"
            fill="var(--color-before)"
            maxBarSize={18}
            radius={[0, 4, 4, 0]}
          />
          <Bar
            dataKey="after"
            fill="var(--color-after)"
            maxBarSize={18}
            radius={[0, 4, 4, 0]}
          />
        </BarChart>
      </ChartContainer>
    </div>
  );
}