import React from 'react';
import { MousePointer2, Square, MoveRight, Type, Download, Trash2, ImagePlus, Copy } from 'lucide-react';
import { ToolType } from '../types';

interface ToolbarProps {
  currentTool: ToolType;
  setTool: (tool: ToolType) => void;
  onExport: () => void;
  onCopy: () => void;
  onClear: () => void;
  hasImage: boolean;
  onDeleteSelected: () => void;
  hasSelection: boolean;
}

const Toolbar: React.FC<ToolbarProps> = ({
  currentTool,
  setTool,
  onExport,
  onCopy,
  onClear,
  hasImage,
  onDeleteSelected,
  hasSelection,
}) => {
  const tools = [
    { id: 'select', icon: MousePointer2, label: 'Select' },
    { id: 'rect', icon: Square, label: 'Box' },
    { id: 'arrow', icon: MoveRight, label: 'Arrow' },
    { id: 'text', icon: Type, label: 'Text' },
  ] as const;

  return (
    <div className="bg-amber-100 border-r-4 border-amber-900 w-20 flex flex-col items-center py-6 gap-4 z-20 shrink-0">
      <div className="flex flex-col gap-3 w-full px-2">
        {tools.map((tool) => (
          <button
            key={tool.id}
            onClick={() => setTool(tool.id)}
            className={`p-3 rounded-none border-2 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none ${
              currentTool === tool.id
                ? 'bg-cyan-400 border-black text-black'
                : 'bg-white border-amber-900 text-amber-900 hover:bg-amber-50'
            }`}
            title={tool.label}
          >
            <tool.icon size={24} strokeWidth={2.5} />
          </button>
        ))}
      </div>

      <div className="h-1 w-12 bg-amber-900/20 my-2 rounded-full" />

      <div className="flex flex-col gap-3 w-full px-2">
        <button
          onClick={onDeleteSelected}
          disabled={!hasSelection}
          className={`p-3 border-2 rounded-none transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(190,24,93,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(190,24,93,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none ${
            !hasSelection
              ? 'bg-gray-100 border-gray-400 text-gray-400 cursor-not-allowed shadow-none'
              : 'bg-pink-400 border-black text-black hover:bg-pink-300'
          }`}
          title="Delete Selected"
        >
          <Trash2 size={24} strokeWidth={2.5} />
        </button>

        <button
          onClick={onClear}
          disabled={!hasImage}
          className="p-3 border-2 rounded-none bg-white border-amber-900 text-amber-900 hover:bg-red-50 hover:text-red-700 hover:border-red-700 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
          title="Clear All"
        >
          <ImagePlus size={24} strokeWidth={2.5} /> 
        </button>

        <div className="mt-auto flex flex-col gap-3 w-full">
            <button
            onClick={onCopy}
            disabled={!hasImage}
            className="p-3 border-2 rounded-none bg-violet-400 border-black text-black hover:bg-violet-300 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
            title="Copy to Clipboard"
            >
            <Copy size={24} strokeWidth={2.5} />
            </button>

            <button
            onClick={onExport}
            disabled={!hasImage}
            className="p-3 border-2 rounded-none bg-lime-400 border-black text-black hover:bg-lime-300 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
            title="Export PNG"
            >
            <Download size={24} strokeWidth={2.5} />
            </button>
        </div>
      </div>
    </div>
  );
};

export default Toolbar;