"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft, FileDown, Loader2, Pencil } from "lucide-react";
import { toast } from "sonner";
import { format } from "date-fns";

import { Loading } from "@/components/ui/loading";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { SalesTargetProgressBar } from "@/components/sales-targets/sales-target-progress-bar";
import {
  SalesTargetMemberBadges,
  SalesTargetPanel,
} from "@/components/sales-targets/sales-target-surfaces";
import {
  aeTargetWithSupportSum,
  formatMoney,
  formatSupportSlot,
  isAeSalesTargetRow,
  teamInitials,
} from "@/components/sales-targets/sales-targets-helpers";
import dynamic from "next/dynamic";
import {
  buildSalesTargetsPdfExportUrl,
  useGetTeamAeAttainmentQuery,
  type TeamAeAttainment,
} from "@/api/rtk/sales-targets-api";
import { useBlobExportWorker } from "@/hooks/use-blob-export-worker";
import type { Team } from "@/api/rtk/teams-api";
import { useGetTeamsQuery } from "@/api/rtk/teams-api";
import { NoDataFound } from "@/components/ui/no-data-found";
import { RepTransactionsDialog } from "@/components/sales-targets/rep-transactions-dialog";
import { TeamRepsOverviewSkeleton } from "@/components/sales-targets/team-reps-overview-skeleton";
import { useSession } from "next-auth/react";
import { useGetProfileQuery } from "@/api/rtk/auth-api";
import {
  buildSalesTargetsPeriodQuery,
  useSalesTargetsPeriod,
} from "@/components/sales-targets/sales-targets-period";
import { cn } from "@/lib/utils";
import {
  canAccessTeamSalesTarget,
  canAssignRepSalesTargetsInApp,
  canExportSalesTargetsPdfInApp,
  canViewSalesTargets,
  type PermissionSource,
} from "@/lib/permissions";

type TeamMemberAttainment = TeamAeAttainment["byMember"][number] & {
  isTeamLead: boolean;
};

const EMPTY_MEMBERS: TeamAeAttainment["byMember"] = [];
const EMPTY_TEAM_LEADS: TeamAeAttainment["teamLeads"] = [];

function slug(value: string) {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-|-$/g, "")
    .slice(0, 40);
}

function AeTargetCell({
  aeTarget,
  supportMembers,
  className,
}: {
  aeTarget: number | null | undefined;
  supportMembers?: TeamMemberAttainment["supportMembers"];
  className?: string;
}) {
  const rollup = aeTargetWithSupportSum(aeTarget, supportMembers);

  return (
    <div className={cn("flex flex-col items-end gap-0.5", className)}>
      <span className="tabular-nums font-semibold">
        {rollup.combined != null ? formatMoney(rollup.combined) : "—"}
      </span>
      {rollup.hasSupportTargets && (
        <span className="text-[10px] font-normal leading-tight text-muted-foreground tabular-nums">
          AE {rollup.aeTarget != null ? formatMoney(rollup.aeTarget) : "—"} + BDR{" "}
          {formatMoney(rollup.supportSum)}
        </span>
      )}
    </div>
  );
}

const AssignRepTargetsModal = dynamic(
  () =>
    import("@/components/sales-targets/assign-rep-targets-modal").then(
      (m) => m.AssignRepTargetsModal,
    ),
  { ssr: false },
);

