import React from 'react'
import { InviteManager } from '@core/components/shared/InviteManager'
import { MemberList } from '@core/components/shared/MemberList'
import { useAuth } from '@core/contexts/AuthContext'

const WORKBENCH_ROLES = [
  { slug: 'engineering', name: 'Engineering' },
  { slug: 'engineering_admin', name: 'Engineering Admin' },
]

const WORKBENCH_ROLE_SLUGS = WORKBENCH_ROLES.map(r => r.slug).join(',')

export function TeamPage() {
  const { user } = useAuth()

  const isAllowed =
    user?.is_system_admin ||
    user?.role === 'engineering_admin' ||
    user?.roles?.some((r: string) => r === 'engineering_admin')

  if (!isAllowed) {
    return (
      <div className="p-6">
        <p className="text-sm text-slate-500">You don't have permission to manage team members.</p>
      </div>
    )
  }

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-slate-900">Team</h1>
        <p className="mt-1 text-sm text-slate-500">
          Invite members and manage access to your account.
        </p>
      </div>

      <InviteManager
        scope="account"
        accountId={user?.account_id}
        allowedRoles={WORKBENCH_ROLES}
        roleSlugsFilter={WORKBENCH_ROLE_SLUGS}
      />

      <MemberList
        accountId={user?.account_id}
        allowedRoles={WORKBENCH_ROLES}
      />
    </div>
  )
}