import React from 'react';
import { MousePointer2, PencilLine, Hexagon, Square, Circle, Minus, Combine, Scissors, Wand2, Undo, Redo, Crosshair, PlusCircle, MinusCircle, SquareDashed } from 'lucide-react';
import { cn } from '../lib/utils';

interface ToolsPaletteProps {
  activeTool: string;
  setActiveTool: (tool: string) => void;
  onTriggerAI?: () => void;
  onUndo?: () => void;
  onRedo?: () => void;
  canUndo?: boolean;
  canRedo?: boolean;
}

export function ToolsPalette({
  activeTool,
  setActiveTool,
  onTriggerAI,
  onUndo,
  onRedo,
  canUndo = false,
  canRedo = false,
}: ToolsPaletteProps) {
  const tools = [
    { id: 'move', icon: MousePointer2, label: '拖拽 / 选择 (V)' },
    { id: 'edit_polygon', icon: PencilLine, label: '调整多边形 (E)' },
    { id: 'create_polygon', icon: Hexagon, label: '创建多边形 (P)' },
    { id: 'create_rectangle', icon: Square, label: '创建矩形 (R)' },
    { id: 'create_circle', icon: Circle, label: '创建圆 (O)' },
    { id: 'create_point', icon: Crosshair, label: '创建点 (C)' },
    { id: 'create_line', icon: Minus, label: '创建线段 (L)' },
    { id: 'area_merge', icon: Combine, label: '区域合并 (+)' },
    { id: 'area_remove', icon: Scissors, label: '重叠区域去除 (-)' },
  ];

  const aiTools = [
    { id: 'point_pos', icon: PlusCircle, label: '正向选点 (SAM)', color: 'text-green-400', bg: 'bg-green-500/10', border: 'border-green-500/30' },
    { id: 'point_neg', icon: MinusCircle, label: '反向选点 (SAM)', color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/30' },
    { id: 'box_select', icon: SquareDashed, label: '边界框选 (SAM)', color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/30' },
  ];

  return (
    <div className="w-12 bg-[#0d0d0d] border-r border-white/5 flex flex-col items-center py-4 shrink-0 z-10">
      <div className="flex flex-col gap-4 w-full px-2">
        {tools.map(tool => {
          const Icon = tool.icon;
          const isActive = activeTool === tool.id;
          return (
            <button
              key={tool.id}
              onClick={() => setActiveTool(tool.id)}
              title={tool.label}
              className={cn(
                "w-10 h-10 rounded-lg flex items-center justify-center transition-all p-2",
                isActive 
                  ? (tool.id.includes('remove') ? "bg-red-500/10 text-red-500" 
                    : tool.id.includes('merge') ? "bg-green-500/10 text-green-500"
                    : "bg-white/10 text-white")
                  : "text-gray-500 hover:bg-white/5 hover:text-white"
              )}
            >
              <Icon size={18} strokeWidth={isActive ? 2.5 : 2} />
            </button>
          )
        })}

        <div className="w-full h-px bg-white/10 my-1" />

        {aiTools.map(tool => {
          const Icon = tool.icon;
          const isActive = activeTool === tool.id;
          return (
            <button
              key={tool.id}
              onClick={() => setActiveTool(tool.id)}
              title={tool.label}
              className={cn(
                "w-10 h-10 rounded-lg flex items-center justify-center transition-all p-2 border",
                isActive 
                  ? `${tool.bg} ${tool.color} ${tool.border} shadow-[0_0_10px_rgba(255,255,255,0.05)]`
                  : "text-gray-500 hover:bg-white/5 hover:text-white border-transparent"
              )}
            >
              <Icon size={18} strokeWidth={isActive ? 2.5 : 2} />
            </button>
          )
        })}

        <button
          onClick={() => {
            setActiveTool('sam_trigger');
            if (onTriggerAI) onTriggerAI();
          }}
          title="打开 AI 智能分割"
          className={cn(
             "w-10 h-10 rounded-lg flex items-center justify-center transition-all",
             activeTool === 'sam_trigger'
              ? "bg-cyan-600 text-white shadow-lg shadow-cyan-900/20"
              : "text-gray-500 hover:bg-white/5"
          )}
        >
          <Wand2 size={18} strokeWidth={2} />
        </button>

        <div className="w-full h-px bg-white/10 my-1" />
        
        <button
          onClick={onUndo}
          disabled={!canUndo}
          className="w-10 h-10 rounded text-gray-500 hover:bg-white/5 hover:text-white flex items-center justify-center transition-colors disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-gray-500 disabled:cursor-not-allowed"
          title="撤销操作 (Ctrl+Z)"
        >
          <Undo size={18} />
        </button>
        <button
          onClick={onRedo}
          disabled={!canRedo}
          className="w-10 h-10 rounded text-gray-500 hover:bg-white/5 hover:text-white flex items-center justify-center transition-colors disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-gray-500 disabled:cursor-not-allowed"
          title="重做操作 (Ctrl+Shift+Z)"
        >
          <Redo size={18} />
        </button>

      </div>
    </div>
  );
}
