import type { Meta, StoryObj } from '@storybook/vue3-vite';
import {
  UiTable,
  UiTableHeader,
  UiTableBody,
  UiTableFooter,
  UiTableRow,
  UiTableHead,
  UiTableCell,
  UiTableCaption,
  UiTableEmpty,
} from './index';
import {
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuLabel,
  UiDropdownMenuSeparator,
} from '../UiDropdownMenu';
import { UiButton } from '../UiButton';
import { UiIcon } from '../UiIcon';

/**
 * The UiTable primitives are low-level components used to build accessible and styled tables.
 * They correspond directly to standard HTML table elements (`table`, `thead`, `tbody`, `tr`, `td`, `th`, `caption`) but come with pre-configured styles.
 * Use these when you need full control over the table layout or for static content.
 * For complex data-driven tables with sorting, filtering, and pagination, use `UiDataTable` instead.
 */
const meta = {
  title: 'Components/UiTable',
  component: UiTable,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'The `UiTable` primitives are low-level components used to build accessible and styled tables. They correspond directly to standard HTML table elements (`table`, `thead`, `tbody`, `tr`, `td`, `th`, `caption`) but come with pre-configured styles. Use these when you need full control over the table layout or for static content. For complex data-driven tables with sorting and pagination, use `UiDataTable`.',
      },
    },
  },
  argTypes: {},
} satisfies Meta<typeof UiTable>;

export default meta;
type Story = StoryObj<typeof meta>;

const invoices = [
  {
    invoice: 'INV001',
    paymentStatus: 'Paid',
    totalAmount: '€250.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV002',
    paymentStatus: 'Pending',
    totalAmount: '€150.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV003',
    paymentStatus: 'Unpaid',
    totalAmount: '€350.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV004',
    paymentStatus: 'Paid',
    totalAmount: '€450.00',
    paymentMethod: 'Credit Card',
  },
  {
    invoice: 'INV005',
    paymentStatus: 'Paid',
    totalAmount: '€550.00',
    paymentMethod: 'PayPal',
  },
  {
    invoice: 'INV006',
    paymentStatus: 'Pending',
    totalAmount: '€200.00',
    paymentMethod: 'Bank Transfer',
  },
  {
    invoice: 'INV007',
    paymentStatus: 'Unpaid',
    totalAmount: '€300.00',
    paymentMethod: 'Credit Card',
  },
];

const basicTemplateSource = `<script setup lang="ts">
import {
  UiTable,
  UiTableHeader,
  UiTableBody,
  UiTableFooter,
  UiTableRow,
  UiTableHead,
  UiTableCell,
  UiTableCaption,
} from '@aleph-alpha/ui-library'

const invoices = [
  { invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '€250.00', paymentMethod: 'Credit Card' },
  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '€150.00', paymentMethod: 'PayPal' },
  { invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '€350.00', paymentMethod: 'Bank Transfer' },
]
</script>

<template>
  <UiTable>
    <UiTableCaption>A list of your recent invoices.</UiTableCaption>
    <UiTableHeader>
      <UiTableRow>
        <UiTableHead class="w-[100px]">Invoice</UiTableHead>
        <UiTableHead>Status</UiTableHead>
        <UiTableHead>Method</UiTableHead>
        <UiTableHead class="text-right">Amount</UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableBody>
      <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
        <UiTableCell class="body-14-medium">{{ invoice.invoice }}</UiTableCell>
        <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
        <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
        <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
      </UiTableRow>
    </UiTableBody>
    <UiTableFooter>
      <UiTableRow>
        <UiTableCell colspan="3">Total</UiTableCell>
        <UiTableCell class="text-right">€2,500.00</UiTableCell>
      </UiTableRow>
    </UiTableFooter>
  </UiTable>
</template>`;

const basicTemplate = `
<UiTable>
  <UiTableCaption>A list of your recent invoices.</UiTableCaption>
  <UiTableHeader>
    <UiTableRow>
      <UiTableHead class="w-[100px]">Invoice</UiTableHead>
      <UiTableHead>Status</UiTableHead>
      <UiTableHead>Method</UiTableHead>
      <UiTableHead class="text-right">Amount</UiTableHead>
    </UiTableRow>
  </UiTableHeader>
  <UiTableBody>
    <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
      <UiTableCell class="body-14-medium">{{ invoice.invoice }}</UiTableCell>
      <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
      <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
      <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
    </UiTableRow>
  </UiTableBody>
  <UiTableFooter>
    <UiTableRow>
      <UiTableCell colspan="3">Total</UiTableCell>
      <UiTableCell class="text-right">€2,500.00</UiTableCell>
    </UiTableRow>
  </UiTableFooter>
</UiTable>
`;

