// ── One clan ──────────────────────────────────────────────────────────────
//
// A first-party Rust clan is a Team (R5), and this is its page. Core owns the
// Team — the reconciler, the access rules, the activity feed, the forum — but
// not the word "clan", so it publishes no Team page of its own (MODULE_API.md
// §3.7a). The page is this module's, and the three parts only core can render
// are contributed into places this page names:
//
//   rust.clan.header   ← core's `team.notify`    (above the roster: an action ON the page)
//   rust.clan.detail   ← core's `team.activity`  (the members-only feed, D49)
//   rust.clan.forum    ← core's `team.forum`
//
// One slot per PLACE, as module-uo does, so core never decides the layout of a
// page it does not own. **Every slot may be empty** — a core without Teams, a
// deployment with the forum switched off, a clan whose Team core has not created
// yet — and the page has to read correctly anyway. That is the phase criterion,
// and it is why nothing here says "see below" about something core may not put
// below.
//
// The roster comes from this module's own board, through the same function core
// asks when it projects a roster (D48), so the two cannot disagree about who may
// look. Below the audience the clan is still described — its name, score and
// count are public (D58) — and the roster says who may see it instead.

import { useParams, Link } from 'react-router-dom'
import { ErrorState, Loading, PageHeader, PublicLayout, Slot, useAsync } from '../../core.js'
import Empty from '../../components/Empty.jsx'
import { Swatch } from '../../components/Clans.jsx'
import { count, day } from '../../lib/format.js'
import api from '../../api.js'

const ID = 'rust'

export default function Clan() {
  const { externalId } = useParams()
  const { data, loading, error } = useAsync(() => api.clans.get(externalId), [externalId])

  if (loading) {
    return (
      <PublicLayout shell="mid">
        <Loading />
      </PublicLayout>
    )
  }

  // A mistyped or out-of-date address is not an outage, and must not read as
  // one — the same rule the server page learned in phase 4.
  if (error || !data || !data.clan) {
    const missing = !error || error.status === 404
    return (
      <PublicLayout shell="mid">
        <PageHeader
          title={missing ? 'No such clan' : 'That clan could not be loaded'}
          lead={
            missing
              ? 'This address does not name a clan this site knows about.'
              : 'The site could not read this clan just now. It is worth trying again.'
          }
        />
        {!missing && <ErrorState error={error} />}
        <p className="sans" style={{ marginTop: 20 }}>
          <Link to="/rust">Back to the server list</Link>
        </p>
      </PublicLayout>
    )
  }

  const { clan, roster } = data
  const serverLink = `/rust/servers/${encodeURIComponent(clan.serverId)}?tab=clans`

  return (
    <PublicLayout shell="mid">
      <p className="sans" style={{ margin: '0 0 12px' }}>
        <Link to={serverLink}>← Clans on {clan.serverName || clan.serverId}</Link>
      </p>

      <PageHeader eyebrow="Rust clan" title={clan.name} lead={describe(clan)} />

      {clan.gone && (
        <p className="sans" style={{ color: 'var(--dim)', marginTop: 0 }}>
          This clan has been disbanded, or has left its server’s clan list. What is shown is the last the site heard.
        </p>
      )}

      <Slot name="rust.clan.header" externalId={clan.externalId} moduleId={ID} />

      <h2 className="sans" style={{ fontSize: '1rem', margin: '24px 0 8px' }}>Members</h2>
      <Roster roster={roster} memberCount={clan.memberCount} gone={clan.gone} />

      <Slot name="rust.clan.detail" externalId={clan.externalId} moduleId={ID} />

      <Slot name="rust.clan.forum" externalId={clan.externalId} moduleId={ID} />
    </PublicLayout>
  )
}

function describe(clan) {
  const parts = [
    <Swatch key="c" color={clan.color} />,
    ` ${count(clan.memberCount)} ${clan.memberCount === 1 ? 'member' : 'members'}`,
    clan.maxMembers ? ` of ${count(clan.maxMembers)}` : '',
    ` · ${count(clan.score)} points`,
    clan.founded ? ` · founded ${day(clan.founded)}` : '',
  ]
  return <span>{parts}</span>
}

function Roster({ roster, memberCount, gone }) {
  if (!roster || !roster.visible) {
    return <Empty title={`${count(memberCount)} ${memberCount === 1 ? 'member' : 'members'}`} message={withheld(roster && roster.audience)} />
  }

  if (roster.members.length === 0) {
    return gone
      ? <Empty title="No roster" message="A clan that has left its server’s list has no members to show." />
      : <Empty title="No roster yet" message="The server has not sent this clan’s members yet." />
  }

  return (
    <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
      {roster.members.map((m, i) => (
        <li
          // The roster carries no identifier on purpose (a Steam id and a site
          // account are withheld from every public roster), so the row's place is
          // its key. The list is re-rendered whole, never reordered in place.
          // eslint-disable-next-line react/no-array-index-key
          key={i}
          style={{
            display: 'flex',
            alignItems: 'baseline',
            gap: 12,
            padding: '8px 0',
            borderBottom: '1px solid var(--line-soft, var(--line))',
          }}
        >
          <strong style={{ color: 'var(--ink)', flex: 1, minWidth: 0 }}>
            {m.name || 'Unknown player'}
            {m.leader && (
              <span className="sans" style={{ color: 'var(--accent)', marginLeft: 8, fontSize: '0.72rem' }}>Leader</span>
            )}
          </strong>
          {m.role && !m.leader && (
            <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.8rem' }}>{m.role}</span>
          )}
          {/* Inside the roster audience by construction (D48): a viewer who may
              not see the roster sees no row to hang this on. */}
          <span className="sans" style={{ color: m.online ? 'var(--mode-live, #5fb98a)' : 'var(--dim)', fontSize: '0.78rem', whiteSpace: 'nowrap' }}>
            {m.online ? 'online' : ''}
          </span>
        </li>
      ))}
    </ul>
  )
}

/** Why the roster was withheld, in words a visitor can act on. */
function withheld(audience) {
  if (audience === 'signed_in') return 'Sign in to see who is in this clan.'
  if (audience === 'public') return 'This site is not showing clan rosters right now.'
  return 'Only this clan’s own members, with a linked Rust account, and this site’s staff can see who is in it.'
}