/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

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

import styles from "./charts.module.scss";

const tabs = [
  { key: "all", label: "All", color: "#5e3817" },
  { key: "assigned", label: "Assigned", color: "#7a4b20" },
  { key: "rescheduled", label: "Rescheduled", color: "#c4a484" },
  { key: "completed", label: "Completed", color: "#e8d8c3" },
];

export default function AppointmentTrendsChart({ data }: any) {
  const [active, setActive] = useState("all");

  const activeTab = tabs.find((t) => t.key === active);

  // 🔥 Transform data
  const chartData = (data || []).map((item: any) => ({
    month: item.month,
    value:
      active === "all"
        ? item.assigned +
          item.rescheduled +
          item.completed +
          (item.pending || 0)
        : item[active] || 0,
  }));

  return (
    <div className={styles.chartCard}>
      {/* HEADER */}
      <div className={styles.chartHeader}>
        <h3>Appointment Trends (Last 6 Months)</h3>

        <div className={styles.chartTabs}>
          {tabs.map((tab) => (
            <button
              key={tab.key}
              className={`${styles.tab} ${
                active === tab.key ? styles.active : ""
              }`}
              onClick={() => setActive(tab.key)}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* CHART */}
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} />

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

          <YAxis
            tick={{ fontSize: 12, fill: "#6b6b6b" }}
          />

          <Tooltip
            cursor={{ fill: "rgba(0,0,0,0.03)" }}
            contentStyle={{
              borderRadius: "8px",
              border: "1px solid #eee",
              fontSize: "12px",
            }}
          />

          {/* 🔥 Dynamic color */}
          <Bar
            dataKey="value"
            fill={activeTab?.color}
            radius={[6, 6, 0, 0]}
            barSize={28}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}