"use client";

import React from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import { ChartConfig } from "../types";

interface StackedBarChartComponentProps {
  data: any[];
  config: ChartConfig;
  width?: number;
  height?: number;
}

/**
 * 누적 바 차트 컴포넌트
 * - Recharts BarChart (stacked) 사용
 * - 전체 대비 비율 파악에 적합
 * - 다중 시리즈를 누적으로 표시
 */
export function StackedBarChartComponent({ data, config, width = 250, height = 200 }: StackedBarChartComponentProps) {
  const {
    xAxis = "x",
    yAxis = "y",
    colors = ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"],
    title,
    showLegend = true,
  } = config;

  // Y축 필드들 (단일 또는 다중)
  const yFields = Array.isArray(yAxis) ? yAxis : [yAxis];
  const yKeys = yFields.filter((field) => field && field !== "y");

  return (
    <div className="h-full w-full p-2">
      {title && <div className="text-foreground mb-2 text-center text-sm font-semibold">{title}</div>}

      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 25,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
          <XAxis dataKey={xAxis} tick={{ fontSize: 12 }} stroke="hsl(var(--muted-foreground))" />
          <YAxis tick={{ fontSize: 12 }} stroke="hsl(var(--muted-foreground))" />
          <Tooltip
            contentStyle={{
              backgroundColor: "hsl(var(--background))",
              border: "1px solid hsl(var(--border))",
              borderRadius: "4px",
              fontSize: "12px",
              color: "hsl(var(--foreground))",
            }}
            formatter={(value: any, name: string) => [typeof value === "number" ? value.toLocaleString() : value, name]}
          />
          {showLegend && <Legend wrapperStyle={{ fontSize: "12px" }} />}

          {yKeys.map((key, index) => (
            <Bar
              key={key}
              dataKey={key}
              stackId="a"
              fill={colors[index % colors.length]}
              radius={index === yKeys.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
            />
          ))}
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}