/**
 * A standard table example showing how to compose UiTable components.
 */
export const Basic: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'A standard table example showing how to compose `UiTable`, `UiTableHeader`, `UiTableBody`, `UiTableRow`, `UiTableCell`, and `UiTableFooter`.',
      },
      source: {
        code: basicTemplateSource,
      },
    },
  },
  render: () => ({
    components: {
      UiTable,
      UiTableHeader,
      UiTableBody,
      UiTableFooter,
      UiTableRow,
      UiTableHead,
      UiTableCell,
      UiTableCaption,
    },
    setup() {
      return { invoices };
    },
    template: basicTemplate,
  }),
};

const withRowActionsTemplateSource = `<script setup lang="ts">
import {
  UiTable,
  UiTableHeader,
  UiTableBody,
  UiTableRow,
  UiTableHead,
  UiTableCell,
  UiDropdownMenu,
  UiDropdownMenuTrigger,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuLabel,
  UiDropdownMenuSeparator,
  UiButton,
  UiIcon,
} from '@aleph-alpha/ui-library'

const invoices = [
  { invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '€250.00', paymentMethod: 'Credit Card' },
  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '€150.00', paymentMethod: 'PayPal' },
]
</script>

<template>
  <UiTable>
    <UiTableHeader>
      <UiTableRow>
        <UiTableHead>Invoice</UiTableHead>
        <UiTableHead>Status</UiTableHead>
        <UiTableHead>Method</UiTableHead>
        <UiTableHead class="text-right">Amount</UiTableHead>
        <UiTableHead class="w-[50px]">
          <span class="sr-only">Actions</span>
        </UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableBody>
      <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
        <UiTableCell class="body-14-medium">{{ invoice.invoice }}</UiTableCell>
        <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
        <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
        <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
        <UiTableCell>
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
                <span class="sr-only">Open menu</span>
                <UiIcon name="more-horizontal" :size="16" />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent align="end">
              <UiDropdownMenuLabel>Actions</UiDropdownMenuLabel>
              <UiDropdownMenuItem>Copy payment ID</UiDropdownMenuItem>
              <UiDropdownMenuSeparator />
              <UiDropdownMenuItem>View customer</UiDropdownMenuItem>
              <UiDropdownMenuItem>View payment details</UiDropdownMenuItem>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </UiTableCell>
      </UiTableRow>
    </UiTableBody>
  </UiTable>
</template>`;

const withRowActionsTemplate = `
<UiTable>
  <UiTableHeader>
    <UiTableRow>
      <UiTableHead>Invoice</UiTableHead>
      <UiTableHead>Status</UiTableHead>
      <UiTableHead>Method</UiTableHead>
      <UiTableHead class="text-right">Amount</UiTableHead>
      <UiTableHead class="w-[50px]">
        <span class="sr-only">Actions</span>
      </UiTableHead>
    </UiTableRow>
  </UiTableHeader>
  <UiTableBody>
    <UiTableRow v-for="invoice in invoices" :key="invoice.invoice">
      <UiTableCell class="body-14-medium">{{ invoice.invoice }}</UiTableCell>
      <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
      <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
      <UiTableCell class="text-right">{{ invoice.totalAmount }}</UiTableCell>
      <UiTableCell>
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton variant="ghost" size="icon" class="h-8 w-8 p-0">
              <span class="sr-only">Open menu</span>
              <UiIcon name="more-horizontal" :size="16" />
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent align="end">
            <UiDropdownMenuLabel>Actions</UiDropdownMenuLabel>
            <UiDropdownMenuItem @click="() => {}">Copy payment ID</UiDropdownMenuItem>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuItem>View customer</UiDropdownMenuItem>
            <UiDropdownMenuItem>View payment details</UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </UiTableCell>
    </UiTableRow>
  </UiTableBody>
</UiTable>
`;

/**
 * Shows how to add action menus to each row using UiDropdownMenu.
 */
export const WithRowActions: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Shows how to add action menus to each row using UiDropdownMenu. This is a common pattern for admin tables with edit/delete actions. The actions column is typically placed at the end with a fixed width.',
      },
      source: {
        code: withRowActionsTemplateSource,
      },
    },
  },
  render: () => ({
    components: {
      UiTable,
      UiTableHeader,
      UiTableBody,
      UiTableRow,
      UiTableHead,
      UiTableCell,
      UiDropdownMenu,
      UiDropdownMenuTrigger,
      UiDropdownMenuContent,
      UiDropdownMenuItem,
      UiDropdownMenuLabel,
      UiDropdownMenuSeparator,
      UiButton,
      UiIcon,
    },
    setup() {
      return { invoices };
    },
    template: withRowActionsTemplate,
  }),
};

