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

import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";

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

// 🎨 Color sets per chart
const COLOR_SETS = {
  gender: ["#5e3817", "#c4a484"],
  age: ["#7a4b20", "#a9743a", "#d2b48c", "#e8d8c3"],
  marital: ["#3b2a1a", "#7a4b20", "#c4a484", "#e8d8c3"],
};

const PieCard = ({ title, data, colors }: any) => {
  const cleanData = (data || []).filter(
    (item: any) => item?.percentage > 0
  );

  return (
    <div className={styles.chartCard}>
      <div className={styles.chartHeader}>
        <h3>{title}</h3>
      </div>

      {cleanData.length === 0 ? (
        <div className={styles.emptyState}>No data available</div>
      ) : (
        <ResponsiveContainer width="100%" height={260}>
          <PieChart>
            <Pie
              data={cleanData}
              dataKey="percentage"
              nameKey="name"
              outerRadius={90}
              label={({ percent }: any) =>
                `${(percent * 100).toFixed(0)}%`
              }
            >
              {cleanData.map((_: any, i: number) => (
                <Cell key={i} fill={colors[i % colors.length]} />
              ))}
            </Pie>

            <Tooltip
              formatter={(value: any, name: any, props: any) => [
                `${value}% (${props.payload.total})`,
                name,
              ]}
            />

            <Legend />
          </PieChart>
        </ResponsiveContainer>
      )}
    </div>
  );
};

export default function AppointmentDemographics({ stats }: any) {
  return (
    <div className={styles.demographicsWrapper}>
      <div className={styles.sectionHeader}>
        <h2>Appointment Demographics</h2>
        <p>Understand who is booking appointments</p>
      </div>

      <div className={styles.chartGrid}>
        <PieCard
          title="Gender Distribution"
          data={stats.gender}
          colors={COLOR_SETS.gender}
        />

        <PieCard
          title="Age Distribution"
          data={stats.age}
          colors={COLOR_SETS.age}
        />

        <PieCard
          title="Marital Status"
          data={stats.marital}
          colors={COLOR_SETS.marital}
        />
      </div>
    </div>
  );
}