import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
import { classById } from "../app/characterCatalog";
import {
  ACTION_CONTROLS,
  ACTION_CONTROL_DEFINITIONS,
  ACTION_LAYERS,
  ACTION_LAYER_LABELS,
  actionBindingId,
  type ActionBindingControl,
  type ActionBindingLayer,
} from "../game/actionBindings";
import { useCombatStore } from "../game/combatStore";
import {
  abilityAtLevel,
  abilityTalentNodeId,
  defaultActionBarForCharacter,
  learnedAbilityRank,
  type AbilityDefinition,
} from "../game/abilityCatalog";
import { useGameStore } from "../game/store";
import { actionKeyLabel, assignedActionBarAbilityIds, assignDesktopAbility, resetDesktopAbilities, type UiLayout } from "../game/uiLayout";
import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
import { getControllerHeldTokens, subscribeControllerToken } from "../input/controller";
import { INPUT_ACTIONS, controllerBindingMatches, inputKeyForEvent } from "../input/keybinds";
import { getInputPreferences, isCapturingInput } from "../input/keybindRuntime";
import { useInputBindingLabels } from "../input/useInputBindingLabels";
import { useMenuController, type MenuAction } from "../input/useMenuController";
import { ControllerButton } from "./ControllerButton";
import { AbilityTooltipTarget, type AbilityTooltipData } from "./AbilityTooltip";

function AbilityBindingIcon({ icon, sigil, color }: { icon?: string; sigil: string; color: string }) {
  const [failed, setFailed] = useState(false);
  useEffect(() => setFailed(false), [icon]);
  return (
    <span className="ability-bindings__icon" style={{ "--ability-color": color } as CSSProperties} aria-hidden="true">
      {icon && !failed ? <img src={icon} alt="" onError={() => setFailed(true)} /> : sigil}
    </span>
  );
}

type RestoreScope = "layer" | "all";
type BindingLayout = "controller" | "wow";
type BindingControl = ActionBindingControl | number;

interface RestoreRequest {
  scope: RestoreScope;
  layout: BindingLayout;
  layer: ActionBindingLayer;
  bar: number;
  cancelFocusId: string;
  completeFocusId: string;
}

const layerControlId = (layer: ActionBindingLayer) => `binding-layer-${layer}`;
const barControlId = (bar: number) => `binding-bar-${bar}`;
const slotControlId = (control: BindingControl) => typeof control === "number" ? `binding-wow-slot-${control}` : `binding-slot-${control}`;
const choiceControlId = (abilityId: string) => `binding-choice-${abilityId}`;

const MAIN_ACTION_NEIGHBORS: Readonly<Record<string, NonNullable<MenuAction["neighbors"]>>> = {
  "binding-layout-controller": {
    up: "binding-restore-layer", down: "binding-layer-primary", left: "binding-layout-wow", right: "binding-layout-wow",
  },
  "binding-layout-wow": {
    up: "binding-restore-all", down: "binding-layer-tertiary", left: "binding-layout-controller", right: "binding-layout-controller",
  },
  "binding-layer-primary": {
    up: "binding-layout-controller", down: "binding-slot-dpad-left", left: "binding-layer-tertiary", right: "binding-layer-secondary",
  },
  "binding-layer-secondary": {
    up: "binding-layout-controller", down: "binding-slot-r1", left: "binding-layer-primary", right: "binding-layer-tertiary",
  },
  "binding-layer-tertiary": {
    up: "binding-layout-wow", down: "binding-slot-r2", left: "binding-layer-secondary", right: "binding-layer-primary",
  },
  "binding-slot-r1": {
    up: "binding-layer-secondary", down: "binding-slot-face-top", left: "binding-slot-dpad-right", right: "binding-slot-r2",
  },
  "binding-slot-r2": {
    up: "binding-layer-tertiary", down: "binding-slot-face-right", left: "binding-slot-r1", right: "binding-slot-dpad-left",
  },
  "binding-slot-dpad-left": {
    up: "binding-layer-primary", down: "binding-restore-layer", left: "binding-slot-face-right", right: "binding-slot-dpad-right",
  },
  "binding-slot-dpad-right": {
    up: "binding-slot-r1", down: "binding-restore-layer", left: "binding-slot-dpad-left", right: "binding-slot-face-left",
  },
  "binding-slot-face-top": {
    up: "binding-slot-r1", down: "binding-slot-face-bottom", left: "binding-slot-face-left", right: "binding-slot-face-right",
  },
  "binding-slot-face-right": {
    up: "binding-slot-face-top", down: "binding-slot-face-bottom", left: "binding-slot-face-left", right: "binding-slot-dpad-left",
  },
  "binding-slot-face-bottom": {
    up: "binding-slot-face-top", down: "binding-restore-all", left: "binding-slot-face-left", right: "binding-slot-face-right",
  },
  "binding-slot-face-left": {
    up: "binding-slot-face-top", down: "binding-slot-face-bottom", left: "binding-slot-dpad-right", right: "binding-slot-face-right",
  },
  "binding-restore-layer": {
    up: "binding-slot-dpad-left", down: "binding-layer-primary", left: "binding-restore-all", right: "binding-restore-all",
  },
  "binding-restore-all": {
    up: "binding-slot-face-bottom", down: "binding-layer-tertiary", left: "binding-restore-layer", right: "binding-restore-layer",
  },
};

