"use client";

import { Bar, Doughnut, Line } from "react-chartjs-2";
import {
  BarElement,
  CategoryScale,
  Chart as ChartJS,
  Filler,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  Tooltip,
} from "chart.js";

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler);

const palette = ["#4f8cff", "#22d3ee", "#34d399", "#fbbf24", "#f472b6", "#a78bfa", "#fb7185", "#60a5fa"];

const baseOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false,
      labels: { color: "rgba(214, 228, 250, 0.85)", boxWidth: 12, font: { size: 11 } },
    },
    tooltip: {
      backgroundColor: "rgba(9, 15, 28, 0.95)",
      borderColor: "rgba(120, 165, 255, 0.25)",
      borderWidth: 1,
      titleColor: "#e6edf7",
      bodyColor: "#cbd8ee",
      padding: 10,
    },
  },
  scales: {
    x: {
      grid: { color: "rgba(148, 178, 255, 0.07)" },
      ticks: { color: "rgba(186, 204, 232, 0.7)", font: { size: 11 } },
    },
    y: {
      grid: { color: "rgba(148, 178, 255, 0.07)" },
      ticks: { color: "rgba(186, 204, 232, 0.7)", font: { size: 11 } },
    },
  },
} as const;

export function LineChart({
  labels,
  datasets,
  height = 260,
}: {
  labels: string[];
  datasets: { label: string; data: number[]; color?: string; fill?: boolean }[];
  height?: number;
}) {
  return (
    <div style={{ height }}>
      <Line
        options={baseOptions as never}
        data={{
          labels,
          datasets: datasets.map((ds, i) => ({
            label: ds.label,
            data: ds.data,
            borderColor: ds.color ?? palette[i % palette.length],
            backgroundColor: ds.fill ? `${ds.color ?? palette[i % palette.length]}26` : "transparent",
            fill: ds.fill ?? true,
            tension: 0.38,
            pointRadius: 3,
            pointBackgroundColor: ds.color ?? palette[i % palette.length],
            borderWidth: 2,
          })),
        }}
      />
    </div>
  );
}

export function BarChart({
  labels,
  datasets,
  height = 260,
  stacked = false,
}: {
  labels: string[];
  datasets: { label: string; data: number[]; color?: string }[];
  height?: number;
  stacked?: boolean;
}) {
  const options = {
    ...baseOptions,
    scales: {
      ...baseOptions.scales,
      x: { ...baseOptions.scales.x, stacked },
      y: { ...baseOptions.scales.y, stacked },
    },
  };
  return (
    <div style={{ height }}>
      <Bar
        options={options as never}
        data={{
          labels,
          datasets: datasets.map((ds, i) => ({
            label: ds.label,
            data: ds.data,
            backgroundColor: ds.color ?? palette[i % palette.length],
            borderRadius: 6,
            maxBarThickness: 34,
          })),
        }}
      />
    </div>
  );
}

export function DoughnutChart({ labels, data, height = 240 }: { labels: string[]; data: number[]; height?: number }) {
  return (
    <div style={{ height }}>
      <Doughnut
        options={
          {
            responsive: true,
            maintainAspectRatio: false,
            cutout: "68%",
            plugins: {
              legend: { display: true, position: "bottom", labels: { color: "rgba(214, 228, 250, 0.85)", boxWidth: 10, font: { size: 11 } } },
              tooltip: baseOptions.plugins.tooltip,
            },
          } as never
        }
        data={{
          labels,
          datasets: [{ data, backgroundColor: palette, borderColor: "rgba(8, 14, 27, 0.9)", borderWidth: 2 }],
        }}
      />
    </div>
  );
}