'use client';

import React, { useState } from 'react';

interface DashboardToolbarProps {
  onClearCanvas: () => void;
  onSaveLayout: () => void;
  canvasBackgroundColor: string;
  onCanvasBackgroundColorChange: (color: string) => void;
}

/**
 * 대시보드 툴바 컴포넌트
 * - 전체 삭제, 레이아웃 저장 등 주요 액션 버튼
 */
export function DashboardToolbar({ onClearCanvas, onSaveLayout, canvasBackgroundColor, onCanvasBackgroundColorChange }: DashboardToolbarProps) {
  const [showColorPicker, setShowColorPicker] = useState(false);
  return (
    <div className="absolute top-5 left-5 bg-white p-3 rounded-lg shadow-lg z-50 flex gap-3">
      <button
        onClick={onClearCanvas}
        className="
          px-4 py-2 border border-gray-300 bg-white rounded-md
          text-sm font-medium text-gray-700
          hover:bg-gray-50 hover:border-gray-400
          transition-colors duration-200
        "
      >
        🗑️ 전체 삭제
      </button>
      
      <button
        onClick={onSaveLayout}
        className="
          px-4 py-2 border border-gray-300 bg-white rounded-md
          text-sm font-medium text-gray-700
          hover:bg-gray-50 hover:border-gray-400
          transition-colors duration-200
        "
      >
        💾 레이아웃 저장
      </button>

      {/* 캔버스 배경색 변경 버튼 */}
      <div className="relative">
        <button
          onClick={() => setShowColorPicker(!showColorPicker)}
          className="
            px-4 py-2 border border-gray-300 bg-white rounded-md
            text-sm font-medium text-gray-700
            hover:bg-gray-50 hover:border-gray-400
            transition-colors duration-200
            flex items-center gap-2
          "
        >
          🎨 캔버스 색상
          <div 
            className="w-4 h-4 rounded border border-gray-300"
            style={{ backgroundColor: canvasBackgroundColor }}
          />
        </button>

        {/* 색상 선택 패널 */}
        {showColorPicker && (
          <div className="absolute top-full left-0 mt-2 bg-white p-4 rounded-lg shadow-xl z-50 border border-gray-200 w-[280px]">
            <div className="flex items-center gap-3 mb-3">
              <input
                type="color"
                value={canvasBackgroundColor}
                onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
                className="h-10 w-16 border border-gray-300 rounded cursor-pointer"
              />
              <input
                type="text"
                value={canvasBackgroundColor}
                onChange={(e) => onCanvasBackgroundColorChange(e.target.value)}
                placeholder="#ffffff"
                className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded"
              />
            </div>

            {/* 프리셋 색상 */}
            <div className="grid grid-cols-6 gap-2 mb-3">
              {[
                '#ffffff', '#f9fafb', '#f3f4f6', '#e5e7eb',
                '#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b',
                '#10b981', '#06b6d4', '#6366f1', '#84cc16',
              ].map((color) => (
                <button
                  key={color}
                  onClick={() => onCanvasBackgroundColorChange(color)}
                  className={`h-8 rounded border-2 ${canvasBackgroundColor === color ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'}`}
                  style={{ backgroundColor: color }}
                  title={color}
                />
              ))}
            </div>

            <button
              onClick={() => setShowColorPicker(false)}
              className="w-full px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
            >
              닫기
            </button>
          </div>
        )}
      </div>
    </div>
  );
}