"use client";

import { MousePointer2, PenTool, Pencil, Spline } from "lucide-react";
import type { FerramentaDoPalco } from "./palco";

/*
  As ferramentas de desenho, na lateral do palco (uma embaixo da outra, como
  a caixa de ferramentas do Corel): escolher, Forma (mexer nos nós e nas
  curvas de qualquer desenho), caneta Bézier e desenho livre. Cada uma tem a
  sua letra; Esc volta para a de escolher.
*/

const FERRAMENTAS: Array<{ chave: FerramentaDoPalco; nome: string; dica: string; tecla: string; Icone: typeof MousePointer2 }> = [
  { chave: null, nome: "Escolher", dica: "Escolher e mover as peças", tecla: "V", Icone: MousePointer2 },
  { chave: "forma", nome: "Forma", dica: "Mexer nos nós e nas curvas de um desenho (dois cliques num desenho também liga)", tecla: "F", Icone: Spline },
  { chave: "caneta", nome: "Caneta", dica: "Clique põe nó reto; clique e arraste faz curva (Alt: canto)", tecla: "P", Icone: PenTool },
  { chave: "lapis", nome: "Desenho livre", dica: "Arraste para desenhar à mão", tecla: "L", Icone: Pencil },
];

export const TECLAS_DAS_FERRAMENTAS: Record<string, FerramentaDoPalco> = { v: null, f: "forma", p: "caneta", l: "lapis" };

export function BarraDeFerramentas({ ferramenta, aoEscolher }: { ferramenta: FerramentaDoPalco; aoEscolher: (f: FerramentaDoPalco) => void }) {
  return (
    <div className="pointer-events-auto flex flex-col gap-1 rounded-[14px] bg-white p-1.5 shadow-[0_2px_6px_rgba(20,11,43,0.06),0_10px_30px_rgba(20,11,43,0.10)] ring-1 ring-black/5" role="toolbar" aria-label="Ferramentas de desenho" aria-orientation="vertical">
      {FERRAMENTAS.map(({ chave, nome, dica, tecla, Icone }) => {
        const ativa = ferramenta === chave;
        return (
          <button
            key={nome}
            type="button"
            aria-pressed={ativa}
            aria-label={nome}
            title={`${nome} (${tecla}) — ${dica}`}
            onClick={() => aoEscolher(chave)}
            className={`group relative flex h-10 w-10 items-center justify-center rounded-[10px] transition ${ativa ? "bg-[#7C3AED] text-white shadow-[0_4px_12px_rgba(124,58,237,0.35)]" : "text-[#4B4760] hover:bg-[#F1EFF6] hover:text-[#1F1B2E]"}`}
          >
            <Icone size={19} strokeWidth={ativa ? 2.2 : 1.9} />
            <span className={`absolute bottom-[3px] right-[4px] text-[8.5px] font-bold leading-none ${ativa ? "text-white/80" : "text-[#A39DB8]"}`}>{tecla}</span>
          </button>
        );
      })}
    </div>
  );
}