// src/components/docs/getting-started/DataViewTutorialPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { CodeBlock } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function DataViewTutorialPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Display Data with DataViews"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "Define a filterable, sortable transaction history view that works across web and mobile without duplicating UI code."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "1. Define the underlying query"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "First, create a query operation to fetch the data:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            filename: "lib/specs/billing/list-transactions.ts",
            code: `import { defineQuery } from '@contractspec/lib.contracts-spec';

export const ListTransactions = defineQuery({
  meta: {
    key: 'billing.listTransactions',
    version: '1.0.0',
    description: 'Fetch customer transaction history',
  },
  io: {
    input: /* pagination + filters */,
    output: /* array of transactions */,
  },
  policy: { auth: 'user' },
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "2. Define the DataView spec"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Wrap your query with presentation metadata:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            filename: "lib/specs/billing/transaction-history.data-view.ts",
            code: `import { defineDataView } from '@contractspec/lib.contracts-spec';
import { ListTransactions } from './list-transactions';

export const TransactionHistory = defineDataView({
  meta: {
    key: 'billing.transactionHistory',
    version: '1.0.0',
    entity: 'transaction',
    description: 'Customer payment history',
    goal: 'Help customers track spending',
    context: 'Account dashboard',
    owners: ['team-billing'],
    stability: 'stable',
    tags: ['payments'],
  },
  source: {
    primary: ListTransactions,
  },
  view: {
    kind: 'list',
    fields: [
      {
        key: 'date',
        label: 'Date',
        dataPath: 'createdAt',
        format: 'date',
        sortable: true
      },
      {
        key: 'description',
        label: 'Description',
        dataPath: 'description'
      },
      {
        key: 'amount',
        label: 'Amount',
        dataPath: 'amount',
        format: 'currency',
        sortable: true
      },
      {
        key: 'status',
        label: 'Status',
        dataPath: 'status',
        format: 'badge'
      },
    ],
    filters: [
      {
        key: 'status',
        label: 'Status',
        field: 'status',
        type: 'enum',
        options: [
          { value: 'succeeded', label: 'Paid' },
          { value: 'pending', label: 'Pending' },
          { value: 'failed', label: 'Failed' },
        ],
      },
      {
        key: 'dateRange',
        label: 'Date Range',
        field: 'createdAt',
        type: 'dateRange',
      },
    ],
    defaultSort: { field: 'date', direction: 'desc' },
    pagination: { pageSize: 25 },
  },
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "3. Render on the frontend"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Use the runtime renderer in your React or React Native app:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "tsx",
            filename: "app/dashboard/transactions/page.tsx",
            code: `'use client';

import { DataViewRenderer } from '@contractspec/lib.design-system';
import { TransactionHistory } from '@/lib/specs/billing/transaction-history.data-view';
import { useQuery } from '@tanstack/react-query';

export function TransactionsPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['transactions'],
    queryFn: () => fetch('/api/ops/billing.listTransactions').then(r => r.json()),
  });

  return (
    <div className="container py-8">
      <h1 className="text-3xl font-bold mb-6">Payment History</h1>
      <DataViewRenderer
        spec={TransactionHistory}
        data={data?.items ?? []}
        loading={isLoading}
        onFilterChange={(filters) => {
          // refetch with new filters
        }}
      />
    </div>
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx("h3", {
            className: "font-bold",
            children: "Why DataViews?"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground space-y-2 text-sm",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Same spec renders on web (React) and mobile (React Native)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Filters, sorting, and pagination handled automatically"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Format rules (currency, dates, badges) applied consistently"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Export to CSV/PDF using the same spec"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "A/B test different layouts without touching the backend"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/data-views",
            className: "btn-primary",
            children: [
              "DataView API Reference ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/specs/workflows",
            className: "btn-ghost",
            children: "Next: Workflows"
          })
        ]
      })
    ]
  });
}
export {
  DataViewTutorialPage
};
