"use client";

import * as React from "react";
import { Users } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { SalesTargetProgressBar } from "@/components/sales-targets/sales-target-progress-bar";
import {
  SalesTargetMemberBadges,
  SalesTargetPanel,
  salesTargetInsetClass,
} from "@/components/sales-targets/sales-target-surfaces";
import {
  formatMoney,
  formatPct,
  formatSupportSlot,
  teamInitials,
  type SalesTargetMemberRow,
} from "@/components/sales-targets/sales-targets-helpers";
import { cn } from "@/lib/utils";

export type SalesTargetTeamPerformanceProps = {
  teamId?: string;
  teamName: string;
  aeTargetLabel: string;
  aeAttainedLabel: string;
  progressPct: number | null | undefined;
  monthLabel?: string;
  showAssign?: boolean;
  onAssign?: () => void;
  className?: string;
  members?: SalesTargetMemberRow[];
  membersLoading?: boolean;
};

function SummaryStat({
  label,
  value,
  className,
}: {
  label: string;
  value: string;
  className?: string;
}) {
  return (
    <div className={cn(salesTargetInsetClass, "min-w-0 px-3.5 py-3", className)}>
      <p className="font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
        {label}
      </p>
      <p className="mt-1.5 truncate font-['Lexend'] text-base font-extrabold tabular-nums text-text md:text-lg">
        {value}
      </p>
    </div>
  );
}

/** Single-team panel: header stats + rep performance table (no accordion). */
export function SalesTargetTeamPerformance({
  teamId,
  teamName,
  aeTargetLabel,
  aeAttainedLabel,
  progressPct,
  monthLabel,
  showAssign,
  onAssign,
  className,
  members = [],
  membersLoading,
}: SalesTargetTeamPerformanceProps) {
  const complete = progressPct != null && progressPct >= 100;
  const anchorId = teamId ? `team-${teamId}` : undefined;
  const memberCount = React.useMemo(
    () =>
      members.reduce(
        (count, member) => count + 1 + (member.supportMembers?.length ?? 0),
        0,
      ),
    [members],
  );

  const summaryInline = (
    <p className="font-['Lexend_Deca'] text-xs text-muted-foreground md:hidden">
      {aeTargetLabel} target · {aeAttainedLabel} attained · {formatPct(progressPct)}
    </p>
  );

  const summaryBlock = (
    <div className="grid w-full gap-3 md:grid-cols-3">
      <SummaryStat label="AE target" value={aeTargetLabel} className="hidden md:block" />
      <SummaryStat label="AE attained" value={aeAttainedLabel} className="hidden md:block" />
      <div className={cn(salesTargetInsetClass, "hidden min-w-0 px-3.5 py-3 md:block")}>
        <div className="flex items-center justify-between gap-2">
          <p className="font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
            Progress
          </p>
          <span
            className={cn(
              "font-['Lexend'] text-sm font-extrabold tabular-nums",
              complete
                ? "text-emerald-600 dark:text-emerald-400"
                : "text-accent",
            )}
          >
            {formatPct(progressPct)}
          </span>
        </div>
        <div className="mt-2.5">
          <SalesTargetProgressBar pct={progressPct} />
        </div>
      </div>
    </div>
  );

  const assignButton =
    showAssign && onAssign ? (
      <Button
        type="button"
        size="sm"
        variant="outline"
        className="h-10 shrink-0 font-['Lexend_Deca'] text-xs font-bold"
        onClick={onAssign}
      >
        <Users className="mr-1.5 size-4" aria-hidden />
        Assign to reps
      </Button>
    ) : null;

  return (
    <SalesTargetPanel
      id={anchorId}
      className={cn(
        "transition-shadow duration-200",
        complete && "ring-1 ring-emerald-500/30",
        className,
      )}
    >
      <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/50 px-4 py-4 sm:px-5 md:px-6">
        <div className="flex min-w-0 flex-1 items-start gap-3">
          <span
            className={cn(
              "flex size-11 shrink-0 items-center justify-center rounded-xl font-['Lexend'] text-sm font-bold text-white shadow-sm",
              complete
                ? "bg-gradient-to-br from-emerald-500 to-emerald-600"
                : "bg-gradient-to-br from-accent to-indigo-600",
            )}
            aria-hidden
          >
            {teamInitials(teamName)}
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="truncate font-['Lexend'] text-lg font-bold text-text">
              {teamName}
            </h3>
            {monthLabel ? (
              <p className="mt-0.5 font-['Lexend_Deca'] text-xs text-muted-foreground">
                {monthLabel}
              </p>
            ) : null}
            {summaryInline}
          </div>
        </div>
        <div className="flex shrink-0 flex-wrap items-center gap-2">
          <span className="rounded-full border border-accent/20 bg-accent/10 px-2.5 py-1 font-['Lexend_Deca'] text-[11px] font-bold text-accent">
            {membersLoading
              ? "Loading…"
              : `${memberCount} ${memberCount === 1 ? "member" : "members"}`}
          </span>
          {assignButton}
        </div>
      </div>

      <div className="px-4 py-4 sm:px-5 md:px-6 md:py-5">{summaryBlock}</div>

      <SalesTargetMemberList
        members={members}
        loading={membersLoading}
        embedded
      />
    </SalesTargetPanel>
  );
}

