import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { DataTableColumn } from "@/definitions/cards/DataTableCard"
import IndexPage from "./IndexPage.vue"
import type { IndexPageConfig } from "./IndexPage.vue"
import { componentDoc } from "@/lib/storybook"

const baseHeaders: DataTableColumn[] = [
  { key: "name", title: "Name", sortable: true },
  { key: "email", title: "Email" },
  { key: "role", title: "Role" },
]

const baseItems = {
  rows: [
    { name: "Alice Liu", email: "alice@example.com", role: "Admin" },
    { name: "Ben Cardoso", email: "ben@example.com", role: "Editor" },
    { name: "Cleo Vance", email: "cleo@example.com", role: "Viewer" },
    { name: "Dana Park", email: "dana@example.com", role: "Editor" },
  ],
}

const baseConfig: IndexPageConfig = {
  title: "Users",
  headers: baseHeaders,
  listKey: "rows",
  options: {
    paginated: true,
    defaultItemsPerPage: 10,
  },
}

const meta = {
  title: "Pages/IndexPage",
  component: IndexPage,
  tags: ["autodocs"],
  parameters: { layout: "fullscreen", ...componentDoc("IndexPage") },
} satisfies Meta<typeof IndexPage>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    config: baseConfig,
    items: baseItems,
  },
}

export const WithBreadcrumbs: Story = {
  args: {
    config: {
      ...baseConfig,
      section: "People",
      breadCrumbs: [
        { title: "Dashboard" },
        { title: "Admin" },
        { title: "Users" },
      ],
    },
    items: baseItems,
  },
}

export const WithCreate: Story = {
  args: {
    config: {
      ...baseConfig,
      createConfig: {
        create: { route: "users.store" },
        buttonText: "Add user",
      },
      eventHandlers: {
        create: () => {
          // eslint-disable-next-line no-console
          console.log("create clicked")
        },
      },
    },
    items: baseItems,
  },
}

export const Showcase: Story = {
  args: {
    config: {
      title: "Attendees",
      section: "Conference 2026",
      breadCrumbs: [
        { title: "Events" },
        { title: "Spring Summit" },
        { title: "Attendees" },
      ],
      headers: baseHeaders,
      listKey: "rows",
      options: {
        paginated: true,
        defaultItemsPerPage: 5,
      },
      createConfig: {
        create: { route: "attendees.store" },
        buttonText: "Invite attendee",
      },
      eventHandlers: {
        create: () => {
          // eslint-disable-next-line no-console
          console.log("invite clicked")
        },
      },
    },
    items: baseItems,
  },
}
