"use client";

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

import type { OwnerFunnelStep } from "@/lib/owner/dashboard";

const COLORS = ["#c2410c", "#f97d57", "#fda47b", "#fdbf9d"];

export function LeadFunnelChart({ data }: { data: OwnerFunnelStep[] }) {
  return (
    <div className="h-[260px] w-full" style={{ fontFamily: "Manrope, sans-serif" }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 8 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
          <XAxis type="number" tick={{ fontSize: 11, fill: "#64748b" }} />
          <YAxis type="category" dataKey="step" tick={{ fontSize: 12, fill: "#0c1828" }} width={90} />
          <Tooltip
            formatter={(value) => [
              new Intl.NumberFormat("sr-Latn-RS").format(Number(value) || 0),
              "Ukupno",
            ]}
            contentStyle={{ borderRadius: 12, fontSize: 12 }}
          />
          <Bar dataKey="value" radius={[0, 10, 10, 0]}>
            {data.map((_, idx) => (
              <Cell key={idx} fill={COLORS[idx % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}