// src/components/docs/intent/SchemaValidationTypescriptPage.tsx
import { schemaValidationTypescriptBrief } from "@contractspec/bundle.library/components/docs/intent/intent-pages.docblocks";
import { SeoOptimizer } from "@contractspec/lib.content-gen/seo";
import { CodeBlock } from "@contractspec/lib.design-system";
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
var metadata = new SeoOptimizer().optimize(schemaValidationTypescriptBrief);
function SchemaValidationTypescriptPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-3",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: schemaValidationTypescriptBrief.title
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: schemaValidationTypescriptBrief.summary
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Validation Pain Points"
          }),
          /* @__PURE__ */ jsx("ul", {
            className: "text-muted-foreground space-y-2 text-sm",
            children: schemaValidationTypescriptBrief.problems.map((problem, index) => /* @__PURE__ */ jsx("li", {
              children: problem
            }, index))
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "card-subtle space-y-4 p-6",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Type-safe Solutions"
          }),
          /* @__PURE__ */ jsx("ul", {
            className: "text-muted-foreground space-y-2 text-sm",
            children: schemaValidationTypescriptBrief.solutions.map((solution, index) => /* @__PURE__ */ jsx("li", {
              children: solution
            }, index))
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Contract Schema"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: "Define data models with automatic TypeScript generation."
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                filename: "src/contracts/user.schema.ts",
                code: `import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';

export const UserSchema = new SchemaModel({
  type: 'object',
  properties: {
    id: {
      type: 'string',
      format: 'uuid',
      required: true,
      description: 'Unique user identifier',
    },
    email: {
      type: 'string',
      format: 'email',
      required: true,
      description: 'User email address',
    },
    name: {
      type: 'string',
      minLength: 1,
      maxLength: 100,
      required: true,
      description: 'Display name for the user',
    },
    role: {
      type: 'string',
      enum: ['user', 'admin', 'moderator'],
      default: 'user',
      description: 'User role in the system',
    },
    createdAt: {
      type: 'string',
      format: 'date-time',
      required: true,
      description: 'Account creation timestamp',
    },
  },
  required: ['id', 'email', 'name', 'createdAt'],
  metadata: {
    name: 'User',
    description: 'User account information',
  },
});`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Generated Types"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: "TypeScript types are automatically generated with proper validation."
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                filename: "generated/types/user.ts",
                code: `// Auto-generated from UserSchema
export interface User {
  id: string;
  email: string;
  name: string;
  role: 'user' | 'admin' | 'moderator';
  createdAt: string;
}

// Auto-generated Zod schema for runtime validation
export const UserSchemaZod = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  name: z.string().min(1).max(100),
  role: z.enum(['user', 'admin', 'moderator']).default('user'),
  createdAt: z.string().datetime(),
});

// Generated validation utilities
export function validateUser(data: unknown): User {
  return UserSchemaZod.parse(data);
}

export function isUser(data: unknown): data is User {
  return UserSchemaZod.safeParse(data).success;
}`
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Runtime Validation"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: "Use generated validation in your API handlers with zero boilerplate."
              }),
              /* @__PURE__ */ jsx(CodeBlock, {
                language: "typescript",
                filename: "src/handlers/user-handler.ts",
                code: `import { validateUser } from '../generated/types/user';

export async function createUserHandler(request: Request) {
  try {
    const input = validateUser(await request.json());
    
    // input is now fully typed as User
    const user = await db.users.create({
      data: {
        ...input,
        createdAt: new Date().toISOString(),
      },
    });
    
    return Response.json({ user });
  } catch (error) {
    if (error instanceof z.ZodError) {
      return Response.json(
        { 
          error: 'Validation failed',
          details: error.errors 
        },
        { status: 400 }
      );
    }
    
    throw error;
  }
}`
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/guides/spec-validation-and-typing",
            className: "btn-primary",
            children: [
              "Type Safety Guide ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/intent/generate-client-from-schema",
            className: "btn-ghost",
            children: "Client Generation"
          })
        ]
      })
    ]
  });
}
export {
  metadata,
  SchemaValidationTypescriptPage
};
