import { Link } from 'react-router-dom'
import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'

const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII']

// Short blurbs for the seeded categories (the list endpoint returns title/slug only).
const BLURBS = {
  'new-player-guide': 'First steps, basic survival, and early goals.',
  'maps-atlas': 'Regions, towns, routes, and travel notes.',
  systems: 'Shard mechanics and custom features.',
  items: 'Equipment, treasures, rewards, and curiosities.',
  monsters: 'Creatures, bosses, spawns, and dangers.',
  crafting: 'Professions, materials, recipes, and tools.',
  lore: 'Stories, places, factions, and mysteries.',
  rules: 'Player conduct, shard expectations, and policies.',
}

export default function Wiki() {
  const { loading, error, data } = useAsync(() => api.wiki())
  const pages = data || []

  return (
    <PublicLayout section="wiki">
      <div className="shell page-body">
        <PageHeader
          center
          eyebrow="Knowledge base"
          title="Mysticmoon Wiki"
          lead="A calm starting point for shard guides, maps, systems, items, monsters, crafting, lore, and rules."
        />
        {loading && <Loading />}
        {error && <ErrorState message="Could not load the wiki right now." />}
        {!loading && !error && pages.length === 0 && <EmptyState>No wiki pages yet.</EmptyState>}
        <section className="grid-4">
          {pages.map((p, i) => (
            <Link key={p.slug} to={`/wiki/${p.slug}`} className="card" style={{ padding: 22 }}>
              <span className="display" style={{ color: 'var(--accent)', fontSize: '1.4rem', marginBottom: 10 }}>
                {ROMAN[i] || i + 1}
              </span>
              <h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
                {p.title}
              </h3>
              <p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
                {BLURBS[p.slug] || 'Open the guide →'}
              </p>
            </Link>
          ))}
        </section>
      </div>
    </PublicLayout>
  )
}