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

const clientRec: 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 dealRec: RecordSpec = {
  name: "Deals", table: "deals", display: "title", required: [],
  fields: {
    title: { type: "text" },
    client: { type: "link", link: "clients" },
    value: { type: "number", format: "currency", symbol: "$" },
    stage: { type: "choice", choices: ["prospect", "won", "lost"], colors: { prospect: "blue", won: "green", lost: "red" } },
  },
};

const record: DataRow = { id: "1", name: "Alice Chen", email: "alice@co.com", company: "Acme Inc", status: "active", revenue: 85000 };
const deals: DataRow[] = [
  { id: "d1", title: "Enterprise License", client_id: "1", value: 50000, stage: "won" },
  { id: "d2", title: "Consulting Q2", client_id: "1", value: 12000, stage: "prospect" },
];

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

export const Default: Story = {
  render: () => (
    <DetailView
      page={{ name: "Clients Detail", type: "detail", record: "clients" }}
      rec={clientRec}
      record={record}
      allRecords={[clientRec, dealRec]}
      allData={{ clients: [record], deals }}
      tabName="Clients"
      onBack={() => {}}
      onViewDetail={() => {}}
      onSave={() => {}}
      onDelete={() => {}}
    />
  ),
};
