"use client";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
  Rectangle,
} from "recharts";
import { formatMoney } from "@/lib/format";

export interface ChartBar {
  label: string;
  profit: number;
  is_current: boolean;
}

interface EarningsChartDatum {
  month: string;
  value: number;
  fill: string;
}

function EarningsChartTooltip({
  active,
  payload,
  label,
  currency,
}: any) {
  if (!active || !payload?.length) {
    return null;
  }

  return (
    <div className="bg-[#2A2D36] border border-white/10 rounded-xl px-4 py-3 shadow-xl">
      <p className="text-gray-400 text-xs mb-1">{label}</p>
      <p className="text-white font-bold">
        {formatMoney(payload[0].value ?? 0, currency)}
      </p>
    </div>
  );
}

function EarningsBarShape(
  props: Readonly<{
    payload?: EarningsChartDatum;
    x?: number;
    y?: number;
    width?: number;
    height?: number;
  }>,
) {
  const { payload, x = 0, y = 0, width = 0, height = 0 } = props;
  return (
    <Rectangle
      x={x}
      y={y}
      width={width}
      height={height}
      fill={payload?.fill ?? "#FCD704"}
      radius={[8, 8, 0, 0]}
    />
  );
}

export default function EarningsChart({
  bars,
  currency,
  rangeMonths,
}: Readonly<{
  bars: ChartBar[];
  currency: string;
  rangeMonths: number;
}>) {
  const data: EarningsChartDatum[] = bars.map((bar) => ({
    month: bar.label,
    value: bar.profit,
    fill: bar.is_current ? "#FCD704" : "rgba(252,215,4,0.25)",
  }));

  return (
    <div className="bg-[#1E2128] rounded-2xl p-6 h-full">
      <div className="flex items-center justify-between mb-6">
        <span className="text-gray-400 text-sm">آخر {rangeMonths} أشهر</span>
        <h3 className="text-white font-bold text-base">الأرباح الشهرية</h3>
      </div>
      {data.length === 0 ? (
        <div className="h-[240px] flex items-center justify-center">
          <p className="text-gray-500 text-sm">لا توجد بيانات لعرضها</p>
        </div>
      ) : (
        <ResponsiveContainer width="100%" height={240}>
          <BarChart data={data} barCategoryGap="35%">
            <CartesianGrid
              strokeDasharray="3 3"
              stroke="rgba(255,255,255,0.04)"
              vertical={false}
            />
            <XAxis
              dataKey="month"
              tick={{ fill: "#6B7280", fontSize: 12 }}
              axisLine={false}
              tickLine={false}
            />
            <YAxis
              tick={{ fill: "#6B7280", fontSize: 11 }}
              axisLine={false}
              tickLine={false}
              tickFormatter={(value) => `${value}`}
            />
            <Tooltip
              cursor={{ fill: "rgba(255,255,255,0.03)" }}
              content={<EarningsChartTooltip currency={currency} />}
            />
            <Bar dataKey="value" shape={EarningsBarShape} />
          </BarChart>
        </ResponsiveContainer>
      )}
    </div>
  );
}