import { defineTask } from "../../_vendor/ailf-core/index.js"

// See content-lake.task.ts for detailed explanations of common task properties
export default [
  defineTask({
    id: "remix-integration",
    mode: "literacy",
    title: "Frameworks - Remix integration with data fetching",
    description: "Frameworks - Remix integration with data fetching",
    area: "frameworks",
    docCoverage: true,
    context: {
      docs: [
        {
          slug: "displaying-content-in-a-react-router-front-end",
          reason: "React Router front-end content display guide",
        },
        {
          slug: "visual-editing-with-react-router",
          reason: "React Router / Remix integration with visual editing",
        },
        {
          slug: "functions-js-client",
          reason: "Configuring @sanity/client for data fetching",
        },
      ],
    },
    referenceSolution: "reference-solutions/frameworks/remix.tsx",
    prompt: {
      text: `Integrate Sanity into a Remix application:

1. Set up the Sanity client
2. Create a loader that fetches blog posts using GROQ
3. Build a route component that renders the fetched posts
4. Handle loading and error states properly

Provide all necessary files for a working Remix + Sanity integration.`,
    },
    assertions: [
      {
        type: "llm-rubric",
        template: "task-completion",
        criteria: [
          "Sanity client configuration",
          "Remix loader function with GROQ query",
          "Route component using useLoaderData",
          "Proper typing",
        ],
      },
      {
        type: "llm-rubric",
        template: "code-correctness",
        criteria: [
          "Modern Remix patterns (v2 conventions)",
          "Proper loader/component separation",
          "Valid GROQ queries",
          "No deprecated APIs",
        ],
      },
      {
        type: "contains-any",
        value: ["useLoaderData", "loader"],
        weight: 1,
      },
    ],
  }),

  defineTask({
    id: "nuxt-integration",
    mode: "literacy",
    title: "Frameworks - Nuxt 4 integration",
    description: "Frameworks - Nuxt 4 integration",
    area: "frameworks",
    docCoverage: true,
    context: {
      docs: [
        {
          slug: "displaying-content-in-nuxt-js",
          reason: "Nuxt.js front-end content display guide",
        },
        {
          slug: "visual-editing-with-nuxt",
          reason: "Nuxt visual editing integration",
        },
      ],
    },
    referenceSolution: "reference-solutions/frameworks/nuxt.ts",
    prompt: {
      text: `Integrate Sanity into a Nuxt 4 application:

1. Install and configure the @nuxtjs/sanity module
2. Create a page that fetches and displays blog posts
3. Use Nuxt composables for data fetching

Provide all necessary configuration and component code.`,
    },
    assertions: [
      {
        type: "llm-rubric",
        template: "task-completion",
        criteria: [
          "@nuxtjs/sanity module setup in nuxt.config.ts",
          "Page component using Nuxt data fetching composables",
          "Sanity GROQ query",
        ],
      },
      {
        type: "llm-rubric",
        template: "code-correctness",
        criteria: [
          "Nuxt 3 module configuration syntax",
          "Uses useSanityQuery or equivalent composable",
          "Proper Nuxt 3 patterns (not Nuxt 2)",
        ],
      },
      {
        type: "contains-any",
        value: ["@nuxtjs/sanity", "useSanityQuery", "sanity:"],
        weight: 1,
      },
    ],
  }),
]
