import type { Meta, StoryObj } from "@storybook/vue3-vite"
import PullRequestsList from "./PullRequestsList.vue"
import type {
  PullRequest,
  PullRequestsListFilter,
} from "./PullRequestsList.vue"
import { componentDoc } from "@/lib/storybook"

const SAMPLE: PullRequest[] = [
  {
    id: "1",
    number: 101,
    title: "Add login form",
    authorName: "Alice Adams",
    authorAvatarUrl: "https://i.pravatar.cc/64?img=1",
    status: "open",
    branchName: "feat/login",
    targetBranch: "main",
    updatedAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
  },
  {
    id: "2",
    number: 102,
    title: "Fix dashboard crash on empty state",
    authorName: "Bob Brown",
    authorAvatarUrl: "https://i.pravatar.cc/64?img=2",
    status: "merged",
    branchName: "fix/dashboard",
    targetBranch: "main",
    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
  },
  {
    id: "3",
    number: 103,
    title: "WIP: New theme tokens",
    authorName: "Carol Coyle",
    status: "draft",
    branchName: "theme/tokens",
    targetBranch: "develop",
    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
  },
  {
    id: "4",
    number: 99,
    title: "Drop legacy API endpoint",
    authorName: "Dave Diaz",
    status: "closed",
    branchName: "chore/legacy-api",
    targetBranch: "main",
    updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(),
  },
]

function mockLoad(
  delay = 200,
): (filter?: PullRequestsListFilter) => Promise<PullRequest[]> {
  return (filter) =>
    new Promise((resolve) =>
      setTimeout(() => {
        let out = SAMPLE
        if (filter?.status) {
          out = out.filter((p) => p.status === filter.status)
        }
        if (filter?.query) {
          const q = filter.query.toLowerCase()
          out = out.filter((p) => p.title.toLowerCase().includes(q))
        }
        resolve(out)
      }, delay),
    )
}

const meta = {
  title: "Elements/Code/PullRequestsList",
  component: PullRequestsList,
  tags: ["autodocs"],
  args: {
    label: "Pull Requests",
    onLoadPullRequests: mockLoad(),
  },
  parameters: componentDoc("PullRequestsList", { barrel: "code" }),
  decorators: [
    () => ({
      template: '<div class="w-[640px] p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof PullRequestsList>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    onLoadPullRequests: mockLoad(),
  },
}

export const WithSelectedItem: Story = {
  args: {
    onLoadPullRequests: mockLoad(),
    selectedId: "2",
  },
}

export const Loading: Story = {
  args: {
    onLoadPullRequests: () => new Promise(() => {}),
  },
}

export const ErrorState: Story = {
  args: {
    onLoadPullRequests: () =>
      Promise.reject(new globalThis.Error("Could not load pull requests")),
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { PullRequestsList },
    setup() {
      return { load: mockLoad(150) }
    },
    template: `
      <div class="flex flex-col gap-4">
        <PullRequestsList label="All PRs" :on-load-pull-requests="load" />
        <PullRequestsList
          label="Open only"
          :on-load-pull-requests="load"
          :default-filter="{ status: 'open' }"
        />
        <PullRequestsList
          label="With selection"
          :on-load-pull-requests="load"
          selected-id="2"
        />
      </div>
    `,
  }),
}
