import { useEffect, useState } from 'react'
import type { CSSProperties, Dispatch, SetStateAction } from 'react'

type AdminItem = {
  id: number
  slug: string
  name: string
  slot: string
  rarity: string
  itemLevel: number
  healingPower: number
  maxResourceBonus: number
  glyph: string
  imageUrl: string
  description: string
}

type AdminEncounter = {
  id: number
  dungeonId: number
  sequence: number
  slug: string
  enemyName: string
  encounterType: string
  maxHealth: number
  baseDamage: number
  tankDamage: number
  partyDamage: number
  imageUrl: string
  description: string
}

type AdminDifficulty = {
  id: number
  slug: string
  name: string
  droppedItemLevel: number
}

type AdminLootEntry = {
  encounterId: number
  itemId: number
  difficultyId: number
  dropWeight: number
  dropChance: number
}

type AdminRecipeComponent = {
  itemId: number
  quantity: number
}

type AdminRecipe = {
  id: number
  itemId: number
  difficultyId: number | null
  sourceDungeonId: number | null
  sourceEncounterId: number | null
  components: AdminRecipeComponent[]
}

type AdminDungeon = {
  id: number
  slug: string
  name: string
  recommendedLevel: number
  contentType: string
  partySize: number
  experienceReward: number
  imageUrl: string
  description: string
}

type AdminUpgradePath = {
  fromItemId: number
  toItemId: number
}

type AdminAbility = {
  id: number
  classId: number
  slug: string
  name: string
  spellType: string
  cost: number
  cooldown: number
  power: number
  unlockLevel: number
  glyph: string
  description: string
}

type AdminTalent = {
  id: number
  classId: number
  slug: string
  name: string
  maxRank: number
  tier: number
  branch: number
  prerequisiteTalentId: number | null
  prerequisiteRank: number
  prerequisiteName: string | null
  effectType: string
  effectValuePerRank: number
  glyph: string
  description: string
}

type AdminClass = {
  id: number
  slug: string
  name: string
  resourceName: string
  maxResource: number
  themeColor: string
  description: string
  abilities: AdminAbility[]
  talents: AdminTalent[]
}

type AdminData = {
  items: AdminItem[]
  encounters: AdminEncounter[]
  difficulties: AdminDifficulty[]
  encounterLoot: AdminLootEntry[]
  craftingRecipes: AdminRecipe[]
  dungeons: AdminDungeon[]
  gearUpgradePaths: AdminUpgradePath[]
  classes: AdminClass[]
}

type AdminTab = 'items' | 'dungeons' | 'encounters' | 'loot' | 'crafting' | 'upgrades' | 'classes'
type SavingState = Record<string, boolean>
type SetData = Dispatch<SetStateAction<AdminData | null>>
type SetSaving = Dispatch<SetStateAction<SavingState>>

const API = '/api/admin'
const tabs: { id: AdminTab; label: string }[] = [
  { id: 'items', label: 'Items' },
  { id: 'dungeons', label: 'Dungeons' },
  { id: 'encounters', label: 'Mobs/Bosses' },
  { id: 'loot', label: 'Loot' },
  { id: 'crafting', label: 'Crafting' },
  { id: 'upgrades', label: 'Upgrades' },
  { id: 'classes', label: 'Classes' },
]

async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
  const res = await fetch(url, init)
  const body = await res.json()
  if (!res.ok) throw new Error(body.error ?? 'Request failed')
  return body
}

