import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { EnvelopeIcon, NoSymbolIcon, UserPlusIcon } from "@heroicons/react/20/solid";
import { DialogClose } from "@radix-ui/react-dialog";
import {
  Form,
  type MetaFunction,
  useActionData,
  useFetcher,
  useNavigation,
} from "@remix-run/react";
import { json } from "@remix-run/server-runtime";
import { tryCatch } from "@trigger.dev/core/utils";
import { cloneElement, useEffect, useRef, useState } from "react";
import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
import invariant from "tiny-invariant";
import { z } from "zod";
import { Feedback } from "~/components/Feedback";
import { UserAvatar } from "~/components/UserProfilePhoto";
import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
import { PageBody, PageContainer } from "~/components/layout/AppLayout";
import {
  Alert,
  AlertCancel,
  AlertContent,
  AlertDescription,
  AlertFooter,
  AlertHeader,
  AlertTitle,
  AlertTrigger,
} from "~/components/primitives/Alert";
import { Button, ButtonContent, LinkButton } from "~/components/primitives/Buttons";
import { PermissionButton } from "~/components/primitives/PermissionButton";
import { DateTime } from "~/components/primitives/DateTime";
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
import { Fieldset } from "~/components/primitives/Fieldset";
import { FormButtons } from "~/components/primitives/FormButtons";
import { FormError } from "~/components/primitives/FormError";
import { Header2, Header3 } from "~/components/primitives/Headers";
import { InputGroup } from "~/components/primitives/InputGroup";
import { InputNumberStepper } from "~/components/primitives/InputNumberStepper";
import { Label } from "~/components/primitives/Label";
import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
import { Paragraph } from "~/components/primitives/Paragraph";
import * as Property from "~/components/primitives/PropertyTable";
import { Select, SelectItem, SelectLinkItem } from "~/components/primitives/Select";
import { SpinnerWhite } from "~/components/primitives/Spinner";
import { SimpleTooltip } from "~/components/primitives/Tooltip";
import { $replica, prisma } from "~/db.server";
import { useShowSelfServe } from "~/hooks/useShowSelfServe";
import { useOrganization } from "~/hooks/useOrganizations";
import { useUser } from "~/hooks/useUser";
import { removeTeamMember } from "~/models/removeTeamMember.server";
import { redirectWithSuccessMessage } from "~/models/message.server";
import { resolveOrgIdFromSlug } from "~/models/organization.server";
import { TeamPresenter } from "~/presenters/TeamPresenter.server";
import { getCurrentPlan, getSelfServePurchaseBlockReason } from "~/services/platform.v3.server";
import { rbac } from "~/services/rbac.server";
import { ssoController } from "~/services/sso.server";
import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
import { cn } from "~/utils/cn";
import { formatCurrency, formatNumber } from "~/utils/numberFormatter";
import {
  inviteTeamMemberPath,
  organizationRolesPath,
  organizationTeamPath,
  resendInvitePath,
  revokeInvitePath,
  v3BillingPath,
} from "~/utils/pathBuilder";
import { SetSeatsAddOnService } from "~/v3/services/setSeatsAddOn.server";
import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";

export const meta: MetaFunction = () => {
  return [
    {
      title: `Team | Trigger.dev`,
    },
  ];
};

const Params = z.object({
  organizationSlug: z.string(),
});

export const loader = dashboardLoader(
  {
    params: Params,
    context: async (params) => {
      const orgId = await resolveOrgIdFromSlug(params.organizationSlug);
      return orgId ? { organizationId: orgId } : {};
    },
    authorization: { action: "read", resource: { type: "members" } },
  },
  async ({ user, ability, context }) => {
    const orgId = context.organizationId;
    if (!orgId) {
      throw new Response("Not Found", { status: 404 });
    }

    const presenter = new TeamPresenter();
    const result = await presenter.call({
      userId: user.id,
      organizationId: orgId,
    });

    if (!result) {
      throw new Response("Not Found", { status: 404 });
    }

    // Pre-compute manage authority server-side so the UI gating matches
    // the action gating (the action enforces it independently). Seat
    // purchases are a billing operation, so they gate on manage:billing.
    const canManageMembers = ability.can("manage", { type: "members" });
    const canManageBilling = ability.can("manage", { type: "billing" });

    // When Directory Sync is the authority (allowManualMembership off + a
    // directory active), manual invite/remove/leave are disabled. Fail-open to
    // "allowed" so a plugin hiccup never strands the team page.
    const policy = await ssoController.getMembershipPolicy(orgId);
    const manualMembershipAllowed = policy.isOk() ? policy.value.manualMembershipAllowed : true;

    return typedjson({ ...result, canManageMembers, canManageBilling, manualMembershipAllowed });
  }
);

const schema = z.object({
  memberId: z.string(),
});

