import type { Meta, StoryObj } from '@storybook/react-vite';
import { Badge } from '@tale/ui/badge';

import { ProgressBar } from '../feedback/progress-bar';
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from './table';

const meta: Meta<typeof Table> = {
  title: 'Data Display/Table',
  component: Table,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `
A semantic table component with proper accessibility structure.

## Usage
\`\`\`tsx
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@/app/components/ui/data-display/table';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
    </TableRow>
  </TableBody>
</Table>
\`\`\`

## Accessibility
- Proper table semantics with scope attributes
- TableCaption provides accessible description
- Supports sticky headers for scrollable content
        `,
      },
    },
  },
};

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

const invoices = [
  {
    invoice: 'INV001',
    status: 'Paid',
    method: 'Credit card',
    amount: '$250.00',
  },
  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
  {
    invoice: 'INV003',
    status: 'Unpaid',
    method: 'Bank transfer',
    amount: '$350.00',
  },
  {
    invoice: 'INV004',
    status: 'Paid',
    method: 'Credit card',
    amount: '$450.00',
  },
  { invoice: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
];

export const Default: Story = {
  render: () => (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell className="text-right">{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  ),
};

export const WithFooter: Story = {
  render: () => (
    <Table>
      <TableCaption>Invoice summary with total.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell className="text-right">{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right font-medium">$1,750.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  ),
};

export const WithBadges: Story = {
  render: () => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>
            <Badge variant="green">Active</Badge>
          </TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Jane Smith</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>
            <Badge variant="yellow">Pending</Badge>
          </TableCell>
          <TableCell>Member</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Bob Wilson</TableCell>
          <TableCell>bob@example.com</TableCell>
          <TableCell>
            <Badge variant="destructive">Inactive</Badge>
          </TableCell>
          <TableCell>Guest</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  ),
  parameters: {
    docs: {
      description: {
        story: 'Tables can include badges and other components in cells.',
      },
    },
  },
};

const websites = [
  { domain: 'example.com', title: 'Example', crawled: 87, total: 100 },
  { domain: 'docs.example.com', title: 'Docs', crawled: 42, total: 150 },
  { domain: 'blog.example.com', title: 'Blog', crawled: 200, total: 200 },
  { domain: 'shop.example.com', title: 'Shop', crawled: 5, total: 80 },
  { domain: 'api.example.com', title: 'API Reference', crawled: 0, total: 60 },
];

export const WithProgressBar: Story = {
  render: () => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Website</TableHead>
          <TableHead>Title</TableHead>
          <TableHead className="w-[108px]">Indexed</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {websites.map((site) => {
          const pct =
            site.total > 0 ? Math.round((site.crawled / site.total) * 100) : 0;
          return (
            <TableRow key={site.domain}>
              <TableCell className="font-medium">{site.domain}</TableCell>
              <TableCell>{site.title}</TableCell>
              <TableCell>
                <ProgressBar
                  value={site.crawled}
                  max={site.total}
                  label={`${pct}\u202F% - ${site.crawled} of ${site.total} pages`}
                  tooltipContent={`${pct}\u202F% - ${site.crawled} of ${site.total} pages`}
                />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Tables can include progress bars in cells to show completion status.',
      },
    },
  },
};

export const StickyLayout: Story = {
  render: () => (
    <div className="h-[200px] overflow-auto rounded-xl border">
      <Table stickyLayout>
        <TableHeader sticky>
          <TableRow>
            <TableHead>ID</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {Array.from({ length: 20 }, (_, i) => (
            <TableRow key={i}>
              <TableCell className="font-medium">{i + 1}</TableCell>
              <TableCell>User {i + 1}</TableCell>
              <TableCell>user{i + 1}@example.com</TableCell>
              <TableCell>{i % 2 === 0 ? 'Active' : 'Inactive'}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use `stickyLayout` and `sticky` props for scrollable tables with fixed headers.',
      },
    },
  },
};

export const CompactTable: Story = {
  render: () => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Property</TableHead>
          <TableHead>Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">ID</TableCell>
          <TableCell className="font-mono text-xs">abc123def456</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Created</TableCell>
          <TableCell>Jan 1, 2024</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Updated</TableCell>
          <TableCell>Jan 15, 2024</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Owner</TableCell>
          <TableCell>admin@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  ),
  parameters: {
    docs: {
      description: {
        story: 'A compact two-column table for displaying key-value pairs.',
      },
    },
  },
};
