brackt/app/components/league/MyLeaguesCard.tsx

import { Shield } from "lucide-react";
import { Link } from "react-router";
import { Card, CardContent } from "~/components/ui/card";
import { SectionCardHeader } from "~/components/ui/SectionCardHeader";
import { LeagueRow, type LeagueRowProps } from "./LeagueRow";

const STATUS_ORDER: Record<LeagueRowProps["status"], number> = {
  draft: 0,
  active: 1,
  pre_draft: 2,
  completed: 3,
};

interface MyLeaguesCardProps {
  leagues: LeagueRowProps[];
  viewAllUrl?: string;
}

export function MyLeaguesCard({ leagues, viewAllUrl }: MyLeaguesCardProps) {
  const memberLeagues = leagues.filter((l) => !l.isCommishOnly);
  const commishOnlyLeagues = leagues
    .filter((l) => l.isCommishOnly)
    .toSorted((a, b) => a.leagueName.localeCompare(b.leagueName));

  const sortedMember = memberLeagues.toSorted((a, b) => {
    const statusDiff = STATUS_ORDER[a.status] - STATUS_ORDER[b.status];
    if (statusDiff !== 0) return statusDiff;
    if (a.status === "active") {
      return (b.completionPercentage ?? 0) - (a.completionPercentage ?? 0);
    }
    return 0;
  });

  const right = viewAllUrl ? (
    <Link
      to={viewAllUrl}
      className="text-xs font-semibold uppercase tracking-wide text-electric hover:underline"
    >
      View All Leagues
    </Link>
  ) : undefined;

  const isEmpty = sortedMember.length === 0 && commishOnlyLeagues.length === 0;

  return (
    <Card className="bg-[#181b22] gap-2">
      <SectionCardHeader icon={Shield} title="My Leagues" right={right} />
      <CardContent className="px-3 sm:px-6">
        {isEmpty ? (
          <div className="py-4 text-center">
            <p className="text-sm text-muted-foreground mb-3">
              You aren&apos;t a member of any leagues yet.
            </p>
            <Link
              to="/leagues/new"
              className="text-sm font-medium text-primary hover:underline"
            >
              Create your first league →
            </Link>
          </div>
        ) : (
          <div className="space-y-3">
            {sortedMember.map((league) => (
              <LeagueRow key={league.leagueId} {...league} />
            ))}
            {commishOnlyLeagues.length > 0 && (
              <>
                {sortedMember.length > 0 && <div className="border-t border-border/40 pt-1" />}
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground px-1">
                  Leagues I Commish
                </p>
                {commishOnlyLeagues.map((league) => (
                  <LeagueRow key={league.leagueId} {...league} />
                ))}
              </>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}