import type { Metadata } from "next";
import { CodeBlock } from "@/components/ui/code-block";
import { DocPage } from "@/components/docs/doc-page";
import { A, Code, H2, Li, P, Ul } from "@/components/docs/prose";
import { Callout, ComingSoon } from "@/components/docs/callout";
import { Endpoint } from "@/components/docs/endpoint";
import { ResponseExample } from "@/components/docs/response-example";

export const metadata: Metadata = {
  title: "Extraction",
  description: "Structured data extraction (POST /v1/extract) is coming soon. This page describes the planned schema format and what the endpoint returns today.",
};

export default function ExtractionPage() {
  return (
    <DocPage path="/docs/extraction" eyebrow="Core API" title="Extraction" description="Turn a page into structured JSON by describing the fields you want. Extraction will run on top of a normal fetch, so routing, geography and sessions apply unchanged." status="Coming soon">
      <ComingSoon title="Structured extraction is not yet available">
        <Code>POST /v1/extract</Code> exists as a reserved route but performs no extraction. Everything below the &ldquo;Current behaviour&rdquo; section is design intent, published so you can
        plan integrations; names and shapes may change before launch.
      </ComingSoon>

      <H2>Current behaviour</H2>
      <Endpoint method="POST" path="/v1/extract" status="Coming soon" />
      <P>Any call, with any body, returns a 400 with an explanatory message. No fetch is performed and nothing is counted against your quota.</P>
      <ResponseExample
        status={400}
        statusText="Bad Request"
        body={{ error: { code: "INVALID_REQUEST", message: "Structured extraction is not yet available on this plan. Follow the changelog at https://www.fetcha.co/changelog.", request_id: "req_3c4d5e6f7g8h9i0j" } }}
      />
      <P>
        In the meantime, the pragmatic path is <Code>{`format: "text"`}</Code> for readable content, or <Code>{`format: "json"`}</Code> against the JSON endpoints most modern sites expose. See the{" "}
        <A href="/docs/examples">Examples</A>.
      </P>

      <H2>Planned request</H2>
      <P>
        The request will accept every <Code>/v1/fetch</Code> field plus a <Code>schema</Code> describing the output. Field types are expressed as short strings; arrays and nested objects are
        supported. Optional natural-language <Code>hints</Code> help disambiguate fields.
      </P>
      <CodeBlock
        lang="json"
        title="Planned request"
        code={JSON.stringify(
          {
            url: "https://www.example.ca/products/42",
            country: "CA",
            schema: {
              title: "string",
              price: "number",
              currency: "string",
              in_stock: "boolean",
              images: ["string"],
              specs: [{ name: "string", value: "string" }],
            },
            hints: { price: "The current sale price, not the crossed-out list price." },
          },
          null,
          2,
        )}
      />
      <CodeBlock
        lang="json"
        title="Planned response"
        code={JSON.stringify(
          {
            request_id: "req_…",
            success: true,
            status: 200,
            url: "https://www.example.ca/products/42",
            final_url: "https://www.example.ca/products/42",
            data: {
              title: "Example Product 42",
              price: 129.0,
              currency: "CAD",
              in_stock: true,
              images: ["https://cdn.example.ca/p/42-1.jpg", "https://cdn.example.ca/p/42-2.jpg"],
              specs: [{ name: "Weight", value: "1.2 kg" }],
            },
            metadata: { network: "residential", country: "CA", attempts: 1, duration_ms: 2140, bytes: 61233, session: null, cached: false, extraction_ms: 880 },
          },
          null,
          2,
        )}
      />
      <Ul>
        <Li>
          <Code>data</Code> follows your schema exactly; missing values are <Code>null</Code> rather than omitted.
        </Li>
        <Li>
          The fetch part behaves like <Code>/v1/fetch</Code>: blocked targets return <Code>success: false</Code> with no <Code>data</Code>, and the usual error codes apply.
        </Li>
        <Li>Extraction will be priced per successful extraction on top of the underlying fetch. Plan availability will be announced at launch.</Li>
      </Ul>
      <Callout variant="info" title="Tell us what you need">
        If you have a concrete extraction use case, email <A href="mailto:hello@fetcha.co">hello@fetcha.co</A> with an example URL and the fields you want. Early feedback shapes the schema.
      </Callout>
    </DocPage>
  );
}