import { defineTask } from "@sanity/ailf-core"

// See content-lake.task.ts for detailed explanations of common task properties
export default [
  defineTask({
    id: "portable-text-rendering",
    mode: "literacy",
    title: "Portable Text - Render rich text in React with custom components",
    description:
      "Portable Text - Render rich text in React with custom components",
    area: "portable-text",
    docCoverage: true,
    context: {
      docs: [
        {
          slug: "previewing-block-content",
          reason: "Previewing Portable Text — rendering in frontends",
        },
        {
          slug: "customizing-block-content",
          reason:
            "Common PT editor patterns — custom blocks, marks, annotations",
        },
        {
          slug: "presenting-images",
          reason: "Presenting images — needed for inline image blocks in PT",
        },
        {
          slug: "image-urls",
          reason: "Image URL builder for transforming image references in PT",
        },
      ],
    },
    referenceSolution: "reference-solutions/portable-text/rendering.tsx",
    prompt: {
      text: `Render Portable Text content from Sanity in a React application using
@portabletext/react.

Requirements:
1. Set up the PortableText component with custom components
2. Handle image blocks with proper URL generation using @sanity/image-url
3. Handle link marks (both internal and external links)
4. Handle code blocks with syntax highlighting markup
5. Provide TypeScript types for the component props

Provide a complete, reusable implementation.`,
    },
    assertions: [
      {
        type: "llm-rubric",
        template: "task-completion",
        criteria: [
          "PortableText component from @portabletext/react",
          "Custom component map with image, link, and code block handlers",
          "Image URL generation from Sanity image references",
          "TypeScript types for props and component definitions",
        ],
      },
      {
        type: "llm-rubric",
        template: "code-correctness",
        criteria: [
          "Uses @portabletext/react (not deprecated @sanity/block-content-to-react)",
          "Correct component map shape (types, marks, block, list, listItem)",
          "Proper image URL builder usage with hotspot/crop support",
          "No deprecated APIs or patterns",
        ],
      },
      { type: "contains", value: "PortableText" },
      {
        type: "contains-any",
        value: ["@portabletext/react", "portabletext/react"],
      },
      {
        type: "contains-any",
        value: ["components", "serializers"],
      },
      // not-contains: FAILS the assertion if the string appears — penalizes deprecated APIs
      {
        type: "not-contains",
        value: "@sanity/block-content-to-react",
      },
      { type: "not-contains", value: "BlockContent" },
    ],
  }),

  defineTask({
    id: "portable-text-custom-blocks",
    mode: "literacy",
    title: "Portable Text - Define and render custom block types",
    description: "Portable Text - Define and render custom block types",
    area: "portable-text",
    docCoverage: true,
    context: {
      docs: [
        {
          slug: "customizing-the-portable-text-editor",
          reason: "Customizing the PT editor — adding custom block types",
        },
        {
          slug: "customizing-block-content",
          reason: "Common PT patterns — custom blocks, decorators, annotations",
        },
        {
          slug: "portable-text-editor-configuration",
          reason: "PT editor configuration — styles, lists, marks, of array",
        },
        {
          slug: "previewing-block-content",
          reason: "Previewing PT — rendering custom blocks in frontends",
        },
      ],
    },
    referenceSolution: "reference-solutions/portable-text/custom-blocks.ts",
    prompt: {
      text: `Define custom block types for a Portable Text field and render them
in a React frontend.

Requirements:
1. Add a "code" block type with language and code fields
2. Add a "callout" block type with tone (info/warning/error) and text
3. Define the schema using defineArrayMember in a Sanity schema file
4. Show how to render these custom blocks with @portabletext/react

Provide both the schema definition and the frontend rendering code.`,
    },
    assertions: [
      {
        type: "llm-rubric",
        template: "task-completion",
        criteria: [
          "Code block type with language and code fields",
          "Callout block type with tone and text",
          "Schema defined with defineArrayMember or equivalent",
          "Frontend rendering for both custom block types",
        ],
      },
      {
        type: "llm-rubric",
        template: "code-correctness",
        criteria: [
          "Correct defineArrayMember usage for custom blocks",
          'Proper "of" array structure in the PT field',
          "Custom component map handles both block types",
          "No deprecated schema patterns",
        ],
      },
      {
        type: "contains-any",
        value: ["defineArrayMember", "defineField"],
      },
      {
        type: "contains-any",
        value: ["components", "serializers"],
      },
    ],
  }),
]
