"use client";

import * as React from "react";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  Cell,
  LabelList,
} from "recharts";
import type { BdrFunnelStage } from "@/features/marketing/utils/marketing-drill-helpers";
import { formatMarketingCount, formatMarketingPercent } from "../marketing-kpi-card";
import { MarketingChartCard } from "./marketing-chart-card";
import {
  MARKETING_AXIS_TICK,
  MARKETING_CATEGORY_TICK,
  MARKETING_GRID_STROKE,
  percentOfTotal,
} from "./marketing-chart-config";
import { marketingChartColor } from "./marketing-chart-colors";
import { MarketingChartGradientDefs } from "./marketing-chart-gradients";
import { MarketingChartTooltip } from "./marketing-chart-tooltip";

type MarketingBdrFunnelChartProps = {
  title: string;
  subtitle?: string;
  stages: BdrFunnelStage[];
  isLoading?: boolean;
};

export const MarketingBdrFunnelChart = React.memo(function MarketingBdrFunnelChart({
  title,
  subtitle,
  stages,
  isLoading,
}: MarketingBdrFunnelChartProps) {
  const chartData = React.useMemo(() => {
    const top = stages[0]?.value ?? 0;
    return stages.map((stage, index) => {
      const prev = index > 0 ? stages[index - 1].value : stage.value;
      const dropoff =
        prev > 0 && index > 0
          ? ((prev - stage.value) / prev) * 100
          : 0;
      return {
        ...stage,
        pctOfTop: percentOfTotal(stage.value, top),
        dropoff,
      };
    });
  }, [stages]);

  const isEmpty = !isLoading && stages.length === 0;

  return (
    <MarketingChartCard
      title={title}
      subtitle={subtitle}
      isLoading={isLoading}
      isEmpty={isEmpty}
      emptyMessage="No BDR funnel data"
      chartHeight={280}
      footer={
        chartData.length > 1 ? (
          <div className="flex flex-wrap gap-2">
            {chartData.slice(1).map((stage, index) => (
              <span
                key={stage.name}
                className="rounded-full border border-gray-100 bg-gray-50 px-2.5 py-1 text-[10px] font-semibold text-gray-600"
              >
                {stage.name}:{" "}
                <span className="font-bold text-rose-500">
                  -{stage.dropoff.toFixed(0)}%
                </span>{" "}
                from {chartData[index].name}
              </span>
            ))}
          </div>
        ) : null
      }
    >
      <div className="h-[280px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={chartData}
            layout="vertical"
            margin={{ left: 4, right: 56, top: 8, bottom: 4 }}
          >
            <MarketingChartGradientDefs />
            <CartesianGrid
              strokeDasharray="3 3"
              horizontal={false}
              stroke={MARKETING_GRID_STROKE}
            />
            <XAxis
              type="number"
              axisLine={false}
              tickLine={false}
              tick={MARKETING_AXIS_TICK}
            />
            <YAxis
              dataKey="name"
              type="category"
              width={108}
              axisLine={false}
              tickLine={false}
              tick={MARKETING_CATEGORY_TICK}
            />
            <Tooltip
              content={
                <MarketingChartTooltip
                  valueFormat="count"
                  footer={
                    <span className="text-[10px] font-semibold text-white/70">
                      Stage retention shown in bar labels
                    </span>
                  }
                />
              }
            />
            <Bar dataKey="value" radius={[0, 8, 8, 0]} barSize={24}>
              {chartData.map((_, index) => (
                <Cell
                  key={index}
                  fill={
                    index === 0
                      ? "url(#marketing-gradient-indigo)"
                      : marketingChartColor(index)
                  }
                />
              ))}
              <LabelList
                dataKey="value"
                position="right"
                formatter={(value: number, _name: string, item) => {
                  const payload = item?.payload as { pctOfTop?: number };
                  return `${formatMarketingCount(value)} (${formatMarketingPercent(payload?.pctOfTop ?? null)})`;
                }}
                className="fill-gray-600 text-[10px] font-bold"
              />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </MarketingChartCard>
  );
});