brackt/app/components/league/CommissionersPanel.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import { CommissionersPanel } from "./CommissionersPanel";
import type { AuditLogEntry } from "~/models/audit-log";

const meta: Meta<typeof CommissionersPanel> = {
  title: "League/CommissionersPanel",
  component: CommissionersPanel,
  parameters: {
    layout: "padded",
  },
  args: {
    auditLogUrl: "/leagues/league-abc-123/audit-log",
    currentUserId: "user-alice",
  },
};

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

// ─── Fixtures ─────────────────────────────────────────────────────────────────

const commissioners = [
  { id: "c1", userId: "user-alice" },
  { id: "c2", userId: "user-bob" },
];

const commissionerMap: Record<string, string> = {
  "user-alice": "Alice Johnson",
  "user-bob": "Bob Smith",
};

const teams = [
  { id: "t1", ownerId: "user-alice" },
  { id: "t2", ownerId: "user-bob" },
  { id: "t3", ownerId: "user-carol" },
  { id: "t4", ownerId: null },
];

const activityEntries: AuditLogEntry[] = [
  {
    id: "log-1",
    seasonId: "season-1",
    leagueId: "league-abc-123",
    actorClerkId: "user-alice",
    actorDisplayName: "Alice Johnson",
    action: "draft_order_randomized",
    affectedTeamIds: null,
    details: null,
    createdAt: new Date("2026-04-13T10:30:00Z"),
  },
  {
    id: "log-2",
    seasonId: "season-1",
    leagueId: "league-abc-123",
    actorClerkId: "user-alice",
    actorDisplayName: "Alice Johnson",
    action: "draft_settings_changed",
    affectedTeamIds: null,
    details: { changedFields: ["draftRounds", "draftTimerMode"] },
    createdAt: new Date("2026-04-12T18:15:00Z"),
  },
  {
    id: "log-3",
    seasonId: "season-1",
    leagueId: "league-abc-123",
    actorClerkId: "user-bob",
    actorDisplayName: "Bob Smith",
    action: "league_settings_changed",
    affectedTeamIds: null,
    details: { changedFields: ["name"] },
    createdAt: new Date("2026-04-11T09:00:00Z"),
  },
];

// ─── Stories ──────────────────────────────────────────────────────────────────

export const Default: Story = {
  args: {
    commissioners,
    commissionerMap,
    teams,
    activityEntries,
  },
};

export const NoActivity: Story = {
  name: "No Recent Activity",
  args: {
    commissioners,
    commissionerMap,
    teams,
    activityEntries: [],
  },
};

export const SingleCommissioner: Story = {
  name: "Single Commissioner (is self, has team)",
  args: {
    commissioners: [{ id: "c1", userId: "user-alice" }],
    commissionerMap: { "user-alice": "Alice Johnson" },
    teams,
    activityEntries,
  },
};

export const CommissionerWithoutTeam: Story = {
  name: "Commissioner Without a Team",
  args: {
    commissioners: [
      { id: "c1", userId: "user-alice" },
      { id: "c2", userId: "user-nomatch" },
    ],
    commissionerMap: {
      "user-alice": "Alice Johnson",
      "user-nomatch": "Charlie (no team)",
    },
    teams,
    activityEntries: [],
  },
};

export const LongNames: Story = {
  name: "Long Commissioner Names (overflow test)",
  args: {
    commissioners: [
      { id: "c1", userId: "user-alice" },
      { id: "c2", userId: "user-long" },
    ],
    commissionerMap: {
      "user-alice": "Alice Johnson-Bartholomew-Richardson",
      "user-long": "Bartholomew Christopherson-Nightingale III",
    },
    teams,
    activityEntries,
  },
};

export const ManyCommissioners: Story = {
  name: "Many Commissioners",
  args: {
    commissioners: [
      { id: "c1", userId: "user-alice" },
      { id: "c2", userId: "user-bob" },
      { id: "c3", userId: "user-carol" },
      { id: "c4", userId: "user-dave" },
    ],
    commissionerMap: {
      "user-alice": "Alice Johnson",
      "user-bob": "Bob Smith",
      "user-carol": "Carol Williams",
      "user-dave": "Dave Martinez",
    },
    teams: [
      { id: "t1", ownerId: "user-alice" },
      { id: "t2", ownerId: "user-bob" },
      { id: "t3", ownerId: "user-carol" },
      // dave has no team
    ],
    activityEntries,
  },
};

export const NotSelf: Story = {
  name: "Viewer is not a commissioner",
  args: {
    commissioners,
    commissionerMap,
    teams,
    activityEntries,
    currentUserId: "user-carol",
  },
};