// ── The clans on one server ───────────────────────────────────────────────
//
// Rust's OWN clans (R5), best score first. Public at every setting (D58): a
// clan's name, colour, score and member count name nobody. Who is IN a clan is
// the roster, and that lives on the clan's own page behind the operator's
// roster audience (D48).
//
// **The list is only as good as the board it came from**, and the answer says
// how good that is. Three cases would all look like an empty list if rendered
// bare, and they are three different sentences:
//
//   • the bridge cannot read this server's clans at all (an older plugin, or a
//     Nexus server whose clans live elsewhere) — "unavailable";
//   • the game's clan system is switched off — "this server has no clans";
//   • it can, and there are none — "nobody has founded one yet".
//
// And a board at the game's 100-clan ceiling (D55) says there may be more.

import { Link } from 'react-router-dom'
import { ErrorState, Loading, useAsync } from '../core.js'
import Empty from './Empty.jsx'
import { count } from '../lib/format.js'
import api from '../api.js'

export default function Clans({ serverId }) {
  const { data, loading, error } = useAsync(() => api.servers.clans(serverId), [serverId])

  if (loading) return <Loading />
  if (error) return <ErrorState error={error} />

  const clans = (data && data.clans) || []
  const board = (data && data.board) || {}

  if (clans.length === 0) {
    if (!board.supported) {
      return (
        <Empty
          title="Clans are unavailable for this server"
          message={board.reason ? `${capitalise(board.reason)}.` : 'The bridge has not reported this server’s clans yet.'}
        />
      )
    }
    if (board.enabled === false) {
      return <Empty title="This server has no clans" message="Its operator has switched the game’s clan system off." />
    }
    return <Empty title="No clans yet" message="Nobody on this server has founded a clan." />
  }

  return (
    <>
      {board.truncated && (
        <p className="sans" style={{ color: 'var(--dim)', fontSize: '0.8rem', marginTop: 0 }}>
          The game lists at most 100 clans, by score, so there may be more on this server than are shown here.
        </p>
      )}
      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
        {clans.map((clan, index) => (
          <li
            key={clan.externalId}
            style={{
              display: 'flex',
              alignItems: 'baseline',
              gap: 12,
              padding: '10px 0',
              borderBottom: '1px solid var(--line-soft, var(--line))',
            }}
          >
            <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.78rem', minWidth: 22, textAlign: 'right' }}>
              {index + 1}
            </span>
            <Swatch color={clan.color} />
            <Link to={clanPath(clan.externalId)} style={{ fontWeight: 600, flex: 1, minWidth: 0 }}>
              {clan.name}
            </Link>
            <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.8rem', whiteSpace: 'nowrap' }}>
              {count(clan.memberCount)} {clan.memberCount === 1 ? 'member' : 'members'}
            </span>
            <span className="sans" style={{ fontSize: '0.8rem', whiteSpace: 'nowrap', minWidth: 70, textAlign: 'right' }}>
              {count(clan.score)} pts
            </span>
          </li>
        ))}
      </ul>
    </>
  )
}

/** Where a clan's page is: the same template the Team provider hands core. */
export function clanPath(externalId) {
  return `/rust/clans/${encodeURIComponent(externalId)}`
}

/**
 * A clan's colour, as a small square. The server has already checked it is a
 * `#rrggbb` — it ends up in a style — and a clan with no colour gets an outline
 * rather than a guess.
 */
export function Swatch({ color, size = 12 }) {
  return (
    <span
      aria-hidden="true"
      style={{
        display: 'inline-block',
        flex: 'none',
        width: size,
        height: size,
        borderRadius: 3,
        background: color || 'transparent',
        border: color ? 'none' : '1px solid var(--line)',
        alignSelf: 'center',
      }}
    />
  )
}

function capitalise(text) {
  return text ? text.charAt(0).toUpperCase() + text.slice(1) : text
}