'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="w-full h-full p-2">
      {title && (
        <div className="text-center text-sm font-semibold text-foreground mb-2">
          {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>
  );
}