"use client";

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

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

/**
 * 콤보 차트 컴포넌트 (바 + 라인)
 * - Recharts ComposedChart 사용
 * - 서로 다른 스케일의 데이터를 함께 표시
 * - 예: 매출(바) + 이익률(라인)
 */
export function ComboChartComponent({ data, config, width = 250, height = 200 }: ComboChartComponentProps) {
  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");

  // 첫 번째는 Bar, 나머지는 Line으로 표시
  const barKeys = yKeys.slice(0, 1);
  const lineKeys = yKeys.slice(1);

  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%">
        <ComposedChart
          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" }} />}

          {/* 바 차트 */}
          {barKeys.map((key, index) => (
            <Bar key={key} dataKey={key} fill={colors[index % colors.length]} radius={[2, 2, 0, 0]} />
          ))}

          {/* 라인 차트 */}
          {lineKeys.map((key, index) => (
            <Line
              key={key}
              type="monotone"
              dataKey={key}
              stroke={colors[(barKeys.length + index) % colors.length]}
              strokeWidth={2}
              dot={{ r: 3 }}
            />
          ))}
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  );
}