import { lazy, Suspense, useEffect, useState } from "react";
import { classById } from "../app/characterCatalog";
import { beginMainMenuCharacterEditing } from "../app/mainMenuCharacterEditing";
import { selectedCharacter, useShellStore } from "../app/shellStore";
import { DualDisplayFrame } from "../components/DualDisplayFrame";
import { AbilityBindingsPanel } from "./AbilityBindingsPanel";
import { BrandMark, FrontSurface } from "./FrontSurface";
import { KeybindsPanel } from "./KeybindsPanel";
import { RomSkillsPanel } from "./RomSkillsPanel";
import { loadTalentGameplayPanel } from "./talentGameplayResources";
import "./mainMenuCharacterEditor.css";

const TalentGameplayPanel = lazy(loadTalentGameplayPanel);
export type MainMenuEditor = "talents" | "keybinds" | "bindings";

export function MainMenuCharacterEditor({ editor, onClose }: {
  editor: MainMenuEditor;
  onClose: () => void;
}) {
  const character = useShellStore(selectedCharacter);
  const ownerId = useShellStore((state) => state.session?.ownerId);
  const notice = useShellStore((state) => state.notice);
  const characterKey = `${ownerId ?? ""}:${character?.id ?? ""}`;
  const [readyKey, setReadyKey] = useState<string | null>(null);

  useEffect(() => {
    const stop = beginMainMenuCharacterEditing();
    setReadyKey(stop ? characterKey : null);
    return () => stop?.();
  }, [characterKey]);

  const ready = readyKey === characterKey;
  return <DualDisplayFrame companionDisabled contextLabel="Character setup" bottom={null} top={
    <FrontSurface className="main-menu-character-editor" ariaLabel="Main menu character setup">
      <header className="main-menu-character-editor__header">
        <BrandMark compact />
        <div><strong>{character?.name ?? "Character setup"}</strong>
          <span>{character ? `Level ${character.level} ${classById(character.classId).name}` : "Select a character to edit."}</span></div>
        <button className="front-button" type="button" onClick={onClose}>Back to main menu</button>
      </header>
      {notice && <p className="front-notice" role="status">{notice}</p>}
      <div className="main-menu-character-editor__panel">
        {!ready ? <p role="status">Preparing character…</p> : <Suspense fallback={<p role="status">Opening talents…</p>}>
          {editor === "talents" && (character?.categoryId === "rom"
            ? <RomSkillsPanel open onClose={onClose} />
            : <TalentGameplayPanel open onClose={onClose} />)}
          {editor === "keybinds" && <KeybindsPanel open onClose={onClose} />}
          {editor === "bindings" && <AbilityBindingsPanel open onClose={onClose} />}
        </Suspense>}
      </div>
    </FrontSurface>
  } />;
}