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

const deals: DataRow[] = [
  { id: "1", title: "Acme Deal", stage: "won", value: 50000 },
  { id: "2", title: "TechCorp", stage: "prospect", value: 30000 },
  { id: "3", title: "DataFlow", stage: "proposal", value: 25000 },
  { id: "4", title: "StartupXYZ", stage: "won", value: 15000 },
  { id: "5", title: "BigCo", stage: "lost", value: 80000 },
];

const metricsPage: PageSpec = {
  name: "Dashboard", type: "custom",
  components: [
    { type: "metric", label: "Total Clients", value: 12 },
    { type: "metric", label: "Active Deals", value: 5 },
    { type: "metric", label: "Revenue", value: 120000 },
    { type: "metric", label: "Win Rate", value: 0, delta: "+12%" },
    { type: "chart", source: "deals", x: "stage", y: "value", kind: "bar", aggregate: "sum" },
    { type: "section", title: "More Charts" },
    { type: "chart", source: "deals", x: "stage", y: "value", kind: "pie", aggregate: "sum" },
    { type: "chart", source: "deals", x: "stage", y: "value", kind: "line", aggregate: "sum" },
    { type: "section", title: "Components" },
    { type: "hint", text: "All systems operational.", mood: "success", icon: "✓" },
    { type: "gauge", value: 72, max: 100, label: "Completion" },
    { type: "countdown", target: new Date(Date.now() + 3 * 86400000).toISOString(), label: "Launch in" },
    { type: "richtext", content: "**Bold text** and *italic* with `inline code` and [links](https://zuzu.codes)." },
    { type: "action_row", label: "Export Report", subtitle: "Download as CSV", icon: "📥" },
    { type: "link", text: "View documentation", url: "https://zuzu.codes/docs" },
  ],
};

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

export const FullDashboard: Story = {
  render: () => <Dashboard page={metricsPage} data={{ deals }} />,
};

export const ChartsOnly: Story = {
  render: () => (
    <Dashboard
      page={{
        name: "Charts", type: "custom",
        components: [
          { type: "chart", source: "deals", x: "stage", y: "value", kind: "bar", aggregate: "sum" },
          { type: "chart", source: "deals", x: "stage", y: "value", kind: "donut", aggregate: "sum" },
          { type: "chart", source: "deals", x: "stage", y: "value", kind: "area", aggregate: "count" },
        ],
      }}
      data={{ deals }}
    />
  ),
};