/** @deprecated Use SalesTargetTeamPerformance */
export const SalesTargetTeamCard = SalesTargetTeamPerformance;

export function SalesTargetMemberList({
  members = [],
  loading,
  embedded = false,
}: {
  members?: SalesTargetMemberRow[];
  loading?: boolean;
  embedded?: boolean;
}) {
  const memberCount = React.useMemo(
    () =>
      members.reduce(
        (count, member) => count + 1 + (member.supportMembers?.length ?? 0),
        0,
      ),
    [members],
  );

  return (
    <div
      className={cn(
        "border-t border-border/50 py-4",
        embedded ? "px-4 sm:px-5 md:px-6" : "px-4 sm:px-5",
      )}
    >
      {!embedded && (
        <div className="mb-3 flex items-center justify-between gap-2">
          <h3 className="font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
            Team members
          </h3>
          {!loading && memberCount > 0 && (
            <span className="font-['Lexend_Deca'] text-xs text-muted-foreground">
              {memberCount} {memberCount === 1 ? "member" : "members"}
            </span>
          )}
        </div>
      )}

      {loading ? (
        <p className="font-['Lexend_Deca'] text-sm text-muted-foreground">
          Loading member progress…
        </p>
      ) : members.length === 0 ? (
        <p
          className={cn(
            salesTargetInsetClass,
            "border-dashed px-4 py-6 text-center font-['Lexend_Deca'] text-sm text-muted-foreground",
          )}
        >
          No member attainment for this period yet.
        </p>
      ) : (
        <div className="overflow-x-auto scrollbar-themed">
          <Table variant="transparent" className="min-w-[520px]">
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>Rep</TableHead>
                <TableHead className="text-right">Target</TableHead>
                <TableHead className="text-right">Achieved</TableHead>
                <TableHead className="text-right">Progress</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {members.map((member) => (
                <React.Fragment key={member.userId}>
                  <TableRow>
                    <TableCell className="max-w-[220px] font-semibold text-text">
                      <div className="flex min-w-0 flex-col gap-1">
                        <span className="block truncate font-['Lexend']">
                          {member.name}
                        </span>
                        <SalesTargetMemberBadges
                          roleName={member.roleName}
                          isTeamLead={member.isTeamLead}
                        />
                      </div>
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatMoney(member.target)}
                    </TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {formatMoney(member.attained)}
                    </TableCell>
                    <TableCell
                      className={cn(
                        "text-right font-semibold tabular-nums",
                        member.pct != null &&
                          !Number.isNaN(member.pct) &&
                          member.pct >= 100 &&
                          "text-emerald-600 dark:text-emerald-400",
                      )}
                    >
                      {formatPct(member.pct)}
                    </TableCell>
                  </TableRow>
                  {(member.supportMembers ?? []).map((support) => (
                    <TableRow
                      key={support.assignmentId}
                      className="bg-muted/20 hover:bg-muted/30"
                    >
                      <TableCell className="max-w-[220px]">
                        <div className="flex items-center gap-2.5 pl-6">
                          <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 gap-1">
                            <span className="block truncate font-['Lexend'] text-sm text-muted-foreground">
                              {support.name}
                            </span>
                            <Badge
                              variant="outline"
                              className="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">
                        {formatMoney(support.target)}
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-muted-foreground">
                        {formatMoney(support.attained)}
                      </TableCell>
                      <TableCell
                        className={cn(
                          "text-right tabular-nums text-muted-foreground",
                          support.pct != null &&
                            !Number.isNaN(support.pct) &&
                            support.pct >= 100 &&
                            "text-emerald-600 dark:text-emerald-400",
                        )}
                      >
                        {formatPct(support.pct)}
                      </TableCell>
                    </TableRow>
                  ))}
                </React.Fragment>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
}

/** @deprecated Use SalesTargetMemberList */
export const SalesTargetMemberCards = SalesTargetMemberList;