import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { expect, userEvent, within } from "storybook/test";
import LiveTable from "./LiveTable.vue";
import type { TelemetryRecord } from "@/lib/telemetry";

const t = (s: number) => new Date(Date.UTC(2026, 0, 1, 0, 0, s)).toISOString();
const env = (messageId: string, correlationId: string) => ({
  messageId,
  correlationId,
  causationId: messageId,
});

const rows: TelemetryRecord[] = [
  { kind: "action.dispatched", action: "orders.place", ts: t(0), envelope: env("m1", "c-1a2b") },
  {
    kind: "action.completed",
    action: "orders.place",
    durationMs: 36,
    ts: t(1),
    envelope: env("m2", "c-1a2b"),
  },
  {
    kind: "event.published",
    event: { name: "orders.placed" },
    ts: t(1),
    appName: "orders",
    envelope: env("m3", "c-1a2b"),
  },
  {
    kind: "query.executed",
    query: "orders.by-id",
    durationMs: 4,
    ts: t(2),
    envelope: env("m4", "c-9z8y"),
  },
  {
    kind: "action.failed",
    action: "billing.charge",
    error: { name: "Error", message: "card declined" },
    ts: t(3),
    envelope: env("m5", "c-9z8y"),
  },
];

const meta: Meta<typeof LiveTable> = {
  title: "Streams/LiveTable",
  component: LiveTable,
  tags: ["autodocs"],
  render: (args) => ({
    components: { LiveTable },
    setup: () => ({ args }),
    template: `<div class="bg-zinc-950 h-[320px] w-[760px]"><LiveTable v-bind="args" /></div>`,
  }),
};
export default meta;

type Story = StoryObj<typeof LiveTable>;

export const Default: Story = {
  args: { rows },
  play: async ({ canvasElement }) => {
    const c = within(canvasElement);
    await expect(c.getAllByTestId("live-row")).toHaveLength(5);
    // Default sort = time desc → the failed billing charge (latest) leads.
    await expect(c.getAllByTestId("live-row")[0]!).toHaveTextContent("billing.charge");
    // Clicking a header re-sorts by subject.
    await userEvent.click(c.getByTestId("col-subject"));
    await expect(c.getAllByTestId("live-row")[0]!).toHaveTextContent("billing.charge");
  },
};

export const Selected: Story = {
  args: { rows, selectedIndex: 1 },
};

export const Empty: Story = {
  args: { rows: [] },
};