'use client';

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

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

/**
 * 바 차트 컴포넌트 (Recharts SimpleBarChart 기반)
 * - 실제 데이터를 받아서 단순하게 표시
 * - 복잡한 변환 로직 없음
 */
export function BarChartComponent({ data, config, width = 600, height = 300 }: BarChartComponentProps) {
  // console.log('🎨 BarChartComponent - 전체 데이터:', {
  //   dataLength: data?.length,
  //   fullData: data,
  //   dataType: typeof data,
  //   isArray: Array.isArray(data),
  //   config,
  //   xAxisField: config?.xAxis,
  //   yAxisFields: config?.yAxis
  // });

  // 데이터가 없으면 메시지 표시
  if (!data || data.length === 0) {
    return (
      <div className="w-full h-full flex items-center justify-center text-gray-500">
        <div className="text-center">
          <div className="text-2xl mb-2">📊</div>
          <div>데이터가 없습니다</div>
        </div>
      </div>
    );
  }

  // 데이터의 첫 번째 아이템에서 사용 가능한 키 확인
  const firstItem = data[0];
  const availableKeys = Object.keys(firstItem);
  // console.log('📊 사용 가능한 데이터 키:', availableKeys);
  // console.log('📊 첫 번째 데이터 아이템:', firstItem);

  // Y축 필드 추출 (배열이면 모두 사용, 아니면 단일 값)
  const yFields = Array.isArray(config.yAxis) ? config.yAxis : [config.yAxis];
  
  // 색상 배열
  const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff7c7c', '#8dd1e1'];

  // 한글 레이블 매핑
  const labelMapping: Record<string, string> = {
    'total_users': '전체 사용자',
    'active_users': '활성 사용자',
    'name': '부서'
  };

  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis 
          dataKey={config.xAxis} 
          tick={{ fontSize: 12 }}
        />
        <YAxis tick={{ fontSize: 12 }} />
        <Tooltip />
        {config.showLegend !== false && <Legend />}
        
        {/* Y축 필드마다 Bar 생성 */}
        {yFields.map((field: string, index: number) => (
          <Bar 
            key={field}
            dataKey={field} 
            fill={colors[index % colors.length]}
            name={labelMapping[field] || field}
          />
        ))}
      </BarChart>
    </ResponsiveContainer>
  );
}