import { useEffect, useState } from 'react'
import './App.css'
import { CombatScreen } from './components/CombatScreen'
import { AuthScreen } from './components/AuthScreen'
import { CustomizeScreen } from './components/CustomizeScreen'
import { EquipmentScreen } from './components/EquipmentScreen'
import { PvPRoguelikeScreen } from './components/PvpRoguelikeScreen'
import { TalentScreen } from './components/TalentScreen'
import { SettingsScreen } from './components/SettingsScreen'
import {
  loadCpuPvpLeaderboard,
  type CpuPvpLeaderboardEntry,
  type PvpContentType,
} from './pvpRoguelike'
import {
  loadAuthSession,
  logoutAccount,
  type Account,
  type AuthSession,
  type CharacterProfile,
} from './profile'
import {
  getCloudSyncStatus,
  getGameMode,
  syncCloudSave,
  type GameMode,
} from './gameRepository'
import { focusFirstControl } from './input.tsx'

type Screen =
  | 'menu'
  | 'dungeons'
  | 'combat'
  | 'raids'
  | 'roguelike'
  | 'pvp'
  | 'customize'
  | 'equipment'
  | 'talents'
  | 'settings'

const MENU_ITEMS: Array<{
  screen: Screen
  label: string
  glyph: string
  description: string
}> = [
  { screen: 'dungeons', label: 'Dungeons', glyph: 'D', description: 'Guide a six-player party through dangerous encounters.' },
  { screen: 'raids', label: 'Raids', glyph: 'R', description: 'Guide an eighteen-player party through three-phase challenges.' },
  { screen: 'roguelike', label: 'Roguelike', glyph: 'L', description: 'Draft upgrades through escalating random encounters.' },
  { screen: 'pvp', label: 'PvP', glyph: 'P', description: 'Race another healer through roguelike encounters with buffs and sabotage.' },
  { screen: 'customize', label: 'Customize Character', glyph: 'C', description: 'Choose your class and prepare a six-ability loadout.' },
  { screen: 'settings', label: 'Settings', glyph: 'S', description: 'Remap PC and controller inputs.' },
]

const LAST_DIFFICULTY_KEY = 'i-want-to-heal:last-difficulty'
const SHOW_LEADERBOARDS = false
const ACTIVITY_PAGE_SIZE = 4

function activityInitials(name: string) {
  return name
    .split(/\s+/)
    .filter((word) => /^[A-Za-z0-9]/.test(word))
    .slice(0, 2)
    .map((word) => word[0].toUpperCase())
    .join('')
}

type RoguelikeUpgradeTiming = 'boss' | 'encounter'
type RoguelikeVariant = 'pve' | 'pvp'
type RoguelikeAbilityLabelMode = 'ability' | 'slot'

