brackt/app/components/sport-season/UpcomingCalendarPanel.tsx

import { format } from "date-fns";
import { Calendar, Users } from "lucide-react";
import { Link } from "react-router";
import { Badge } from "~/components/ui/badge";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { formatEventDate } from "~/lib/date-utils";
import type { UpcomingParticipantEvent } from "~/models/scoring-event";

export interface CalendarPanelEvent extends UpcomingParticipantEvent {
  sportName: string;
  sportSeasonName: string;
  /** Present when showing events across multiple leagues (home page) */
  leagueName?: string;
  leagueId?: string;
  sportsSeasonPageUrl?: string;
}

interface Props {
  events: CalendarPanelEvent[];
  /** When true, renders a league name badge on each row */
  showLeague?: boolean;
}

function ParticipantList({ participants }: { participants: Array<{ id: string; name: string }> }) {
  const MAX_SHOWN = 3;
  const shown = participants.slice(0, MAX_SHOWN);
  const overflow = participants.length - MAX_SHOWN;

  return (
    <span className="flex flex-wrap items-center gap-1">
      {shown.map((p) => (
        <Badge key={p.id} variant="secondary" className="text-xs font-normal">
          {p.name}
        </Badge>
      ))}
      {overflow > 0 && (
        <Badge variant="outline" className="text-xs text-muted-foreground">
          +{overflow} more
        </Badge>
      )}
    </span>
  );
}

function EventRow({ event, showLeague }: { event: CalendarPanelEvent; showLeague: boolean }) {
  // Prefer game-level scheduledAt over event-level eventDate for display
  const gameDate = event.earliestGameTime ? new Date(event.earliestGameTime) : null;
  const dateStr = gameDate
    ? format(gameDate, "MMM d")
    : formatEventDate(event.eventDate);
  const participantCount = event.relevantParticipants.length;
  const isAllCompete = event.eventType !== "playoff_game";
  const displayName = event.matchLabel
    ? `${event.name} — ${event.matchLabel}`
    : event.name;

  const content = (
    <div className="flex items-start gap-3 py-2.5 border-b last:border-0 group">
      {/* Date pill */}
      <div className="w-14 shrink-0 text-center">
        <span className="text-xs font-semibold text-electric" suppressHydrationWarning>
          {dateStr ?? "TBD"}
        </span>
        {gameDate && (
          <p
            className="text-xs text-muted-foreground leading-tight"
            suppressHydrationWarning
          >
            {gameDate.toLocaleTimeString(undefined, {
              hour: "numeric",
              minute: "2-digit",
            })}
          </p>
        )}
      </div>

      {/* Event details */}
      <div className="flex-1 min-w-0 space-y-1">
        <div className="flex items-center flex-wrap gap-2">
          <span className="text-sm font-medium truncate">{displayName}</span>
          {showLeague && event.leagueName && (
            <Badge variant="outline" className="text-xs shrink-0">
              {event.leagueName}
            </Badge>
          )}
        </div>
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <span className="truncate">{event.sportName} · {event.sportSeasonName}</span>
        </div>
        <div className="flex items-center gap-1.5">
          <Users className="h-3 w-3 text-muted-foreground shrink-0" />
          {isAllCompete && participantCount > 1 ? (
            <span className="text-xs text-muted-foreground">
              {participantCount} of your picks
            </span>
          ) : (
            <ParticipantList participants={event.relevantParticipants} />
          )}
        </div>
      </div>
    </div>
  );

  if (event.sportsSeasonPageUrl) {
    return (
      <Link to={event.sportsSeasonPageUrl} className="block hover:bg-muted/40 -mx-2 px-2 rounded transition-colors">
        {content}
      </Link>
    );
  }

  return content;
}

export function UpcomingCalendarPanel({ events, showLeague = false }: Props) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-base">
          <Calendar className="h-4 w-4 text-electric" />
          Upcoming Events
        </CardTitle>
      </CardHeader>
      <CardContent>
        {events.length === 0 ? (
          <p className="text-sm text-muted-foreground py-2">
            No upcoming events in the next 30 days.
          </p>
        ) : (
          <div>
            {events.map((event) => (
              <EventRow key={event.id} event={event} showLeague={showLeague} />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}