import { Badge } from "@/components/ui/badge";
import { NoDataFound } from "@/components/ui/no-data-found";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import type { LeaderboardEntry } from "@/types/leaderboard";
import { formatMoney } from "@/components/sales-targets/sales-targets-helpers";

export type LeaderboardProps = {
  entries?: LeaderboardEntry[];
  isLoading?: boolean;
  /** Max rows to show after sorting by quota (default 4, matches dashboard). */
  limit?: number;
  title?: string;
  subtitle?: string;
  showMemberCount?: boolean;
  className?: string;
  listClassName?: string;
  emptyMessage?: string;
  emptyDescription?: string;
};

function getRankClass(index: number) {
  if (index === 0) {
    return "bg-amber-500/10 text-amber-600 border border-amber-500/20 font-black shadow-xs";
  }
  if (index === 1) {
    return "bg-slate-500/10 text-slate-600 border border-slate-500/20 font-black shadow-xs";
  }
  if (index === 2) {
    return "bg-orange-500/10 text-orange-600 border border-orange-500/20 font-black shadow-xs";
  }
  return "bg-gray-100/60 text-gray-500 border border-border/40 font-bold";
}

function getQuotaStyle(quota: number) {
  if (quota >= 90) {
    return { bar: "bg-emerald-500", label: "text-emerald-500 font-bold" };
  }
  if (quota >= 70) {
    return { bar: "bg-accent", label: "text-gray-500 font-semibold" };
  }
  return { bar: "bg-amber-500", label: "text-gray-500 font-semibold" };
}

function LeaderboardHeader({
  title,
  subtitle,
  count,
  showMemberCount,
}: {
  title: string;
  subtitle: string;
  count: number;
  showMemberCount: boolean;
}) {
  return (
    <div className="mb-5 flex flex-col">
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-[13px] font-bold text-text font-['Lexend']">{title}</h3>
        {showMemberCount && count > 0 ? (
          <span className="shrink-0 text-[10px] font-semibold text-gray-500 font-['Lexend_Deca']">
            {count} {count === 1 ? "member" : "members"}
          </span>
        ) : null}
      </div>
      <p className="mt-0.5 text-[11px] font-normal text-gray-500 font-['Lexend_Deca']">
        {subtitle}
      </p>
    </div>
  );
}

function LeaderboardSkeleton() {
  return (
    <>
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-[10px]">
          <Skeleton className="h-6 w-6 shrink-0 rounded-lg bg-border/60" />
          <Skeleton className="h-7 w-7 shrink-0 rounded-lg bg-border/50" />
          <div className="flex flex-1 flex-col gap-1.5">
            <div className="flex justify-between">
              <Skeleton className="h-3 w-24 rounded bg-border/70" />
              <Skeleton className="h-3 w-12 rounded bg-border/60" />
            </div>
            <Skeleton className="h-[7px] w-full rounded-full bg-border/50" />
            <Skeleton className="h-2.5 w-32 rounded bg-border/40" />
          </div>
        </div>
      ))}
    </>
  );
}

function LeaderboardRow({
  rep,
  index,
}: {
  rep: LeaderboardEntry;
  index: number;
}) {
  const rankClass = getRankClass(index);
  const quota = getQuotaStyle(rep.quota);
  const revLabel =
    rep.attained != null && Number.isFinite(rep.attained)
      ? formatMoney(rep.attained)
      : rep.rev;
  const meta = rep.teamNames?.length
    ? rep.teamNames.join(", ")
    : rep.deals > 0
      ? `${rep.deals} deals`
      : rep.rate;
  const detail = rep.teamNames?.length
    ? rep.rate
    : rep.deals > 0
      ? rep.rate
      : "";

  return (
    <li className="group flex items-center gap-[10px] transition-all duration-300">
      <div
        className={cn(
          "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-[10px] transition-all duration-300 group-hover:scale-105 font-['Lexend_Deca']",
          rankClass,
        )}
      >
        {index + 1}
      </div>

      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-accent/20 bg-accent/10 text-[10px] font-black uppercase text-accent shadow-xs transition-all duration-300 group-hover:bg-accent group-hover:text-white font-['Lexend_Deca']">
        {rep.av}
      </div>

      <div className="min-w-0 flex-1">
        <div className="mb-[4px] flex items-center justify-between gap-2">
          <div className="flex min-w-0 items-center gap-1.5">
            <span className="truncate text-[12.5px] font-bold text-text font-['Lexend']">
              {rep.name}
            </span>
            {rep.isTeamLead ? (
              <Badge
                variant="outline"
                className="h-4 shrink-0 border-accent/40 bg-accent/10 px-1.5 py-0 text-[9px] font-semibold text-accent"
              >
                Lead
              </Badge>
            ) : null}
          </div>
          <span className="shrink-0 text-xs font-extrabold tabular-nums text-text font-['Lexend_Deca']">
            {revLabel}
          </span>
        </div>

        <div className="h-[7px] overflow-hidden rounded-full bg-border/40">
          <div
            className={cn(
              "h-full rounded-full transition-all duration-700 ease-in-out",
              quota.bar,
            )}
            style={{ width: `${Math.min(rep.quota, 100)}%` }}
          />
        </div>

        <div className="mt-[4px] flex justify-between gap-3">
          <span className="min-w-0 truncate text-[10px] font-normal text-gray-500 font-['Lexend_Deca']">
            {meta}
            {detail ? ` - ${detail}` : ""}
          </span>
          <span
            className={cn(
              "shrink-0 text-[10px] font-['Lexend_Deca']",
              quota.label,
            )}
          >
            {rep.quota}%
          </span>
        </div>
      </div>
    </li>
  );
}

export function Leaderboard({
  entries,
  isLoading,
  limit = 4,
  title = "Rep Leaderboard",
  subtitle = "Sales target attainment - current month",
  showMemberCount = true,
  className,
  listClassName,
  emptyMessage = "No rep data yet",
  emptyDescription = "Set sales targets or close deals to see the leaderboard.",
}: LeaderboardProps) {
  const reps = entries?.length
    ? [...entries].sort((a, b) => b.quota - a.quota).slice(0, limit)
    : [];

  return (
    <div className={cn("flex h-full flex-col", className)}>
      <LeaderboardHeader
        title={title}
        subtitle={subtitle}
        count={reps.length}
        showMemberCount={showMemberCount}
      />

      <div className="flex min-h-0 flex-1 flex-col gap-[14px]">
        {isLoading ? (
          <LeaderboardSkeleton />
        ) : reps.length === 0 ? (
          <NoDataFound
            message={emptyMessage}
            description={emptyDescription}
            size="sm"
          />
        ) : (
          <ul
            role="list"
            className={cn(
              "scrollbar-themed flex flex-col gap-[14px] overflow-y-auto pr-1",
              listClassName ?? "max-h-[420px]",
            )}
          >
            {reps.map((rep, idx) => (
              <LeaderboardRow
                key={rep.userId ?? `${rep.name}-${idx}`}
                rep={rep}
                index={idx}
              />
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}