import {
  ArrowLeft,
  CalendarClock,
  LayoutGrid,
  ListTree,
  Palette,
  Wand2,
} from "lucide-react";
import Button from "@/components/ui/Button";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

export type MenuBoardEditorTool = "general" | "design" | "templates" | "typography" | "background" | "content" | "schedule";

type Props = {
  activeTool: MenuBoardEditorTool;
  onToolChange: (tool: MenuBoardEditorTool) => void;
  onBack: () => void;
};

const tools: Array<{ id: MenuBoardEditorTool; label: "general" | "design" | "menuContent" | "schedule"; icon: React.ElementType }> = [
  { id: "general", label: "general", icon: LayoutGrid },
  { id: "design", label: "design", icon: Palette },
  { id: "content", label: "menuContent", icon: ListTree },
  { id: "schedule", label: "schedule", icon: CalendarClock },
];

export default function MenuBoardModuleSidebar({ activeTool, onToolChange, onBack }: Props) {
  const t = useMenuBoardText();
  return (
    <aside className="sticky top-24 flex max-h-[calc(100dvh-6rem)] min-h-0 self-start flex-col overflow-x-hidden rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)]">
      <div className="border-b border-[var(--border)] p-3">
        <Button type="button" variant="ghost" size="sm" onClick={onBack} className="-ml-2 w-full justify-start">
          <ArrowLeft className="h-4 w-4" />
          {t("menuBoards")}
        </Button>
      </div>

      <div className="border-b border-[var(--border)] p-3">
        <div className="flex items-center gap-2">
          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-[var(--accent-muted)] text-[var(--accent)]">
            <Wand2 className="h-4 w-4" />
          </span>
          <div className="min-w-0">
            <p className="text-[10px] font-medium uppercase tracking-wide text-[var(--text-faint)]">{t("tools")}</p>
            <h2 className="truncate text-sm font-semibold text-[var(--text)]">{t("menuStudio")}</h2>
          </div>
        </div>
      </div>

      <nav className="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
        {tools.map((tool) => {
          const Icon = tool.icon;
          const active = activeTool === tool.id;

          return (
            <button
              key={tool.id}
              type="button"
              title={t(tool.label)}
              aria-label={t(tool.label)}
              onClick={() => onToolChange(tool.id)}
              className={`flex w-full items-center gap-2 rounded-lg px-2 py-2.5 text-left text-sm font-medium transition ${
                active
                  ? "bg-[var(--accent)] text-[var(--accent-fg)] shadow-[0_0_20px_var(--accent-glow)]"
                  : "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
              }`}
            >
              <Icon className="h-4 w-4 shrink-0" />
              <span className="truncate">{t(tool.label)}</span>
            </button>
          );
        })}
      </nav>
    </aside>
  );
}