import {
  RiArrowRightLine,
  RiCheckboxBlankLine,
  RiCircleLine,
  RiCursorLine,
  RiEraserLine,
  RiFocus3Line,
  RiHand,
  RiImageAddLine,
  RiLockFill,
  RiLockUnlockLine,
  RiPencilLine,
  RiSubtractLine,
  RiText,
} from '@remixicon/react'

export const TOOLS = {
  HAND: 'hand',
  SELECT: 'select',
  RECTANGLE: 'rectangle',
  DIAMOND: 'diamond',
  ELLIPSE: 'ellipse',
  ARROW: 'arrow',
  LINE: 'line',
  DRAW: 'draw',
  TEXT: 'text',
  IMAGE: 'image',
  ERASER: 'eraser',
  LASER: 'laser',
}

function DiamondIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="12 3 21 12 12 21 3 12" />
    </svg>
  )
}

const TOOL_LIST = [
  { id: TOOLS.HAND, label: 'Mano (Desplazar)', icon: RiHand, keyHint: '1' },
  { id: TOOLS.SELECT, label: 'Selección', icon: RiCursorLine, keyHint: '2' },
  { id: TOOLS.RECTANGLE, label: 'Rectángulo', icon: RiCheckboxBlankLine, keyHint: '3' },
  { id: TOOLS.DIAMOND, label: 'Rombo', icon: DiamondIcon, keyHint: '4' },
  { id: TOOLS.ELLIPSE, label: 'Elipse / Círculo', icon: RiCircleLine, keyHint: '5' },
  { id: TOOLS.ARROW, label: 'Flecha', icon: RiArrowRightLine, keyHint: '6' },
  { id: TOOLS.LINE, label: 'Línea', icon: RiSubtractLine, keyHint: '7' },
  { id: TOOLS.DRAW, label: 'Dibujo libre', icon: RiPencilLine, keyHint: '8' },
  { id: TOOLS.TEXT, label: 'Texto', icon: RiText, keyHint: '9' },
  { id: TOOLS.IMAGE, label: 'Insertar imagen', icon: RiImageAddLine },
  { id: TOOLS.ERASER, label: 'Borrador', icon: RiEraserLine, keyHint: '0' },
  { id: TOOLS.LASER, label: 'Puntero láser', icon: RiFocus3Line },
]

function CanvasToolbar({ activeTool, setActiveTool, isLocked, setIsLocked, onImageUpload }) {
  const handleImageClick = () => {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = 'image/*'
    input.onchange = (e) => {
      const file = e.target.files?.[0]
      if (file && onImageUpload) {
        const reader = new FileReader()
        reader.onload = (event) => {
          onImageUpload(event.target.result)
        }
        reader.readAsDataURL(file)
      }
    }
    input.click()
  }

  return (
    <div className="absolute top-4 left-1/2 z-20 -translate-x-1/2 flex items-center gap-1 rounded-2xl border border-white/10 bg-[#1a1d28]/90 p-1.5 backdrop-blur-md shadow-2xl">
      {/* Lock toggle */}
      <button
        type="button"
        onClick={() => setIsLocked(!isLocked)}
        title={isLocked ? 'Mantener herramienta seleccionada' : 'Volver a selección tras dibujar'}
        className={`relative flex items-center justify-center rounded-xl p-2 text-xs transition-all ${
          isLocked
            ? 'bg-amber-500/20 text-amber-400 border border-amber-500/30'
            : 'text-slate-400 hover:bg-white/5 hover:text-white'
        }`}
      >
        {isLocked ? <RiLockFill size={18} /> : <RiLockUnlockLine size={18} />}
      </button>

      <div className="h-6 w-px bg-white/10 mx-0.5" />

      {/* Tools */}
      {TOOL_LIST.map((t) => {
        const Icon = t.icon
        const isActive = activeTool === t.id

        return (
          <button
            key={t.id}
            type="button"
            onClick={() => {
              if (t.id === TOOLS.IMAGE) {
                handleImageClick()
              } else {
                setActiveTool(t.id)
              }
            }}
            title={`${t.label} ${t.keyHint ? `(${t.keyHint})` : ''}`}
            className={`group relative flex items-center justify-center rounded-xl p-2.5 transition-all ${
              isActive
                ? 'bg-indigo-600/40 text-indigo-300 border border-indigo-500/50 shadow-md shadow-indigo-500/20 scale-105'
                : 'text-slate-300 hover:bg-white/10 hover:text-white'
            }`}
          >
            <Icon size={18} />
            {t.keyHint && (
              <span className="absolute bottom-0.5 right-1 text-[9px] font-mono opacity-60 group-hover:opacity-100">
                {t.keyHint}
              </span>
            )}
          </button>
        )
      })}
    </div>
  )
}

export default CanvasToolbar