const PurchaseSchema = z.discriminatedUnion("action", [
  z.object({
    action: z.literal("purchase"),
    amount: z.coerce.number().int("Must be a whole number").min(0, "Amount must be 0 or more"),
  }),
  z.object({
    action: z.literal("quota-increase"),
    amount: z.coerce.number().int("Must be a whole number").min(1, "Amount must be greater than 0"),
  }),
]);

const SetRoleSchema = z.object({
  userId: z.string(),
  roleId: z.string(),
});

export const action = dashboardAction(
  {
    params: Params,
    context: async (params) => {
      const orgId = await resolveOrgIdFromSlug(params.organizationSlug);
      return orgId ? { organizationId: orgId } : {};
    },
    // No top-level authorization — different intents have different
    // requirements. Each branch inside checks the right ability:
    //   set-role        → manage:members
    //   purchase-seats  → manage:billing
    //   remove-member   → manage:members (skipped for self-leave)
    // Don't rely on the model-layer (removeTeamMember /
    // SetSeatsAddOnService) for enforcement — those are defense in
    // depth; the route layer is where the ability gate belongs.
  },
  async ({ user, ability, request, params, context }) => {
    const userId = user.id;
    const { organizationSlug } = params;
    invariant(organizationSlug, "organizationSlug not found");

    const formData = await request.formData();
    const formType = formData.get("_formType");

    if (formType === "set-role") {
      if (!ability.can("manage", { type: "members" })) {
        return json({ ok: false, error: "Unauthorized" } as const, { status: 403 });
      }
      const orgId = context.organizationId;
      if (!orgId) {
        return json({ ok: false, error: "Organization not found" } as const, { status: 404 });
      }
      const submission = parseWithZod(formData, { schema: SetRoleSchema });
      if (submission.status !== "success") {
        return json(submission.reply());
      }
      const result = await rbac.setUserRole({
        userId: submission.value.userId,
        organizationId: orgId,
        roleId: submission.value.roleId,
      });
      if (!result.ok) {
        return json({ ok: false, error: result.error } as const, { status: 400 });
      }
      return json({ ok: true } as const);
    }

    if (formType === "purchase-seats") {
      // Adjusting seat count is a billing operation. Pre-RBAC the team
      // page's loader gated the entire route on Owner/Admin, so reaching
      // this action implied authority. Post-RBAC the loader requires
      // `read:members` (broader audience), so gate the seat purchase
      // explicitly here against the right ability rather than relying
      // on the SetSeatsAddOnService for enforcement at the model layer.
      if (!ability.can("manage", { type: "billing" })) {
        return json({ ok: false, error: "Unauthorized" } as const, { status: 403 });
      }
      // Reuse the orgId the dashboardBuilder already resolved in the
      // context callback (single slug → orgId lookup per request,
      // regardless of whether the OSS fallback or cloud plugin
      // services the auth — the plugin takes `organizationId` as
      // input and doesn't re-resolve from a slug).
      const orgId = context.organizationId;
      if (!orgId) {
        return json({ ok: false, error: "Organization not found" } as const);
      }

      const currentPlan = await getCurrentPlan(orgId);
      const purchaseBlockReason = getSelfServePurchaseBlockReason(currentPlan);
      if (purchaseBlockReason === "plan_unavailable") {
        return json(
          { ok: false, error: "Unable to verify billing status. Please try again." } as const,
          { status: 503 }
        );
      }
      if (purchaseBlockReason === "managed_billing") {
        return json({ ok: false, error: "Contact us to request more seats." } as const, {
          status: 403,
        });
      }

      const submission = parseWithZod(formData, { schema: PurchaseSchema });

      if (submission.status !== "success") {
        return json(submission.reply());
      }

      const service = new SetSeatsAddOnService();
      const [error, result] = await tryCatch(
        service.call({
          userId,
          organizationId: orgId,
          action: submission.value.action,
          amount: submission.value.amount,
        })
      );

      if (error) {
        return json(
          submission.reply({
            fieldErrors: { amount: [error instanceof Error ? error.message : "Unknown error"] },
          })
        );
      }

      if (!result.success) {
        return json(submission.reply({ fieldErrors: { amount: [result.error] } }));
      }

      return json({ ok: true } as const);
    }

    const submission = parseWithZod(formData, { schema });

    if (submission.status !== "success") {
      return json(submission.reply());
    }

    // Default intent: remove a member or leave the org, with the target scoped
    // to the actor's organization. Self-leave is always allowed; removing
    // someone else requires manage:members.
    const orgId = context.organizationId;
    if (!orgId) {
      return json({ ok: false, error: "Organization not found" } as const, { status: 404 });
    }
    const targetMember = await $replica.orgMember.findFirst({
      where: { id: submission.value.memberId, organizationId: orgId },
      select: { userId: true },
    });
    if (!targetMember) {
      return json({ ok: false, error: "Member not found" } as const, { status: 404 });
    }
    const isSelfLeave = targetMember.userId === userId;
    if (!isSelfLeave && !ability.can("manage", { type: "members" })) {
      return json({ ok: false, error: "Unauthorized" } as const, { status: 403 });
    }

    // Directory-managed membership: manual removal + self-leave are disabled
    // (membership is driven by the directory). Enforced here, not just in the
    // UI. Fail-open on a plugin error.
    const removePolicy = await ssoController.getMembershipPolicy(orgId);
    if (removePolicy.isOk() && !removePolicy.value.manualMembershipAllowed) {
      return json({ ok: false, error: "Membership is managed by Directory Sync" } as const, {
        status: 403,
      });
    }

    try {
      const deletedMember = await removeTeamMember(
        {
          userId,
          memberId: submission.value.memberId,
          slug: organizationSlug,
        },
        prisma
      );

      // Sticky removal: record a tombstone so passive SSO-JIT won't re-add
      // them on next login (best-effort; no-op without the SSO plugin).
      await ssoController
        .recordMembershipRemoval({
          organizationId: orgId,
          userId: deletedMember.userId,
          reason: isSelfLeave ? "self_leave" : "manual_removal",
        })
        .unwrapOr(undefined);

      if (deletedMember.userId === userId) {
        return redirectWithSuccessMessage("/", request, `You left the organization`);
      }

      return redirectWithSuccessMessage(
        organizationTeamPath(deletedMember.organization),
        request,
        `Removed ${deletedMember.user.name ?? "member"} from team`
      );
    } catch (error: any) {
      return json({ errors: { body: error.message } }, { status: 400 });
    }
  }
);

