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

const meta = {
  title: "Cards/DataTableCard",
  component: DataTableCard,
  tags: ["autodocs"],
  parameters: componentDoc("DataTableCard", { barrel: "cards" }),
  argTypes: {
    headers: { control: "object" },
    item: { control: "object" },
  },
  args: {
    headers: [
      { key: "name", title: "Name" },
      { key: "role", title: "Role" },
    ],
    listKey: "rows",
    item: { rows: [] },
  },
} satisfies Meta<typeof DataTableCard>

export default meta
type Story = StoryObj<typeof meta>

const sampleRows: Array<Record<string, unknown>> = [
  { id: 1, name: "Alice Adams", role: "Admin", active: true, joined: "2024-01-10T08:00:00Z", avatar: "https://i.pravatar.cc/40?img=1", status: "active" },
  { id: 2, name: "Bob Baker", role: "Editor", active: true, joined: "2024-03-15T10:00:00Z", avatar: "https://i.pravatar.cc/40?img=2", status: "active" },
  { id: 3, name: "Carol Chen", role: "Viewer", active: false, joined: "2024-05-20T14:00:00Z", avatar: "https://i.pravatar.cc/40?img=3", status: "pending" },
  { id: 4, name: "Dan Davis", role: "Editor", active: false, joined: "2024-07-01T09:00:00Z", avatar: "https://i.pravatar.cc/40?img=4", status: "failed" },
  { id: 5, name: "Eve Edwards", role: "Admin", active: true, joined: "2024-08-22T16:30:00Z", avatar: "https://i.pravatar.cc/40?img=5", status: "active" },
]

export const Default: Story = {
  args: {
    tableTitle: "Team Members",
    item: { rows: sampleRows },
  },
}

export const Sorted: Story = {
  args: {
    tableTitle: "Sortable Columns",
    headers: [
      { key: "name", title: "Name", sortable: true },
      { key: "role", title: "Role", sortable: true },
    ],
    options: {
      defaultSortBy: "name",
      defaultSortDirection: "asc",
    },
    item: { rows: sampleRows },
  },
}

export const Searched: Story = {
  args: {
    tableTitle: "With Search",
    headers: [
      { key: "name", title: "Name", sortable: true },
      { key: "role", title: "Role" },
    ],
    item: { rows: sampleRows },
  },
}

export const Paginated: Story = {
  args: {
    tableTitle: "Paginated",
    options: {
      paginated: true,
      perPage: 2,
    },
    item: { rows: sampleRows },
  },
}

export const EmptyState: Story = {
  args: {
    tableTitle: "Empty State",
    emptyMessage: "No team members yet — invite some!",
    item: { rows: [] },
  },
}

export const WithActions: Story = {
  args: {
    tableTitle: "With Per-Row Actions",
    actions: [
      { slug: "edit", label: "Edit" },
      { slug: "delete", label: "Delete" },
    ],
    item: { rows: sampleRows },
  },
}

export const Showcase: Story = {
  args: {
    tableTitle: "Full Showcase",
    headers: [
      { key: "avatar", title: "Avatar", type: "image" },
      { key: "name", title: "Name", sortable: true },
      { key: "role", title: "Role", sortable: true },
      { key: "active", title: "Active", type: "boolean", align: "center" },
      { key: "status", title: "Status", type: "status_circle" },
      { key: "joined", title: "Joined", type: "timestamp", sortable: true },
    ],
    actions: [
      { slug: "edit", label: "Edit" },
      { slug: "delete", label: "Delete" },
    ],
    options: {
      paginated: true,
      perPage: 3,
      exports: [
        { route: "exports.csv", label: "Export CSV" },
        { route: "exports.xlsx", label: "Export XLSX" },
      ],
    },
    item: { rows: sampleRows },
  },
}
