'use client'

import { useEffect, useMemo, useState } from 'react'
import { useRouter } from 'next/navigation'
import AdminShell from '../../ui/AdminShell'
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'

type AdminUserLite = {
  id: number
  username: string
  role: string
  profile_id?: number | null
  expires_at?: string | null
}

type Profile = {
  id: number
  name: string
  description?: string | null
  role: 'user' | 'admin'
  auto_search_enabled: boolean
  account_expires_days?: number | null
  is_active: boolean
  assigned_users?: number
  assigned_invites?: number
}

type Invite = {
  id: number
  code: string
  label?: string | null
  description?: string | null
  profile_id?: number | null
  profile?: { id: number; name: string } | null
  role?: 'user' | 'admin' | null
  max_uses?: number | null
  use_count: number
  remaining_uses?: number | null
  enabled: boolean
  expires_at?: string | null
  is_expired?: boolean
  is_usable?: boolean
  created_at?: string | null
}

type InviteForm = {
  code: string
  label: string
  description: string
  profile_id: string
  role: '' | 'user' | 'admin'
  max_uses: string
  enabled: boolean
  expires_at: string
}

type ProfileForm = {
  name: string
  description: string
  role: 'user' | 'admin'
  auto_search_enabled: boolean
  account_expires_days: string
  is_active: boolean
}

const defaultInviteForm = (): InviteForm => ({
  code: '',
  label: '',
  description: '',
  profile_id: '',
  role: '',
  max_uses: '',
  enabled: true,
  expires_at: '',
})

const defaultProfileForm = (): ProfileForm => ({
  name: '',
  description: '',
  role: 'user',
  auto_search_enabled: true,
  account_expires_days: '',
  is_active: true,
})

const formatDate = (value?: string | null) => {
  if (!value) return 'Never'
  const date = new Date(value)
  if (Number.isNaN(date.valueOf())) return value
  return date.toLocaleString()
}

