import { Link, useParams } from 'react-router-dom'
import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import Slot from '../../modules/Slot.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'
import { emptyRosterReason, freshnessNote, rosterSummary } from '../../lib/teams.js'

// The full roster (TEAMS.md §3.2). `shell="wide"` per §3.1 — this is the one
// Team page with a table wide enough to want the room.
//
// **The link state is a first-class column, not an absence.** A roster where 37
// members show but only 21 carry a profile link looks broken until the page says
// what the difference is; §3.2 exists because that gap is information (a
// character with no site account behind it) and has to read as such.

export default function TeamRoster() {
  const { slug } = useParams()
  const team = useAsync(() => api.team(slug), [slug])
  const roster = useAsync(() => api.teamRoster(slug), [slug])

  const members = roster.data?.members || []
  const linked = members.filter((m) => m.linked).length
  const note = roster.data ? freshnessNote(roster.data) : null
  const emptyReason = roster.data ? emptyRosterReason(roster.data) : null

  return (
    <PublicLayout section="website" shell="wide">
      <PageHeader
        eyebrow={team.data ? team.data.name : 'Team'}
        title="Roster"
      />

      <p style={{ marginBottom: 18 }}>
        <Link to={`/teams/${slug}`}>← Back to the Team</Link>
      </p>

      {(team.loading || roster.loading) && <Loading />}
      {roster.error && <ErrorState message="Could not load this roster right now." />}

      {!roster.loading && !roster.error && roster.data && (
        <>
          <p style={{ color: 'var(--muted)', marginBottom: 6 }}>
            {rosterSummary({ members: members.length, linked })}
          </p>
          {note && (
            <p style={{ color: note.tone === 'warn' ? 'var(--mode-maint)' : 'var(--muted)', fontSize: '0.85rem', marginBottom: 18 }}>
              {note.text}
            </p>
          )}

          {emptyReason && <p style={{ color: 'var(--muted)' }}>{emptyReason}</p>}

          {members.length > 0 && (
            <div style={{ overflowX: 'auto' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ textAlign: 'left', color: 'var(--muted)', fontSize: '0.8rem', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                    <th style={{ padding: '8px 10px' }}>Name</th>
                    <th style={{ padding: '8px 10px' }}>Rank</th>
                    <th style={{ padding: '8px 10px' }}>Status</th>
                    <th style={{ padding: '8px 10px' }} />
                  </tr>
                </thead>
                <tbody>
                  {/* Keyed by position, unavoidably: the row's stable identifier
                      is its member key and that is exactly what is not published
                      (§3.2). Two characters may share a display name. */}
                  {members.map((member, i) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <tr key={`${member.displayName}-${i}`} style={{ borderTop: '1px solid var(--line)' }}>
                      <td style={{ padding: '10px', color: member.linked ? 'var(--head)' : 'var(--muted)' }}>
                        {member.displayName}
                        {member.isLeader && (
                          <span style={{ color: 'var(--accent)', marginLeft: 8, fontSize: '0.78rem' }}>Leader</span>
                        )}
                        {/* Muted text alone would read as a rendering glitch; the
                            chip is what makes the gap in the header line legible. */}
                        {!member.linked && (
                          <span style={{ color: 'var(--muted)', marginLeft: 8, fontSize: '0.75rem', border: '1px solid var(--line)', borderRadius: 999, padding: '1px 8px' }}>
                            not linked
                          </span>
                        )}
                      </td>
                      <td style={{ padding: '10px', color: 'var(--muted)' }}>{member.rankLabel || '—'}</td>
                      <td style={{ padding: '10px', color: 'var(--muted)' }}>
                        {member.online ? 'Online' : 'Offline'}
                      </td>
                      {/* The module's trailing cell. Nothing on bare core.
                          §3.4 declares this slot's props as `{ memberKey, userId,
                          displayName }`, and two of those cannot be supplied:
                          §3.2 withholds the member key and the user id from every
                          public roster response, so they are not in the payload
                          this component was rendered from. Publishing them to
                          reach the slot would put a game-internal identifier and
                          a site account id on a public page for every visitor,
                          module installed or not — the doc's two sections
                          contradict each other and §3.2 is the one that is a
                          security rule. The slot gets what core can honestly
                          give it. */}
                      <td style={{ padding: '10px', textAlign: 'right' }}>
                        <Slot
                          name="team.member.row"
                          displayName={member.displayName}
                          isLeader={member.isLeader}
                          linked={member.linked}
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}
    </PublicLayout>
  )
}