import { notFound } from 'next/navigation'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/navigation'
import { getGuild } from '@/lib/armory'
import { raceName, className, classColor } from '@/lib/wow-data'
import { PageShell } from '@/components/PageShell'

export const dynamic = 'force-dynamic'

export default async function GuildPage({
  params,
}: {
  params: Promise<{ locale: string; guid: string }>
}) {
  const { locale, guid } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Armory')

  const guild = await getGuild(Number(guid))
  if (!guild) notFound()

  return (
    <PageShell title={guild.name}>
      <div className="main-wide">
        <p className="forum-path">
          <Link href="/armory">← {t('backToArmory')}</Link>
        </p>

        <div className="armory-char-sub">
          {guild.members.length} {t('members')}
          {guild.leaderName && (
            <>
              {' · '}
              {t('leader')}: {guild.leaderName}
            </>
          )}
        </div>

        <div className="armory-list" style={{ marginTop: 16 }}>
          {guild.members.map((m) => (
            <Link key={m.guid} href={`/armory/character/${m.guid}`} className="armory-row">
              <span className="armory-name" style={{ color: classColor(m.class) }}>
                {m.name}
              </span>
              <span className="armory-meta">
                {t('level')} {m.level} · {raceName(m.race, locale)} · {className(m.class, locale)}
              </span>
            </Link>
          ))}
        </div>
      </div>
    </PageShell>
  )
}