import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { cn } from "@/lib/utils";

interface CostByWorkflow {
  workflow: string;
  cost: number;
}

interface CostChartProps {
  data: CostByWorkflow[];
}

export function CostChart({ data }: CostChartProps) {
  if (data.length === 0) {
    return (
      <div className="flex h-64 items-center justify-center rounded-xl border border-border bg-surface">
        <p className="text-sm text-muted">No cost data available</p>
      </div>
    );
  }

  return (
    <div className={cn("rounded-xl border border-border bg-surface p-5 shadow-sm")}>
      <h3 className="mb-4 text-sm font-semibold text-foreground">Cost by Workflow (7 Days)</h3>
      <ResponsiveContainer width="100%" height={240}>
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
          <XAxis
            dataKey="workflow"
            tick={{ fontSize: 11, fill: "var(--color-muted)" }}
            angle={-35}
            textAnchor="end"
            height={60}
            interval={0}
            tickFormatter={(v: string) => v.length > 14 ? v.slice(0, 12) + "..." : v}
          />
          <YAxis
            tick={{ fontSize: 11, fill: "var(--color-muted)" }}
            tickFormatter={(v: number) => `$${v.toFixed(2)}`}
          />
          <Tooltip
            contentStyle={{
              backgroundColor: "var(--color-surface)",
              border: "1px solid var(--color-border)",
              borderRadius: "8px",
              fontSize: "12px",
            }}
            cursor={{ fill: "var(--color-border)", opacity: 0.3 }}
            formatter={(value) => [`$${Number(value).toFixed(2)}`, "Cost"]}
          />
          <Bar dataKey="cost" fill="var(--color-accent)" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}
