"use client";

import React, { useMemo } from "react";
import { AgCharts } from "ag-charts-react";
import { AgChartOptions } from "ag-charts-community";

interface PieData {
  label: string;
  value: number;
  color?: string;
}

interface MembershipDistributionChartProps {
  data: PieData[];
  title?: string;
}

export function MembershipDistributionChart({
  data,
  title = "Membership Distribution",
}: MembershipDistributionChartProps) {
  const chartOptions: AgChartOptions = useMemo(
    () => ({
      title: {
        text: title,
        fontSize: 18,
        fontWeight: "bold",
      },
      data,
      series: [
        {
          type: "pie",
          calloutLabelKey: "label",
          angleKey: "value",
          sectorLabelKey: "label",
          fills: data.map((item) => item.color || "#3b82f6"),
          strokes: ["#ffffff"],
          strokeWidth: 2,
          calloutLabel: {
            enabled: true,
            fontSize: 12,
            fontWeight: "bold",
          },
          sectorLabel: {
            enabled: true,
            fontSize: 14,
            fontWeight: "bold",
            color: "#ffffff",
            formatter: (params: any) => {
              const percentage = (
                (params.datum.value /
                  data.reduce((sum, item) => sum + item.value, 0)) *
                100
              ).toFixed(1);
              return `${params.datum.label}: ${percentage}%`;
            },
          },
          highlightStyle: {
            item: {
              fillOpacity: 0.8,
              stroke: "#000000",
              strokeWidth: 2,
            },
          },
          tooltip: {
            enabled: true,
            renderer: (params: any) => {
              const percentage = (
                (params.datum.value /
                  data.reduce((sum, item) => sum + item.value, 0)) *
                100
              ).toFixed(1);
              return `<div class="bg-white p-2 rounded shadow-lg border">
              <div class="font-bold">${params.datum.label}</div>
              <div class="text-sm">Count: ${params.datum.value}</div>
              <div class="text-sm">Percentage: ${percentage}%</div>
            </div>`;
            },
          },
        },
      ],
      legend: {
        enabled: true,
        position: "right",
        fontSize: 12,
        marker: {
          shape: "square",
          size: 12,
        },
      },
      padding: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
      },
    }),
    [data, title],
  );

  return <AgCharts options={chartOptions} />;
}