Members table

"use client"

import * as React from "react"
import { MembersTable } from "@/components/members-table"
import type { Environment, Invite, Member, Role } from "@/lib/team"

const environments: Environment[] = [
  { id: "env-prod", name: "Acme API", production: true, hue: 3, connection: "connected" },
  { id: "env-staging", name: "Acme API", detail: "Staging", production: false, hue: 2, connection: "connected" },
]

const roles: Role[] = [
  { id: "contributor", label: "Contributor", rank: 1 },
  { id: "approver", label: "Approver", rank: 2 },
  { id: "admin", label: "Admin", rank: 3 },
]

const initialMembers: Member[] = [
  { id: "u-priya", name: "Priya", email: "priya@acme.example", owner: true, joinedAt: "2026-09-01T10:00:00Z", roles: {} },
  { id: "u-dana", name: "Dana", email: "dana@acme.example", joinedAt: "2026-09-20T10:00:00Z", roles: { "env-prod": "approver", "env-staging": "admin" } },
  { id: "u-jonas", name: "Jonas", email: "jonas@acme.example", joinedAt: "2026-10-28T10:00:00Z", roles: { "env-staging": "contributor" } },
  { id: "u-mei", email: "mei@acme.example", joinedAt: "2026-11-04T10:00:00Z", roles: {} },
]

const initialInvites: Invite[] = [
  { id: "inv-1", email: "sam@acme.example", invitedBy: "Dana", createdAt: "2026-11-03T10:00:00Z", expiresAt: new Date(Date.now() + 5 * 86_400_000).toISOString(), status: "pending", roles: { "env-staging": "contributor" } },
]

export default function Example() {
  const [members, setMembers] = React.useState(initialMembers)
  const [invites, setInvites] = React.useState(initialInvites)
  const [pending, setPending] = React.useState<Record<string, Record<string, string | null>>>({})
  return (
    <MembersTable
      className="w-full"
      members={members}
      invites={invites}
      environments={environments}
      roles={roles}
      ownerRole="admin"
      viewer={{ id: "u-priya", owner: true }}
      lockedCell={(m) => (m.owner ? "The owner is Admin on every environment." : undefined)}
      pending={pending}
      onSetRole={(memberId, environmentId, role) => {
        // Your policy: here, anything above Contributor waits for approval.
        if (role === "approver" || role === "admin") {
          setPending((p) => ({ ...p, [memberId]: { ...p[memberId], [environmentId]: role } }))
          return
        }
        setMembers((ms) =>
          ms.map((m) => {
            if (m.id !== memberId) return m
            const next = { ...m.roles }
            if (role) next[environmentId] = role
            else delete next[environmentId]
            return { ...m, roles: next }
          })
        )
      }}
      onRemove={(memberId) => setMembers((ms) => ms.filter((m) => m.id !== memberId))}
      onRevokeInvite={(id) => setInvites((xs) => xs.filter((x) => x.id !== id))}
    />
  )
}