"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BarChart3, LineChart, PieChart } from "lucide-react";

// 차트 컴포넌트 렌더러
const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    title = "차트 제목",
    chartType = "bar", // bar, line, pie
    data = [],
    style = {},
  } = config;

  const getChartIcon = () => {
    switch (chartType) {
      case "line":
        return <LineChart className="h-8 w-8 text-blue-500" />;
      case "pie":
        return <PieChart className="h-8 w-8 text-green-500" />;
      default:
        return <BarChart3 className="h-8 w-8 text-purple-500" />;
    }
  };

  const getChartTypeName = () => {
    switch (chartType) {
      case "line":
        return "라인 차트";
      case "pie":
        return "파이 차트";
      default:
        return "바 차트";
    }
  };

  return (
    <Card className="h-full w-full" style={style}>
      <CardHeader>
        <CardTitle className="text-lg">{title}</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center">
        <div className="text-center">
          {getChartIcon()}
          <div className="mt-2 text-sm text-gray-600">{getChartTypeName()}</div>
          <div className="mt-1 text-xs text-gray-400">미리보기 모드</div>
          {data.length > 0 && <div className="mt-2 text-xs text-gray-500">데이터 {data.length}개 항목</div>}
        </div>
      </CardContent>
    </Card>
  );
};

// 레지스트리에 등록
componentRegistry.register("chart", ChartRenderer);
componentRegistry.register("chart-basic", ChartRenderer);

export { ChartRenderer };