import { useEffect, useState } from "react";
import { ROGUE_TRIALS_TRIO_ROUND, RUN_BUFFS, bossHealthMultiplier, effectiveRunBuffRank, formatRunBuffEffect } from "../game/roguelike";
import { HEALER_CLASSES } from "../game/healers";
import { isRunBuffInputLocked, useGameStore } from "../game/store";
import { DEFAULT_CONTROLLER_GLYPHS } from "../input/controllerGlyphs";

export function BuffDraftPanel({ className = "" }: { className?: string }) {
  const round = useGameStore((state) => state.round);
  const runMode = useGameStore((state) => state.runMode);
  const healerClassId = useGameStore((state) => state.healerClassId);
  const runBuffRanks = useGameStore((state) => state.runBuffRanks);
  const passiveRunBuffId = useGameStore((state) => state.passiveRunBuffId);
  const choices = useGameStore((state) => state.draftBuffIds);
  const selected = useGameStore((state) => state.selectedRunBuffId);
  const inputUnlockAt = useGameStore((state) => state.runBuffInputUnlockAt);
  const setSelected = useGameStore((state) => state.setSelectedRunBuff);
  const choose = useGameStore((state) => state.chooseRunBuff);
  const continueRun = useGameStore((state) => state.continueRoguelikeRound);
  const nextRound = round + 1;
  const nextBossCount = runMode === "rogue-trials" && nextRound === ROGUE_TRIALS_TRIO_ROUND ? 3 : 2;
  const abilities = HEALER_CLASSES[healerClassId].abilities;
  const [inputLocked, setInputLocked] = useState(() => isRunBuffInputLocked(useGameStore.getState()));

  useEffect(() => {
    const remaining = inputUnlockAt - Date.now();
    setInputLocked(remaining > 0);
    if (remaining <= 0) return;
    const timer = window.setTimeout(() => setInputLocked(false), remaining);
    return () => window.clearTimeout(timer);
  }, [inputUnlockAt]);

  return (
    <div className={`buff-draft ${inputLocked ? "is-input-locked" : ""} ${className}`.trim()} role="dialog" aria-modal="true" aria-label={`Choose a buff for round ${nextRound}`} aria-busy={inputLocked}>
      <header>
        <span>Round {round} cleared</span>
        <h2>Choose one blessing</h2>
        <p>Claim required. Round {nextRound} begins with {nextBossCount === 3 ? "an unseen trio" : "two new bosses"} at {Math.round(bossHealthMultiplier(nextRound) * 100)}% base HP.</p>
      </header>
      <div className={`buff-choice-grid choice-count-${choices.length}`}>
        {choices.length > 0 ? choices.map((buffId) => {
          const buff = RUN_BUFFS[buffId];
          const rank = effectiveRunBuffRank(runBuffRanks, buffId, passiveRunBuffId);
          const nextRank = Math.min(buff.maxRank, rank + 1);
          const ability = abilities[buff.abilityId];
          return (
            <button
              key={buffId}
              className={selected === buffId ? "is-controller-focused" : ""}
              style={{ "--buff-accent": buff.accent } as React.CSSProperties}
              onFocus={() => setSelected(buffId)}
              onPointerEnter={() => setSelected(buffId)}
              onClick={() => choose(buffId)}
              disabled={inputLocked}
              aria-pressed={selected === buffId}
            >
              <i>{buff.icon}</i>
              <span><small>{rank ? `Rank ${rank} → ${nextRank} / ${buff.maxRank}` : `New blessing · Rank 1 / ${buff.maxRank}`}</small><strong>{ability.shortName}: {buff.name}</strong></span>
              <b>{formatRunBuffEffect(buffId, nextRank)}</b>
              <p>{buff.detail}</p>
            </button>
          );
        }) : (
          <button className="buff-mastery-continue is-controller-focused" onClick={continueRun} disabled={inputLocked}>
            <i>✦</i>
            <span><small>Full mastery</small><strong>Continue Without Buff</strong></span>
            <b>All 18 blessings reached maximum rank.</b>
            <p>Keep completed build and begin next randomized encounter.</p>
          </button>
        )}
      </div>
      <footer>{inputLocked ? <b>Choices ready in a moment…</b> : <>{choices.length > 0 && <><b>← / →</b> Choose <i /></>} <b>{DEFAULT_CONTROLLER_GLYPHS.confirm} / ENTER</b> {choices.length > 0 ? "Claim" : "Continue"}</>}</footer>
    </div>
  );
}