ERP-node/frontend/components/admin/dashboard/DashboardSidebar.tsx

'use client';

import React from 'react';
import { DragData, ElementType, ElementSubtype } from './types';

/**
 * 대시보드 사이드바 컴포넌트
 * - 드래그 가능한 차트/위젯 목록
 * - 카테고리별 구분
 */
export function DashboardSidebar() {
  // 드래그 시작 처리
  const handleDragStart = (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => {
    const dragData: DragData = { type, subtype };
    e.dataTransfer.setData('application/json', JSON.stringify(dragData));
    e.dataTransfer.effectAllowed = 'copy';
  };

  return (
    <div className="w-80 bg-white border-l border-gray-200 overflow-y-auto p-5">
      {/* 차트 섹션 */}
      <div className="mb-8">
        <h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
          📊 차트 종류
        </h3>
        
        <div className="space-y-3">
          <DraggableItem
            icon="📊"
            title="바 차트"
            type="chart"
            subtype="bar"
            onDragStart={handleDragStart}
            className="border-l-4 border-primary"
          />
          <DraggableItem
            icon="📚"
            title="누적 바 차트"
            type="chart"
            subtype="stacked-bar"
            onDragStart={handleDragStart}
            className="border-l-4 border-blue-600"
          />
          <DraggableItem
            icon="📈"
            title="꺾은선 차트"
            type="chart"
            subtype="line"
            onDragStart={handleDragStart}
            className="border-l-4 border-green-500"
          />
          <DraggableItem
            icon="📉"
            title="영역 차트"
            type="chart"
            subtype="area"
            onDragStart={handleDragStart}
            className="border-l-4 border-green-600"
          />
          <DraggableItem
            icon="🥧"
            title="원형 차트"
            type="chart"
            subtype="pie"
            onDragStart={handleDragStart}
            className="border-l-4 border-purple-500"
          />
          <DraggableItem
            icon="🍩"
            title="도넛 차트"
            type="chart"
            subtype="donut"
            onDragStart={handleDragStart}
            className="border-l-4 border-purple-600"
          />
          <DraggableItem
            icon="📊📈"
            title="콤보 차트"
            type="chart"
            subtype="combo"
            onDragStart={handleDragStart}
            className="border-l-4 border-indigo-500"
          />
        </div>
      </div>

      {/* 위젯 섹션 */}
      <div className="mb-8">
        <h3 className="text-gray-800 mb-4 pb-3 border-b-2 border-green-500 font-semibold text-lg">
          🔧 위젯 종류
        </h3>
        
        <div className="space-y-3">
          <DraggableItem
            icon="💱"
            title="환율 위젯"
            type="widget"
            subtype="exchange"
            onDragStart={handleDragStart}
            className="border-l-4 border-orange-500"
          />
          <DraggableItem
            icon="☁️"
            title="날씨 위젯"
            type="widget"
            subtype="weather"
            onDragStart={handleDragStart}
            className="border-l-4 border-orange-500"
          />
        </div>
      </div>
    </div>
  );
}

interface DraggableItemProps {
  icon: string;
  title: string;
  type: ElementType;
  subtype: ElementSubtype;
  className?: string;
  onDragStart: (e: React.DragEvent, type: ElementType, subtype: ElementSubtype) => void;
}

/**
 * 드래그 가능한 아이템 컴포넌트
 */
function DraggableItem({ icon, title, type, subtype, className = '', onDragStart }: DraggableItemProps) {
  return (
    <div
      draggable
      className={`
        p-4 bg-white border-2 border-gray-200 rounded-lg
        cursor-move transition-all duration-200
        hover:bg-gray-50 hover:border-green-500 hover:translate-x-1
        text-center text-sm font-medium
        ${className}
      `}
      onDragStart={(e) => onDragStart(e, type, subtype)}
    >
      <span className="text-lg mr-2">{icon}</span>
      {title}
    </div>
  );
}