import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { CardElement } from "@/definitions/elements"
import type { DisplayCard } from "@/definitions/cards"
import type { ElementListCard } from "@/definitions/cards/ElementListCard"
import type { InputElement } from "@/definitions/elements/InputElement"
import ShowPage from "./ShowPage.vue"
import type { ShowPageConfig } from "./ShowPage.vue"
import { componentDoc } from "@/lib/storybook"

const firstName: InputElement = {
  id: "first-name",
  type: "input.text",
  name: "first_name",
  label: "First name",
  placeholder: "Jane",
} as InputElement

const lastName: InputElement = {
  id: "last-name",
  type: "input.text",
  name: "last_name",
  label: "Last name",
  placeholder: "Doe",
} as InputElement

const email: InputElement = {
  id: "email",
  type: "input.text",
  name: "email",
  label: "Email",
  placeholder: "jane@example.com",
} as InputElement

const company: InputElement = {
  id: "company",
  type: "input.text",
  name: "company",
  label: "Company",
  placeholder: "Acme, Inc.",
} as InputElement

const sampleElements: Record<string, CardElement> = {
  "first-name": firstName,
  "last-name": lastName,
  email,
  company,
}

const generalCard: ElementListCard = {
  id: "general",
  cardType: "element-list",
  title: "General",
  elementList: ["first-name", "last-name"],
}

const contactCard: ElementListCard = {
  id: "contact",
  cardType: "element-list",
  title: "Contact",
  elementList: ["email", "company"],
}

const flatCards: Record<string, DisplayCard> = {
  general: generalCard,
  contact: contactCard,
}

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

export default meta
type Story = StoryObj<typeof meta>

const defaultConfig: ShowPageConfig = {
  title: "Edit user",
  cards: { general: generalCard },
  elements: sampleElements,
}

export const Default: Story = {
  args: {
    config: defaultConfig,
    item: { first_name: "Jane", last_name: "Doe" },
  },
}

export const WithTabs: Story = {
  args: {
    config: {
      title: "User profile",
      section: "Accounts",
      breadCrumbs: [{ title: "Admin" }, { title: "Users" }],
      tabsList: [
        {
          title: "General",
          tabId: "general",
          cards: [generalCard],
        },
        {
          title: "Contact",
          tabId: "contact",
          cards: [contactCard],
        },
      ],
      elements: sampleElements,
    },
    item: {
      first_name: "Jane",
      last_name: "Doe",
      email: "jane@example.com",
      company: "Gramercy",
    },
  },
}

export const WithUpdateConfig: Story = {
  args: {
    config: {
      title: "Edit user",
      cards: flatCards,
      elements: sampleElements,
      updateConfig: {
        update: { route: "users.update" },
      },
      eventHandlers: {
        save: () => {
          // eslint-disable-next-line no-console
          console.log("save clicked")
        },
      },
    },
    item: { first_name: "Jane", last_name: "Doe" },
  },
}

export const Showcase: Story = {
  args: {
    config: {
      title: "Attendee detail",
      section: "Conference 2026",
      breadCrumbs: [
        { title: "Events" },
        { title: "Spring Summit" },
        { title: "Attendees" },
        { title: "Jane Doe" },
      ],
      tabsList: [
        {
          title: "General",
          tabId: "general",
          cards: [generalCard],
        },
        {
          title: "Contact",
          tabId: "contact",
          cards: [contactCard],
        },
      ],
      elements: sampleElements,
      updateConfig: {
        update: { route: "attendees.update" },
      },
      deleteConfig: {
        delete: { route: "attendees.destroy" },
      },
      eventHandlers: {
        save: () => {
          // eslint-disable-next-line no-console
          console.log("save clicked")
        },
        delete: () => {
          // eslint-disable-next-line no-console
          console.log("delete clicked")
        },
        "tab-change": (id) => {
          // eslint-disable-next-line no-console
          console.log("tab changed", id)
        },
      },
    },
    item: {
      first_name: "Jane",
      last_name: "Doe",
      email: "jane@example.com",
      company: "Gramercy",
    },
  },
}
