"use client";

import React from "react";
import { BarChart } from "./BarChart";
import { HorizontalBarChart } from "./HorizontalBarChart";
import { LineChart } from "./LineChart";
import { AreaChart } from "./AreaChart";
import { PieChart } from "./PieChart";
import { StackedBarChart } from "./StackedBarChart";
import { ComboChart } from "./ComboChart";
import { ChartConfig, ChartData, ElementSubtype } from "../types";

interface ChartProps {
  chartType: ElementSubtype;
  data: ChartData;
  config: ChartConfig;
  width?: number;
  height?: number;
}

/**
 * 통합 차트 컴포넌트
 * - 차트 타입에 따라 적절한 D3 차트 컴포넌트를 렌더링
 */
export function Chart({ chartType, data, config, width, height }: ChartProps) {
  // 데이터가 없으면 placeholder 표시
  if (!data || !data.labels.length || !data.datasets.length) {
    return (
      <div
        className="flex items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted"
        style={{ width, height }}
      >
        <div className="text-center">
          <div className="mb-2 text-4xl">📊</div>
          <div className="text-sm font-medium text-foreground">데이터를 설정하세요</div>
          <div className="mt-1 text-xs text-muted-foreground">차트 설정에서 데이터 소스와 축을 설정하세요</div>
        </div>
      </div>
    );
  }

  // 차트 타입에 따라 렌더링
  switch (chartType) {
    case "bar":
      return <BarChart data={data} config={config} width={width} height={height} />;

    case "horizontal-bar":
      return <HorizontalBarChart data={data} config={config} width={width} height={height} />;

    case "line":
      return <LineChart data={data} config={config} width={width} height={height} />;

    case "area":
      return <AreaChart data={data} config={config} width={width} height={height} />;

    case "pie":
      return <PieChart data={data} config={config} width={width} height={height} isDonut={false} />;

    case "donut":
      return <PieChart data={data} config={config} width={width} height={height} isDonut={true} />;

    case "stacked-bar":
      return <StackedBarChart data={data} config={config} width={width} height={height} />;

    case "combo":
      return <ComboChart data={data} config={config} width={width} height={height} />;

    default:
      return (
        <div
          className="flex items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted"
          style={{ width, height }}
        >
          <div className="text-center">
            <div className="mb-2 text-4xl">❓</div>
            <div className="text-sm font-medium text-foreground">지원하지 않는 차트 타입</div>
            <div className="mt-1 text-xs text-muted-foreground">{chartType}</div>
          </div>
        </div>
      );
  }
}