"use client";

import { Medal } from "lucide-react";

import type { TopAeRepPerformanceRow } from "@/components/sales-targets/sales-targets-helpers";
import {
  formatMoney,
  formatPct,
  teamInitials,
} from "@/components/sales-targets/sales-targets-helpers";
import { SalesTargetPanel } from "@/components/sales-targets/sales-target-surfaces";
import { SalesTargetProgressBar } from "@/components/sales-targets/sales-target-progress-bar";
import { cn } from "@/lib/utils";

export function SalesTargetRepPerformanceSummary({
  rows,
  loading,
}: {
  rows: TopAeRepPerformanceRow[];
  loading?: boolean;
}) {
  if (loading) {
    return (
      <SalesTargetPanel className="p-4 md:p-5" aria-busy="true">
        <p className="font-['Lexend'] text-sm font-bold text-text">
          Rep performance summary
        </p>
        <p className="mt-2 font-['Lexend_Deca'] text-xs text-muted-foreground">
          Loading top performers…
        </p>
      </SalesTargetPanel>
    );
  }

  if (rows.length === 0) {
    return null;
  }

  return (
    <section aria-labelledby="rep-performance-summary-heading">
      <div className="mb-3 flex items-center gap-2">
        <Medal className="size-4 text-accent" aria-hidden />
        <h2
          id="rep-performance-summary-heading"
          className="font-['Lexend'] text-sm font-bold text-text md:text-base"
        >
          Rep performance summary
        </h2>
        <span className="font-['Lexend_Deca'] text-xs text-muted-foreground">
          Top {rows.length} AEs by target completion
        </span>
      </div>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {rows.map((row, index) => (
          <SalesTargetPanel
            key={`${row.teamId}-${row.userId}`}
            className={cn("p-4", index === 0 && "ring-1 ring-accent/30")}
          >
            <div className="flex items-start gap-3">
              <span
                className={cn(
                  "flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white",
                  index === 0 ? "bg-accent" : "bg-accent/80",
                )}
              >
                {teamInitials(row.name)}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate font-['Lexend'] text-sm font-bold text-text">
                  {row.name}
                </p>
                <p className="truncate font-['Lexend_Deca'] text-xs text-muted-foreground">
                  {row.teamName}
                </p>
                <p className="mt-1 font-['Lexend_Deca'] text-xs text-muted-foreground">
                  {formatMoney(row.attained)} / {formatMoney(row.target)}
                </p>
                <div className="mt-2 flex items-center justify-between gap-2">
                  <span className="font-['Lexend'] text-lg font-bold tabular-nums text-accent">
                    {formatPct(row.pct)}
                  </span>
                  <span className="rounded-full bg-accent/10 px-2 py-0.5 font-['Lexend_Deca'] text-[10px] font-bold uppercase tracking-wider text-accent">
                    #{index + 1}
                  </span>
                </div>
                <div className="mt-2">
                  <SalesTargetProgressBar pct={row.pct} />
                </div>
              </div>
            </div>
          </SalesTargetPanel>
        ))}
      </div>
    </section>
  );
}