function App() {
  const [screen, setScreen] = useState<Screen>('menu')
  const [account, setAccount] = useState<Account | null>(null)
  const [profile, setProfile] = useState<CharacterProfile | null>(null)
  const [authChecked, setAuthChecked] = useState(false)
  const [gameMode, setGameMode] = useState<GameMode>(getGameMode())
  const [serverMessage, setServerMessage] = useState('')
  const [selectedDifficultyId, setSelectedDifficultyId] = useState(() => {
    const saved = Number(window.localStorage.getItem(LAST_DIFFICULTY_KEY))
    return Number.isFinite(saved) && saved > 0 ? saved : 1
  })
  const [selectedDungeonId, setSelectedDungeonId] = useState(1)
  const [selectedRaidId, setSelectedRaidId] = useState(20)
  const [roguelikeKind, setRoguelikeKind] = useState<'dungeon' | 'raid'>('dungeon')
  const [roguelikeVariant, setRoguelikeVariant] = useState<RoguelikeVariant>('pve')
  const [roguelikeUpgradeTiming, setRoguelikeUpgradeTiming] = useState<RoguelikeUpgradeTiming>('encounter')
  const [roguelikeAbilityLabelMode, setRoguelikeAbilityLabelMode] = useState<RoguelikeAbilityLabelMode>('ability')
  const [pvpContentType, setPvpContentType] = useState<PvpContentType>('dungeon')
  const [selectedMarathonMode, setSelectedMarathonMode] = useState(false)
  const [activityPage, setActivityPage] = useState(0)
  const [combatContentId, setCombatContentId] = useState(1)
  const [leaderboardCategory, setLeaderboardCategory] = useState<'part_1' | 'part_2' | 'part_3' | 'full_run'>('part_1')
  const [showLoot, setShowLoot] = useState(false)
  const [lootSort, setLootSort] = useState<'sequence' | 'boss'>('sequence')
  const [showLeaderboard, setShowLeaderboard] = useState(false)
  const [error, setError] = useState('')
  const [syncingCloud, setSyncingCloud] = useState(false)
  const [syncMessage, setSyncMessage] = useState('')

  useEffect(() => {
    loadAuthSession()
      .then((session) => {
        setAccount(session.account)
        setProfile(session.profile)
      })
      .catch((reason: unknown) => {
        setServerMessage(
          reason instanceof Error
            ? `${reason.message} Offline play is still available.`
            : 'Unable to reach the server. Offline play is still available.',
        )
      })
      .finally(() => setAuthChecked(true))
  }, [])

  useEffect(() => {
    const handleModeChange = (event: Event) => {
      const nextMode = (event as CustomEvent<GameMode>).detail
      setGameMode(nextMode)
    }
    window.addEventListener('chronicle:mode-changed', handleModeChange as EventListener)
    return () => {
      window.removeEventListener('chronicle:mode-changed', handleModeChange as EventListener)
    }
  }, [])

  useEffect(() => {
    if (screen === 'combat') return
    window.requestAnimationFrame(() => {
      focusFirstControl()
    })
  }, [screen])

  useEffect(() => {
    if (!authChecked || !account || !profile || screen === 'combat') return
    window.requestAnimationFrame(() => {
      focusFirstControl()
    })
  }, [account, authChecked, profile, screen])

  useEffect(() => {
    window.localStorage.setItem(LAST_DIFFICULTY_KEY, String(selectedDifficultyId))
  }, [selectedDifficultyId])

  const [cpuLeaderboard, setCpuLeaderboard] = useState<CpuPvpLeaderboardEntry[]>([])

  useEffect(() => {
    setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
  }, [pvpContentType, screen, roguelikeVariant])

  function acceptSession(session: AuthSession) {
    setAccount(session.account)
    setProfile(session.profile)
    setGameMode(getGameMode())
    setScreen('menu')
    setError('')
    setServerMessage('')
    window.requestAnimationFrame(() => {
      focusFirstControl()
    })
  }

  async function signOut() {
    try {
      await logoutAccount()
      setAccount(null)
      setProfile(null)
      setGameMode(getGameMode())
      setScreen('menu')
      setSyncMessage('')
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Unable to sign out.')
    }
  }

  async function syncSaveNow() {
    setSyncingCloud(true)
    setSyncMessage('')
    try {
      const updated = await syncCloudSave()
      setProfile(updated)
      setGameMode(getGameMode())
      setSyncMessage('Cloud save updated.')
    } catch (reason) {
      setSyncMessage(reason instanceof Error ? reason.message : 'Unable to sync cloud save.')
    } finally {
      setSyncingCloud(false)
    }
  }

  if (error) {
    return (
      <main className="game-shell">
        <section className="message-panel">
          <p className="eyebrow">Database Error</p>
          <h1>Character Unavailable</h1>
          <p>{error}</p>
        </section>
      </main>
    )
  }

  if (!authChecked) {
    return (
      <main className="game-shell">
        <section className="message-panel">
          <p className="eyebrow">Opening Chronicle</p>
          <h1>Loading...</h1>
        </section>
      </main>
    )
  }

  if (!account || !profile) {
    return (
      <AuthScreen
        onAuthenticated={acceptSession}
        serverMessage={serverMessage}
      />
    )
  }

  if (screen === 'combat') {
    const dungeon = combatContentId < 0
      ? profile.dungeons.find((candidate) => candidate.contentType === roguelikeKind) ?? profile.dungeons[0]
      : profile.dungeons.find((candidate) => candidate.id === combatContentId) ?? profile.dungeons[0]
    const difficulty = dungeon.difficulties.find(
      (candidate) => candidate.id === selectedDifficultyId,
    ) ?? dungeon.difficulties[0]
    const roguelikePool = profile.dungeons
      .filter((candidate) => candidate.contentType === roguelikeKind)
      .flatMap((candidate) => candidate.encounters)
    return (
      <CombatScreen
        difficulty={difficulty}
        dungeon={dungeon}
        hardMode={false}
        marathonMode={selectedMarathonMode && combatContentId > 0}
        profile={profile}
        roguelikeMode={combatContentId < 0 ? roguelikeKind : undefined}
        roguelikeUpgradeTiming={combatContentId < 0 ? roguelikeUpgradeTiming : undefined}
        roguelikeAbilityLabelMode={combatContentId < 0 ? roguelikeAbilityLabelMode : undefined}
        roguelikeEncounterPool={combatContentId < 0 ? roguelikePool : undefined}
        startPart={1}
        onExit={() => {
          setScreen(combatContentId < 0 ? 'roguelike' : dungeon.contentType === 'raid' ? 'raids' : 'dungeons')
        }}
        onProfileUpdated={setProfile}
      />
    )
  }

  if (screen === 'pvp') {
    const pvpPool = profile.dungeons
      .filter((candidate) => candidate.contentType === pvpContentType)
      .flatMap((candidate) => candidate.encounters)
    return (
      <PvPRoguelikeScreen
        contentType={pvpContentType}
        encounterPool={pvpPool}
        gameMode={gameMode}
        onExit={() => {
          setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
          setRoguelikeVariant('pvp')
          setScreen('roguelike')
        }}
        onProfileUpdated={setProfile}
        profile={profile}
      />
    )
  }

  const levelStart = profile.character.currentLevelExperience
  const levelEnd = profile.character.nextLevelExperience
  const experienceIntoLevel = profile.character.experience - levelStart
  const experienceForLevel = Math.max(1, levelEnd - levelStart)
  const experiencePercent = profile.character.level >= profile.maxLevel
    ? 100
    : Math.min(100, (experienceIntoLevel / experienceForLevel) * 100)
  const dungeonOptions = profile.dungeons.filter((candidate) => candidate.contentType === 'dungeon')
  const raidOptions = profile.dungeons.filter((candidate) => candidate.contentType === 'raid')
  const dungeon = dungeonOptions.find((candidate) => candidate.id === selectedDungeonId)
    ?? dungeonOptions[0]!
  const raid = raidOptions.find((candidate) => candidate.id === selectedRaidId)
    ?? raidOptions[0]
  const activityOptions = screen === 'raids' ? raidOptions : dungeonOptions
  const startPveRoguelike = () => {
    const baseDungeon = dungeonOptions[0]
    const baseRaid = raidOptions[0]
    if (roguelikeKind === 'raid') {
      setCombatContentId(-2)
      setSelectedDifficultyId(baseRaid?.difficulties[0]?.id ?? 101)
    } else {
      setCombatContentId(-1)
      setSelectedDifficultyId(baseDungeon?.difficulties[0]?.id ?? 1)
    }
    setSelectedMarathonMode(false)
    setScreen('combat')
  }
  const tierOptions = activityOptions
    .flatMap((option) => option.difficulties)
    .filter((difficulty, index, all) => (
      all.findIndex((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel) === index
    ))
    .sort((a, b) => a.droppedItemLevel - b.droppedItemLevel)
  const savedDifficulty = profile.dungeons
    .flatMap((option) => option.difficulties)
    .find((candidate) => candidate.id === selectedDifficultyId)
  const selectedTier = tierOptions.find((candidate) => (
    candidate.droppedItemLevel === savedDifficulty?.droppedItemLevel
    && profile.character.level >= candidate.unlockLevel
  ))
    ?? tierOptions.slice().reverse().find((candidate) => profile.character.level >= candidate.unlockLevel)
    ?? tierOptions[0]
  const selectedTierItemLevel = selectedTier?.droppedItemLevel ?? 0
  const activityPageCount = Math.max(1, Math.ceil(activityOptions.length / ACTIVITY_PAGE_SIZE))
  const currentActivityPage = Math.min(activityPage, activityPageCount - 1)
  const pagedActivityOptions = activityOptions.slice(
    currentActivityPage * ACTIVITY_PAGE_SIZE,
    currentActivityPage * ACTIVITY_PAGE_SIZE + ACTIVITY_PAGE_SIZE,
  )
  const activityPageStart = activityOptions.length === 0
    ? 0
    : currentActivityPage * ACTIVITY_PAGE_SIZE + 1
  const activityPageEnd = Math.min(activityOptions.length, (currentActivityPage + 1) * ACTIVITY_PAGE_SIZE)
  const selectedActivityId = screen === 'raids' && raid ? raid.id : dungeon.id
  const activity = activityOptions.find((candidate) => candidate.id === selectedActivityId)
    ?? activityOptions[0]
    ?? (screen === 'raids' && raid ? raid : dungeon)
  const selectedDifficulty = activity.difficulties.find(
    (candidate) => candidate.droppedItemLevel === selectedTierItemLevel,
  ) ?? activity.difficulties[0]
  const difficultyLocked = profile.character.level < selectedDifficulty.unlockLevel
  const cloudSync = getCloudSyncStatus()
  const canShowCloudSync = account.id !== -1 && cloudSync.available
  const lootPreviewEncounters = [...activity.encounters]
    .filter((encounter) => encounter.isBoss)
    .sort((a, b) => lootSort === 'boss'
      ? a.enemyName.localeCompare(b.enemyName) || a.sequence - b.sequence
      : a.sequence - b.sequence)

  return (
    <main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''}`}>
      <header className="topbar app-header">
        <button
          className="brand-button"
          onClick={() => setScreen('menu')}
          type="button"
        >
          <strong>Menu</strong>
        </button>
        <div className="character-summary">
          <strong>{profile.character.name}</strong>
          <small>Level {profile.character.level}</small>
          <small>Item Level {profile.gearStats.averageItemLevel.toFixed(1)}</small>
          <div className="header-xp" title={`${profile.character.experience} total experience`}>
            <span style={{ width: `${experiencePercent}%` }} />
          </div>
          <button className="logout-button" onClick={signOut} type="button">
            {gameMode === 'offline' ? 'Leave Offline' : `Sign Out ${account.username}`}
          </button>
        </div>
      </header>

      {screen === 'menu' && (
        <section className="menu-screen">
          <div className="main-menu-grid">
            {canShowCloudSync && (
              <div className="menu-card cloud-sync-card">
                <span>{cloudSync.dirty ? 'S' : 'C'}</span>
                <div>
                  <strong>Cloud Save</strong>
                  <small>
                    {cloudSync.dirty
                      ? 'Local progress waiting. Upload when you want to refresh the server copy.'
                      : 'Server copy matches this device.'}
                  </small>
                  {syncMessage && <small className="cloud-sync-message">{syncMessage}</small>}
                </div>
                <button
                  className="text-button"
                  disabled={syncingCloud || !cloudSync.dirty}
                  onClick={syncSaveNow}
                  type="button"
                >
                  {syncingCloud ? 'Syncing...' : cloudSync.dirty ? 'Sync Save To Server' : 'Already Synced'}
                </button>
              </div>
            )}
            {MENU_ITEMS.map((item) => (
              <button
                className="menu-card"
                key={item.screen}
                onClick={() => {
                  if (item.screen === 'pvp') {
                    setRoguelikeVariant('pvp')
                    setScreen('roguelike')
                    return
                  }
                  setScreen(item.screen)
                }}
                type="button"
              >
                <span>{item.glyph}</span>
                <div>
                  <strong>{item.label}</strong>
                  <small>{item.description}</small>
                </div>
              </button>
            ))}
          </div>
        </section>
      )}

      {screen === 'roguelike' && (
        <section className="content-screen">
          <ScreenHeading
            eyebrow="Endless Draft"
            title="Roguelike"
            onBack={() => setScreen('menu')}
          />
          <div className="roguelike-variant-row">
            <button
              className={`text-button ${roguelikeVariant === 'pve' ? 'active' : ''}`}
              onClick={() => setRoguelikeVariant('pve')}
              type="button"
            >
              PvE
            </button>
            <button
              className={`text-button ${roguelikeVariant === 'pvp' ? 'active' : ''}`}
              onClick={() => setRoguelikeVariant('pvp')}
              type="button"
            >
              PvP
            </button>
          </div>
          {roguelikeVariant === 'pve' && (
            <>
              <div className="roguelike-option-panel">
                <div>
                  <p className="eyebrow">Run Type</p>
                  <h2>PvE Roguelike</h2>
                </div>
                <div className="roguelike-timing-row">
                  <button
                    className={`text-button ${roguelikeKind === 'dungeon' ? 'active' : ''}`}
                    onClick={() => setRoguelikeKind('dungeon')}
                    type="button"
                  >
                    Dungeon
                  </button>
                  <button
                    className={`text-button ${roguelikeKind === 'raid' ? 'active' : ''}`}
                    onClick={() => setRoguelikeKind('raid')}
                    type="button"
                  >
                    Raid
                  </button>
                </div>
              </div>
              <div className="roguelike-option-panel">
                <div>
                  <p className="eyebrow">Upgrade Timing</p>
                  <h2>Buff Drafts</h2>
                </div>
                <div className="roguelike-timing-row">
                  <button
                    className={`text-button ${roguelikeUpgradeTiming === 'encounter' ? 'active' : ''}`}
                    onClick={() => setRoguelikeUpgradeTiming('encounter')}
                    type="button"
                  >
                    Every Encounter
                  </button>
                  <button
                    className={`text-button ${roguelikeUpgradeTiming === 'boss' ? 'active' : ''}`}
                    onClick={() => setRoguelikeUpgradeTiming('boss')}
                    type="button"
                  >
                    Boss Only
                  </button>
                </div>
              </div>
              <div className="roguelike-option-panel">
                <div>
                  <p className="eyebrow">Upgrade Labels</p>
                  <h2>Display Mode</h2>
                </div>
                <div className="roguelike-timing-row">
                  <button
                    className={`text-button ${roguelikeAbilityLabelMode === 'ability' ? 'active' : ''}`}
                    onClick={() => setRoguelikeAbilityLabelMode('ability')}
                    type="button"
                  >
                    Ability Names
                  </button>
                  <button
                    className={`text-button ${roguelikeAbilityLabelMode === 'slot' ? 'active' : ''}`}
                    onClick={() => setRoguelikeAbilityLabelMode('slot')}
                    type="button"
                  >
                    Slot Names
                  </button>
                </div>
              </div>
              <div className="menu-card pvp-queue-panel">
                <span>{roguelikeKind === 'raid' ? 'R' : 'D'}</span>
                <div>
                  <strong>{roguelikeKind === 'raid' ? 'Raid Roguelike' : 'Dungeon Roguelike'}</strong>
                  <small>
                    {roguelikeKind === 'raid'
                      ? 'Ten-player party. Raid pools, lighter early scaling, and the same upgrade draft.'
                      : 'Five-player party. Two random trash enemies and a boss with a lighter early ramp.'}
                  </small>
                </div>
                <button
                  className="text-button"
                  onClick={startPveRoguelike}
                  type="button"
                >
                  Start Run
                </button>
              </div>
            </>
          )}
          {roguelikeVariant === 'pvp' && (
            <>
              <div className="roguelike-option-panel">
                <div>
                  <p className="eyebrow">Match Type</p>
                  <h2>PvP Roguelike</h2>
                </div>
                <div className="roguelike-timing-row">
                  <button
                    className={`text-button ${pvpContentType === 'dungeon' ? 'active' : ''}`}
                    onClick={() => setPvpContentType('dungeon')}
                    type="button"
                  >
                    Dungeon
                  </button>
                  <button
                    className={`text-button ${pvpContentType === 'raid' ? 'active' : ''}`}
                    onClick={() => setPvpContentType('raid')}
                    type="button"
                  >
                    Raid
                  </button>
                </div>
              </div>
              <div className="menu-card pvp-queue-panel">
                <span>{gameMode === 'offline' ? 'C' : 'Q'}</span>
                <div>
                  <strong>{gameMode === 'offline' ? 'Offline CPU Match' : 'Queue Then CPU Fallback'}</strong>
                  <small>
                    {gameMode === 'offline'
                      ? 'Offline mode always places you against a random CPU 1-5.'
                      : 'Online mode searches briefly. If nobody is queued, a random CPU 1-5 takes the slot.'}
                  </small>
                </div>
                <button
                  className="text-button"
                  onClick={() => setScreen('pvp')}
                  type="button"
                >
                  Start Match
                </button>
              </div>
              {SHOW_LEADERBOARDS && (
              <div className="leaderboard-section">
                <div className="equipment-heading toggle-heading">
                  <div>
                    <p className="eyebrow">CPU Leaderboard</p>
                    <h2>{pvpContentType === 'raid' ? 'Raid Clash' : 'Dungeon Clash'}</h2>
                  </div>
                </div>
                <div className="leaderboard-table">
                  <div className="leaderboard-header pvp-leaderboard-row">
                    <strong>Rank</strong>
                    <strong>Player</strong>
                    <strong>CPU</strong>
                    <strong>Clears</strong>
                    <strong>Result</strong>
                  </div>
                  {cpuLeaderboard.map((entry, index) => (
                    <div className="leaderboard-row pvp-leaderboard-row" key={`${entry.characterName}-${entry.completedAt}`}>
                      <strong>#{index + 1}</strong>
                      <span>{entry.characterName}</span>
                      <span>CPU {entry.cpuDifficulty}</span>
                      <span>{entry.encountersCleared}</span>
                      <span>{entry.result}</span>
                    </div>
                  ))}
                  {cpuLeaderboard.length === 0 && (
                    <div className="leaderboard-empty">
                      No CPU runs recorded yet for this mode.
                    </div>
                  )}
                </div>
              </div>
              )}
            </>
          )}
        </section>
      )}

      {(screen === 'dungeons' || screen === 'raids') && (
        <section className="content-screen dungeon-run-screen">
          <div className="dungeon-run-board">
            <div className="dungeon-run-main">
              <article className="run-summary-card dungeon-focus-card">
                <div className={`dungeon-art ${activity.contentType === 'raid' ? 'raid-art' : ''}`}>
                  {activityInitials(activity.name)}
                </div>
                <div className="run-summary-copy">
                  <p className="eyebrow">Selected Run</p>
                  <div className="run-title-row">
                    <h2>{activity.name}</h2>
                    <button className="back-button inline-back-button" onClick={() => setScreen('menu')} type="button">Back</button>
                  </div>
                  <p>{activity.description}</p>
                  <div className="tag-row">
                    <span>Level {activity.recommendedLevel}</span>
                    <span>{activity.partySize} Players</span>
                    <span>{selectedDifficulty.name}</span>
                    <span>iLvl {selectedDifficulty.droppedItemLevel}</span>
                    <span>{Math.round(activity.experienceReward * selectedDifficulty.experienceMultiplier)} XP</span>
                  </div>
                </div>
              </article>

              <section className="run-setup-panel dungeon-choice-panel">
                <div className="run-setup-heading">
                  <div>
                    <p className="eyebrow">Pick Run</p>
                    <h2>{screen === 'raids' ? 'Raid' : 'Dungeon'}</h2>
                  </div>
                  {activityPageCount > 1 ? (
                    <div className="activity-pager" aria-label={`${screen === 'raids' ? 'Raid' : 'Dungeon'} pages`}>
                      <button
                        disabled={currentActivityPage === 0}
                        onClick={() => setActivityPage((page) => Math.max(0, page - 1))}
                        type="button"
                      >
                        Prev
                      </button>
                      <span>{activityPageStart}-{activityPageEnd} of {activityOptions.length}</span>
                      <button
                        disabled={currentActivityPage >= activityPageCount - 1}
                        onClick={() => setActivityPage((page) => Math.min(activityPageCount - 1, page + 1))}
                        type="button"
                      >
                        Next
                      </button>
                    </div>
                  ) : (
                    <small>{selectedDifficulty.name} rewards iLvl {selectedDifficulty.droppedItemLevel} components.</small>
                  )}
                </div>
                <div className="activity-card-grid dungeon-choice-grid">
                  {pagedActivityOptions.map((candidate) => {
                    const difficulty = candidate.difficulties.find(
                      (option) => option.droppedItemLevel === selectedDifficulty.droppedItemLevel,
                    ) ?? candidate.difficulties[0]
                    const locked = profile.character.level < difficulty.unlockLevel
                    const selected = candidate.id === activity.id
                    return (
                      <button
                        className={`activity-card ${selected ? 'selected' : ''} ${locked ? 'locked' : ''}`}
                        disabled={locked}
                        key={candidate.id}
                        onClick={() => {
                          if (screen === 'raids') setSelectedRaidId(candidate.id)
                          else setSelectedDungeonId(candidate.id)
                          setSelectedDifficultyId(difficulty.id)
                        }}
                        type="button"
                      >
                        <span className={`dungeon-art ${candidate.contentType === 'raid' ? 'raid-art' : ''}`}>
                          {activityInitials(candidate.name)}
                        </span>
                        <strong>{candidate.name}</strong>
                        <small>{candidate.locationName}</small>
                        <i>
                          Level {candidate.recommendedLevel} | {candidate.partySize} Players
                        </i>
                      </button>
                    )
                  })}
                </div>
              </section>
            </div>

            <aside className="dungeon-setup-rail">
              <section className="run-setup-panel tier-setup-panel">
                <div className="run-setup-heading">
                  <div>
                    <p className="eyebrow">Item Level</p>
                    <h2>Tier</h2>
                  </div>
                  <small>{screen === 'raids' ? 'Raid' : 'Dungeon'} tiers unlock by level.</small>
                </div>
                <div className="tier-grid">
                  {tierOptions.map((difficulty) => {
                    const locked = profile.character.level < difficulty.unlockLevel
                    const selected = difficulty.droppedItemLevel === selectedDifficulty.droppedItemLevel
                    return (
                      <button
                        className={`${selected ? 'selected' : ''} ${locked ? 'locked' : ''}`}
                        disabled={locked}
                        key={difficulty.id}
                        onClick={() => {
                          setActivityPage(0)
                          const nextActivity = activity.difficulties.some(
                            (candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
                          )
                            ? activity
                            : activityOptions.find((option) =>
                              option.difficulties.some((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel),
                            )
                          if (nextActivity) {
                            if (screen === 'raids') setSelectedRaidId(nextActivity.id)
                            else setSelectedDungeonId(nextActivity.id)
                            const nextDifficulty = nextActivity.difficulties.find(
                              (candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
                            )
                            if (nextDifficulty) setSelectedDifficultyId(nextDifficulty.id)
                          }
                        }}
                        type="button"
                      >
                        <strong>iLvl {difficulty.droppedItemLevel}</strong>
                        <span>{locked ? `Level ${difficulty.unlockLevel}` : difficulty.name}</span>
                      </button>
                    )
                  })}
                </div>
              </section>

              <section className="run-setup-panel part-setup-panel">
                <div className="run-setup-heading">
                  <div>
                    <p className="eyebrow">Start</p>
                    <h2>Run</h2>
                  </div>
                  <small>
                    {difficultyLocked
                      ? `Unlocks at level ${selectedDifficulty.unlockLevel}`
                      : 'Marathon keeps health and mana between boss kills.'}
                  </small>
                </div>
                <div className="part-picker">
                  <button
                    className="primary-button selected-part"
                    disabled={difficultyLocked}
                    onClick={() => {
                      setSelectedMarathonMode(false)
                      setCombatContentId(activity.id)
                      setSelectedDifficultyId(selectedDifficulty.id)
                      setScreen('combat')
                    }}
                    type="button"
                  >
                    Start Hunt
                  </button>
                  <button
                    className={`primary-button ${selectedMarathonMode ? 'selected-part' : ''}`}
                    disabled={difficultyLocked}
                    onClick={() => {
                      setSelectedMarathonMode(true)
                      setCombatContentId(activity.id)
                      setSelectedDifficultyId(selectedDifficulty.id)
                      setScreen('combat')
                    }}
                    type="button"
                  >
                    Marathon
                  </button>
                </div>
              </section>

              <div className="difficulty-section compact-difficulty-section">
                <div className={`difficulty-summary ${difficultyLocked ? 'locked' : ''}`}>
                  <div>
                    <strong>{selectedDifficulty.name}</strong>
                    <small>{difficultyLocked ? `Unlocks at level ${selectedDifficulty.unlockLevel}` : selectedDifficulty.description}</small>
                  </div>
                  <dl>
                    <div><dt>Health</dt><dd>{selectedDifficulty.healthMultiplier.toFixed(2)}x</dd></div>
                    <div><dt>Damage</dt><dd>{selectedDifficulty.damageMultiplier.toFixed(2)}x</dd></div>
                    <div><dt>XP</dt><dd>{selectedDifficulty.experienceMultiplier.toFixed(1)}x</dd></div>
                    <div><dt>Loot</dt><dd>iLvl {selectedDifficulty.droppedItemLevel}</dd></div>
                  </dl>
                </div>
              </div>

              <div className="loot-preview-section">
            <div className="equipment-heading toggle-heading">
              <div>
                <p className="eyebrow">Encounter Rewards</p>
                <h2>{selectedDifficulty.name} Loot Tables</h2>
              </div>
              <button
                className="text-button"
                onClick={() => setShowLoot((current) => !current)}
                type="button"
              >
                {showLoot ? 'Hide Loot' : 'View Loot'}
              </button>
            </div>
            {showLoot && (
              <>
                <div className="loot-toolbar">
                  <label>
                    <span>Sort</span>
                    <select value={lootSort} onChange={(event) => setLootSort(event.target.value as 'sequence' | 'boss')}>
                      <option value="sequence">Encounter order</option>
                      <option value="boss">Boss name</option>
                    </select>
                  </label>
                </div>
                <p className="section-note">
                  Bosses drop 1-3 boss coins from one loot roll
                  {activity.completionItemLevel
                    ? ` - full clear guarantees iLvl ${activity.completionItemLevel}`
                    : ''}
                </p>
                <div className="loot-preview-grid">
                  {lootPreviewEncounters.map((encounter) => {
                    const loot = encounter.lootTables.filter(
                      (entry) => entry.difficultyId === selectedDifficulty.id,
                    )
                    return (
                      <article key={encounter.id}>
                        <div className="loot-encounter-title">
                          {encounter.isBoss ? (
                            <img className="loot-boss-icon" src={encounter.imageUrl} alt={`${encounter.enemyName} icon`} />
                          ) : (
                            <span>{encounter.sequence}</span>
                          )}
                          <div>
                            <strong>{encounter.enemyName}</strong>
                            <small>{loot.length > 0 ? '1 loot roll, 1-3 coins' : 'No coin table'}</small>
                          </div>
                        </div>
                        <div className="loot-items">
                          {loot.map((item) => (
                            <div className={`rarity-${item.rarity}`} key={item.id}>
                              <span>{item.glyph}</span>
                              <div>
                                <strong>{item.name}</strong>
                                <small>{item.slot} - iLvl {item.itemLevel}</small>
                              </div>
                              <i>{item.dropWeight}% weight</i>
                            </div>
                          ))}
                        </div>
                      </article>
                    )
                  })}
                </div>
              </>
            )}
              </div>
              {SHOW_LEADERBOARDS && (
              <div className="leaderboard-section">
            <div className="equipment-heading toggle-heading">
              <div>
                <p className="eyebrow">Efficiency Rankings</p>
                <h2>{selectedDifficulty.name} Leaderboard</h2>
              </div>
              <button
                className="text-button"
                onClick={() => setShowLeaderboard((current) => !current)}
                type="button"
              >
                {showLeaderboard ? 'Hide Leaderboard' : 'View Leaderboard'}
              </button>
            </div>
            {showLeaderboard && (
              <>
                <p className="section-note">
                  {gameMode === 'offline'
                    ? 'Offline runs are not submitted'
                    : canShowCloudSync
                      ? 'Manual save sync updates your cloud profile.'
                      : 'Lowest resource spent ranks first'}
                </p>
                <div className="leaderboard-tabs">
                  {([
                    { key: 'part_1', label: 'Run' },
                    { key: 'part_2', label: 'Legacy 2' },
                    { key: 'part_3', label: 'Legacy 3' },
                    { key: 'full_run', label: 'Legacy Full' },
                  ] as const).map((tab) => (
                    <button
                      key={tab.key}
                      className={`leaderboard-tab ${leaderboardCategory === tab.key ? 'active' : ''}`}
                      onClick={() => setLeaderboardCategory(tab.key)}
                      type="button"
                    >
                      {tab.label}
                    </button>
                  ))}
                </div>
                <div className="leaderboard-table">
                  <div className="leaderboard-header">
                    <span>Rank</span>
                    <span>Healer</span>
                    <span>Class</span>
                    <span>Level</span>
                    <span>Item Level</span>
                    <span>Resource</span>
                    <span>Time</span>
                  </div>
                  {activity.leaderboards[leaderboardCategory]
                    .filter((entry) => entry.difficultyId === selectedDifficulty.id)
                    .map((entry) => (
                      <div className="leaderboard-row" key={`${entry.rank}-${entry.completedAt}`}>
                        <strong>#{entry.rank}</strong>
                        <span>{entry.characterName}</span>
                        <span>{entry.className}</span>
                        <span>{entry.characterLevel}</span>
                        <span>{entry.averageItemLevel.toFixed(1)}</span>
                        <strong>{entry.resourceSpent}</strong>
                        <span>{entry.durationSeconds}s</span>
                      </div>
                    ))}
                  {activity.leaderboards[leaderboardCategory].filter(
                    (entry) => entry.difficultyId === selectedDifficulty.id,
                  ).length === 0 && (
                    <div className="leaderboard-empty">
                      {gameMode === 'offline'
                        ? 'Connect with an online character to compete in rankings.'
                        : canShowCloudSync
                          ? 'No leaderboard entries yet.'
                          : 'Complete this difficulty to claim the first ranking.'}
                    </div>
                  )}
                </div>
              </>
            )}
              </div>
              )}
            </aside>
          </div>
        </section>
      )}

      {screen === 'customize' && (
        <CustomizeScreen
          profile={profile}
          onBack={() => setScreen('menu')}
          onSaved={setProfile}
        />
      )}

      {screen === 'talents' && (
        <TalentScreen
          profile={profile}
          onBack={() => setScreen('menu')}
          onUpdated={setProfile}
        />
      )}

      {screen === 'equipment' && (
        <EquipmentScreen
          profile={profile}
          onBack={() => setScreen('menu')}
          onUpdated={setProfile}
        />
      )}

      {screen === 'settings' && (
        <SettingsScreen onBack={() => setScreen('menu')} />
      )}

    </main>
  )
}

function ScreenHeading({
  eyebrow,
  title,
  onBack,
}: {
  eyebrow: string
  title: string
  onBack: () => void
}) {
  return (
    <div className="screen-heading">
      <div>
        <p className="eyebrow">{eyebrow}</p>
        <h1>{title}</h1>
      </div>
      <button className="back-button" onClick={onBack} type="button">Back</button>
    </div>
  )
}

export default App