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

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

export default meta;
type Story = StoryObj<typeof UpcomingEventsCard>;

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

const sampleEvents: CalendarPanelEvent[] = [
  {
    id: "event-1",
    name: "NBA Playoffs Game 3",
    matchLabel: "Lakers vs Celtics",
    eventDate: null,
    earliestGameTime: tomorrowISO,
    eventType: "playoff_game",
    sportsSeasonId: "ss-nba-1",
    relevantParticipants: [
      { id: "p1", name: "LeBron James" },
      { id: "p2", name: "Jayson Tatum" },
    ],
    sportName: "NBA",
    sportSeasonName: "2025 NBA Season",
    leagueName: "Alpha Dynasty",
    leagueId: "league-abc-123",
    sportsSeasonPageUrl: "/leagues/league-abc-123/sports-seasons/ss-nba-1",
  },
  {
    id: "event-2",
    name: "F1 Monaco Grand Prix",
    matchLabel: null,
    eventDate: nextWeekStr,
    earliestGameTime: null,
    eventType: "race",
    sportsSeasonId: "ss-f1-1",
    relevantParticipants: [
      { id: "p3", name: "Max Verstappen" },
      { id: "p4", name: "Charles Leclerc" },
      { id: "p5", name: "Fernando Alonso" },
    ],
    sportName: "F1",
    sportSeasonName: "2025 F1 Season",
    leagueName: "Alpha Dynasty",
    leagueId: "league-abc-123",
    sportsSeasonPageUrl: "/leagues/league-abc-123/sports-seasons/ss-f1-1",
  },
  {
    id: "event-3",
    name: "Champions League Quarter-Final",
    matchLabel: "Man City vs Real Madrid",
    eventDate: inTwoWeeksStr,
    earliestGameTime: null,
    eventType: "playoff_game",
    sportsSeasonId: "ss-ucl-1",
    relevantParticipants: [
      { id: "p6", name: "Erling Haaland" },
    ],
    sportName: "UCL",
    sportSeasonName: "2024-25 UCL",
    leagueName: "Hardcourt Elites",
    leagueId: "league-xyz-999",
    sportsSeasonPageUrl: "/leagues/league-xyz-999/sports-seasons/ss-ucl-1",
  },
];

// Same event appearing in two leagues
const multiLeagueEvents: CalendarPanelEvent[] = [
  ...sampleEvents,
  {
    ...sampleEvents[0],
    leagueName: "Hardcourt Elites",
    leagueId: "league-xyz-999",
    relevantParticipants: [{ id: "p10", name: "Anthony Davis" }],
  },
];

export const WithEvents: Story = {
  args: {
    events: sampleEvents,
    limit: 8,
    viewAllUrl: "/upcoming-events",
  },
};

export const MultiLeagueGrouped: Story = {
  args: {
    events: multiLeagueEvents,
    limit: 8,
    viewAllUrl: "/upcoming-events",
  },
};

export const WithLimit: Story = {
  args: {
    events: sampleEvents,
    limit: 1,
    viewAllUrl: "/upcoming-events",
  },
};

export const Empty: Story = {
  args: {
    events: [],
    viewAllUrl: "/upcoming-events",
  },
};

export const NoViewAll: Story = {
  args: {
    events: sampleEvents,
  },
};