import { useEffect } from "react";
import { MdPanTool, MdZoomIn, MdBrush, MdPerson } from "react-icons/md";
import type { Tool } from "../types";
import "./ControlPanel.css";

interface Props {
  tool: Tool;
  onToolChange: (t: Tool) => void;
}

const TOOLS: {
  id: Tool;
  icon: React.ReactNode;
  title: string;
  shortcut: string;
}[] = [
  {
    id: "pan",
    icon: <MdPanTool />,
    title: "Pan – drag to move the map",
    shortcut: "Shift+1",
  },
  {
    id: "zoom",
    icon: <MdZoomIn />,
    title: "Zoom – click to zoom in/out",
    shortcut: "Shift+2",
  },
  {
    id: "draw",
    icon: <MdBrush />,
    title:
      "Draw – left-click to paint, right-click to erase, Shift+click to fill",
    shortcut: "Shift+3",
  },
  {
    id: "token",
    icon: <MdPerson />,
    title: "Token – click to place, drag to move, right-click to delete",
    shortcut: "Shift+4",
  },
];

export default function ControlPanel({ tool, onToolChange }: Props) {
  // Keyboard shortcuts: Shift+1/2/3/4 for tools
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (
        e.target instanceof HTMLInputElement ||
        e.target instanceof HTMLTextAreaElement
      )
        return;
      if (!e.shiftKey) return;
      switch (e.key) {
        case "!": // Shift+1 on many layouts
        case "1":
          onToolChange("pan");
          break;
        case "@": // Shift+2
        case "2":
          onToolChange("zoom");
          break;
        case "#": // Shift+3
        case "3":
          onToolChange("draw");
          break;
        case "$": // Shift+4
        case "4":
          onToolChange("token");
          break;
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [onToolChange]);

  return (
    <div className="floating-panel">
      {TOOLS.map((t) => (
        <button
          key={t.id}
          className={`fp-tool-btn ${tool === t.id ? "active" : ""}`}
          onClick={() => onToolChange(t.id)}
          title={`${t.title} (${t.shortcut})`}
        >
          {t.icon}
        </button>
      ))}
    </div>
  );
}
