"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

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

import styles from "./remittance-trend-chart.module.scss";

export default function RemittanceTrendsChart({ data }: any) {
  /* ================= TRANSFORM ================= */
  const chartData = (data || []).map((item: any) => ({
    month: item.month,
    value: item.amount || 0,
  }));

  return (
    <div className={styles.chartCard}>
      {/* HEADER */}
      <div className={styles.chartHeader}>
        <h3>Remittance Trends (Last 6 Months)</h3>
        <p>Monthly remittance performance overview</p>
      </div>

      {/* EMPTY */}
      {!chartData.length ? (
        <div className={styles.emptyState}>
          No remittance data available
        </div>
      ) : (
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={chartData}>
            {/* GRID */}
            <CartesianGrid
              strokeDasharray="3 3"
              vertical={false}
            />

            {/* X */}
            <XAxis
              dataKey="month"
              tick={{ fontSize: 12, fill: "#6b6b6b" }}
            />

            {/* Y */}
            <YAxis
              tick={{ fontSize: 12, fill: "#6b6b6b" }}
              tickFormatter={(val) =>
                `₦${Number(val).toLocaleString("en-NG", {
                  notation: "compact",
                })}`
              }
            />

            {/* TOOLTIP */}
            <Tooltip
              formatter={(value: any) =>
                `₦${Number(value).toLocaleString("en-NG")}`
              }
              contentStyle={{
                borderRadius: "10px",
                border: "1px solid #eee",
                fontSize: "12px",
                boxShadow: "0 6px 18px rgba(0,0,0,0.06)",
              }}
            />

            {/* 🔥 BAR */}
            <Bar
              dataKey="value"
              fill="#5e3817"
              radius={[6, 6, 0, 0]}
              barSize={26}
            />

            {/* 🔥 LINE (MOVEMENT) */}
            <Line
              type="monotone"
              dataKey="value"
              stroke="#7a4b20"
              strokeWidth={2.5}
              dot={{
                r: 4,
                stroke: "#7a4b20",
                strokeWidth: 2,
                fill: "#fff",
              }}
              activeDot={{
                r: 6,
                fill: "#5e3817",
              }}
            />
          </BarChart>
        </ResponsiveContainer>
      )}
    </div>
  );
}