import Shell from "@/components/Shell";
import { requireSession, asMembershipRow } from "@/lib/session";
import { can } from "@/lib/rbac";
import { listTeam } from "@/lib/data/team";
import { PageHeader, Card, ListRow, Avatar, RoleBadge, Badge } from "@/components/ui";
import InviteAccessButton from "@/components/InviteAccessButton";
import MemberActions from "@/components/MemberActions";

export default async function TeamPage() {
  const session = await requireSession();
  const m = asMembershipRow(session);
  const team = listTeam(session.orgId);

  return (
    <Shell session={session} active="/team">
      <PageHeader
        title="Team"
        description="Everyone with access to your sites — role and scope enforced server-side on every request"
        action={can.inviteAccess(m) ? <InviteAccessButton allowAllSitesScope /> : undefined}
      />
      <Card className="p-0 overflow-hidden">
        {team.map((t) => (
          <ListRow key={t.membership_id}>
            <Avatar name={t.name} size={32} />
            <div className="flex-1 min-w-[140px]">
              <div className="text-[13.5px] font-semibold">{t.name}</div>
              <div className="font-mono text-[11.5px] text-text-secondary">{t.email}</div>
            </div>
            <span className="text-xs text-text-secondary flex-none">
              {t.scope === "ALL_SITES" ? "All sites" : "Scoped sites"}
            </span>
            <RoleBadge role={t.role} />
            <Badge status={t.status} />
            {can.manageMembership(m, {
              id: t.membership_id,
              user_id: t.user_id,
              org_id: session.orgId,
              role: t.role,
              status: t.status as any,
              scope: t.scope,
            }) && (
              <MemberActions membershipId={t.membership_id} currentRole={t.role} status={t.status} />
            )}
          </ListRow>
        ))}
      </Card>
    </Shell>
  );
}