export default function AdminInviteManagementPage() {
  const router = useRouter()
  const [invites, setInvites] = useState<Invite[]>([])
  const [profiles, setProfiles] = useState<Profile[]>([])
  const [users, setUsers] = useState<AdminUserLite[]>([])
  const [loading, setLoading] = useState(true)

  const [inviteSaving, setInviteSaving] = useState(false)
  const [profileSaving, setProfileSaving] = useState(false)
  const [bulkProfileBusy, setBulkProfileBusy] = useState(false)
  const [bulkExpiryBusy, setBulkExpiryBusy] = useState(false)

  const [error, setError] = useState<string | null>(null)
  const [status, setStatus] = useState<string | null>(null)

  const [inviteEditingId, setInviteEditingId] = useState<number | null>(null)
  const [inviteForm, setInviteForm] = useState<InviteForm>(defaultInviteForm())

  const [profileEditingId, setProfileEditingId] = useState<number | null>(null)
  const [profileForm, setProfileForm] = useState<ProfileForm>(defaultProfileForm())

  const [bulkProfileId, setBulkProfileId] = useState('')
  const [bulkExpiryDays, setBulkExpiryDays] = useState('')

  const signupBaseUrl = useMemo(() => {
    if (typeof window === 'undefined') return '/signup'
    return `${window.location.origin}/signup`
  }, [])

  const handleAuthResponse = (response: Response) => {
    if (response.status === 401) {
      clearToken()
      router.push('/login')
      return true
    }
    if (response.status === 403) {
      router.push('/')
      return true
    }
    return false
  }

  const loadData = async () => {
    if (!getToken()) {
      router.push('/login')
      return
    }
    setLoading(true)
    setError(null)
    try {
      const baseUrl = getApiBase()
      const [inviteRes, profileRes, usersRes] = await Promise.all([
        authFetch(`${baseUrl}/admin/invites`),
        authFetch(`${baseUrl}/admin/profiles`),
        authFetch(`${baseUrl}/admin/users`),
      ])
      if (!inviteRes.ok) {
        if (handleAuthResponse(inviteRes)) return
        throw new Error(`Failed to load invites (${inviteRes.status})`)
      }
      if (!profileRes.ok) {
        if (handleAuthResponse(profileRes)) return
        throw new Error(`Failed to load profiles (${profileRes.status})`)
      }
      if (!usersRes.ok) {
        if (handleAuthResponse(usersRes)) return
        throw new Error(`Failed to load users (${usersRes.status})`)
      }
      const [inviteData, profileData, usersData] = await Promise.all([
        inviteRes.json(),
        profileRes.json(),
        usersRes.json(),
      ])
      setInvites(Array.isArray(inviteData?.invites) ? inviteData.invites : [])
      setProfiles(Array.isArray(profileData?.profiles) ? profileData.profiles : [])
      setUsers(Array.isArray(usersData?.users) ? usersData.users : [])
    } catch (err) {
      console.error(err)
      setError('Could not load invite management data.')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    void loadData()
  }, [])

  const resetInviteEditor = () => {
    setInviteEditingId(null)
    setInviteForm(defaultInviteForm())
  }

  const editInvite = (invite: Invite) => {
    setInviteEditingId(invite.id)
    setInviteForm({
      code: invite.code ?? '',
      label: invite.label ?? '',
      description: invite.description ?? '',
      profile_id:
        typeof invite.profile_id === 'number' && invite.profile_id > 0
          ? String(invite.profile_id)
          : '',
      role: (invite.role ?? '') as '' | 'user' | 'admin',
      max_uses: typeof invite.max_uses === 'number' ? String(invite.max_uses) : '',
      enabled: invite.enabled !== false,
      expires_at: invite.expires_at ?? '',
    })
    setStatus(null)
    setError(null)
  }

  const saveInvite = async (event: React.FormEvent) => {
    event.preventDefault()
    setInviteSaving(true)
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const payload = {
        code: inviteForm.code || null,
        label: inviteForm.label || null,
        description: inviteForm.description || null,
        profile_id: inviteForm.profile_id || null,
        role: inviteForm.role || null,
        max_uses: inviteForm.max_uses || null,
        enabled: inviteForm.enabled,
        expires_at: inviteForm.expires_at || null,
      }
      const url =
        inviteEditingId == null
          ? `${baseUrl}/admin/invites`
          : `${baseUrl}/admin/invites/${inviteEditingId}`
      const response = await authFetch(url, {
        method: inviteEditingId == null ? 'POST' : 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Save failed')
      }
      setStatus(inviteEditingId == null ? 'Invite created.' : 'Invite updated.')
      resetInviteEditor()
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not save invite.')
    } finally {
      setInviteSaving(false)
    }
  }

  const deleteInvite = async (invite: Invite) => {
    if (!window.confirm(`Delete invite "${invite.code}"?`)) return
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/invites/${invite.id}`, {
        method: 'DELETE',
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Delete failed')
      }
      if (inviteEditingId === invite.id) resetInviteEditor()
      setStatus(`Deleted invite ${invite.code}.`)
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not delete invite.')
    }
  }

  const copyInviteLink = async (invite: Invite) => {
    const url = `${signupBaseUrl}?code=${encodeURIComponent(invite.code)}`
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(url)
        setStatus(`Copied invite link for ${invite.code}.`)
      } else {
        window.prompt('Copy invite link', url)
      }
    } catch (err) {
      console.error(err)
      window.prompt('Copy invite link', url)
    }
  }

  const resetProfileEditor = () => {
    setProfileEditingId(null)
    setProfileForm(defaultProfileForm())
  }

  const editProfile = (profile: Profile) => {
    setProfileEditingId(profile.id)
    setProfileForm({
      name: profile.name ?? '',
      description: profile.description ?? '',
      role: profile.role ?? 'user',
      auto_search_enabled: Boolean(profile.auto_search_enabled),
      account_expires_days:
        typeof profile.account_expires_days === 'number' ? String(profile.account_expires_days) : '',
      is_active: profile.is_active !== false,
    })
    setStatus(null)
    setError(null)
  }

  const saveProfile = async (event: React.FormEvent) => {
    event.preventDefault()
    setProfileSaving(true)
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const payload = {
        name: profileForm.name,
        description: profileForm.description || null,
        role: profileForm.role,
        auto_search_enabled: profileForm.auto_search_enabled,
        account_expires_days: profileForm.account_expires_days || null,
        is_active: profileForm.is_active,
      }
      const url =
        profileEditingId == null
          ? `${baseUrl}/admin/profiles`
          : `${baseUrl}/admin/profiles/${profileEditingId}`
      const response = await authFetch(url, {
        method: profileEditingId == null ? 'POST' : 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Save failed')
      }
      setStatus(profileEditingId == null ? 'Profile created.' : 'Profile updated.')
      resetProfileEditor()
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not save profile.')
    } finally {
      setProfileSaving(false)
    }
  }

  const deleteProfile = async (profile: Profile) => {
    if (!window.confirm(`Delete profile "${profile.name}"?`)) return
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/profiles/${profile.id}`, {
        method: 'DELETE',
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Delete failed')
      }
      if (profileEditingId === profile.id) resetProfileEditor()
      if (bulkProfileId === String(profile.id)) setBulkProfileId('')
      setStatus(`Deleted profile "${profile.name}".`)
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not delete profile.')
    }
  }

  const bulkApplyProfile = async () => {
    setBulkProfileBusy(true)
    setStatus(null)
    setError(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/users/profile/bulk`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          profile_id: bulkProfileId || null,
          scope: 'non-admin-users',
        }),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Bulk profile update failed')
      }
      const data = await response.json()
      setStatus(
        bulkProfileId
          ? `Applied profile ${bulkProfileId} to ${data?.updated ?? 0} non-admin users.`
          : `Cleared profile assignment for ${data?.updated ?? 0} non-admin users.`
      )
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not apply profile to all users.')
    } finally {
      setBulkProfileBusy(false)
    }
  }

  const bulkSetExpiryDays = async () => {
    if (!bulkExpiryDays.trim()) {
      setError('Enter expiry days before applying bulk expiry.')
      return
    }
    setBulkExpiryBusy(true)
    setStatus(null)
    setError(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/users/expiry/bulk`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ days: bulkExpiryDays, scope: 'non-admin-users' }),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Bulk expiry update failed')
      }
      const data = await response.json()
      setStatus(`Set expiry for ${data?.updated ?? 0} non-admin users (${bulkExpiryDays} days).`)
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not set expiry for all users.')
    } finally {
      setBulkExpiryBusy(false)
    }
  }

  const bulkClearExpiry = async () => {
    setBulkExpiryBusy(true)
    setStatus(null)
    setError(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/users/expiry/bulk`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ clear: true, scope: 'non-admin-users' }),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Bulk expiry clear failed')
      }
      const data = await response.json()
      setStatus(`Cleared expiry for ${data?.updated ?? 0} non-admin users.`)
      await loadData()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not clear expiry for all users.')
    } finally {
      setBulkExpiryBusy(false)
    }
  }

  const nonAdminUsers = users.filter((user) => user.role !== 'admin')
  const profiledUsers = nonAdminUsers.filter((user) => user.profile_id != null).length
  const expiringUsers = nonAdminUsers.filter((user) => Boolean(user.expires_at)).length

  return (
    <AdminShell
      title="Invite management"
      subtitle="Manage invite links, reusable profiles, and blanket invite-related defaults."
      actions={
        <div className="admin-inline-actions">
          <button type="button" onClick={loadData} disabled={loading}>
            {loading ? 'Loading…' : 'Reload'}
          </button>
          <button type="button" className="ghost-button" onClick={resetInviteEditor}>
            New invite
          </button>
          <button type="button" className="ghost-button" onClick={resetProfileEditor}>
            New profile
          </button>
        </div>
      }
    >
      <section className="admin-section">
        {error && <div className="error-banner">{error}</div>}
        {status && <div className="status-banner">{status}</div>}

        <div className="admin-panel">
          <h2>Blanket controls</h2>
          <p className="lede">
            Apply invite profile defaults or expiry to all non-admin users. Individual users can still be edited from their user page.
          </p>
          <div className="admin-meta-row">
            <span>Non-admin users: {nonAdminUsers.length}</span>
            <span>Profile assigned: {profiledUsers}</span>
            <span>Custom expiry set: {expiringUsers}</span>
          </div>
          <div className="user-bulk-groups">
            <div className="user-bulk-group">
              <label className="admin-select">
                <span>Profile</span>
                <select
                  value={bulkProfileId}
                  onChange={(e) => setBulkProfileId(e.target.value)}
                  disabled={bulkProfileBusy}
                >
                  <option value="">None / clear assignment</option>
                  {profiles.map((profile) => (
                    <option key={profile.id} value={profile.id}>
                      {profile.name}{profile.is_active === false ? ' (disabled)' : ''}
                    </option>
                  ))}
                </select>
              </label>
              <button type="button" onClick={bulkApplyProfile} disabled={bulkProfileBusy}>
                {bulkProfileBusy ? 'Applying…' : 'Apply profile to all users'}
              </button>
            </div>
            <div className="user-bulk-group">
              <label>
                <span className="user-bulk-label">Expiry days</span>
                <input
                  value={bulkExpiryDays}
                  onChange={(e) => setBulkExpiryDays(e.target.value)}
                  inputMode="numeric"
                  placeholder="e.g. 30"
                  disabled={bulkExpiryBusy}
                />
              </label>
              <button type="button" onClick={bulkSetExpiryDays} disabled={bulkExpiryBusy}>
                {bulkExpiryBusy ? 'Working…' : 'Set expiry for all users'}
              </button>
              <button
                type="button"
                className="ghost-button"
                onClick={bulkClearExpiry}
                disabled={bulkExpiryBusy}
              >
                {bulkExpiryBusy ? 'Working…' : 'Clear expiry for all users'}
              </button>
            </div>
          </div>
        </div>

        <div className="admin-split-grid">
          <div className="admin-panel">
            <h2>{profileEditingId == null ? 'Create profile' : 'Edit profile'}</h2>
            <p className="lede">
              Profiles define defaults applied when a user signs up using an invite.
            </p>
            <form onSubmit={saveProfile} className="admin-form compact-form">
              <label>
                Profile name
                <input
                  value={profileForm.name}
                  onChange={(e) =>
                    setProfileForm((current) => ({ ...current, name: e.target.value }))
                  }
                  placeholder="Standard users"
                  required
                />
              </label>
              <label>
                Description
                <textarea
                  rows={3}
                  value={profileForm.description}
                  onChange={(e) =>
                    setProfileForm((current) => ({ ...current, description: e.target.value }))
                  }
                  placeholder="Default invite settings for normal users"
                />
              </label>
              <div className="admin-fields-grid">
                <label>
                  Role
                  <select
                    value={profileForm.role}
                    onChange={(e) =>
                      setProfileForm((current) => ({
                        ...current,
                        role: e.target.value as 'user' | 'admin',
                      }))
                    }
                  >
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                  </select>
                </label>
                <label>
                  Account expiry (days)
                  <input
                    value={profileForm.account_expires_days}
                    onChange={(e) =>
                      setProfileForm((current) => ({
                        ...current,
                        account_expires_days: e.target.value,
                      }))
                    }
                    inputMode="numeric"
                    placeholder="Blank = no expiry"
                  />
                </label>
              </div>
              <label className="inline-checkbox">
                <input
                  type="checkbox"
                  checked={profileForm.auto_search_enabled}
                  onChange={(e) =>
                    setProfileForm((current) => ({
                      ...current,
                      auto_search_enabled: e.target.checked,
                    }))
                  }
                />
                Allow auto search/download by default
              </label>
              <label className="inline-checkbox">
                <input
                  type="checkbox"
                  checked={profileForm.is_active}
                  onChange={(e) =>
                    setProfileForm((current) => ({ ...current, is_active: e.target.checked }))
                  }
                />
                Profile is active
              </label>
              <div className="admin-inline-actions">
                <button type="submit" disabled={profileSaving}>
                  {profileSaving ? 'Saving…' : profileEditingId == null ? 'Create profile' : 'Save profile'}
                </button>
                {profileEditingId != null && (
                  <button type="button" className="ghost-button" onClick={resetProfileEditor}>
                    Cancel edit
                  </button>
                )}
              </div>
            </form>
          </div>
          <div className="admin-panel">
            <h2>Profiles</h2>
            <p className="lede">Assign these to invites or apply them to all users using the blanket controls above.</p>
            {loading ? (
              <div className="status-banner">Loading profiles…</div>
            ) : profiles.length === 0 ? (
              <div className="status-banner">No profiles created yet.</div>
            ) : (
              <div className="admin-list">
                {profiles.map((profile) => (
                  <div key={profile.id} className="admin-list-item">
                    <div className="admin-list-item-main">
                      <div className="admin-list-item-title-row">
                        <strong>{profile.name}</strong>
                        <span className={`small-pill ${profile.is_active ? '' : 'is-muted'}`}>
                          {profile.is_active ? 'Active' : 'Disabled'}
                        </span>
                        <span className="small-pill">{profile.role}</span>
                      </div>
                      {profile.description && (
                        <p className="admin-list-item-text">{profile.description}</p>
                      )}
                      <div className="admin-meta-row">
                        <span>Auto search: {profile.auto_search_enabled ? 'On' : 'Off'}</span>
                        <span>
                          Account expiry:{' '}
                          {typeof profile.account_expires_days === 'number'
                            ? `${profile.account_expires_days} days`
                            : 'Never'}
                        </span>
                        <span>Users: {profile.assigned_users ?? 0}</span>
                        <span>Invites: {profile.assigned_invites ?? 0}</span>
                      </div>
                    </div>
                    <div className="admin-inline-actions">
                      <button type="button" className="ghost-button" onClick={() => editProfile(profile)}>
                        Edit
                      </button>
                      <button type="button" onClick={() => deleteProfile(profile)}>
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="admin-split-grid">
          <div className="admin-panel">
            <h2>{inviteEditingId == null ? 'Create invite' : 'Edit invite'}</h2>
            <p className="lede">
              Link an invite to a profile to apply account defaults at sign-up.
            </p>
            <form onSubmit={saveInvite} className="admin-form compact-form">
              <div className="admin-fields-grid">
                <label>
                  Code (optional)
                  <input
                    value={inviteForm.code}
                    onChange={(e) =>
                      setInviteForm((current) => ({ ...current, code: e.target.value }))
                    }
                    placeholder="Leave blank to auto-generate"
                  />
                </label>
                <label>
                  Label
                  <input
                    value={inviteForm.label}
                    onChange={(e) =>
                      setInviteForm((current) => ({ ...current, label: e.target.value }))
                    }
                    placeholder="Staff invite batch"
                  />
                </label>
              </div>
              <label>
                Description
                <textarea
                  rows={3}
                  value={inviteForm.description}
                  onChange={(e) =>
                    setInviteForm((current) => ({ ...current, description: e.target.value }))
                  }
                  placeholder="Optional note shown on the signup page"
                />
              </label>
              <div className="admin-fields-grid">
                <label>
                  Profile
                  <select
                    value={inviteForm.profile_id}
                    onChange={(e) =>
                      setInviteForm((current) => ({ ...current, profile_id: e.target.value }))
                    }
                  >
                    <option value="">None</option>
                    {profiles.map((profile) => (
                      <option key={profile.id} value={profile.id}>
                        {profile.name}{profile.is_active === false ? ' (disabled)' : ''}
                      </option>
                    ))}
                  </select>
                </label>
                <label>
                  Role override
                  <select
                    value={inviteForm.role}
                    onChange={(e) =>
                      setInviteForm((current) => ({
                        ...current,
                        role: e.target.value as '' | 'user' | 'admin',
                      }))
                    }
                  >
                    <option value="">Use profile/default</option>
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                  </select>
                </label>
              </div>
              <div className="admin-fields-grid">
                <label>
                  Max uses
                  <input
                    value={inviteForm.max_uses}
                    onChange={(e) =>
                      setInviteForm((current) => ({ ...current, max_uses: e.target.value }))
                    }
                    inputMode="numeric"
                    placeholder="Blank = unlimited"
                  />
                </label>
                <label>
                  Invite expiry (ISO datetime)
                  <input
                    value={inviteForm.expires_at}
                    onChange={(e) =>
                      setInviteForm((current) => ({ ...current, expires_at: e.target.value }))
                    }
                    placeholder="2026-03-01T12:00:00+00:00"
                  />
                </label>
              </div>
              <label className="inline-checkbox">
                <input
                  type="checkbox"
                  checked={inviteForm.enabled}
                  onChange={(e) =>
                    setInviteForm((current) => ({ ...current, enabled: e.target.checked }))
                  }
                />
                Invite is enabled
              </label>
              <div className="admin-inline-actions">
                <button type="submit" disabled={inviteSaving}>
                  {inviteSaving ? 'Saving…' : inviteEditingId == null ? 'Create invite' : 'Save invite'}
                </button>
                {inviteEditingId != null && (
                  <button type="button" className="ghost-button" onClick={resetInviteEditor}>
                    Cancel edit
                  </button>
                )}
              </div>
            </form>
          </div>
          <div className="admin-panel">
            <h2>Invite links</h2>
            <p className="lede">Copy and share invite links. Profiles can be applied per invite.</p>
            {loading ? (
              <div className="status-banner">Loading invites…</div>
            ) : invites.length === 0 ? (
              <div className="status-banner">No invites created yet.</div>
            ) : (
              <div className="admin-list">
                {invites.map((invite) => (
                  <div key={invite.id} className="admin-list-item">
                    <div className="admin-list-item-main">
                      <div className="admin-list-item-title-row">
                        <code className="invite-code">{invite.code}</code>
                        <span className={`small-pill ${invite.is_usable ? '' : 'is-muted'}`}>
                          {invite.is_usable ? 'Usable' : 'Unavailable'}
                        </span>
                        {invite.profile?.name && <span className="small-pill">{invite.profile.name}</span>}
                      </div>
                      {invite.label && <p className="admin-list-item-text">{invite.label}</p>}
                      {invite.description && (
                        <p className="admin-list-item-text admin-list-item-text--muted">
                          {invite.description}
                        </p>
                      )}
                      <div className="admin-meta-row">
                        <span>
                          Uses: {invite.use_count}
                          {typeof invite.max_uses === 'number' ? ` / ${invite.max_uses}` : ''}
                        </span>
                        <span>Remaining: {invite.remaining_uses ?? 'Unlimited'}</span>
                        <span>Expires: {formatDate(invite.expires_at)}</span>
                        <span>Created: {formatDate(invite.created_at)}</span>
                      </div>
                    </div>
                    <div className="admin-inline-actions">
                      <button type="button" className="ghost-button" onClick={() => copyInviteLink(invite)}>
                        Copy link
                      </button>
                      <button type="button" className="ghost-button" onClick={() => editInvite(invite)}>
                        Edit
                      </button>
                      <button type="button" onClick={() => deleteInvite(invite)}>
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>
    </AdminShell>
  )
}