brackt/app/components/league/TeamsPanel.tsx

import { Users } from "lucide-react";
import { GradientIcon } from "~/components/ui/GradientIcon";

// ─── Types ────────────────────────────────────────────────────────────────────

export interface TeamsPanelProps {
  teams: Array<{ id: string; name: string; ownerId: string | null }>;
  currentUserId: string | null;
  /** Maps userId → display name */
  ownerMap: Record<string, string | null>;
  /** When non-empty, sorts all teams in draft order and shows position numbers */
  draftSlots: Array<{ team: { id: string } }>;
}

// ─── Public API ───────────────────────────────────────────────────────────────

export function TeamsPanel({ teams, currentUserId, ownerMap, draftSlots }: TeamsPanelProps) {
  const hasDraftOrder = draftSlots.length > 0;
  const claimedCount = teams.filter((t) => t.ownerId !== null).length;
  const isFull = claimedCount === teams.length;
  const fillPercent = teams.length > 0 ? Math.round((claimedCount / teams.length) * 100) : 0;

  const displayTeams = hasDraftOrder
    ? (() => {
        const orderMap = new Map(draftSlots.map((s, i) => [s.team.id, i]));
        return teams.toSorted(
          (a, b) => (orderMap.get(a.id) ?? Infinity) - (orderMap.get(b.id) ?? Infinity)
        );
      })()
    : teams.filter((t) => t.ownerId !== null);

  const showProgressBar = !(hasDraftOrder && isFull);

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <GradientIcon icon={Users} className="h-5 w-5 shrink-0" />
        <span className="text-xl font-bold leading-none tracking-tight">
          {hasDraftOrder ? "Draft Order" : "Teams"}
        </span>
      </div>

      {showProgressBar && (
        <div className="mb-4">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Filled
            </span>
            <span className="text-sm font-bold">
              {claimedCount}
              <span className="text-muted-foreground font-normal"> / {teams.length}</span>
            </span>
          </div>
          <div className="h-2 w-full rounded-full bg-white/[0.08] overflow-hidden">
            <div
              className="h-full rounded-full bg-gradient-to-r from-[var(--primary)] to-[var(--accent)] transition-all"
              style={{ width: `${fillPercent}%` }}
            />
          </div>
        </div>
      )}

      <div>
        {displayTeams.map((team, index) => {
          const isOwned = team.ownerId === currentUserId;
          const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
          return (
            <div key={team.id} className="flex items-center gap-3 py-1.5 border-b last:border-0">
              {hasDraftOrder && (
                <span className="text-xs font-bold text-muted-foreground w-4 shrink-0 text-right">
                  {index + 1}
                </span>
              )}
              <p className="font-medium truncate min-w-0 flex-1 text-sm">{team.name}</p>
              <p className="text-xs shrink-0">
                {team.ownerId
                  ? isOwned
                    ? <span className="text-primary font-medium">You</span>
                    : <span className="text-muted-foreground">{ownerName || "Unknown"}</span>
                  : <span className="text-muted-foreground/50">—</span>
                }
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}