const emptyStateTemplateSource = `<script setup lang="ts">
import {
  UiTable,
  UiTableHeader,
  UiTableBody,
  UiTableRow,
  UiTableHead,
  UiTableEmpty,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTable>
    <UiTableHeader>
      <UiTableRow>
        <UiTableHead>Invoice</UiTableHead>
        <UiTableHead>Status</UiTableHead>
        <UiTableHead>Method</UiTableHead>
        <UiTableHead class="text-right">Amount</UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableBody>
      <UiTableEmpty :colspan="4">No invoices found.</UiTableEmpty>
    </UiTableBody>
  </UiTable>
</template>`;

const emptyStateTemplate = `
<UiTable>
  <UiTableHeader>
    <UiTableRow>
      <UiTableHead>Invoice</UiTableHead>
      <UiTableHead>Status</UiTableHead>
      <UiTableHead>Method</UiTableHead>
      <UiTableHead class="text-right">Amount</UiTableHead>
    </UiTableRow>
  </UiTableHeader>
  <UiTableBody>
    <UiTableEmpty :colspan="4">No invoices found.</UiTableEmpty>
  </UiTableBody>
</UiTable>
`;

/**
 * Use UiTableEmpty to display a message when there is no data to show.
 */
export const EmptyState: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Use `UiTableEmpty` to display a message when there is no data to show.',
      },
      source: {
        code: emptyStateTemplateSource,
      },
    },
  },
  render: () => ({
    components: {
      UiTable,
      UiTableHeader,
      UiTableBody,
      UiTableRow,
      UiTableHead,
      UiTableEmpty,
    },
    template: emptyStateTemplate,
  }),
};

const colSpanTemplateSource = `<script setup lang="ts">
import {
  UiTable,
  UiTableHeader,
  UiTableBody,
  UiTableRow,
  UiTableHead,
  UiTableCell,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTable>
    <UiTableHeader>
      <UiTableRow>
        <UiTableHead colspan="2">Product Info</UiTableHead>
        <UiTableHead colspan="2">Pricing</UiTableHead>
      </UiTableRow>
      <UiTableRow>
        <UiTableHead>Name</UiTableHead>
        <UiTableHead>Category</UiTableHead>
        <UiTableHead>Price</UiTableHead>
        <UiTableHead>Discount</UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableBody>
      <UiTableRow>
        <UiTableCell>Widget Pro</UiTableCell>
        <UiTableCell>Electronics</UiTableCell>
        <UiTableCell>€99.00</UiTableCell>
        <UiTableCell>10%</UiTableCell>
      </UiTableRow>
      <UiTableRow>
        <UiTableCell>Gadget Plus</UiTableCell>
        <UiTableCell>Accessories</UiTableCell>
        <UiTableCell>€49.00</UiTableCell>
        <UiTableCell>5%</UiTableCell>
      </UiTableRow>
    </UiTableBody>
  </UiTable>
</template>`;

const colSpanTemplate = `
<UiTable>
  <UiTableHeader>
    <UiTableRow>
      <UiTableHead colspan="2">Product Info</UiTableHead>
      <UiTableHead colspan="2">Pricing</UiTableHead>
    </UiTableRow>
    <UiTableRow>
      <UiTableHead>Name</UiTableHead>
      <UiTableHead>Category</UiTableHead>
      <UiTableHead>Price</UiTableHead>
      <UiTableHead>Discount</UiTableHead>
    </UiTableRow>
  </UiTableHeader>
  <UiTableBody>
    <UiTableRow>
      <UiTableCell>Widget Pro</UiTableCell>
      <UiTableCell>Electronics</UiTableCell>
      <UiTableCell>€99.00</UiTableCell>
      <UiTableCell>10%</UiTableCell>
    </UiTableRow>
    <UiTableRow>
      <UiTableCell>Gadget Plus</UiTableCell>
      <UiTableCell>Accessories</UiTableCell>
      <UiTableCell>€49.00</UiTableCell>
      <UiTableCell>5%</UiTableCell>
    </UiTableRow>
  </UiTableBody>
</UiTable>
`;

/**
 * Use the colspan attribute on UiTableHead or UiTableCell to create grouped headers.
 */
export const WithColSpan: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Use the `colspan` attribute on `UiTableHead` or `UiTableCell` to create grouped headers or cells that span multiple columns.',
      },
      source: {
        code: colSpanTemplateSource,
      },
    },
  },
  render: () => ({
    components: {
      UiTable,
      UiTableHeader,
      UiTableBody,
      UiTableRow,
      UiTableHead,
      UiTableCell,
    },
    template: colSpanTemplate,
  }),
};