type Member = UseDataFunctionReturn<typeof loader>["members"][number];
type Invite = UseDataFunctionReturn<typeof loader>["invites"][number];
type Role = UseDataFunctionReturn<typeof loader>["roles"][number];

export default function Page() {
  const {
    members,
    invites,
    limits,
    canPurchaseSeats,
    extraSeats,
    seatPricing,
    maxSeatQuota,
    planSeatLimit,
    roles,
    assignableRoleIds,
    memberRoles,
    canManageMembers,
    canManageBilling,
    manualMembershipAllowed,
  } = useTypedLoaderData<typeof loader>();
  // Build a userId → roleId map so the dropdown's defaultValue matches
  // each member's current assignment without re-querying.
  const memberRoleByUserId = new Map<string, string>(
    memberRoles.flatMap((m) => (m.role ? [[m.userId, m.role.id]] : []))
  );
  const user = useUser();
  const organization = useOrganization();

  const plan = useCurrentPlan();
  const showSelfServe = useShowSelfServe();
  const requiresUpgrade = limits.used >= limits.limit;
  const usageRatio = limits.limit > 0 ? Math.min(limits.used / limits.limit, 1) : 0;
  const canUpgrade =
    plan?.v3Subscription?.plan && !plan.v3Subscription.plan.limits.teamMembers.canExceed;

  return (
    <PageContainer>
      <NavBar>
        <PageTitle title="Team" />

        <PageAccessories>
          <AdminDebugTooltip>
            <Property.Table>
              <Property.Item>
                <Property.Label>Org ID</Property.Label>
                <Property.Value>{organization.id}</Property.Value>
              </Property.Item>

              {members.map((member) => (
                <Property.Item key={member.id}>
                  <Property.Label>{member.user.name}</Property.Label>
                  <Property.Value>
                    <div className="flex items-center gap-2">
                      <Paragraph variant="extra-small/bright/mono">
                        {member.user.email} - {member.user.id}
                      </Paragraph>
                    </div>
                  </Property.Value>
                </Property.Item>
              ))}
            </Property.Table>
          </AdminDebugTooltip>
          {!manualMembershipAllowed ? (
            // Directory Sync is the membership authority — manual invites are
            // disabled. The invite action + acceptInvite enforce this too.
            <SimpleTooltip
              button={
                <ButtonContent
                  variant="primary/small"
                  LeadingIcon={UserPlusIcon}
                  className="cursor-not-allowed opacity-50"
                >
                  Invite a team member
                </ButtonContent>
              }
              content="Membership is managed by Directory Sync"
              disableHoverableContent
            />
          ) : !canManageMembers ? (
            // Gate the invite affordance on manage:members. The action
            // route enforces this independently — hiding it here just
            // avoids dead UI for non-managers.
            <SimpleTooltip
              button={
                <ButtonContent
                  variant="primary/small"
                  LeadingIcon={UserPlusIcon}
                  className="cursor-not-allowed opacity-50"
                >
                  Invite a team member
                </ButtonContent>
              }
              content="You don't have permission to invite team members"
              disableHoverableContent
            />
          ) : requiresUpgrade ? (
            <SimpleTooltip
              button={
                <ButtonContent
                  variant="primary/small"
                  LeadingIcon={UserPlusIcon}
                  className="cursor-not-allowed opacity-50"
                >
                  Invite a team member
                </ButtonContent>
              }
              content="Purchase more seats to invite more team members"
              disableHoverableContent
            />
          ) : (
            <LinkButton
              to={inviteTeamMemberPath(organization)}
              variant="primary/small"
              LeadingIcon={UserPlusIcon}
            >
              Invite a team member
            </LinkButton>
          )}
        </PageAccessories>
      </NavBar>
      <PageBody scrollable={false}>
        <div className="grid max-h-full min-h-full grid-rows-[1fr_auto]">
          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
            <div className="mx-auto max-w-3xl px-4 pb-4 pt-20">
              {invites.length > 0 && (
                <>
                  <Header2 className="mb-3 mt-4">Pending invites</Header2>
                  <ul className="divide-ui-border mb-6 flex w-full flex-col divide-y border-y">
                    {invites.map((invite) => (
                      <li key={invite.id} className="flex items-center gap-4 py-4">
                        <div className="rounded-md border border-grid-dimmed bg-background-bright p-1.5">
                          <EnvelopeIcon className="size-7 text-text-dimmed" />
                        </div>
                        <div className="flex flex-col gap-0.5">
                          <Header3>{invite.email}</Header3>
                          <Paragraph variant="small">
                            Invite sent {<DateTime date={invite.updatedAt} />}
                          </Paragraph>
                        </div>
                        <div className="flex grow items-center justify-end gap-x-2">
                          <ResendButton invite={invite} canManageMembers={canManageMembers} />
                          <RevokeButton invite={invite} canManageMembers={canManageMembers} />
                        </div>
                      </li>
                    ))}
                  </ul>
                </>
              )}
              <div className="mt-4 flex items-baseline justify-between">
                <Header2>Active team members</Header2>
                {roles.length > 0 ? (
                  <a
                    className="text-xs text-text-link hover:underline"
                    href={organizationRolesPath(organization)}
                  >
                    View all role permissions →
                  </a>
                ) : null}
              </div>
              <div className="mb-8 mt-3 grid w-full grid-cols-[1fr_auto_auto] items-center gap-x-2 border-y border-grid-bright">
                {members.map((member) => (
                  <div
                    key={member.user.id}
                    className="col-span-3 grid grid-cols-subgrid items-center gap-x-2 border-b border-grid-bright py-2 last:border-b-0"
                  >
                    <div className="flex items-center gap-x-2">
                      <UserAvatar
                        avatarUrl={member.user.avatarUrl}
                        name={member.user.name}
                        className="size-10"
                      />
                      <div className="flex flex-col gap-0.5">
                        <Header3>
                          {member.user.name}{" "}
                          {member.user.id === user.id && (
                            <span className="text-text-dimmed">(You)</span>
                          )}
                        </Header3>
                        <Paragraph variant="small">{member.user.email}</Paragraph>
                      </div>
                    </div>
                    <RolePicker
                      memberUserId={member.user.id}
                      currentRoleId={memberRoleByUserId.get(member.user.id) ?? null}
                      roles={roles}
                      assignableRoleIds={assignableRoleIds}
                      canManageMembers={canManageMembers}
                    />
                    <div className="justify-self-end">
                      <LeaveRemoveButton
                        userId={user.id}
                        member={member}
                        memberCount={members.length}
                        canManageMembers={canManageMembers}
                        manualMembershipAllowed={manualMembershipAllowed}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="flex h-fit w-full items-center gap-3 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
            <SimpleTooltip
              button={
                <div className="size-6">
                  <svg className="h-full w-full -rotate-90 overflow-visible">
                    <circle
                      className="fill-none stroke-grid-bright"
                      strokeWidth="4"
                      r="10"
                      cx="12"
                      cy="12"
                    />
                    <circle
                      className={`fill-none ${requiresUpgrade ? "stroke-error" : "stroke-success"}`}
                      strokeWidth="4"
                      r="10"
                      cx="12"
                      cy="12"
                      strokeDasharray={`${usageRatio * 62.8} 62.8`}
                      strokeDashoffset="0"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
              }
              content={`${Math.round(usageRatio * 100)}%`}
            />
            <div className="flex w-full items-center justify-between gap-6">
              {requiresUpgrade ? (
                <Header3 className="text-error">
                  You've used all {limits.limit} of your seats.{" "}
                  {canPurchaseSeats
                    ? "Purchase more seats to invite more team members."
                    : "Upgrade your plan to invite more team members."}
                </Header3>
              ) : (
                <Header3>
                  You've used {limits.used}/{limits.limit} of your seats
                </Header3>
              )}
              {canPurchaseSeats && seatPricing ? (
                <PurchaseSeatsModal
                  seatPricing={seatPricing}
                  extraSeats={extraSeats}
                  usedSeats={limits.used}
                  maxQuota={maxSeatQuota}
                  planSeatLimit={planSeatLimit}
                  canManageBilling={canManageBilling}
                />
              ) : canUpgrade ? (
                showSelfServe ? (
                  <LinkButton to={v3BillingPath(organization)} variant="primary/small">
                    Upgrade
                  </LinkButton>
                ) : (
                  <Feedback
                    defaultValue="enterprise"
                    button={<Button variant="secondary/small">Request more</Button>}
                  />
                )
              ) : null}
            </div>
          </div>
        </div>
      </PageBody>
    </PageContainer>
  );
}

function LeaveRemoveButton({
  userId,
  member,
  memberCount,
  canManageMembers,
  manualMembershipAllowed,
}: {
  userId: string;
  member: Member;
  memberCount: number;
  canManageMembers: boolean;
  manualMembershipAllowed: boolean;
}) {
  const organization = useOrganization();

  // Directory-managed membership: neither removing others nor leaving is
  // allowed — the directory drives membership. Enforced server-side too.
  if (!manualMembershipAllowed) {
    const isSelf = userId === member.user.id;
    return (
      <SimpleTooltip
        button={
          <ButtonContent
            variant={isSelf ? "minimal/small" : "secondary/small"}
            className="cursor-not-allowed opacity-50"
          >
            {isSelf ? "Leave team" : "Remove from team"}
          </ButtonContent>
        }
        disableHoverableContent
        content="Membership is managed by Directory Sync"
      />
    );
  }

  if (userId === member.user.id) {
    if (memberCount === 1) {
      return (
        <SimpleTooltip
          button={
            <ButtonContent variant="minimal/small" className="cursor-not-allowed">
              Leave team
            </ButtonContent>
          }
          disableHoverableContent
          content="An organization requires at least 1 team member"
        />
      );
    }

    //you leave the team — leaving is always permitted regardless of
    //manage:members; non-managers can still leave on their own.
    return (
      <LeaveTeamModal
        member={member}
        buttonText="Leave team"
        title="Are you sure you want to leave the team?"
        description={`You will no longer have access to ${organization.title}. To regain access, you will need to be invited again.`}
        actionText="Leave team"
      />
    );
  }

  //you remove another member — requires manage:members
  if (!canManageMembers) {
    return (
      <SimpleTooltip
        button={
          <ButtonContent variant="secondary/small" className="cursor-not-allowed opacity-50">
            Remove from team
          </ButtonContent>
        }
        disableHoverableContent
        content="You don't have permission to remove team members"
      />
    );
  }
  return (
    <LeaveTeamModal
      member={member}
      buttonText="Remove from team"
      title={`Are you sure you want to remove ${member.user.name ?? "them"} from the team?`}
      description={`They will no longer have access to ${organization.title}. To regain access, you will need to invite them again.`}
      actionText="Remove from team"
    />
  );
}

// Inline role picker — submits a `_formType=set-role` form via fetcher
// so the change persists without a full page reload. Disabled options
// (and the picker itself) reflect plan gating + manage:members; the
// server's setUserRole enforces both checks again as the source of
// truth, so this is a UI-affordance layer only.
function RolePicker({
  memberUserId,
  currentRoleId,
  roles,
  assignableRoleIds,
  canManageMembers,
}: {
  memberUserId: string;
  currentRoleId: string | null;
  roles: Role[];
  assignableRoleIds: string[];
  canManageMembers: boolean;
}) {
  const organization = useOrganization();
  const fetcher = useFetcher<{ ok: boolean; error?: string } | { ok: true }>();
  const assignable = new Set(assignableRoleIds);
  // With no RBAC plugin installed, the loader returns no roles —
  // render nothing rather than an empty dropdown.
  if (roles.length === 0) return null;

  const isSubmitting = fetcher.state === "submitting";
  const error =
    fetcher.data && "error" in fetcher.data && fetcher.data.error ? fetcher.data.error : null;

  const picker = (
    <Select
      // Controlled — keeps the dropdown in sync with the persisted
      // role even after a failed set-role fetcher submit (the server
      // kept the old role; without `value` the UI would show the
      // attempted change).
      value={currentRoleId ?? ""}
      items={roles}
      variant="tertiary/small"
      disabled={!canManageMembers || isSubmitting}
      dropdownIcon
      text={(v) => roles.find((r) => r.id === v)?.name ?? "No role"}
      setValue={(next) => {
        if (typeof next !== "string" || next === (currentRoleId ?? "")) return;
        // Upgrade-link rows have a value too (Ariakit needs one to
        // make the row interactive — without it the Link inside
        // doesn't even register the click), but they shouldn't
        // submit the role-change form. The Link navigates the user
        // to the plan-selection page; we just bail here.
        if (!assignable.has(next)) return;
        fetcher.submit(
          { _formType: "set-role", userId: memberUserId, roleId: next },
          { method: "post" }
        );
      }}
    >
      {(items) =>
        items.map((role) => {
          const isAssignable = assignable.has(role.id);
          return isAssignable ? (
            <SelectItem key={role.id} value={role.id}>
              {role.name}
            </SelectItem>
          ) : (
            <SelectLinkItem key={role.id} value={role.id} to={v3BillingPath(organization)}>
              {role.name} (upgrade)
            </SelectLinkItem>
          );
        })
      }
    </Select>
  );

  return (
    <div className="flex flex-col items-end gap-1">
      {canManageMembers ? (
        picker
      ) : (
        // Disabled <Select> swallows hover events on its own, so wrap it
        // in a div the tooltip can attach to.
        <SimpleTooltip
          button={<div className="cursor-not-allowed">{picker}</div>}
          content="You don't have permission to change roles"
          disableHoverableContent
        />
      )}
      {error ? (
        <span className="text-xs text-error" role="alert">
          {error}
        </span>
      ) : null}
    </div>
  );
}

function LeaveTeamModal({
  member,
  buttonText,
  title,
  description,
  actionText,
}: {
  member: Member;
  buttonText: string;
  title: string;
  description: string;
  actionText: string;
}) {
  const [open, setOpen] = useState(false);
  const lastSubmission = useActionData();

  const [form, _fields] = useForm({
    id: "remove-member",
    // TODO: type this
    lastResult: lastSubmission as any,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

  return (
    <Alert open={open} onOpenChange={(o) => setOpen(o)}>
      <AlertTrigger asChild>
        <Button variant="secondary/small">{buttonText}</Button>
      </AlertTrigger>
      <AlertContent>
        <AlertHeader>
          <AlertTitle>{title}</AlertTitle>
          <AlertDescription>{description}</AlertDescription>
        </AlertHeader>
        <AlertFooter>
          <AlertCancel asChild>
            <Button variant="secondary/small">Cancel</Button>
          </AlertCancel>
          <Form method="post" {...getFormProps(form)} onSubmit={() => setOpen(false)}>
            <input type="hidden" value={member.id} name="memberId" />
            <Button type="submit" variant="danger/small" form={form.id}>
              {actionText}
            </Button>
          </Form>
        </AlertFooter>
      </AlertContent>
    </Alert>
  );
}

const RESEND_COOLDOWN_SECONDS = 30;

function initialCooldown(updatedAt: Date | string): number {
  const elapsed = Math.floor((Date.now() - new Date(updatedAt).getTime()) / 1000);
  const remaining = RESEND_COOLDOWN_SECONDS - elapsed;
  return remaining > 0 ? remaining : 0;
}

function ResendButton({ invite, canManageMembers }: { invite: Invite; canManageMembers: boolean }) {
  const navigation = useNavigation();
  const isSubmitting =
    navigation.state === "submitting" &&
    navigation.formAction === resendInvitePath() &&
    navigation.formData?.get("inviteId") === invite.id;
  const prevSubmitting = useRef(false);
  const [cooldown, setCooldown] = useState(() => initialCooldown(invite.updatedAt));
  const intervalRef = useRef<ReturnType<typeof setInterval>>();

  useEffect(() => {
    if (prevSubmitting.current && !isSubmitting) {
      setCooldown(RESEND_COOLDOWN_SECONDS);
    }
    prevSubmitting.current = isSubmitting;
  }, [isSubmitting]);

  const cooldownActive = cooldown > 0;
  useEffect(() => {
    if (!cooldownActive) return;

    intervalRef.current = setInterval(() => {
      setCooldown((c) => {
        if (c <= 1) {
          clearInterval(intervalRef.current);
          return 0;
        }
        return c - 1;
      });
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, [cooldownActive]);

  const isDisabled = isSubmitting || cooldown > 0 || !canManageMembers;

  return (
    <Form method="post" action={resendInvitePath()} className="flex">
      <input type="hidden" value={invite.id} name="inviteId" />
      <Button
        type="submit"
        variant="secondary/small"
        disabled={isDisabled}
        tooltip={canManageMembers ? undefined : "You don't have permission to manage team members"}
      >
        {isSubmitting ? (
          "Sending…"
        ) : cooldown > 0 ? (
          <span className="tabular-nums">{`Sent – resend in ${cooldown}s`}</span>
        ) : (
          "Resend invite"
        )}
      </Button>
    </Form>
  );
}

function RevokeButton({ invite, canManageMembers }: { invite: Invite; canManageMembers: boolean }) {
  const organization = useOrganization();

  return (
    <Form method="post" action={revokeInvitePath()} className="flex">
      <input type="hidden" value={invite.id} name="inviteId" />
      <input type="hidden" value={organization.slug} name="slug" />
      <SimpleTooltip
        button={
          <Button
            type="submit"
            variant="danger/small"
            LeadingIcon={NoSymbolIcon}
            leadingIconClassName="text-white"
            aria-label="Revoke invite"
            disabled={!canManageMembers}
          />
        }
        content={
          canManageMembers ? "Revoke invite" : "You don't have permission to manage team members"
        }
        disableHoverableContent
        asChild
      />
    </Form>
  );
}

export function PurchaseSeatsModal({
  seatPricing,
  extraSeats,
  usedSeats,
  maxQuota,
  planSeatLimit,
  triggerButton,
  canManageBilling = true,
}: {
  seatPricing: {
    stepSize: number;
    centsPerStep: number;
  };
  extraSeats: number;
  usedSeats: number;
  maxQuota: number;
  planSeatLimit: number;
  triggerButton?: React.ReactElement;
  canManageBilling?: boolean;
}) {
  const showSelfServe = useShowSelfServe();
  const fetcher = useFetcher();
  const organization = useOrganization();
  const lastSubmission =
    fetcher.data && typeof fetcher.data === "object" && "status" in fetcher.data
      ? fetcher.data
      : undefined;
  const [form, fields] = useForm({
    id: "purchase-seats",
    lastResult: lastSubmission as any,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: PurchaseSchema });
    },
    shouldRevalidate: "onSubmit",
  });
  const amount = fields.amount;

  const [amountValue, setAmountValue] = useState(extraSeats);
  useEffect(() => {
    setAmountValue(extraSeats);
  }, [extraSeats]);
  const isLoading = fetcher.state !== "idle";

  const [open, setOpen] = useState(false);
  useEffect(() => {
    const data = fetcher.data;
    if (
      fetcher.state === "idle" &&
      data !== null &&
      typeof data === "object" &&
      "ok" in data &&
      data.ok
    ) {
      setOpen(false);
    }
  }, [fetcher.state, fetcher.data]);

  const state = updateSeatState({
    value: amountValue,
    existingValue: extraSeats,
    quota: maxQuota,
    usedSeats,
    planSeatLimit,
  });
  const changeClassName =
    state === "decrease" ? "text-error" : state === "increase" ? "text-success" : undefined;

  const pricePerSeat = seatPricing.centsPerStep / seatPricing.stepSize / 100;
  const title = extraSeats === 0 ? "Purchase extra seats…" : "Add/remove extra seats…";

  if (!showSelfServe) {
    return (
      <Feedback
        defaultValue="enterprise"
        button={<Button variant="secondary/small">Request more</Button>}
      />
    );
  }

  // Buying seats is a billing action — disable the trigger (and explain why)
  // when the role can't manage billing. The action enforces it independently.
  const noBillingTooltip = "You don't have permission to manage billing";
  const trigger = canManageBilling ? (
    (triggerButton ?? (
      <Button variant="primary/small" onClick={() => setOpen(true)}>
        {title}
      </Button>
    ))
  ) : triggerButton ? (
    cloneElement(triggerButton, { disabled: true, tooltip: noBillingTooltip })
  ) : (
    <PermissionButton
      variant="primary/small"
      hasPermission={false}
      noPermissionTooltip={noBillingTooltip}
    >
      {title}
    </PermissionButton>
  );

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent>
        <DialogHeader>{title}</DialogHeader>
        <fetcher.Form
          method="post"
          action={organizationTeamPath(organization)}
          {...getFormProps(form)}
        >
          <input type="hidden" name="_formType" value="purchase-seats" />
          <div className="flex flex-col gap-4 pt-2">
            <div className="flex flex-col gap-1">
              <Paragraph variant="small/bright">
                Purchase extra seats at {formatCurrency(pricePerSeat, true)}/month per seat.
                Reducing seats will take effect at the start of your next billing cycle (on the 1st
                of the month).
              </Paragraph>
            </div>
            <Fieldset>
              <InputGroup fullWidth>
                <Label htmlFor="amount" className="text-text-dimmed">
                  Total extra seats
                </Label>
                <InputNumberStepper
                  {...getInputProps(amount, { type: "number" })}
                  step={seatPricing.stepSize}
                  min={0}
                  max={undefined}
                  value={amountValue}
                  onChange={(e) => setAmountValue(Number(e.target.value))}
                  disabled={isLoading}
                />
                <FormError id={amount.errorId}>{amount.errors}</FormError>
                <FormError>{form.errors}</FormError>
              </InputGroup>
            </Fieldset>
            {state === "need_to_remove_members" ? (
              <div className="flex flex-col pb-3">
                <Paragraph variant="small" className="text-warning" spacing>
                  You need to remove {formatNumber(usedSeats - (planSeatLimit + amountValue))}{" "}
                  {usedSeats - (planSeatLimit + amountValue) === 1
                    ? "team member or pending invite"
                    : "team members or pending invites"}{" "}
                  before you can reduce to this level.
                </Paragraph>
              </div>
            ) : state === "above_quota" ? (
              <div className="flex flex-col pb-3">
                <Paragraph variant="small" className="text-warning" spacing>
                  Currently you can only have up to {maxQuota} extra seats. Send a request below to
                  lift your current limit. We'll get back to you soon.
                </Paragraph>
              </div>
            ) : (
              <div className="flex flex-col pb-3 tabular-nums">
                <div className="grid grid-cols-2 border-b border-grid-dimmed pb-1">
                  <Header3 className="font-normal text-text-dimmed">Summary</Header3>
                  <Header3 className="justify-self-end font-normal text-text-dimmed">Total</Header3>
                </div>
                <div className="grid grid-cols-2 pt-2">
                  <Header3 className="pb-0 font-normal text-text-dimmed">
                    <span className="text-text-bright">{formatNumber(extraSeats)}</span> current
                    extra
                  </Header3>
                  <Header3 className="justify-self-end font-normal text-text-bright">
                    {formatCurrency(extraSeats * pricePerSeat, true)}
                  </Header3>
                </div>
                <div className="grid grid-cols-2 text-xs">
                  <span className="text-text-dimmed">
                    ({extraSeats} {extraSeats === 1 ? "seat" : "seats"})
                  </span>
                  <span className="justify-self-end text-text-dimmed">/mth</span>
                </div>
                <div className="grid grid-cols-2 pt-2">
                  <Header3 className={cn("pb-0 font-normal", changeClassName)}>
                    {state === "increase" ? "+" : null}
                    {formatNumber(amountValue - extraSeats)}
                  </Header3>
                  <Header3 className={cn("justify-self-end font-normal", changeClassName)}>
                    {state === "increase" ? "+" : null}
                    {formatCurrency((amountValue - extraSeats) * pricePerSeat, true)}
                  </Header3>
                </div>
                <div className="grid grid-cols-2 text-xs">
                  <span className="text-text-dimmed">
                    ({Math.abs(amountValue - extraSeats)}{" "}
                    {Math.abs(amountValue - extraSeats) === 1 ? "seat" : "seats"} @{" "}
                    {formatCurrency(pricePerSeat, true)}/mth)
                  </span>
                  <span className="justify-self-end text-text-dimmed">/mth</span>
                </div>
                <div className="grid grid-cols-2 pt-2">
                  <Header3 className="pb-0 font-normal text-text-dimmed">
                    <span className="text-text-bright">{formatNumber(amountValue)}</span> new total
                  </Header3>
                  <Header3 className="justify-self-end font-normal text-text-bright">
                    {formatCurrency(amountValue * pricePerSeat, true)}
                  </Header3>
                </div>
                <div className="grid grid-cols-2 text-xs">
                  <span className="text-text-dimmed">
                    ({amountValue} {amountValue === 1 ? "seat" : "seats"})
                  </span>
                  <span className="justify-self-end text-text-dimmed">/mth</span>
                </div>
              </div>
            )}
          </div>
          <FormButtons
            confirmButton={
              state === "above_quota" ? (
                <>
                  <input type="hidden" name="action" value="quota-increase" />
                  <Button
                    LeadingIcon={isLoading ? SpinnerWhite : EnvelopeIcon}
                    variant="primary/medium"
                    type="submit"
                    disabled={isLoading}
                  >
                    <span className="tabular-nums text-text-bright">{`Send request for ${formatNumber(
                      amountValue
                    )}`}</span>
                  </Button>
                </>
              ) : state === "decrease" || state === "need_to_remove_members" ? (
                <>
                  <input type="hidden" name="action" value="purchase" />
                  <Button
                    variant="danger/medium"
                    type="submit"
                    disabled={isLoading || state === "need_to_remove_members"}
                    LeadingIcon={isLoading ? SpinnerWhite : undefined}
                  >
                    <span className="tabular-nums text-text-bright">{`Remove ${formatNumber(
                      extraSeats - amountValue
                    )} ${extraSeats - amountValue === 1 ? "seat" : "seats"}`}</span>
                  </Button>
                </>
              ) : (
                <>
                  <input type="hidden" name="action" value="purchase" />
                  <Button
                    variant="primary/medium"
                    type="submit"
                    disabled={isLoading || state === "no_change"}
                    LeadingIcon={isLoading ? SpinnerWhite : undefined}
                  >
                    <span className="tabular-nums text-text-bright">{`Purchase ${formatNumber(
                      amountValue - extraSeats
                    )} ${amountValue - extraSeats === 1 ? "seat" : "seats"}`}</span>
                  </Button>
                </>
              )
            }
            cancelButton={
              <DialogClose asChild>
                <Button variant="secondary/medium" disabled={isLoading}>
                  Cancel
                </Button>
              </DialogClose>
            }
          />
        </fetcher.Form>
      </DialogContent>
    </Dialog>
  );
}

function updateSeatState({
  value,
  existingValue,
  quota,
  usedSeats,
  planSeatLimit,
}: {
  value: number;
  existingValue: number;
  quota: number;
  usedSeats: number;
  planSeatLimit: number;
}): "no_change" | "increase" | "decrease" | "above_quota" | "need_to_remove_members" {
  if (value === existingValue) return "no_change";
  if (value < existingValue) {
    const newTotalLimit = planSeatLimit + value;
    if (usedSeats > newTotalLimit) {
      return "need_to_remove_members";
    }
    return "decrease";
  }
  if (value > quota) return "above_quota";
  return "increase";
}