"use client";

import * as React from "react";

import { SalesTargetTeamPerformance } from "@/components/sales-targets/sales-target-team-card";
import {
  SalesTargetsSummary,
  type SalesTargetsSummaryData,
} from "@/components/sales-targets/sales-targets-summary";
import { SalesTargetsSummarySkeleton } from "@/components/sales-targets/sales-targets-summary-skeleton";
import { SalesTargetsTeamsOverview } from "@/components/sales-targets/sales-targets-teams-overview";

import {
  buildTeamMemberAttainmentList,
  formatMoney,
  parseNum,
  type SalesTargetMemberRow,
  type TeamRowState,
  type TopAeRepPerformanceRow,
} from "@/components/sales-targets/sales-targets-helpers";
import {
  canAssignRepSalesTargetsForTeam,
  type PermissionSource,
} from "@/lib/permissions";
import type { Team } from "@/api/rtk/teams-api";

type Attainment = {
  attained: number;
  pct: number | null;
  target: number | null;
};

function formatAeTargetDisplay(
  row: TeamRowState,
  attainment?: Attainment,
): string {
  const fromRow = parseNum(row.aeTarget);
  if (fromRow != null) return formatMoney(fromRow);
  if (attainment?.target != null) return formatMoney(attainment.target);
  return "—";
}

export type SalesTargetsBodyProps = {
  scopeToLedTeamsOnly: boolean;
  monthLabel: string;
  summary: SalesTargetsSummaryData;
  summaryLoading?: boolean;
  /** All teams for comparison overview (unfiltered). */
  overviewTeamRows: TeamRowState[];
  attainmentByTeam: Map<string, Attainment>;
  membersByTeam: Map<string, SalesTargetMemberRow[]>;
  membersLoading?: boolean;
  permissionSource: PermissionSource;
  allTeams: Team[];
  canAssignReps: boolean;
  onAssignTeam: (teamId: string) => void;
  teamFilterId: string;
  onTeamFilterChange: (teamId: string) => void;
  teamLeadCards?: Array<{
    teamId: string;
    teamName: string;
    target: number | null;
    attained: number;
    pct: number | null;
    byMember?: Parameters<typeof buildTeamMemberAttainmentList>[1];
    teamLeads?: Parameters<typeof buildTeamMemberAttainmentList>[3];
  }>;
  teamLeadUserIdsByTeam: Map<string, Set<string>>;

  periodYear?: number;
  periodMonth?: number;
};

export function SalesTargetsBody({
  scopeToLedTeamsOnly,
  monthLabel,
  summary,
  summaryLoading,
  overviewTeamRows,
  attainmentByTeam,
  membersByTeam,
  membersLoading,
  permissionSource,
  allTeams,
  canAssignReps,
  onAssignTeam,
  teamFilterId,
  onTeamFilterChange,
  teamLeadCards,
  teamLeadUserIdsByTeam,

  periodYear,
  periodMonth,
}: SalesTargetsBodyProps) {
  const showTeamsTable =
    !scopeToLedTeamsOnly &&
    teamFilterId === "all" &&
    overviewTeamRows.length > 0;

  const activeTeamId =
    teamFilterId && teamFilterId !== "all" ? teamFilterId : null;

  const performanceData = React.useMemo(() => {
    if (!activeTeamId) return null;

    if (scopeToLedTeamsOnly && teamLeadCards) {
      const team = teamLeadCards.find((t) => t.teamId === activeTeamId);
      if (!team) return null;
      const members =
        membersByTeam.get(team.teamId) ??
        buildTeamMemberAttainmentList(
          team.teamId,
          team.byMember,
          teamLeadUserIdsByTeam,
          team.teamLeads,
        );
      return {
        teamId: team.teamId,
        teamName: team.teamName,
        aeTargetLabel: formatMoney(team.target),
        aeAttainedLabel: formatMoney(team.attained),
        progressPct: team.pct,
        members,
        showAssign: canAssignRepSalesTargetsForTeam(
          permissionSource,
          team.teamId,
          allTeams,
        ),
      };
    }

    const row = overviewTeamRows.find((r) => r.teamId === activeTeamId);
    if (!row) return null;
    const att = attainmentByTeam.get(row.teamId);
    return {
      teamId: row.teamId,
      teamName: row.teamName,
      aeTargetLabel: formatAeTargetDisplay(row, att),
      aeAttainedLabel: formatMoney(att?.attained),
      progressPct: att?.pct,
      members: membersByTeam.get(row.teamId) ?? [],
      showAssign:
        canAssignReps &&
        canAssignRepSalesTargetsForTeam(permissionSource, row.teamId, allTeams),
    };
  }, [
    activeTeamId,
    scopeToLedTeamsOnly,
    teamLeadCards,
    overviewTeamRows,
    attainmentByTeam,
    membersByTeam,
    teamLeadUserIdsByTeam,
    permissionSource,
    allTeams,
    canAssignReps,
  ]);

  return (
    <div className="flex min-h-0 flex-1 flex-col gap-5 md:gap-6">
      {summaryLoading ? (
        <SalesTargetsSummarySkeleton />
      ) : (
        <SalesTargetsSummary monthLabel={monthLabel} summary={summary} />
      )}



      <section
        className="flex min-h-0 flex-1 flex-col"
        aria-labelledby="sales-targets-table-heading"
      >
        <h2 id="sales-targets-table-heading" className="sr-only">
          {showTeamsTable ? "Teams overview" : "Rep performance"}
        </h2>

        <div className="min-h-0 flex-1 overflow-auto scrollbar-themed">
          {showTeamsTable ? (
            <SalesTargetsTeamsOverview
              teamRows={overviewTeamRows}
              attainmentByTeam={attainmentByTeam}
              canAssignForTeam={(teamId) =>
                canAssignReps &&
                canAssignRepSalesTargetsForTeam(
                  permissionSource,
                  teamId,
                  allTeams,
                )
              }
              onAssignTeam={onAssignTeam}
              onTeamFilterChange={onTeamFilterChange}
              periodYear={periodYear}
              periodMonth={periodMonth}
            />
          ) : activeTeamId && performanceData ? (
            <SalesTargetTeamPerformance
              teamId={performanceData.teamId}
              teamName={performanceData.teamName}
              aeTargetLabel={performanceData.aeTargetLabel}
              aeAttainedLabel={performanceData.aeAttainedLabel}
              progressPct={performanceData.progressPct}
              showAssign={performanceData.showAssign}
              onAssign={
                performanceData.showAssign
                  ? () => onAssignTeam(performanceData.teamId)
                  : undefined
              }
              members={performanceData.members}
              membersLoading={membersLoading}
            />
          ) : activeTeamId ? (
            <p className="rounded-xl border border-dashed border-border/60 bg-[#CEDAE2] px-4 py-8 text-center font-['Lexend_Deca'] text-sm text-muted-foreground">
              No data for the selected team in this period.
            </p>
          ) : (
            <p className="rounded-xl border border-dashed border-border/60 bg-[#CEDAE2] px-4 py-8 text-center font-['Lexend_Deca'] text-sm text-muted-foreground">
              Select a team from the filter to view rep performance.
            </p>
          )}
        </div>
      </section>
    </div>
  );
}