import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { ArrowUpDown } from "@lucide/vue"
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Table",
  component: Table,
  tags: ["autodocs"],
  parameters: componentDoc("Table"),
} satisfies Meta<typeof Table>

export default meta
type Story = StoryObj<typeof meta>

const rows = [
  { id: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
  { id: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
  { id: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
]

export const Default: Story = {
  render: () => ({
    components: { Table, TableHeader, TableBody, TableRow, TableHead, TableCell },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead class="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="r in rows" :key="r.id">
            <TableCell class="font-medium">{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
            <TableCell>{{ r.method }}</TableCell>
            <TableCell class="text-right">{{ r.amount }}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    `,
  }),
}

export const WithCaption: Story = {
  name: "With Caption",
  render: () => ({
    components: { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead class="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="r in rows" :key="r.id">
            <TableCell>{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
            <TableCell class="text-right">{{ r.amount }}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    `,
  }),
}

export const Striped: Story = {
  name: "Striped",
  render: () => ({
    components: { Table, TableHeader, TableBody, TableRow, TableHead, TableCell },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead class="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow
            v-for="(r, i) in rows"
            :key="r.id"
            :class="i % 2 === 1 ? 'bg-muted/30' : ''"
          >
            <TableCell>{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
            <TableCell class="text-right">{{ r.amount }}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    `,
  }),
}

export const Hover: Story = {
  name: "Hover Highlight",
  render: () => ({
    components: { Table, TableHeader, TableBody, TableRow, TableHead, TableCell },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="r in rows" :key="r.id">
            <TableCell>{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    `,
  }),
}

export const SortableHeaders: Story = {
  name: "Sortable Headers",
  render: () => ({
    components: { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, ArrowUpDown },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              <button class="inline-flex items-center gap-1 hover:text-foreground">
                Invoice <ArrowUpDown class="size-3" />
              </button>
            </TableHead>
            <TableHead>
              <button class="inline-flex items-center gap-1 hover:text-foreground">
                Status <ArrowUpDown class="size-3" />
              </button>
            </TableHead>
            <TableHead class="text-right">
              <button class="inline-flex items-center gap-1 hover:text-foreground">
                Amount <ArrowUpDown class="size-3" />
              </button>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="r in rows" :key="r.id">
            <TableCell>{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
            <TableCell class="text-right">{{ r.amount }}</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Table,
      TableCaption,
      TableHeader,
      TableBody,
      TableFooter,
      TableRow,
      TableHead,
      TableCell,
    },
    setup() {
      return { rows }
    },
    template: `
      <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead class="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="r in rows" :key="r.id">
            <TableCell class="font-medium">{{ r.id }}</TableCell>
            <TableCell>{{ r.status }}</TableCell>
            <TableCell>{{ r.method }}</TableCell>
            <TableCell class="text-right">{{ r.amount }}</TableCell>
          </TableRow>
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell :colspan="3">Total</TableCell>
            <TableCell class="text-right">$750.00</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    `,
  }),
}