export function AdminScreen({ onBack }: { onBack: () => void }) {
  const [data, setData] = useState<AdminData | null>(null)
  const [tab, setTab] = useState<AdminTab>('items')
  const [error, setError] = useState('')
  const [saving, setSaving] = useState<SavingState>({})

  useEffect(() => {
    fetchJson<AdminData>(`${API}/data`)
      .then(setData)
      .catch((e: unknown) => setError(e instanceof Error ? e.message : 'Failed to load'))
  }, [])

  if (error) return <section className="content-screen"><p className="error-message">{error}</p></section>
  if (!data) return <section className="content-screen"><p>Loading admin data...</p></section>

  return (
    <section className="content-screen admin-screen">
      <div className="screen-heading">
        <div><p className="eyebrow">Developer Tools</p><h1>Admin Panel</h1></div>
        <button className="back-button" onClick={onBack} type="button">Back</button>
      </div>
      <nav className="admin-tabs">
        {tabs.map((candidate) => (
          <button key={candidate.id} className={`admin-tab ${tab === candidate.id ? 'active' : ''}`}
            onClick={() => setTab(candidate.id)} type="button">
            {candidate.label}
          </button>
        ))}
      </nav>
      {tab === 'items' && <ItemsTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'dungeons' && <DungeonsTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'encounters' && <EncountersTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'loot' && <LootTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'crafting' && <CraftingTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'upgrades' && <UpgradesTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
      {tab === 'classes' && <ClassesTab data={data} />}
    </section>
  )
}

function ItemsTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const [filter, setFilter] = useState('')
  const [editId, setEditId] = useState<number | null>(null)
  const [form, setForm] = useState<Partial<AdminItem>>({})
  const groups = groupBy(data.items.filter((item) =>
    item.name.toLowerCase().includes(filter.toLowerCase())
    || item.slug.toLowerCase().includes(filter.toLowerCase())
    || item.slot.toLowerCase().includes(filter.toLowerCase())),
  (item) => item.slot)

  async function saveItem(id: number) {
    setSaving((prev) => ({ ...prev, [`item-${id}`]: true }))
    try {
      const body: Record<string, string | number> = {}
      if (form.name !== undefined) body.name = form.name
      if (form.slug !== undefined) body.slug = form.slug
      if (form.glyph !== undefined) body.glyph = form.glyph
      if (form.description !== undefined) body.description = form.description
      if (form.rarity !== undefined) body.rarity = form.rarity
      if (form.slot !== undefined) body.slot = form.slot
      if (form.itemLevel !== undefined) body.item_level = form.itemLevel
      if (form.healingPower !== undefined) body.healing_power = form.healingPower
      if (form.maxResourceBonus !== undefined) body.max_resource_bonus = form.maxResourceBonus
      await fetchJson(`${API}/items/${id}`, jsonRequest('PUT', body))
      setData((prev) => prev ? { ...prev, items: prev.items.map((item) => item.id === id ? { ...item, ...form } : item) } : prev)
      setEditId(null)
      setForm({})
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`item-${id}`]: false }))
    }
  }

  async function uploadItemImage(itemId: number, file: File | undefined) {
    if (!file) return
    setSaving((prev) => ({ ...prev, [`item-image-${itemId}`]: true }))
    try {
      const imageData = await fileToDataUrl(file)
      const result = await fetchJson<{ imageUrl: string }>(`${API}/items/${itemId}/image`, jsonRequest('PUT', { imageData }))
      setData((prev) => prev ? {
        ...prev,
        items: prev.items.map((item) => item.id === itemId ? { ...item, imageUrl: result.imageUrl } : item),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Upload failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`item-image-${itemId}`]: false }))
    }
  }

  return (
    <div className="admin-panel">
      <input className="admin-search" placeholder="Search items..." value={filter}
        onChange={(e) => setFilter(e.target.value)} />
      {Object.entries(groups).map(([slot, items]) => (
        <details key={slot} open={slot !== 'component'}>
          <summary className="admin-group-header">{slot} ({items.length})</summary>
          <div className="admin-grid">
            {items.map((item) => (
              <div key={item.id} className="admin-card">
                {editId === item.id ? (
                  <div className="admin-edit-form">
                    <label>Glyph <input value={form.glyph ?? item.glyph} onChange={(e) => setForm({ ...form, glyph: e.target.value })} /></label>
                    <label>Name <input value={form.name ?? item.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></label>
                    <label>Slug <input value={form.slug ?? item.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} /></label>
                    <label>Slot <select value={form.slot ?? item.slot} onChange={(e) => setForm({ ...form, slot: e.target.value })}>
                      {['weapon', 'helmet', 'chest', 'gloves', 'boots', 'pants', 'ring', 'necklace', 'trinket', 'component'].map((slotName) => (
                        <option key={slotName} value={slotName}>{slotName}</option>
                      ))}
                    </select></label>
                    <label>Rarity <select value={form.rarity ?? item.rarity} onChange={(e) => setForm({ ...form, rarity: e.target.value })}>
                      {['common', 'uncommon', 'rare', 'epic', 'legendary'].map((rarity) => (
                        <option key={rarity} value={rarity}>{rarity}</option>
                      ))}
                    </select></label>
                    <label>iLvl <input type="number" value={form.itemLevel ?? item.itemLevel} onChange={(e) => setForm({ ...form, itemLevel: Number(e.target.value) })} /></label>
                    <label>Healing <input type="number" value={form.healingPower ?? item.healingPower} onChange={(e) => setForm({ ...form, healingPower: Number(e.target.value) })} /></label>
                    <label>Resource <input type="number" value={form.maxResourceBonus ?? item.maxResourceBonus} onChange={(e) => setForm({ ...form, maxResourceBonus: Number(e.target.value) })} /></label>
                    <label>Description <textarea value={form.description ?? item.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
                    <div className="admin-edit-actions">
                      <button className="primary-button" onClick={() => saveItem(item.id)} disabled={saving[`item-${item.id}`]} type="button">
                        {saving[`item-${item.id}`] ? 'Saving...' : 'Save'}
                      </button>
                      <button className="text-button" onClick={() => { setEditId(null); setForm({}) }} type="button">Cancel</button>
                    </div>
                  </div>
                ) : (
                  <>
                    <div className="admin-item-header">
                      <img className="admin-thumb" src={item.imageUrl || '/equipment-placeholder.svg'} alt={`${item.name} icon`} />
                      <span className={`admin-glyph rarity-${item.rarity}`}>{item.glyph}</span>
                      <div>
                        <strong>{item.name}</strong>
                        <small className="admin-item-meta">{item.slot} · iLvl {item.itemLevel} · {item.rarity}</small>
                      </div>
                    </div>
                    <p className="admin-item-desc">{item.description}</p>
                    <div className="admin-item-stats">
                      <span>+{item.healingPower} healing</span>
                      <span>+{item.maxResourceBonus} resource</span>
                    </div>
                    <div className="admin-edit-actions">
                      <button className="text-button" onClick={() => { setEditId(item.id); setForm({}) }} type="button">Edit</button>
                      {item.slot !== 'component' && (
                        <label className="boss-upload-button">
                          {saving[`item-image-${item.id}`] ? 'Uploading...' : 'Upload Art'}
                          <input accept="image/png,image/jpeg,image/webp,image/gif" disabled={saving[`item-image-${item.id}`]}
                            onChange={(event) => uploadItemImage(item.id, event.target.files?.[0])} type="file" />
                        </label>
                      )}
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>
        </details>
      ))}
    </div>
  )
}

function DungeonsTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const [editId, setEditId] = useState<number | null>(null)
  const [form, setForm] = useState<Partial<AdminDungeon>>({})

  async function saveDungeon(id: number) {
    setSaving((prev) => ({ ...prev, [`dungeon-${id}`]: true }))
    try {
      const body: Record<string, string | number> = {}
      if (form.name !== undefined) body.name = form.name
      if (form.slug !== undefined) body.slug = form.slug
      if (form.contentType !== undefined) body.content_type = form.contentType
      if (form.recommendedLevel !== undefined) body.recommended_level = form.recommendedLevel
      if (form.partySize !== undefined) body.party_size = form.partySize
      if (form.experienceReward !== undefined) body.experience_reward = form.experienceReward
      if (form.description !== undefined) body.description = form.description
      await fetchJson(`${API}/dungeons/${id}`, jsonRequest('PUT', body))
      setData((prev) => prev ? { ...prev, dungeons: prev.dungeons.map((dungeon) => dungeon.id === id ? { ...dungeon, ...form } : dungeon) } : prev)
      setEditId(null)
      setForm({})
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`dungeon-${id}`]: false }))
    }
  }

  async function uploadDungeonImage(dungeonId: number, file: File | undefined) {
    if (!file) return
    setSaving((prev) => ({ ...prev, [`dungeon-image-${dungeonId}`]: true }))
    try {
      const imageData = await fileToDataUrl(file)
      const result = await fetchJson<{ imageUrl: string }>(`${API}/dungeons/${dungeonId}/image`, jsonRequest('PUT', { imageData }))
      setData((prev) => prev ? {
        ...prev,
        dungeons: prev.dungeons.map((dungeon) => dungeon.id === dungeonId ? { ...dungeon, imageUrl: result.imageUrl } : dungeon),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Upload failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`dungeon-image-${dungeonId}`]: false }))
    }
  }

  return (
    <div className="admin-panel">
      <div className="admin-grid">
        {data.dungeons.map((dungeon) => (
          <div key={dungeon.id} className="admin-card">
            {editId === dungeon.id ? (
              <div className="admin-edit-form">
                <label>Name <input value={form.name ?? dungeon.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></label>
                <label>Slug <input value={form.slug ?? dungeon.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} /></label>
                <label>Type <select value={form.contentType ?? dungeon.contentType} onChange={(e) => setForm({ ...form, contentType: e.target.value })}>
                  <option value="dungeon">dungeon</option>
                  <option value="raid">raid</option>
                </select></label>
                <label>Level <input type="number" value={form.recommendedLevel ?? dungeon.recommendedLevel} onChange={(e) => setForm({ ...form, recommendedLevel: Number(e.target.value) })} /></label>
                <label>Party <input type="number" value={form.partySize ?? dungeon.partySize} onChange={(e) => setForm({ ...form, partySize: Number(e.target.value) })} /></label>
                <label>XP <input type="number" value={form.experienceReward ?? dungeon.experienceReward} onChange={(e) => setForm({ ...form, experienceReward: Number(e.target.value) })} /></label>
                <label>Description <textarea value={form.description ?? dungeon.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
                <div className="admin-edit-actions">
                  <button className="primary-button" onClick={() => saveDungeon(dungeon.id)} disabled={saving[`dungeon-${dungeon.id}`]} type="button">
                    {saving[`dungeon-${dungeon.id}`] ? 'Saving...' : 'Save'}
                  </button>
                  <button className="text-button" onClick={() => { setEditId(null); setForm({}) }} type="button">Cancel</button>
                </div>
              </div>
            ) : (
              <>
                <div className="admin-item-header">
                  <img className="admin-thumb" src={dungeon.imageUrl || '/boss-placeholder.svg'} alt={`${dungeon.name} art`} />
                  <div>
                    <strong>{dungeon.name}</strong>
                    <small className="admin-item-meta">#{dungeon.id} · {dungeon.contentType} · party {dungeon.partySize}</small>
                  </div>
                </div>
                <p className="admin-item-desc">{dungeon.description}</p>
                <div className="admin-edit-actions">
                  <button className="text-button" onClick={() => { setEditId(dungeon.id); setForm({}) }} type="button">Edit</button>
                  <label className="boss-upload-button">
                    {saving[`dungeon-image-${dungeon.id}`] ? 'Uploading...' : 'Upload Art'}
                    <input accept="image/png,image/jpeg,image/webp,image/gif" disabled={saving[`dungeon-image-${dungeon.id}`]}
                      onChange={(event) => uploadDungeonImage(dungeon.id, event.target.files?.[0])} type="file" />
                  </label>
                </div>
              </>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function EncountersTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const [filter, setFilter] = useState('')
  const [editId, setEditId] = useState<number | null>(null)
  const [form, setForm] = useState<Partial<AdminEncounter>>({})
  const encounters = data.encounters.filter((encounter) =>
    encounter.enemyName.toLowerCase().includes(filter.toLowerCase())
    || encounter.slug.toLowerCase().includes(filter.toLowerCase())
    || dungeonName(data, encounter.dungeonId).toLowerCase().includes(filter.toLowerCase()))

  async function saveEncounter(id: number) {
    setSaving((prev) => ({ ...prev, [`encounter-${id}`]: true }))
    try {
      const body: Record<string, string | number> = {}
      if (form.enemyName !== undefined) body.name = form.enemyName
      if (form.slug !== undefined) body.slug = form.slug
      if (form.encounterType !== undefined) body.encounter_type = form.encounterType
      if (form.maxHealth !== undefined) body.max_health = form.maxHealth
      if (form.baseDamage !== undefined) body.base_damage = form.baseDamage
      if (form.tankDamage !== undefined) body.tank_damage = form.tankDamage
      if (form.partyDamage !== undefined) body.party_damage = form.partyDamage
      if (form.description !== undefined) body.description = form.description
      await fetchJson(`${API}/encounters/${id}`, jsonRequest('PUT', body))
      setData((prev) => prev ? {
        ...prev,
        encounters: prev.encounters.map((encounter) => encounter.id === id ? { ...encounter, ...form } : encounter),
      } : prev)
      setEditId(null)
      setForm({})
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`encounter-${id}`]: false }))
    }
  }

  async function uploadEncounterImage(encounterId: number, file: File | undefined) {
    if (!file) return
    setSaving((prev) => ({ ...prev, [`encounter-image-${encounterId}`]: true }))
    try {
      const imageData = await fileToDataUrl(file)
      const result = await fetchJson<{ imageUrl: string }>(`${API}/encounters/${encounterId}/image`, jsonRequest('PUT', { imageData }))
      setData((prev) => prev ? {
        ...prev,
        encounters: prev.encounters.map((encounter) => encounter.id === encounterId ? { ...encounter, imageUrl: result.imageUrl } : encounter),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Upload failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`encounter-image-${encounterId}`]: false }))
    }
  }

  return (
    <div className="admin-panel">
      <input className="admin-search" placeholder="Search mobs, bosses, dungeons..." value={filter}
        onChange={(e) => setFilter(e.target.value)} />
      <div className="admin-grid boss-image-grid">
        {encounters.map((encounter) => (
          <div key={encounter.id} className="admin-card">
            {editId === encounter.id ? (
              <div className="admin-edit-form">
                <label>Name <input value={form.enemyName ?? encounter.enemyName} onChange={(e) => setForm({ ...form, enemyName: e.target.value })} /></label>
                <label>Slug <input value={form.slug ?? encounter.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} /></label>
                <label>Type <select value={form.encounterType ?? encounter.encounterType} onChange={(e) => setForm({ ...form, encounterType: e.target.value })}>
                  <option value="trash">trash</option>
                  <option value="boss">boss</option>
                </select></label>
                <label>Health <input type="number" value={form.maxHealth ?? encounter.maxHealth} onChange={(e) => setForm({ ...form, maxHealth: Number(e.target.value) })} /></label>
                <label>Base Dmg <input type="number" value={form.baseDamage ?? encounter.baseDamage} onChange={(e) => setForm({ ...form, baseDamage: Number(e.target.value) })} /></label>
                <label>Tank Dmg <input type="number" value={form.tankDamage ?? encounter.tankDamage} onChange={(e) => setForm({ ...form, tankDamage: Number(e.target.value) })} /></label>
                <label>Party Dmg <input type="number" value={form.partyDamage ?? encounter.partyDamage} onChange={(e) => setForm({ ...form, partyDamage: Number(e.target.value) })} /></label>
                <label>Description <textarea value={form.description ?? encounter.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></label>
                <div className="admin-edit-actions">
                  <button className="primary-button" onClick={() => saveEncounter(encounter.id)} disabled={saving[`encounter-${encounter.id}`]} type="button">
                    {saving[`encounter-${encounter.id}`] ? 'Saving...' : 'Save'}
                  </button>
                  <button className="text-button" onClick={() => { setEditId(null); setForm({}) }} type="button">Cancel</button>
                </div>
              </div>
            ) : (
              <>
                <img className="admin-recipe-image" src={encounter.imageUrl || '/boss-placeholder.svg'} alt={`${encounter.enemyName} art`} />
                <div>
                  <strong>{encounter.enemyName}</strong>
                  <small className="admin-item-meta">{dungeonName(data, encounter.dungeonId)} · {encounter.encounterType} · #{encounter.sequence}</small>
                </div>
                <p className="admin-item-desc">{encounter.description}</p>
                <div className="admin-item-stats">
                  <span>{encounter.maxHealth} hp</span>
                  <span>{encounter.baseDamage} dmg</span>
                </div>
                <div className="admin-edit-actions">
                  <button className="text-button" onClick={() => { setEditId(encounter.id); setForm({}) }} type="button">Edit</button>
                  <label className="boss-upload-button">
                    {saving[`encounter-image-${encounter.id}`] ? 'Uploading...' : 'Upload Art'}
                    <input accept="image/png,image/jpeg,image/webp,image/gif" disabled={saving[`encounter-image-${encounter.id}`]}
                      onChange={(event) => uploadEncounterImage(encounter.id, event.target.files?.[0])} type="file" />
                  </label>
                </div>
              </>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function LootTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const [encounterId, setEncounterId] = useState(data.encounters.filter(e => e.encounterType === 'boss')[0]?.id ?? 0)
  const [difficultyId, setDifficultyId] = useState(data.difficulties[0]?.id ?? 0)
  const [addItemId, setAddItemId] = useState(0)
  const [addDropWeight, setAddDropWeight] = useState(100)
  const [addDropChance, setAddDropChance] = useState(1)
  const [renameItemId, setRenameItemId] = useState<number | null>(null)
  const [renameValue, setRenameValue] = useState('')
  const [bossSort, setBossSort] = useState<'dungeon' | 'boss'>('dungeon')
  const enc = data.encounters.find(e => e.id === encounterId)
  const bossOptions = data.encounters
    .filter((e) => e.encounterType === 'boss')
    .sort((a, b) => bossSort === 'boss'
      ? a.enemyName.localeCompare(b.enemyName) || a.dungeonId - b.dungeonId || a.sequence - b.sequence
      : a.dungeonId - b.dungeonId || a.sequence - b.sequence || a.enemyName.localeCompare(b.enemyName))
  const bossLoot = data.encounterLoot.filter(
    (loot) => loot.encounterId === encounterId && loot.difficultyId === difficultyId,
  )

  async function renameItem(itemId: number) {
    if (renameValue.trim() === '' || renameValue === itemName(data, itemId)) return
    setSaving((prev) => ({ ...prev, [`loot-rename-${itemId}`]: true }))
    try {
      await fetchJson(`${API}/items/${itemId}`, jsonRequest('PUT', { name: renameValue.trim() }))
      setData((prev) => prev ? {
        ...prev,
        items: prev.items.map((item) => item.id === itemId ? { ...item, name: renameValue.trim() } : item),
      } : prev)
      setRenameItemId(null)
      setRenameValue('')
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Rename failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`loot-rename-${itemId}`]: false }))
    }
  }

  async function deleteLoot(eId: number, dId: number, iId: number) {
    try {
      await fetchJson(`${API}/encounter-loot/${eId}/${dId}/${iId}`, { method: 'DELETE' })
      setData((prev) => prev ? {
        ...prev,
        encounterLoot: prev.encounterLoot.filter((loot) => !(loot.encounterId === eId && loot.difficultyId === dId && loot.itemId === iId)),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Delete failed')
    }
  }

  async function addLoot() {
    if (!addItemId) return
    try {
      await fetchJson(`${API}/encounter-loot`, jsonRequest('POST', { encounterId, itemId: addItemId, difficultyId, dropWeight: addDropWeight, dropChance: addDropChance }))
      setData((prev) => prev ? {
        ...prev,
        encounterLoot: [
          ...prev.encounterLoot.filter((loot) => !(loot.encounterId === encounterId && loot.difficultyId === difficultyId && loot.itemId === addItemId)),
          { encounterId, itemId: addItemId, difficultyId, dropWeight: addDropWeight, dropChance: addDropChance },
        ],
      } : prev)
      setAddItemId(0)
      setAddDropWeight(100)
      setAddDropChance(1)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Add failed')
    }
  }

  return (
    <div className="admin-panel">
      <div className="admin-loot-selectors">
        <label>Boss <select value={encounterId} onChange={(e) => setEncounterId(Number(e.target.value))}>
          {bossOptions.map((encounter) => (
            <option key={encounter.id} value={encounter.id}>{encounter.enemyName} ({dungeonName(data, encounter.dungeonId)})</option>
          ))}
        </select></label>
        <label>Sort <select value={bossSort} onChange={(e) => setBossSort(e.target.value as 'dungeon' | 'boss')}>
          <option value="dungeon">Dungeon order</option>
          <option value="boss">Boss name</option>
        </select></label>
        <label>Difficulty <select value={difficultyId} onChange={(e) => setDifficultyId(Number(e.target.value))}>
          {data.difficulties.map((difficulty) => (
            <option key={difficulty.id} value={difficulty.id}>{difficulty.name} (iLvl {difficulty.droppedItemLevel})</option>
          ))}
        </select></label>
      </div>

      <h3 className="admin-loot-title">{enc?.enemyName ?? 'Unknown'} - {difficultyName(data, difficultyId)}</h3>
      {bossLoot.length === 0 && <p className="admin-empty">No loot entries.</p>}
      <div className="admin-loot-list">
        {bossLoot.map((entry) => (
          <div key={`${entry.itemId}`} className="admin-loot-row">
            <span className={`admin-glyph rarity-${data.items.find(i => i.id === entry.itemId)?.rarity ?? 'common'}`}>{itemGlyph(data, entry.itemId)}</span>
            {renameItemId === entry.itemId ? (
              <span className="admin-loot-name"><input className="admin-rename-input" value={renameValue}
                onChange={(e) => setRenameValue(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter') renameItem(entry.itemId); if (e.key === 'Escape') { setRenameItemId(null); setRenameValue('') } }} /></span>
            ) : (
              <span className="admin-loot-name">{itemName(data, entry.itemId)}</span>
            )}
            <span className="admin-loot-weight">Weight: {entry.dropWeight}</span>
            <span className="admin-loot-chance">Chance: {(entry.dropChance * 100).toFixed(0)}%</span>
            {renameItemId === entry.itemId ? (
              <>
                <button className="primary-button" disabled={saving[`loot-rename-${entry.itemId}`]} onClick={() => renameItem(entry.itemId)} type="button">
                  {saving[`loot-rename-${entry.itemId}`] ? 'Saving...' : 'Save'}
                </button>
                <button className="text-button" onClick={() => { setRenameItemId(null); setRenameValue('') }} type="button">Cancel</button>
              </>
            ) : (
              <>
                <button className="text-button" onClick={() => { setRenameItemId(entry.itemId); setRenameValue(itemName(data, entry.itemId)) }} type="button">Rename</button>
                <button className="danger-button" onClick={() => deleteLoot(entry.encounterId, entry.difficultyId, entry.itemId)} type="button">X</button>
              </>
            )}
          </div>
        ))}
      </div>

      <details className="admin-add-section">
        <summary>Add Item to Loot Table</summary>
        <div className="admin-add-form">
          <label>Item <select value={addItemId} onChange={(e) => setAddItemId(Number(e.target.value))}>
            <option value={0}>Select item...</option>
            {data.items.filter((item) => !bossLoot.some((loot) => loot.itemId === item.id)).map((item) => (
              <option key={item.id} value={item.id}>[{item.glyph}] {item.name} ({item.slot})</option>
            ))}
          </select></label>
          <label>Drop Weight <input type="number" value={addDropWeight} onChange={(e) => setAddDropWeight(Number(e.target.value))} /></label>
          <label>Drop Chance <input type="number" min="0" max="1" step="0.05" value={addDropChance} onChange={(e) => setAddDropChance(Number(e.target.value))} /></label>
          <button className="primary-button" onClick={addLoot} disabled={!addItemId} type="button">Add</button>
        </div>
      </details>
    </div>
  )
}

function CraftingTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const [recipeId, setRecipeId] = useState(data.craftingRecipes[0]?.id ?? 0)
  const [itemLevelFilter, setItemLevelFilter] = useState('all')
  const [bossFilterId, setBossFilterId] = useState(0)
  const [addItemId, setAddItemId] = useState(0)
  const [addQty, setAddQty] = useState(1)
  const [outputNameByItem, setOutputNameByItem] = useState<Record<number, string>>({})
  const [recipeDraft, setRecipeDraft] = useState<Record<number, Partial<AdminRecipe>>>({})
  const bossEncounters = data.encounters.filter((encounter) => encounter.encounterType === 'boss')
  const bossLootItemIds = new Set(data.encounterLoot.filter((entry) => bossEncounters.some((boss) => boss.id === entry.encounterId)).map((entry) => entry.itemId))
  const itemLevels = Array.from(new Set(
    data.craftingRecipes.map((candidate) => data.items.find((item) => item.id === candidate.itemId)?.itemLevel)
      .filter((itemLevel): itemLevel is number => itemLevel !== undefined),
  )).sort((a, b) => a - b)
  const filteredRecipes = data.craftingRecipes.filter((candidate) => {
    const item = data.items.find((i) => i.id === candidate.itemId)
    if (!item) return false
    if (itemLevelFilter !== 'all' && item.itemLevel !== Number(itemLevelFilter)) return false
    if (bossFilterId === 0) return true
    return candidate.sourceEncounterId === bossFilterId
      || candidate.components.some((component) => data.encounterLoot.some((entry) => entry.encounterId === bossFilterId && entry.itemId === component.itemId))
  })
  const recipe = filteredRecipes.find((candidate) => candidate.id === recipeId) ?? filteredRecipes[0] ?? null
  const draft = recipe ? recipeDraft[recipe.id] ?? {} : {}
  const outputItem = recipe ? data.items.find((item) => item.id === recipe.itemId) : null
  const outputName = outputItem ? outputNameByItem[outputItem.id] ?? outputItem.name : ''
  const bossComponentOptions = data.items.filter((item) => (
    item.slot === 'component'
    && bossLootItemIds.has(item.id)
    && !recipe?.components.some((component) => component.itemId === item.id)
  ))
  const addComponentIsValid = bossComponentOptions.some((item) => item.id === addItemId)

  async function saveOutputName() {
    if (!outputItem || outputName.trim() === '' || outputName === outputItem.name) return
    setSaving((prev) => ({ ...prev, [`item-name-${outputItem.id}`]: true }))
    try {
      await fetchJson(`${API}/items/${outputItem.id}`, jsonRequest('PUT', { name: outputName.trim() }))
      setData((prev) => prev ? {
        ...prev,
        items: prev.items.map((item) => item.id === outputItem.id ? { ...item, name: outputName.trim() } : item),
      } : prev)
      setOutputNameByItem((prev) => ({ ...prev, [outputItem.id]: outputName.trim() }))
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Rename failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`item-name-${outputItem.id}`]: false }))
    }
  }

  async function uploadItemImage(itemId: number, file: File | undefined) {
    if (!file) return
    setSaving((prev) => ({ ...prev, [`item-image-${itemId}`]: true }))
    try {
      const imageData = await fileToDataUrl(file)
      const result = await fetchJson<{ imageUrl: string }>(`${API}/items/${itemId}/image`, jsonRequest('PUT', { imageData }))
      setData((prev) => prev ? {
        ...prev,
        items: prev.items.map((item) => item.id === itemId ? { ...item, imageUrl: result.imageUrl } : item),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Upload failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`item-image-${itemId}`]: false }))
    }
  }

  async function saveRecipeMeta() {
    if (!recipe) return
    const next = { ...recipe, ...draft }
    setSaving((prev) => ({ ...prev, [`recipe-${recipe.id}`]: true }))
    try {
      await fetchJson(`${API}/crafting-recipes/${recipe.id}`, jsonRequest('PUT', {
        difficultyId: next.difficultyId,
        sourceDungeonId: next.sourceDungeonId,
        sourceEncounterId: next.sourceEncounterId,
      }))
      setData((prev) => prev ? {
        ...prev,
        craftingRecipes: prev.craftingRecipes.map((candidate) => candidate.id === recipe.id ? next : candidate),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`recipe-${recipe.id}`]: false }))
    }
  }

  async function deleteComponent(rId: number, iId: number) {
    try {
      await fetchJson(`${API}/crafting-recipes/${rId}/components/${iId}`, { method: 'DELETE' })
      setData((prev) => prev ? {
        ...prev,
        craftingRecipes: prev.craftingRecipes.map((candidate) =>
          candidate.id === rId ? { ...candidate, components: candidate.components.filter((component) => component.itemId !== iId) } : candidate),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Delete failed')
    }
  }

  async function addComponent() {
    if (!addComponentIsValid || !recipe) return
    try {
      await fetchJson(`${API}/crafting-recipes/${recipe.id}/components`, jsonRequest('POST', { itemId: addItemId, quantity: addQty }))
      setData((prev) => prev ? {
        ...prev,
        craftingRecipes: prev.craftingRecipes.map((candidate) =>
          candidate.id === recipe.id
            ? { ...candidate, components: [...candidate.components.filter((component) => component.itemId !== addItemId), { itemId: addItemId, quantity: addQty }] }
            : candidate),
      } : prev)
      setAddItemId(0)
      setAddQty(1)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Add failed')
    }
  }

  async function updateQty(rId: number, iId: number, quantity: number) {
    try {
      await fetchJson(`${API}/crafting-recipes/${rId}/components`, jsonRequest('POST', { itemId: iId, quantity }))
      setData((prev) => prev ? {
        ...prev,
        craftingRecipes: prev.craftingRecipes.map((candidate) =>
          candidate.id === rId
            ? { ...candidate, components: candidate.components.map((component) => component.itemId === iId ? { ...component, quantity } : component) }
            : candidate),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Update failed')
    }
  }

  return (
    <div className="admin-panel">
      <div className="admin-crafting-filters">
        <label>Item Level <select value={itemLevelFilter} onChange={(e) => setItemLevelFilter(e.target.value)}>
          <option value="all">All levels</option>
          {itemLevels.map((itemLevel) => <option key={itemLevel} value={itemLevel}>iLvl {itemLevel}</option>)}
        </select></label>
        <label>Boss <select value={bossFilterId} onChange={(e) => setBossFilterId(Number(e.target.value))}>
          <option value={0}>All bosses</option>
          {bossEncounters.map((boss) => <option key={boss.id} value={boss.id}>{boss.enemyName}</option>)}
        </select></label>
        <label>Recipe <select value={recipe?.id ?? 0} onChange={(e) => setRecipeId(Number(e.target.value))}>
          {filteredRecipes.length === 0 && <option value={0}>No matching recipes</option>}
          {filteredRecipes.map((candidate) => (
            <option key={candidate.id} value={candidate.id}>[{itemGlyph(data, candidate.itemId)}] {itemName(data, candidate.itemId)} - {encounterName(data, candidate.sourceEncounterId)}</option>
          ))}
        </select></label>
      </div>

      {outputItem && recipe && (
        <div className="admin-recipe-header">
          <img className="admin-recipe-image" src={outputItem.imageUrl || '/equipment-placeholder.svg'} alt={`${outputItem.name} icon`} />
          <div>
            <label className="admin-inline-field">Name <input value={outputName}
              onChange={(e) => setOutputNameByItem((prev) => ({ ...prev, [outputItem.id]: e.target.value }))} /></label>
            <small className="admin-item-meta">{outputItem.slot} · iLvl {outputItem.itemLevel} · {outputItem.rarity}</small>
          </div>
          <div className="admin-recipe-actions">
            <button className="primary-button" disabled={saving[`item-name-${outputItem.id}`] || outputName.trim() === '' || outputName === outputItem.name}
              onClick={saveOutputName} type="button">{saving[`item-name-${outputItem.id}`] ? 'Saving...' : 'Rename'}</button>
            <label className="boss-upload-button">{saving[`item-image-${outputItem.id}`] ? 'Uploading...' : 'Upload Art'}
              <input accept="image/png,image/jpeg,image/webp,image/gif" disabled={saving[`item-image-${outputItem.id}`]}
                onChange={(event) => uploadItemImage(outputItem.id, event.target.files?.[0])} type="file" />
            </label>
          </div>
        </div>
      )}

      {recipe && (
        <div className="admin-add-form">
          <label>Difficulty <select value={draft.difficultyId ?? recipe.difficultyId ?? 0}
            onChange={(e) => setRecipeDraft((prev) => ({ ...prev, [recipe.id]: { ...prev[recipe.id], difficultyId: Number(e.target.value) || null } }))}>
            <option value={0}>None</option>
            {data.difficulties.map((difficulty) => <option key={difficulty.id} value={difficulty.id}>{difficulty.name}</option>)}
          </select></label>
          <label>Source Dungeon <select value={draft.sourceDungeonId ?? recipe.sourceDungeonId ?? 0}
            onChange={(e) => setRecipeDraft((prev) => ({ ...prev, [recipe.id]: { ...prev[recipe.id], sourceDungeonId: Number(e.target.value) || null } }))}>
            <option value={0}>None</option>
            {data.dungeons.map((dungeon) => <option key={dungeon.id} value={dungeon.id}>{dungeon.name}</option>)}
          </select></label>
          <label>Source Boss <select value={draft.sourceEncounterId ?? recipe.sourceEncounterId ?? 0}
            onChange={(e) => setRecipeDraft((prev) => ({ ...prev, [recipe.id]: { ...prev[recipe.id], sourceEncounterId: Number(e.target.value) || null } }))}>
            <option value={0}>None</option>
            {bossEncounters.map((boss) => <option key={boss.id} value={boss.id}>{boss.enemyName}</option>)}
          </select></label>
          <button className="primary-button" onClick={saveRecipeMeta} disabled={saving[`recipe-${recipe.id}`]} type="button">
            {saving[`recipe-${recipe.id}`] ? 'Saving...' : 'Save Source'}
          </button>
        </div>
      )}

      <h3 className="admin-loot-title">Required Components</h3>
      {(!recipe || recipe.components.length === 0) && (
        <p className="admin-empty">No component requirements. Crafting and upgrades are blocked until materials are added.</p>
      )}
      <div className="admin-loot-list">
        {recipe?.components.map((comp) => (
          <div key={comp.itemId} className="admin-loot-row">
            <span className={`admin-glyph rarity-${data.items.find(i => i.id === comp.itemId)?.rarity ?? 'common'}`}>{itemGlyph(data, comp.itemId)}</span>
            <span className="admin-loot-name">{itemName(data, comp.itemId)}</span>
            <span className="admin-loot-weight">Qty: <input className="admin-qty-input" type="number" min="1" value={comp.quantity}
              onChange={(e) => updateQty(recipe.id, comp.itemId, Number(e.target.value))} /></span>
            <button className="danger-button" onClick={() => deleteComponent(recipe.id, comp.itemId)} type="button">X</button>
          </div>
        ))}
      </div>

      <details className="admin-add-section">
        <summary>Add Component</summary>
        <div className="admin-add-form">
          <label>Component <select value={addItemId} onChange={(e) => setAddItemId(Number(e.target.value))}>
            <option value={0}>Select component...</option>
            {bossComponentOptions.map((item) => (
              <option key={item.id} value={item.id}>[{item.glyph}] {item.name} ({componentBossNames(data, item.id)})</option>
            ))}
          </select></label>
          <label>Quantity <input type="number" min="1" value={addQty} onChange={(e) => setAddQty(Number(e.target.value))} /></label>
          <button className="primary-button" onClick={addComponent} disabled={!recipe || !addComponentIsValid} type="button">Add</button>
        </div>
      </details>
    </div>
  )
}

function UpgradesTab({ data, setData, setSaving, saving }: {
  data: AdminData
  setData: SetData
  setSaving: SetSaving
  saving: SavingState
}) {
  const equipment = data.items.filter((item) => item.slot !== 'component')
  const bossEncounters = data.encounters.filter((encounter) => encounter.encounterType === 'boss')
  const [bossFilterId, setBossFilterId] = useState(0)
  const [slotFilter, setSlotFilter] = useState('all')
  const [sortBy, setSortBy] = useState<'boss' | 'slot' | 'level' | 'name'>('boss')
  const [startItemId, setStartItemId] = useState(equipment[0]?.id ?? 0)
  const [draftTargets, setDraftTargets] = useState<Record<number, number>>({})

  const pathByFromItem = new Map(data.gearUpgradePaths.map((path) => [path.fromItemId, path.toItemId]))
  const recipeByItem = new Map(data.craftingRecipes.map((recipe) => [recipe.itemId, recipe]))
  const bossNameForItem = (itemId: number) => encounterName(data, recipeByItem.get(itemId)?.sourceEncounterId ?? null)
  const chainBossIds = (itemId: number) => buildUpgradeChain(itemId, pathByFromItem, equipment)
    .map((item) => recipeByItem.get(item.id)?.sourceEncounterId ?? 0)
  const filteredStarts = equipment
    .filter((item) => slotFilter === 'all' || item.slot === slotFilter)
    .filter((item) => bossFilterId === 0 || chainBossIds(item.id).includes(bossFilterId))
    .sort((left, right) => {
      if (sortBy === 'boss') return bossNameForItem(left.id).localeCompare(bossNameForItem(right.id)) || left.slot.localeCompare(right.slot) || left.itemLevel - right.itemLevel
      if (sortBy === 'slot') return left.slot.localeCompare(right.slot) || left.itemLevel - right.itemLevel || left.name.localeCompare(right.name)
      if (sortBy === 'level') return left.itemLevel - right.itemLevel || left.slot.localeCompare(right.slot) || left.name.localeCompare(right.name)
      return left.name.localeCompare(right.name)
    })
  const selectedStart = filteredStarts.find((item) => item.id === startItemId) ?? filteredStarts[0] ?? null
  const chain = selectedStart ? buildUpgradeChain(selectedStart.id, pathByFromItem, equipment) : []

  function targetOptions(item: AdminItem) {
    return equipment
      .filter((candidate) => candidate.slot === item.slot && candidate.itemLevel > item.itemLevel)
      .sort((left, right) => left.itemLevel - right.itemLevel || bossNameForItem(left.id).localeCompare(bossNameForItem(right.id)) || left.name.localeCompare(right.name))
  }

  function selectedTargetId(item: AdminItem) {
    return draftTargets[item.id] ?? pathByFromItem.get(item.id) ?? targetOptions(item)[0]?.id ?? 0
  }

  async function savePath(fromItem: AdminItem, toItemId: number) {
    if (!toItemId) return
    setSaving((prev) => ({ ...prev, [`upgrade-${fromItem.id}`]: true }))
    try {
      await fetchJson(`${API}/gear-upgrade-paths`, jsonRequest('POST', { fromItemId: fromItem.id, toItemId }))
      setData((prev) => prev ? {
        ...prev,
        gearUpgradePaths: [
          ...prev.gearUpgradePaths.filter((path) => path.fromItemId !== fromItem.id),
          { fromItemId: fromItem.id, toItemId },
        ],
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving((prev) => ({ ...prev, [`upgrade-${fromItem.id}`]: false }))
    }
  }

  async function deletePath(itemId: number) {
    try {
      await fetchJson(`${API}/gear-upgrade-paths/${itemId}`, { method: 'DELETE' })
      setData((prev) => prev ? {
        ...prev,
        gearUpgradePaths: prev.gearUpgradePaths.filter((path) => path.fromItemId !== itemId),
      } : prev)
    } catch (e: unknown) {
      alert(e instanceof Error ? e.message : 'Delete failed')
    }
  }

  return (
    <div className="admin-panel">
      <div className="admin-upgrade-toolbar">
        <label>Boss <select value={bossFilterId} onChange={(e) => setBossFilterId(Number(e.target.value))}>
          <option value={0}>All bosses</option>
          {bossEncounters.map((boss) => <option key={boss.id} value={boss.id}>{boss.enemyName}</option>)}
        </select></label>
        <label>Slot <select value={slotFilter} onChange={(e) => setSlotFilter(e.target.value)}>
          <option value="all">All slots</option>
          {Array.from(new Set(equipment.map((item) => item.slot))).sort().map((slot) => <option key={slot} value={slot}>{slot}</option>)}
        </select></label>
        <label>Sort <select value={sortBy} onChange={(e) => setSortBy(e.target.value as 'boss' | 'slot' | 'level' | 'name')}>
          <option value="boss">Boss</option>
          <option value="slot">Slot</option>
          <option value="level">Item level</option>
          <option value="name">Name</option>
        </select></label>
        <label>Gear Path <select value={selectedStart?.id ?? 0} onChange={(e) => setStartItemId(Number(e.target.value))}>
          {filteredStarts.length === 0 && <option value={0}>No matching gear</option>}
          {filteredStarts.map((item) => <option key={item.id} value={item.id}>{bossNameForItem(item.id)} - {itemOptionName(item)}</option>)}
        </select></label>
      </div>

      {chain.length === 0 && <p className="admin-empty">No gear matches these filters.</p>}
      <div className="admin-upgrade-chain">
        {chain.map((item, index) => {
          const options = targetOptions(item)
          const targetId = selectedTargetId(item)
          const target = equipment.find((candidate) => candidate.id === targetId) ?? null
          const targetRecipe = target ? recipeByItem.get(target.id) : null
          return (
            <div key={item.id} className="admin-upgrade-step">
              <div className="admin-upgrade-current">
                <span className={`admin-glyph rarity-${item.rarity}`}>{item.glyph}</span>
                <div>
                  <strong>{index + 1}. {item.name}</strong>
                  <small className="admin-item-meta">{item.slot} · iLvl {item.itemLevel} · {bossNameForItem(item.id)}</small>
                </div>
              </div>
              <label>Upgrades To
                <select value={targetId} onChange={(e) => setDraftTargets((prev) => ({ ...prev, [item.id]: Number(e.target.value) }))}>
                  {options.length === 0 && <option value={0}>End of path</option>}
                  {options.map((candidate) => <option key={candidate.id} value={candidate.id}>{bossNameForItem(candidate.id)} - {itemOptionName(candidate)}</option>)}
                </select>
              </label>
              <p className="admin-item-desc">
                {target
                  ? `Target requirements: ${targetRecipe && targetRecipe.components.length > 0
                    ? targetRecipe.components.map((component) => `${component.quantity}x ${itemName(data, component.itemId)}`).join(', ')
                    : 'none configured - upgrade blocked until materials are added'}`
                  : 'No next upgrade selected.'}
              </p>
              <div className="admin-edit-actions">
                <button className="primary-button" onClick={() => savePath(item, targetId)} disabled={!targetId || saving[`upgrade-${item.id}`]} type="button">
                  {saving[`upgrade-${item.id}`] ? 'Saving...' : 'Save Step'}
                </button>
                {pathByFromItem.has(item.id) && <button className="danger-button" onClick={() => deletePath(item.id)} type="button">Remove Link</button>}
              </div>
            </div>
          )
        })}
      </div>

      <details className="admin-add-section">
        <summary>All Upgrade Links ({data.gearUpgradePaths.length})</summary>
        <div className="admin-loot-list">
          {data.gearUpgradePaths
            .slice()
            .sort((left, right) => itemName(data, left.fromItemId).localeCompare(itemName(data, right.fromItemId)))
            .map((path) => (
              <div key={path.fromItemId} className="admin-loot-row">
                <span className="admin-loot-name">{itemName(data, path.fromItemId)}</span>
                <span className="admin-loot-chance">to</span>
                <span className="admin-loot-name">{itemName(data, path.toItemId)}</span>
                <button className="danger-button" onClick={() => deletePath(path.fromItemId)} type="button">X</button>
              </div>
            ))}
        </div>
      </details>
    </div>
  )
}

function ClassesTab({ data }: { data: AdminData }) {
  const [classId, setClassId] = useState(data.classes[0]?.id ?? 0)
  const selectedClass = data.classes.find((candidate) => candidate.id === classId)
    ?? data.classes[0]
    ?? null

  return (
    <div className="admin-panel">
      <div className="admin-class-layout">
        <aside className="admin-class-list">
          <p className="eyebrow">Classes</p>
          {data.classes.map((gameClass) => (
            <button
              className={selectedClass?.id === gameClass.id ? 'active' : ''}
              key={gameClass.id}
              onClick={() => setClassId(gameClass.id)}
              style={{ '--class-color': gameClass.themeColor } as CSSProperties}
              type="button"
            >
              <span>{gameClass.name[0]}</span>
              <div>
                <strong>{gameClass.name}</strong>
                <small>{gameClass.resourceName} {gameClass.maxResource}</small>
              </div>
            </button>
          ))}
        </aside>

        {selectedClass ? (
          <section className="admin-class-detail">
            <div className="admin-class-hero" style={{ '--class-color': selectedClass.themeColor } as CSSProperties}>
              <span>{selectedClass.name[0]}</span>
              <div>
                <p className="eyebrow">{selectedClass.slug}</p>
                <h2>{selectedClass.name}</h2>
                <small>{selectedClass.resourceName} pool: {selectedClass.maxResource}</small>
              </div>
              <p>{selectedClass.description}</p>
            </div>

            <section>
              <h3 className="admin-loot-title">Abilities ({selectedClass.abilities.length})</h3>
              <div className="admin-class-table">
                <div className="admin-class-table-head">
                  <span>Ability</span>
                  <span>Type</span>
                  <span>Default Strength</span>
                  <span>Cost</span>
                  <span>Cooldown</span>
                  <span>Unlock</span>
                </div>
                {selectedClass.abilities.map((ability) => (
                  <div key={ability.id} className="admin-class-row">
                    <span><i>{ability.glyph}</i><strong>{ability.name}</strong><small>{ability.description}</small></span>
                    <span>{ability.spellType}</span>
                    <span>{ability.power}</span>
                    <span>{ability.cost}</span>
                    <span>{ability.cooldown}s</span>
                    <span>Lvl {ability.unlockLevel}</span>
                  </div>
                ))}
              </div>
            </section>

            <section>
              <h3 className="admin-loot-title">Talents ({selectedClass.talents.length})</h3>
              <div className="admin-class-talent-grid">
                {selectedClass.talents.map((talent) => (
                  <article key={talent.id} className="admin-class-talent">
                    <div>
                      <span>{talent.glyph}</span>
                      <strong>{talent.name}</strong>
                    </div>
                    <small>Tier {talent.tier} · Branch {talent.branch} · Max {talent.maxRank}</small>
                    <p>{talent.description}</p>
                    <em>{talent.effectType}: {talent.effectValuePerRank}/rank</em>
                    {talent.prerequisiteName && (
                      <small>Requires {talent.prerequisiteName} rank {talent.prerequisiteRank}</small>
                    )}
                  </article>
                ))}
              </div>
            </section>
          </section>
        ) : (
          <p className="admin-empty">No classes found.</p>
        )}
      </div>
    </div>
  )
}

function jsonRequest(method: 'POST' | 'PUT', body: unknown): RequestInit {
  return {
    method,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  }
}

function fileToDataUrl(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.addEventListener('load', () => {
      if (typeof reader.result === 'string') resolve(reader.result)
      else reject(new Error('Unable to read image.'))
    })
    reader.addEventListener('error', () => reject(reader.error ?? new Error('Unable to read image.')))
    reader.readAsDataURL(file)
  })
}

function itemName(data: AdminData, id: number | null) {
  return id ? data.items.find((item) => item.id === id)?.name ?? `Item #${id}` : 'None'
}

function itemGlyph(data: AdminData, id: number) {
  return data.items.find((item) => item.id === id)?.glyph ?? '?'
}

function itemOptionName(item: AdminItem) {
  return `[${item.glyph}] ${item.name} (${item.slot}, iLvl ${item.itemLevel})`
}

function dungeonName(data: AdminData, id: number | null) {
  return id ? data.dungeons.find((dungeon) => dungeon.id === id)?.name ?? `Dungeon #${id}` : 'No dungeon'
}

function encounterName(data: AdminData, id: number | null) {
  return id ? data.encounters.find((encounter) => encounter.id === id)?.enemyName ?? `Encounter #${id}` : 'Any boss'
}

function difficultyName(data: AdminData, id: number | null) {
  return id ? data.difficulties.find((difficulty) => difficulty.id === id)?.name ?? `Difficulty #${id}` : 'None'
}

function componentBossNames(data: AdminData, itemId: number) {
  return data.encounterLoot
    .filter((entry) => entry.itemId === itemId)
    .map((entry) => encounterName(data, entry.encounterId))
    .join(', ')
}

function buildUpgradeChain(startItemId: number, pathByFromItem: Map<number, number>, equipment: AdminItem[]) {
  const itemById = new Map(equipment.map((item) => [item.id, item]))
  const chain: AdminItem[] = []
  const seen = new Set<number>()
  let current = itemById.get(startItemId)
  while (current && !seen.has(current.id)) {
    chain.push(current)
    seen.add(current.id)
    current = itemById.get(pathByFromItem.get(current.id) ?? 0)
  }
  return chain
}

function groupBy<T>(items: T[], keyFn: (item: T) => string): Record<string, T[]> {
  const groups: Record<string, T[]> = {}
  for (const item of items) {
    const key = keyFn(item)
    if (!groups[key]) groups[key] = []
    groups[key].push(item)
  }
  return groups
}