export default function TeamRepsOverviewPage({ teamId }: { teamId: string }) {
  const router = useRouter();
  const { data: session } = useSession();
  const backendUser = (session as { backendUser?: PermissionSource } | null)
    ?.backendUser;
  const { data: profile } = useGetProfileQuery();
  const permissionSource: PermissionSource = backendUser ?? profile ?? null;

  const { year, month } = useSalesTargetsPeriod();
  const [assignModalOpen, setAssignModalOpen] = React.useState(false);
  const [assignHighlightUserId, setAssignHighlightUserId] = React.useState<
    string | undefined
  >();
  const [selectedRep, setSelectedRep] = React.useState<{ id: string; name: string } | null>(null);

  const openAssignModal = React.useCallback((userId?: string) => {
    setAssignHighlightUserId(userId);
    setAssignModalOpen(true);
  }, []);

  const handleAssignModalOpenChange = React.useCallback((open: boolean) => {
    setAssignModalOpen(open);
    if (!open) setAssignHighlightUserId(undefined);
  }, []);

  const {
    data: allTeams = [],
    isLoading: teamsLoading,
    isFetching: teamsFetching,
  } = useGetTeamsQuery(undefined, {
    skip: !permissionSource,
  });

  const allowed = React.useMemo(
    () => canViewSalesTargets(permissionSource, allTeams),
    [permissionSource, allTeams],
  );

  const canAccessTeam = React.useMemo(
    () => canAccessTeamSalesTarget(permissionSource, teamId, allTeams),
    [permissionSource, teamId, allTeams],
  );

  const teamsReady = !teamsLoading && !teamsFetching;

  React.useEffect(() => {
    if (!permissionSource || !teamsReady) return;
    if (!allowed) router.replace("/");
    else if (!canAccessTeam) {
      router.replace(`/sales-targets${buildSalesTargetsPeriodQuery(year, month)}`);
    }
  }, [
    permissionSource,
    teamsReady,
    allowed,
    canAccessTeam,
    router,
    year,
    month,
  ]);

  const {
    data: attainment,
    isLoading: attainmentLoading,
    isFetching: attainmentFetching,
    isError,
    refetch,
  } = useGetTeamAeAttainmentQuery(
    {
      teamId,
      year,
      month,
    },
    { skip: !allowed || !teamsReady || !canAccessTeam },
  );

  const statsLoading =
    (attainmentLoading || attainmentFetching) && !attainment;
  const statsRefreshing = attainmentFetching && Boolean(attainment);

  const { downloadFromUrl, exporting: exportingPdf } = useBlobExportWorker();

  const fallbackTeamName =
    allTeams.find((team) => team.id === teamId)?.name ?? "Team";
  const teamName = attainment?.teamName ?? fallbackTeamName;
  const attained = attainment?.attained ?? 0;
  const label =
    attainment?.label ?? format(new Date(year, month - 1, 1), "MMMM yyyy");
  const byMember = attainment?.byMember ?? EMPTY_MEMBERS;
  const teamLeads = attainment?.teamLeads ?? EMPTY_TEAM_LEADS;

  const allMembers = React.useMemo<TeamMemberAttainment[]>(() => {
    const leads = teamLeads.map((member) => ({
      ...member,
      isTeamLead: true,
    }));
    const reps = byMember.map((member) => ({
      ...member,
      isTeamLead: false,
    }));
    const combined = [...leads, ...reps];
    const supportUserIds = new Set(
      combined.flatMap((m) => (m.supportMembers ?? []).map((s) => s.userId)),
    );
    return combined.filter(
      (m) => isAeSalesTargetRow(m.roleName) && !supportUserIds.has(m.userId),
    );
  }, [teamLeads, byMember]);

  const targetTeams = React.useMemo<Team[]>(
    () => [
      {
        id: teamId,
        name: teamName,
        color: "",
        members: [],
      },
    ],
    [teamId, teamName],
  );

  const showExportPdf = React.useMemo(
    () => canExportSalesTargetsPdfInApp(permissionSource, allTeams),
    [permissionSource, allTeams],
  );

  const canAssignReps = React.useMemo(
    () => canAssignRepSalesTargetsInApp(permissionSource, allTeams),
    [permissionSource, allTeams],
  );

  const assignableTeams = React.useMemo<Team[]>(() => {
    const team = allTeams.find((t) => t.id === teamId);
    if (team) return [team];
    return targetTeams;
  }, [allTeams, teamId, targetTeams]);

  const targetTotals = React.useMemo(() => {
    let aeTotal = 0;
    let supportTotal = 0;
    let hasAeTarget = false;
    let hasSupportTarget = false;

    for (const member of allMembers) {
      if (member.target != null) {
        aeTotal += member.target;
        hasAeTarget = true;
      }
      for (const support of member.supportMembers ?? []) {
        if (support.target != null) {
          supportTotal += support.target;
          hasSupportTarget = true;
        }
      }
    }

    return {
      aeTotal: hasAeTarget ? aeTotal : null,
      supportTotal: hasSupportTarget ? supportTotal : null,
      combinedTotal:
        hasAeTarget || hasSupportTarget ? aeTotal + supportTotal : null,
      hasSupportTargets: hasSupportTarget,
    };
  }, [allMembers]);

  const teamTargetDisplay =
    targetTotals.combinedTotal ?? attainment?.target ?? null;
  const teamRemaining =
    teamTargetDisplay != null
      ? Math.max(0, teamTargetDisplay - attained)
      : null;
  const teamProgressPct =
    teamTargetDisplay != null && teamTargetDisplay > 0
      ? (attained / teamTargetDisplay) * 100
      : (attainment?.pct ?? null);

  const assignMemberTargetSeed = React.useMemo(() => {
    if (!allMembers.length) return undefined;
    const entries: [string, number | null | undefined][] = [];
    for (const member of allMembers) {
      entries.push([member.userId, member.target]);
      for (const support of member.supportMembers ?? []) {
        entries.push([support.userId, support.target ?? null]);
      }
    }
    return Object.fromEntries(entries);
  }, [allMembers]);

  const handleExportPdf = React.useCallback(async () => {
    const filename = `team-stats_${slug(attainment?.teamName ?? "team")}_${slug(attainment?.label ?? "month")}.pdf`;
    const toastId = toast.loading("Generating PDF…");

    try {
      await downloadFromUrl(
        buildSalesTargetsPdfExportUrl({ year, month, teamId }),
        filename,
        "application/pdf",
      );
      toast.success("Report ready — check your downloads", { id: toastId });
    } catch {
      toast.error("Could not generate the PDF. Try again.", { id: toastId });
    }
  }, [attainment?.label, attainment?.teamName, downloadFromUrl, month, teamId, year]);

  const salesTargetsListHref = `/sales-targets${buildSalesTargetsPeriodQuery(year, month)}`;

  if (!permissionSource || !allowed) {
    return <Loading variant="api" layout="page" message="Checking access..." />;
  }

  if (!teamsReady || !canAccessTeam) {
    return <Loading variant="api" layout="page" message="Checking access..." />;
  }

  if ((isError || !attainment) && !statsLoading && !statsRefreshing) {
    return (
      <div className="flex h-full w-full flex-col items-center justify-center gap-4">
        <NoDataFound message="No team data found" description="Could not load stats for this team." />
        <Button variant="outline" onClick={() => router.push(salesTargetsListHref)}>
          <ArrowLeft className="mr-2 h-4 w-4" />
          Back to Sales Targets
        </Button>
      </div>
    );
  }

  return (
    <div
      className="relative mx-auto flex h-full min-h-0 w-full max-w-[1600px] flex-1 flex-col gap-5 overflow-y-auto pb-6 scrollbar-themed animate-in fade-in duration-500 md:gap-6"
      aria-busy={statsLoading || statsRefreshing}
    >
      {statsRefreshing ? (
        <div
          className="absolute inset-0 z-20 flex items-center justify-center rounded-2xl bg-background/55 backdrop-blur-[2px]"
          aria-hidden
        >
          <Loading variant="api" layout="section" message="Loading team stats..." />
        </div>
      ) : null}
      <header className="flex shrink-0 flex-col gap-4 md:gap-5">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="flex min-w-0 items-center gap-3">
            <Button
              variant="ghost"
              size="icon"
              className="shrink-0"
              onClick={() => router.push(salesTargetsListHref)}
            >
              <ArrowLeft className="size-5" />
            </Button>
            <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent text-sm font-bold text-white">
              {teamInitials(teamName)}
            </span>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <h1 className="font-['Lexend'] text-xl font-bold tracking-tight text-text md:text-2xl">
                  {teamName}
                </h1>
                <span className="rounded-full border border-accent/25 bg-accent/10 px-2.5 py-0.5 font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-wider text-accent">
                  {label}
                </span>
              </div>
            </div>
          </div>

          {showExportPdf && !statsLoading && (
            <TooltipProvider>
              <ButtonGroup
                role="toolbar"
                aria-label="Team stats actions"
                className="shrink-0"
              >
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      type="button"
                      size="icon-sm"
                      variant="outline"
                      disabled={exportingPdf}
                      onClick={handleExportPdf}
                      aria-label={
                        exportingPdf
                          ? "Generating team stats PDF"
                          : "Export team stats as PDF"
                      }
                    >
                      {exportingPdf ? (
                        <Loader2 className="size-3.5 animate-spin" aria-hidden />
                      ) : (
                        <FileDown className="size-3.5" aria-hidden />
                      )}
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    {exportingPdf ? "Exporting…" : "Export PDF"}
                  </TooltipContent>
                </Tooltip>
              </ButtonGroup>
            </TooltipProvider>
          )}
        </div>
      </header>

      {statsLoading ? (
        <TeamRepsOverviewSkeleton />
      ) : (
        <>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <SalesTargetPanel className="p-4 sm:p-5">
          <h3 className="font-['Lexend_Deca'] text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Team Target
          </h3>
          <p className="mt-2 font-['Lexend'] text-2xl font-bold text-text sm:text-3xl">
            {teamTargetDisplay != null ? formatMoney(teamTargetDisplay) : "—"}
          </p>
          {targetTotals.hasSupportTargets && (
            <p className="mt-1 font-['Lexend_Deca'] text-[11px] font-medium leading-tight text-muted-foreground tabular-nums">
              AE{" "}
              {targetTotals.aeTotal != null
                ? formatMoney(targetTotals.aeTotal)
                : "—"}{" "}
              + BDR {formatMoney(targetTotals.supportTotal ?? 0)}
            </p>
          )}
        </SalesTargetPanel>
        <SalesTargetPanel className="p-4 sm:p-5">
          <h3 className="font-['Lexend_Deca'] text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Team Attained
          </h3>
          <p className="mt-2 font-['Lexend'] text-2xl font-bold text-text sm:text-3xl">
            {formatMoney(attained)}
          </p>
        </SalesTargetPanel>
        <SalesTargetPanel className="p-4 sm:p-5">
          <h3 className="font-['Lexend_Deca'] text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Remaining Target
          </h3>
          <p
            className={cn(
              "mt-2 font-['Lexend'] text-2xl font-bold sm:text-3xl tabular-nums",
              teamRemaining === 0
                ? "text-emerald-600 dark:text-emerald-400"
                : "text-text",
            )}
          >
            {teamRemaining != null ? formatMoney(teamRemaining) : "—"}
          </p>
        </SalesTargetPanel>
        <SalesTargetPanel className="p-4 sm:p-5">
          <h3 className="font-['Lexend_Deca'] text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Team Progress
          </h3>
          <div className="mt-4">
            <SalesTargetProgressBar pct={teamProgressPct} />
          </div>
        </SalesTargetPanel>
      </div>

      <SalesTargetPanel className="hidden md:block">
        <TooltipProvider>
        <div className="overflow-x-auto scrollbar-themed">
          <Table variant="transparent" className="min-w-[640px]">
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>
                  <span className="font-bold uppercase tracking-wider">Rep Name</span>
                </TableHead>
                <TableHead className="text-right">
                  <span className="font-bold uppercase tracking-wider">Target</span>
                </TableHead>
                <TableHead className="text-right">
                  <span className="font-bold uppercase tracking-wider">Attained</span>
                </TableHead>
                <TableHead className="min-w-[180px]">
                  <span className="font-bold uppercase tracking-wider">Progress</span>
                </TableHead>
                {canAssignReps && (
                  <TableHead className="w-[72px] text-right">
                    <span className="sr-only">Actions</span>
                  </TableHead>
                )}
              </TableRow>
            </TableHeader>
            <TableBody>
              {allMembers.map((member) => (
                <React.Fragment key={member.userId}>
                  <TableRow
                    className="cursor-pointer hover:bg-muted/50 transition-colors"
                    onClick={() => setSelectedRep({ id: member.userId, name: member.name })}
                  >
                    <TableCell>
                      <div className="flex items-center gap-2.5">
                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-accent text-xs font-bold text-white">
                          {teamInitials(member.name)}
                        </span>
                        <div className="flex flex-col min-w-0">
                          <span className="font-semibold text-text truncate">
                            {member.name}
                          </span>
                          <SalesTargetMemberBadges
                            roleName={member.roleName}
                            isTeamLead={member.isTeamLead}
                            className="mt-0.5"
                          />
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <AeTargetCell
                        aeTarget={member.target}
                        supportMembers={member.supportMembers}
                      />
                    </TableCell>
                    <TableCell className="text-right tabular-nums font-semibold">
                      {formatMoney(member.attained)}
                    </TableCell>
                    <TableCell>
                      <SalesTargetProgressBar pct={member.pct} />
                    </TableCell>
                    {canAssignReps && (
                      <TableCell className="text-right">
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              type="button"
                              size="icon-sm"
                              variant="outline"
                              aria-label={`Edit target for ${member.name}`}
                              onClick={(e) => {
                                e.stopPropagation();
                                openAssignModal(member.userId);
                              }}
                            >
                              <Pencil className="size-3.5" aria-hidden />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>Edit target</TooltipContent>
                        </Tooltip>
                      </TableCell>
                    )}
                  </TableRow>
                  {(member.supportMembers ?? []).map((support) => (
                    <TableRow
                      key={support.assignmentId}
                      className="bg-muted/20 hover:bg-muted/30"
                    >
                      <TableCell>
                        <div className="flex items-center gap-2.5 pl-8">
                          <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-[10px] font-semibold text-muted-foreground">
                            {teamInitials(support.name)}
                          </span>
                          <div className="flex min-w-0 flex-col">
                            <span className="truncate text-sm text-muted-foreground">
                              {support.name}
                            </span>
                            <Badge
                              variant="outline"
                              className="mt-0.5 w-fit border-border/60 bg-background/60 px-1.5 py-0 font-['Lexend_Deca'] text-[9px] font-semibold leading-none text-muted-foreground"
                            >
                              {formatSupportSlot(support.supportRole)}
                            </Badge>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-muted-foreground">
                        {support.target != null ? formatMoney(support.target) : "—"}
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-muted-foreground">
                        {formatMoney(support.attained ?? 0)}
                      </TableCell>
                      <TableCell>
                        <SalesTargetProgressBar pct={support.pct ?? null} />
                      </TableCell>
                      {canAssignReps && (
                        <TableCell className="text-right">
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button
                                type="button"
                                size="icon-sm"
                                variant="outline"
                                aria-label={`Edit target for ${support.name}`}
                                onClick={(e) => {
                                  e.stopPropagation();
                                  openAssignModal(support.userId);
                                }}
                              >
                                <Pencil className="size-3.5" aria-hidden />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>Edit support target</TooltipContent>
                          </Tooltip>
                        </TableCell>
                      )}
                    </TableRow>
                  ))}
                </React.Fragment>
              ))}
              {allMembers.length === 0 && (
                <TableRow>
                  <TableCell
                    colSpan={canAssignReps ? 5 : 4}
                    className="text-center text-muted-foreground py-8"
                  >
                    No AEs found for this team.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
            {allMembers.length > 0 && (
              <TableFooter>
                <TableRow className="hover:bg-transparent bg-muted/15">
                  <TableCell className="font-semibold text-text">Totals</TableCell>
                  <TableCell className="text-right">
                    <div className="flex flex-col items-end gap-0.5">
                      <span className="tabular-nums font-semibold text-text">
                        {targetTotals.combinedTotal != null
                          ? formatMoney(targetTotals.combinedTotal)
                          : "—"}
                      </span>
                      {targetTotals.supportTotal != null && (
                        <span className="text-[10px] font-normal leading-tight text-muted-foreground tabular-nums">
                          AE{" "}
                          {targetTotals.aeTotal != null
                            ? formatMoney(targetTotals.aeTotal)
                            : "—"}{" "}
                          + BDR {formatMoney(targetTotals.supportTotal)}
                        </span>
                      )}
                    </div>
                  </TableCell>
                  <TableCell />
                  <TableCell />
                  {canAssignReps && <TableCell />}
                </TableRow>
              </TableFooter>
            )}
          </Table>
        </div>
        </TooltipProvider>
      </SalesTargetPanel>

      {/* Mobile view */}
      <div className="flex flex-col gap-4 md:hidden">
        {allMembers.map((member) => {
          const targetRollup = aeTargetWithSupportSum(
            member.target,
            member.supportMembers,
          );

          return (
          <SalesTargetPanel
            key={member.userId}
            className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
            onClick={() => setSelectedRep({ id: member.userId, name: member.name })}
          >
            <div className="flex items-start gap-3">
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-sm font-bold text-white">
                {teamInitials(member.name)}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate font-['Lexend'] text-sm font-bold text-text">
                  {member.name}
                </p>
                <SalesTargetMemberBadges
                  roleName={member.roleName}
                  isTeamLead={member.isTeamLead}
                  className="mt-0.5"
                />
                <p className="mt-1 font-['Lexend_Deca'] text-xs text-muted-foreground">
                  Target{" "}
                  {targetRollup.combined != null
                    ? formatMoney(targetRollup.combined)
                    : "—"}
                  {targetRollup.hasSupportTargets && (
                    <>
                      {" "}
                      (AE{" "}
                      {targetRollup.aeTarget != null
                        ? formatMoney(targetRollup.aeTarget)
                        : "—"}{" "}
                      + BDR {formatMoney(targetRollup.supportSum)})
                    </>
                  )}
                  {" · "}Attained {formatMoney(member.attained)}
                </p>
                <div className="mt-2">
                  <SalesTargetProgressBar pct={member.pct} />
                </div>
                {(member.supportMembers ?? []).length > 0 && (
                  <ul className="mt-3 space-y-2 border-t border-border/40 pt-3">
                    {(member.supportMembers ?? []).map((support) => (
                      <li
                        key={support.assignmentId}
                        className="flex items-center gap-2 text-xs text-muted-foreground"
                      >
                        <span className="flex size-6 shrink-0 items-center justify-center rounded bg-muted text-[9px] font-semibold">
                          {teamInitials(support.name)}
                        </span>
                        <span className="min-w-0 flex-1 truncate">{support.name}</span>
                        <span className="shrink-0 tabular-nums">
                          {support.target != null ? formatMoney(support.target) : "—"}
                        </span>
                        <Badge
                          variant="outline"
                          className="shrink-0 border-border/60 bg-background/60 px-1.5 py-0 font-['Lexend_Deca'] text-[9px] font-semibold leading-none"
                        >
                          {formatSupportSlot(support.supportRole)}
                        </Badge>
                        {canAssignReps && (
                          <Button
                            type="button"
                            size="icon-sm"
                            variant="outline"
                            className="shrink-0"
                            aria-label={`Edit target for ${support.name}`}
                            onClick={(e) => {
                              e.stopPropagation();
                              openAssignModal(support.userId);
                            }}
                          >
                            <Pencil className="size-3.5" aria-hidden />
                          </Button>
                        )}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
              {canAssignReps && (
                <Button
                  type="button"
                  size="icon-sm"
                  variant="outline"
                  className="shrink-0"
                  aria-label={`Edit target for ${member.name}`}
                  onClick={(e) => {
                    e.stopPropagation();
                    openAssignModal(member.userId);
                  }}
                >
                  <Pencil className="size-3.5" aria-hidden />
                </Button>
              )}
            </div>
          </SalesTargetPanel>
          );
        })}
        {allMembers.length === 0 && (
          <div className="text-center text-muted-foreground py-8">
            No AEs found for this team.
          </div>
        )}
      </div>
        </>
      )}

      {assignModalOpen && (
        <AssignRepTargetsModal
          open={assignModalOpen}
          onOpenChange={handleAssignModalOpenChange}
          year={year}
          month={month}
          teams={assignableTeams}
          initialTeamId={teamId}
          lockTeam
          memberTargetSeed={assignMemberTargetSeed}
          highlightUserId={assignHighlightUserId}
          onSaved={() => void refetch()}
        />
      )}

      <RepTransactionsDialog
        userId={selectedRep?.id ?? null}
        userName={selectedRep?.name ?? ""}
        teamId={teamId}
        year={year}
        month={month}
        onClose={() => setSelectedRep(null)}
      />
    </div>
  );
}