import type { CharacterProfile } from "../app/types";
import { GENERATED_MANASTORM_STAGE_ASSET_PACKAGE_COUNT } from "../game/manastormAssetRegistry";
import { MANASTORM_CATALOG_SUMMARY } from "../game/manastormCatalogSummary";
import { INSTALLED_MANASTORM_RUNTIME_CATALOG } from "../game/manastormInstalledCatalog";
import {
  manastormCacheChance,
  manastormModeForCharacterLevel,
} from "../game/manastorm";
import {
  createEmptyManastormProgress,
  MANASTORM_PARTY_SIZES,
  manastormModeProgress,
  manastormPartyProgress,
} from "../game/manastormProgress";
import type { CompanionCommand } from "../platform/dualScreenSync";
import { BrandMark, FrontSurface } from "./FrontSurface";

export function CompanionManastormPanel({
  selected,
  send,
}: {
  selected: CharacterProfile | null;
  send: (command: CompanionCommand) => void;
}) {
  const progress = selected?.manastormProgress ?? createEmptyManastormProgress();
  const modeId = manastormModeForCharacterLevel(
    selected?.level ?? 1,
    INSTALLED_MANASTORM_RUNTIME_CATALOG,
  );
  const modeProgress = manastormModeProgress(progress, modeId);
  const modeLabel = modeId === 2 ? "End-game" : "Leveling";

  return (
    <FrontSurface bottom className="companion-panel companion-roster companion-dungeons" ariaLabel="Manastorm expedition setup companion screen">
      <header><BrandMark compact /><b>MANASTORM EXPEDITION</b></header>
      <main>
        <div className="companion-mini-roster" aria-label="Manastorm records by party size">
          {MANASTORM_PARTY_SIZES.map((partySize) => {
            const record = manastormPartyProgress(progress, partySize, modeId);
            return (
              <article key={partySize}>
                <span>{partySize}</span>
                <strong>{partySize === 1 ? "Solo" : `${partySize} players`}</strong>
                <small>Highest {record.highestLevel} / checkpoint {record.checkpointLevel}</small>
              </article>
            );
          })}
        </div>
        <div className="companion-selection-card">
          <p className="companion-kicker">Installed Ascension snapshot</p>
          <h2>{modeLabel} · {MANASTORM_CATALOG_SUMMARY.encounters} encounters</h2>
          <dl>
            <div><dt>Catalog maps</dt><dd>{MANASTORM_CATALOG_SUMMARY.maps}</dd></div>
            <div><dt>Streamed maps</dt><dd>{GENERATED_MANASTORM_STAGE_ASSET_PACKAGE_COUNT}</dd></div>
            <div><dt>Bedlam Bullions</dt><dd>{progress.currencies.bedlamBullions}</dd></div>
            <div><dt>Bonzo Bolts</dt><dd>{progress.currencies.bonzoBolts}</dd></div>
            <div>
              <dt>Cache chance</dt>
              <dd>
                {modeId === 2
                  ? Math.round(manastormCacheChance(
                    Math.max(1, modeProgress.partySizes[5].highestLevel + 1),
                    modeProgress.cacheMeter,
                  ) * 100)
                  : 100}%
              </dd>
            </div>
          </dl>
          <p>Choose party size, checkpoint, active spells, and role on the upper display.</p>
        </div>
      </main>
      <footer className="companion-actions">
        <button type="button" onClick={() => send({ name: "returnToMainMenu" })}>Back to main menu</button>
        <span>Complete setup on the upper display</span>
      </footer>
    </FrontSurface>
  );
}