import type { Meta, StoryObj } from "@storybook/react-vite";
import { EventRow } from "./UpcomingEventsCard";
import type { GroupedEvent } from "./UpcomingEventsCard";

// ─── Shared fixtures ──────────────────────────────────────────────────────────

const tomorrowISO = "2026-04-15T17:00:00.000Z";
const nextWeekStr = "2026-04-22";


const singleLeague = {
  leagueId: "league-abc-123",
  leagueName: "Alpha Dynasty",
};

const otherLeague = {
  leagueId: "league-xyz-999",
  leagueName: "Hardcourt Elites",
};

// ─── EventRow ─────────────────────────────────────────────────────────────────

const eventRowMeta: Meta<typeof EventRow> = {
  title: "Sport Season/EventRow",
  component: EventRow,
  parameters: { layout: "padded" },
};

export default eventRowMeta;
type EventRowStory = StoryObj<typeof EventRow>;

const baseEvent: GroupedEvent = {
  id: "event-1",
  name: "NBA Playoffs Game 3",
  matchLabel: "Lakers vs Celtics",
  eventDate: null,
  earliestGameTime: tomorrowISO,
  eventType: "playoff_game",
  sportName: "NBA",
  sportSeasonName: "2025 NBA Season",
  sportsSeasonPageUrl: "/leagues/league-abc-123/sports-seasons/ss-nba-1",
  isAllCompete: false,
  totalParticipants: 2,
  leagues: [
    {
      ...singleLeague,
      participants: [
        { id: "p1", name: "LeBron James" },
        { id: "p2", name: "Jayson Tatum" },
      ],
    },
  ],
};

export const FirstEvent: EventRowStory = {
  args: { event: baseEvent, isFirst: true, isLast: false },
};

export const MiddleEvent: EventRowStory = {
  args: {
    event: {
      ...baseEvent,
      id: "event-2",
      name: "F1 Monaco Grand Prix",
      matchLabel: null,
      earliestGameTime: null,
      eventDate: nextWeekStr,
      eventType: "race",
      sportName: "F1",
      isAllCompete: true,
      totalParticipants: 4,
      leagues: [
        {
          ...singleLeague,
          participants: [
            { id: "p3", name: "Max Verstappen" },
            { id: "p4", name: "Charles Leclerc" },
            { id: "p5", name: "Fernando Alonso" },
            { id: "p6", name: "Lewis Hamilton" },
          ],
        },
      ],
    },
    isFirst: false,
    isLast: false,
  },
};

export const LastEvent: EventRowStory = {
  args: {
    event: { ...baseEvent, id: "event-last", name: "Snooker World Final", matchLabel: "Round of 16" },
    isFirst: false,
    isLast: true,
  },
};

export const MultiLeague: EventRowStory = {
  args: {
    event: {
      ...baseEvent,
      id: "event-multi",
      name: "Champions League Quarter-Final",
      matchLabel: "Man City vs Real Madrid",
      sportName: "UCL",
      leagues: [
        {
          ...singleLeague,
          participants: [{ id: "p10", name: "Erling Haaland" }],
        },
        {
          ...otherLeague,
          participants: [{ id: "p11", name: "Vinicius Jr" }],
        },
      ],
    },
    isFirst: true,
    isLast: true,
  },
};

export const NoLink: EventRowStory = {
  args: {
    event: { ...baseEvent, sportsSeasonPageUrl: undefined },
    isFirst: true,
    isLast: true,
  },
};

export const TBDDate: EventRowStory = {
  args: {
    event: { ...baseEvent, earliestGameTime: null, eventDate: null },
    isFirst: false,
    isLast: true,
  },
};