import type { Meta, StoryObj } from "@storybook/preact";
import { ListView } from "./ListView";
import type { PageSpec, RecordSpec, DataRow } from "@/types/spec";

const mockRec: RecordSpec = {
  name: "Clients",
  table: "clients",
  display: "name",
  required: ["name"],
  fields: {
    name: { type: "text" },
    email: { type: "text" },
    company: { type: "text" },
    status: { type: "choice", choices: ["lead", "active", "churned"], colors: { lead: "yellow", active: "green", churned: "red" } },
    revenue: { type: "number", format: "currency", symbol: "$" },
  },
};

const mockPage: PageSpec = {
  name: "Clients",
  type: "list",
  record: "clients",
  config: { title: "name", subtitle: "company", badge: "status", layout: "list" },
};

const mockData: DataRow[] = [
  { id: "1", name: "Alice Chen", email: "alice@co.com", company: "Acme Inc", status: "active", revenue: 85000 },
  { id: "2", name: "Bob Kumar", email: "bob@co.com", company: "TechCorp", status: "lead", revenue: 42000 },
  { id: "3", name: "Carol Santos", email: "carol@co.com", company: "DataFlow", status: "churned", revenue: 120000 },
  { id: "4", name: "Dan Lee", email: "dan@co.com", company: "StartupXYZ", status: "active", revenue: 15000 },
];

const meta: Meta<typeof ListView> = {
  title: "Views/ListView",
  component: ListView,
  parameters: { layout: "padded" },
};
export default meta;
type Story = StoryObj<typeof ListView>;

export const RowLayout: Story = {
  render: () => (
    <ListView
      page={mockPage}
      rec={mockRec}
      data={mockData}
      allRecords={[mockRec]}
      allData={{ clients: mockData }}
      onViewDetail={() => {}}
      onAdd={() => {}}
      onCycleField={() => {}}
      onDelete={() => {}}
    />
  ),
};

export const CardLayout: Story = {
  render: () => (
    <ListView
      page={{ ...mockPage, config: { ...mockPage.config, layout: "cards" } }}
      rec={mockRec}
      data={mockData}
      allRecords={[mockRec]}
      allData={{ clients: mockData }}
      onViewDetail={() => {}}
      onAdd={() => {}}
      onCycleField={() => {}}
      onDelete={() => {}}
    />
  ),
};

export const Empty: Story = {
  render: () => (
    <ListView
      page={mockPage}
      rec={mockRec}
      data={[]}
      allRecords={[mockRec]}
      allData={{ clients: [] }}
      onViewDetail={() => {}}
      onAdd={() => {}}
      onCycleField={() => {}}
      onDelete={() => {}}
    />
  ),
};