function AbilityBindingsDialog({ onClose }: { onClose?: () => void }) {
  const panel = useRef<HTMLElement>(null);
  const keyLabel = useInputBindingLabels();
  const bindingChord = (layer: ActionBindingLayer, control: ActionBindingControl) => `${keyLabel("controller", `ability:${layer}:${control}`)} / ${keyLabel("pc", `ability:${layer}:${control}`)}`;
  const openOverlay = useGameStore((state) => state.openOverlay);
  const classId = useCombatStore((state) => state.classId);
  const secondaryClassId = useCombatStore((state) => state.secondaryClassId);
  const level = useCombatStore((state) => state.level);
  const abilities = useCombatStore((state) => state.abilities);
  const talentRanks = useCombatStore((state) => state.talentRanks);
  const tooltipData = (definition: AbilityDefinition | null | undefined): AbilityTooltipData | null => {
    if (!definition) return null;
    const talentRank = learnedAbilityRank(definition, talentRanks);
    const ability = abilityAtLevel(definition, level, talentRank);
    return {
      name: ability.name, description: ability.description, target: ability.target,
      resourceCost: ability.cost.amount, resourceLabel: ability.cost.resource.replace(/-/g, " "),
      cooldownSeconds: ability.cooldownMs / 1_000, castSeconds: ability.castTimeMs / 1_000,
      range: ability.range.max, lockedUntilLevel: ability.unlockLevel > level ? ability.unlockLevel : undefined,
      talentLocked: Boolean(abilityTalentNodeId(ability)) && !talentRank,
    };
  };
  const bindings = useCombatStore((state) => state.actionBindings);
  const pcLayout = useUiLayoutStore((state) => state.preferences.current.pc);
  const [layout, setLayout] = useState<BindingLayout>(() => currentUiDevice() === "pc" && pcLayout.wowBars ? "wow" : "controller");
  const [bar, setBar] = useState(0);
  const [layer, setLayer] = useState<ActionBindingLayer>("primary");
  const [editingControl, setEditingControl] = useState<BindingControl | null>(null);
  const [restoreRequest, setRestoreRequest] = useState<RestoreRequest | null>(null);
  const [notice, setNotice] = useState("Choose a button, then choose the ability it should use.");
  const classColor = classById(classId).color;
  const isWow = layout === "wow";
  const assignedIds = assignedActionBarAbilityIds(pcLayout, bindings, isWow);
  const isMissing = (ability: AbilityDefinition) => ability.unlockLevel <= level
    && (!abilityTalentNodeId(ability) || Boolean(learnedAbilityRank(ability, talentRanks)))
    && !assignedIds.has(ability.id);
  const assignment = (control: BindingControl) => typeof control === "number"
    ? pcLayout.bars[bar].slots[control].abilityId : bindings[actionBindingId(layer, control)];
  const controlLabel = (control: BindingControl) => typeof control === "number"
    ? `Bar ${bar + 1} · Button ${control + 1}${pcLayout.bars[bar].slots[control].key ? ` · ${actionKeyLabel(pcLayout.bars[bar].slots[control].key)}` : ""}`
    : bindingChord(layer, control);
  const editingAbilityId = editingControl !== null ? assignment(editingControl) : null;
  const pickerAbilities = useMemo(() => {
    const ordered = abilities
      .filter((ability) => !ability.passive)
      .sort((left, right) => left.unlockLevel - right.unlockLevel);
    return editingAbilityId
      ? [
          ...ordered.filter((ability) => ability.id === editingAbilityId),
          ...ordered.filter((ability) => ability.id !== editingAbilityId),
        ]
      : ordered;
  }, [abilities, editingAbilityId]);
  const close = onClose ?? (() => openOverlay("pause"));
  const saveWowLayout = (update: (current: UiLayout) => UiLayout) => {
    try {
      const ui = useUiLayoutStore.getState();
      ui.persist({ ...ui.preferences, current: { ...ui.preferences.current, pc: update(ui.preferences.current.pc) } });
      return true;
    } catch (error) {
      setNotice(error instanceof Error ? error.message : "Could not save WoW ability bindings.");
      return false;
    }
  };
  const setBinding = (control: BindingControl, abilityId: string | null) => {
    if (typeof control === "number") return saveWowLayout((current) => assignDesktopAbility(current, bar, control, abilityId));
    useCombatStore.getState().setActionBinding(layer, control, abilityId);
    return true;
  };
  const chooseLayout = (next: BindingLayout) => {
    setLayout(next); setEditingControl(null); setRestoreRequest(null);
    setNotice(`Choose a ${next === "wow" ? "WoW bar" : "controller"} button, then choose its ability.`);
    controller.select(`binding-layout-${next}`);
  };
  const chooseBar = (next: number) => {
    setBar(next); setEditingControl(null); setRestoreRequest(null);
    setNotice(`Bar ${next + 1} selected.`);
    controller.select(barControlId(next));
  };

  const chooseLayer = (next: ActionBindingLayer) => {
    setLayer(next);
    setEditingControl(null);
    setRestoreRequest(null);
    setNotice(`${ACTION_LAYER_LABELS[next]} layer selected.`);
    controller.select(layerControlId(next));
  };
  const beginEditing = (control: BindingControl) => {
    const abilityId = assignment(control);
    setEditingControl(control);
    setRestoreRequest(null);
    controller.select(abilityId ? choiceControlId(abilityId) : "binding-choice-empty");
  };
  const cancelEditing = () => {
    if (editingControl === null) return;
    const control = editingControl;
    setEditingControl(null);
    controller.select(slotControlId(control));
  };
  const assign = (abilityId: string | null) => {
    if (editingControl === null) return;
    const control = editingControl;
    const ability = abilityId ? abilities.find((candidate) => candidate.id === abilityId) ?? null : null;
    if (!setBinding(control, abilityId)) return;
    setNotice(`${controlLabel(control)}: ${ability?.name ?? "Empty"}. Saved.`);
    setEditingControl(null);
    controller.select(slotControlId(control));
  };
  const clearSelected = (control: BindingControl | null = editingControl) => {
    if (control === null) return;
    if (!setBinding(control, null)) return;
    setNotice(`${controlLabel(control)} cleared. Saved.`);
    setEditingControl(null);
    controller.select(slotControlId(control));
  };
  const requestRestore = (scope: RestoreScope, focusId: string) => {
    setRestoreRequest({
      scope,
      layout,
      layer,
      bar,
      cancelFocusId: focusId,
      completeFocusId: editingControl !== null ? slotControlId(editingControl) : focusId,
    });
    controller.select("binding-confirm-cancel");
  };
  const cancelRestore = () => {
    if (!restoreRequest) return;
    const focusId = restoreRequest.cancelFocusId;
    setRestoreRequest(null);
    controller.select(focusId);
  };
  const confirmRestore = () => {
    if (!restoreRequest) return;
    const request = restoreRequest;
    if (request.layout === "wow") {
      const defaults = defaultActionBarForCharacter(classId, secondaryClassId, level);
      if (!saveWowLayout((current) => resetDesktopAbilities(current, defaults, request.scope === "layer" ? request.bar : undefined))) return;
      setNotice(request.scope === "layer" ? `Bar ${request.bar + 1} abilities restored. Saved.` : "All WoW bar abilities restored. Saved.");
    } else if (request.scope === "layer") {
      useCombatStore.getState().resetActionBindingLayer(request.layer);
      setNotice(`${ACTION_LAYER_LABELS[request.layer]} layer restored.`);
    } else {
      useCombatStore.getState().resetActionBindings();
      setNotice("All controller ability bindings restored.");
    }
    setEditingControl(null);
    setRestoreRequest(null);
    controller.select(request.completeFocusId);
  };

  const actions = useMemo<MenuAction[]>(() => {
    if (restoreRequest) {
      return [
        {
          id: "binding-confirm-cancel",
          run: cancelRestore,
          neighbors: { left: "binding-confirm-restore", right: "binding-confirm-restore" },
        },
        {
          id: "binding-confirm-restore",
          run: confirmRestore,
          neighbors: { left: "binding-confirm-cancel", right: "binding-confirm-cancel" },
        },
      ];
    }
    if (editingControl !== null) {
      return [
        ...pickerAbilities.map((ability) => ({ id: choiceControlId(ability.id), run: () => assign(ability.id) })),
        { id: "binding-choice-empty", run: () => assign(null) },
      ];
    }
    return [
      ...(["controller", "wow"] as const).map((next) => ({
        id: `binding-layout-${next}`, run: () => chooseLayout(next),
        neighbors: isWow ? { up: "binding-restore-all", down: barControlId(bar), left: `binding-layout-${next === "wow" ? "controller" : "wow"}`, right: `binding-layout-${next === "wow" ? "controller" : "wow"}` } : MAIN_ACTION_NEIGHBORS[`binding-layout-${next}`],
      })),
      ...(isWow ? [
        ...pcLayout.bars.map((_, index) => ({ id: barControlId(index), run: () => chooseBar(index), neighbors: {
          up: "binding-layout-wow", down: slotControlId(index), left: barControlId((index + 4) % 5), right: barControlId((index + 1) % 5),
        } })),
        ...pcLayout.bars[bar].slots.map((_, slot) => ({ id: slotControlId(slot), run: () => beginEditing(slot), neighbors: {
          up: slot < 4 ? barControlId(bar) : slotControlId(slot - 4),
          down: slot >= 8 ? "binding-restore-layer" : slotControlId(slot + 4),
          left: slotControlId((slot + 11) % 12), right: slotControlId((slot + 1) % 12),
        } })),
      ] : [
        ...ACTION_LAYERS.map((nextLayer) => {
          const id = layerControlId(nextLayer);
          return { id, run: () => chooseLayer(nextLayer), neighbors: MAIN_ACTION_NEIGHBORS[id] };
        }),
        ...ACTION_CONTROLS.map((control) => {
          const id = slotControlId(control);
          return { id, run: () => beginEditing(control), neighbors: MAIN_ACTION_NEIGHBORS[id] };
        }),
      ]),
      {
        id: "binding-restore-layer",
        run: () => requestRestore("layer", "binding-restore-layer"),
        neighbors: isWow ? { up: slotControlId(8), down: "binding-layout-controller", left: "binding-restore-all", right: "binding-restore-all" } : MAIN_ACTION_NEIGHBORS["binding-restore-layer"],
      },
      {
        id: "binding-restore-all",
        run: () => requestRestore("all", "binding-restore-all"),
        neighbors: isWow ? { up: slotControlId(11), down: "binding-layout-wow", left: "binding-restore-layer", right: "binding-restore-layer" } : MAIN_ACTION_NEIGHBORS["binding-restore-all"],
      },
    ];
  }, [abilities, bindings, classId, secondaryClassId, level, editingControl, layer, layout, bar, pcLayout, pickerAbilities, restoreRequest]);
  const controller = useMenuController(actions, {
    columns: restoreRequest ? 2 : editingControl !== null ? 1 : isWow ? 4 : 3,
    initialId: restoreRequest
      ? "binding-confirm-cancel"
      : editingControl !== null
        ? editingAbilityId ? choiceControlId(editingAbilityId) : "binding-choice-empty"
        : isWow ? barControlId(bar) : layerControlId(layer),
    onBack: restoreRequest ? cancelRestore : editingControl !== null ? cancelEditing : close,
  });

  useEffect(() => {
    panel.current?.querySelector(".is-controller-selected")?.scrollIntoView({ block: "nearest" });
  }, [controller.selectedId]);

  useEffect(() => {
    const run = (id: string | undefined) => {
      if (restoreRequest) return;
      if (id === "editor-layer-2") { if (isWow) chooseBar(1); else chooseLayer("secondary"); }
      else if (id === "editor-layer-3") { if (isWow) chooseBar(2); else chooseLayer("tertiary"); }
      else if (id === "editor-clear") {
        if (editingControl !== null) clearSelected(editingControl);
        else {
          const prefix = isWow ? "binding-wow-slot-" : "binding-slot-";
          if (controller.selectedId.startsWith(prefix)) clearSelected(isWow ? Number(controller.selectedId.slice(prefix.length)) : controller.selectedId.slice(prefix.length) as ActionBindingControl);
        }
      } else if (id === "editor-reset") requestRestore("layer", controller.selectedId);
    };
    const unsubscribe = subscribeControllerToken(({ token, repeat, pressed }) => {
      if (pressed === false || repeat || isCapturingInput()) return;
      run(INPUT_ACTIONS.find((entry) => entry.context === "ability-editor" && controllerBindingMatches(getInputPreferences().controller[entry.id], token, getControllerHeldTokens()))?.id);
    });
    const onKey = (event: KeyboardEvent) => {
      if (event.repeat || event.defaultPrevented || isCapturingInput() || (event.target instanceof Element && event.target.closest("input, textarea, select, [contenteditable='true']"))) return;
      const key = inputKeyForEvent(event);
      const id = key && INPUT_ACTIONS.find((entry) => entry.context === "ability-editor" && getInputPreferences().pc[entry.id] === key)?.id;
      if (id) { event.preventDefault(); run(id); }
    };
    window.addEventListener("keydown", onKey);
    return () => { unsubscribe(); window.removeEventListener("keydown", onKey); };
  }, [controller.selectedId, editingControl, layer, layout, bar, pcLayout, restoreRequest]);

  const bindingSlot = (control: ActionBindingControl) => {
    const definition = ACTION_CONTROL_DEFINITIONS[control];
    const abilityId = bindings[actionBindingId(layer, control)];
    const ability = abilityId ? abilities.find((candidate) => candidate.id === abilityId) ?? null : null;
    const locked = Boolean(ability && ability.unlockLevel > level);
    return (
      <AbilityTooltipTarget key={control} ability={tooltipData(ability)} bindingLabel={bindingChord(layer, control)}>
      <ControllerButton
        key={control}
        controlId={slotControlId(control)}
        selectedId={controller.selectedId}
        select={controller.select}
        type="button"
        className={`ability-binding-slot ability-binding-slot--${control} ${editingControl === control ? "is-editing" : ""} ${locked ? "is-locked" : ""}`}
        aria-label={`${bindingChord(layer, control)}: ${ability?.name ?? "Empty"}${locked ? `, unlocks at level ${ability!.unlockLevel}` : ""}`}
        aria-pressed={editingControl === control}
        onClick={() => beginEditing(control)}
      >
        <kbd>{keyLabel("controller", `ability:${layer}:${control}`)}</kbd>
        {ability
          ? <AbilityBindingIcon icon={ability.icon} sigil={ability.sigil} color={classColor} />
          : <span className="ability-bindings__empty" aria-hidden="true">+</span>}
        <span><strong>{definition.label}</strong><small>{locked ? `${ability!.name} · Level ${ability!.unlockLevel}` : ability?.name ?? "Empty"}</small></span>
      </ControllerButton>
      </AbilityTooltipTarget>
    );
  };

  return (
    <div className="modal-backdrop game-panel-backdrop" role="presentation">
      <section ref={panel} className="game-panel ability-bindings-panel" role="dialog" aria-modal="true" aria-labelledby="ability-bindings-title">
        <header className="game-panel__header">
          <div>
            <p className="eyebrow">{isWow ? "WoW loadout · 5 bars · 60 customizable slots" : "Controller loadout · 24 customizable slots"}</p>
            <h2 id="ability-bindings-title">Ability controls</h2>
          </div>
          <button type="button" className="icon-button" onClick={close} aria-label="Close button assignments">×</button>
        </header>

        <nav className="ability-bindings__layouts" aria-label="Action bar style">
          {(["controller", "wow"] as const).map((next) => (
            <ControllerButton key={next} controlId={`binding-layout-${next}`} selectedId={controller.selectedId} select={controller.select}
              type="button" aria-pressed={layout === next} className={layout === next ? "is-active" : ""} onClick={() => chooseLayout(next)}>
              {next === "wow" ? "WoW bars" : "Controller bars"}
            </ControllerButton>
          ))}
        </nav>

        {isWow ? <nav className="ability-bindings__layers ability-bindings__bars" aria-label="WoW action bars">
          {pcLayout.bars.map((_, index) => (
            <ControllerButton key={index} controlId={barControlId(index)} selectedId={controller.selectedId} select={controller.select}
              type="button" aria-pressed={bar === index} className={bar === index ? "is-active" : ""} onClick={() => chooseBar(index)}>
              <kbd>{index + 1}</kbd><span><strong>Bar {index + 1}</strong><small>{pcLayout.wowBars && index < pcLayout.barCount ? "Enabled" : "Inactive"}</small></span>
            </ControllerButton>
          ))}
        </nav> : <nav className="ability-bindings__layers" aria-label="Ability binding layers">
          {ACTION_LAYERS.map((nextLayer) => (
            <ControllerButton
              key={nextLayer}
              controlId={layerControlId(nextLayer)}
              selectedId={controller.selectedId}
              select={controller.select}
              type="button"
              className={layer === nextLayer ? "is-active" : ""}
              aria-pressed={layer === nextLayer}
              onClick={() => chooseLayer(nextLayer)}
            >
              <kbd>{nextLayer === "primary" ? "—" : ACTION_LAYER_LABELS[nextLayer]}</kbd>
              <span><strong>{ACTION_LAYER_LABELS[nextLayer]}</strong><small>{nextLayer === "primary" ? "No modifier" : `Hold ${ACTION_LAYER_LABELS[nextLayer]}`}</small></span>
            </ControllerButton>
          ))}
        </nav>}

        <div className="ability-bindings__layout">
          {isWow ? <section className="ability-bindings__wow" aria-label={`Bar ${bar + 1} ability assignments`}>
            <div className="ability-bindings__wow-slots">
              {pcLayout.bars[bar].slots.map((slot, index) => {
                const ability = abilities.find((candidate) => candidate.id === slot.abilityId);
                const locked = Boolean(ability && ability.unlockLevel > level);
                const name = ability?.name ?? (slot.abilityId ? "Unavailable for this character" : "Empty");
                return <AbilityTooltipTarget key={index} ability={tooltipData(ability)} bindingLabel={controlLabel(index)}>
                  <ControllerButton controlId={slotControlId(index)} selectedId={controller.selectedId} select={controller.select}
                  type="button" className={`ability-binding-slot ${locked ? "is-locked" : ""} ${editingControl === index ? "is-editing" : ""}`}
                  aria-label={`${controlLabel(index)}: ${name}${locked ? `, unlocks at level ${ability!.unlockLevel}` : ""}`}
                  aria-pressed={editingControl === index} title={`${controlLabel(index)}: ${name}`} onClick={() => beginEditing(index)}>
                  <kbd>{actionKeyLabel(slot.key) || "—"}</kbd>
                  {ability ? <AbilityBindingIcon icon={ability.icon} sigil={ability.sigil} color={classColor} /> : <span className="ability-bindings__empty" aria-hidden="true">+</span>}
                  <span><strong>Button {index + 1}</strong><small>{locked ? `${name} · Level ${ability!.unlockLevel}` : name}</small></span>
                </ControllerButton></AbilityTooltipTarget>;
              })}
            </div>
            <p className="ability-bindings__wow-note">{!pcLayout.wowBars ? "Enable WoW action bars in UI layout to use these assignments on PC." : bar >= pcLayout.barCount ? "This bar is inactive. Increase the visible bar count in UI layout to use it." : "Choose a button to change its ability. Changes save immediately."}</p>
            <div className="ability-bindings__restore">
              <ControllerButton controlId="binding-restore-layer" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("layer", "binding-restore-layer")}>Restore Bar {bar + 1}</ControllerButton>
              <ControllerButton controlId="binding-restore-all" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("all", "binding-restore-all")}>Restore all WoW bars</ControllerButton>
            </div>
          </section> : <section className="ability-bindings__diagram" aria-label={`${ACTION_LAYER_LABELS[layer]} controller layout`}>
            <div className="ability-bindings__shoulders">
              {bindingSlot("r1")}
              {bindingSlot("r2")}
            </div>
            <div className="ability-bindings__dpad" aria-label="D-pad abilities">
              {bindingSlot("dpad-left")}
              <span aria-hidden="true">+</span>
              {bindingSlot("dpad-right")}
            </div>
            <div className="ability-bindings__face" aria-label="Face button abilities">
              {bindingSlot("face-top")}
              {bindingSlot("face-right")}
              {bindingSlot("face-bottom")}
              {bindingSlot("face-left")}
            </div>
            <div className="ability-bindings__restore">
              <ControllerButton controlId="binding-restore-layer" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("layer", "binding-restore-layer")}>Restore {ACTION_LAYER_LABELS[layer]}</ControllerButton>
              <ControllerButton controlId="binding-restore-all" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("all", "binding-restore-all")}>Restore all</ControllerButton>
            </div>
          </section>}

          <aside className="ability-bindings__picker" aria-live="polite">
            {restoreRequest ? (
              <>
                <p className="eyebrow">Confirm {restoreRequest.layout === "wow" ? "WoW bar" : "controller"} reset</p>
                <h3>{restoreRequest.layout === "wow"
                  ? restoreRequest.scope === "all" ? "Restore all WoW bar abilities?" : `Restore Bar ${restoreRequest.bar + 1} abilities?`
                  : restoreRequest.scope === "all"
                  ? "Restore all ability controls?"
                  : `Restore the ${ACTION_LAYER_LABELS[restoreRequest.layer]} layer?`}</h3>
                <p className="ability-bindings__confirm-warning">{restoreRequest.layout === "wow"
                  ? `This replaces ${restoreRequest.scope === "all" ? "all 60 WoW slots" : "this bar's 12 slots"} with the class defaults. Keyboard shortcuts and bar layout are kept.`
                  : restoreRequest.scope === "all"
                  ? "This replaces every customized controller slot with the class defaults."
                  : `This replaces all eight ${ACTION_LAYER_LABELS[restoreRequest.layer]} slots with their class defaults.`}</p>
                <div className="ability-bindings__choices ability-bindings__choices--confirm">
                  <ControllerButton controlId="binding-confirm-cancel" selectedId={controller.selectedId} select={controller.select} type="button" onClick={cancelRestore}>
                    <span className="ability-bindings__empty" aria-hidden="true">○</span>
                    <span><strong>Cancel</strong><small>Keep current bindings</small></span>
                  </ControllerButton>
                  <ControllerButton controlId="binding-confirm-restore" selectedId={controller.selectedId} select={controller.select} type="button" className="is-danger" onClick={confirmRestore}>
                    <span className="ability-bindings__empty" aria-hidden="true">△</span>
                    <span><strong>Restore defaults</strong><small>This cannot be undone</small></span>
                  </ControllerButton>
                </div>
              </>
            ) : editingControl !== null ? (
              <>
                <p className="eyebrow">Assign {controlLabel(editingControl)}</p>
                <h3>Choose an ability</h3>
                <p className="action-bar-missing-legend">Light blue: missing from action bars</p>
                <div className="ability-bindings__choices">
                  {pickerAbilities.map((ability) => (
                    <AbilityTooltipTarget key={ability.id} ability={tooltipData(ability)}>
                    <ControllerButton controlId={choiceControlId(ability.id)} selectedId={controller.selectedId} select={controller.select} type="button" className={`${ability.id === editingAbilityId ? "is-current" : ""} ${ability.unlockLevel > level ? "is-locked" : ""} ${isMissing(ability) ? "is-missing-from-bars" : ""}`} aria-label={`${ability.name}${isMissing(ability) ? ", missing from action bars" : ""}`} onClick={() => assign(ability.id)}>
                      <AbilityBindingIcon icon={ability.icon} sigil={ability.sigil} color={classColor} />
                      <span><strong>{ability.name}</strong><small>{ability.unlockLevel > level ? `Unlocks at level ${ability.unlockLevel}` : ability.id === editingAbilityId ? "Current assignment" : ability.target === "friendly" ? "Friendly / self" : ability.target}</small></span>
                    </ControllerButton>
                    </AbilityTooltipTarget>
                  ))}
                  <ControllerButton controlId="binding-choice-empty" selectedId={controller.selectedId} select={controller.select} type="button" className={editingAbilityId === null ? "is-current" : ""} onClick={() => assign(null)}>
                    <span className="ability-bindings__empty" aria-hidden="true">×</span>
                    <span><strong>Leave empty</strong><small>{editingAbilityId === null ? "Current assignment" : "Remove the current assignment"}</small></span>
                  </ControllerButton>
                </div>
              </>
            ) : (
              <>
                <p className="eyebrow">{isWow ? `Bar ${bar + 1}` : `${ACTION_LAYER_LABELS[layer]} layer`}</p>
                <h3>Select a {isWow ? "WoW bar" : "controller"} button</h3>
                <p>{isWow ? "Each WoW bar has 12 buttons. Assign abilities on any of the five bars, including inactive bars. Change keyboard shortcuts in Options → Keybinds." : "Each layer has the four face buttons, R1, R2, and both horizontal D-pad directions. Abilities may be reused on more than one button."}</p>
              </>
            )}
          </aside>
        </div>

        <p className="ability-bindings__notice" role="status">{notice}</p>
        <footer className="game-panel__footer">
          {restoreRequest
            ? <><span><kbd>{keyLabel("controller", "menu-confirm")}</kbd> Choose</span><span><kbd>{keyLabel("controller", "menu-back")}</kbd> Cancel</span></>
            : <><span><kbd>{keyLabel("controller", "menu-confirm")}</kbd> Assign</span><span><kbd>{keyLabel("controller", "editor-clear")}</kbd> Clear</span><span><kbd>{keyLabel("controller", "menu-back")}</kbd> Back</span><span><kbd>{keyLabel("controller", "editor-reset")}</kbd> Restore {isWow ? "bar" : "layer"}</span></>}
        </footer>
      </section>
    </div>
  );
}

export function AbilityBindingsPanel({ open, onClose }: { open?: boolean; onClose?: () => void } = {}) {
  const storeOpen = useGameStore((state) => state.overlay === "bindings");
  return (open ?? storeOpen) ? <AbilityBindingsDialog onClose={onClose} /> : null;
}