import type { Metadata } from "next";
import { CodeBlock } from "@/components/ui/code-block";
import { DocPage } from "@/components/docs/doc-page";
import { A, CardGrid, Code, H2, H3, Lead, Li, LinkCard, P, Strong, Table, TBody, Td, Th, THead, Tr, Ul } from "@/components/docs/prose";
import { Callout } from "@/components/docs/callout";
import { Badge } from "@/components/ui/badge";

export const metadata: Metadata = {
  title: "Introduction",
  description: "What Fetcha is, how to think about it, what is live today and what is coming next.",
};

const LIVE: Array<[string, string]> = [
  ["POST /v1/fetch", "Fetch any public http(s) URL through the routing engine. HTML, text, Markdown, JSON or raw output, page metadata and links."],
  ["Managed browser", "browser: true renders the page in a headless Chromium on the same route; blocked HTTP attempts escalate to it automatically (browser_fallback)."],
  ["Crawl & map", "POST /v1/crawl turns a site into Markdown/text/HTML as an asynchronous job; POST /v1/map lists a site's URLs."],
  ["Residential network + auto", "The residential class is live. auto currently resolves to residential."],
  ["Geolocation", "Country targeting (ISO 3166-1 alpha-2), with region and city hints."],
  ["Sessions", "Sticky exit identity for 60 to 1,800 seconds via /v1/sessions."],
  ["Retries & escalation", "Automatic retry with a new exit IP and header profile, expanded block detection (Cloudflare, DataDome, PerimeterX, Akamai, Kasada, Imperva, AWS WAF, soft blocks), per-domain intelligence, circuit breakers."],
  ["Account endpoints", "GET /v1/me and GET /v1/usage for key introspection and monthly usage."],
  ["Dashboard", "Projects, API keys, request logs with request IDs, crawls, usage and a Playground."],
];

const SOON: Array<[string, string]> = [
  ["Browser actions", "POST /v1/browser (click, type, scroll, evaluate). Today it returns BROWSER_UNAVAILABLE. Rendered fetches are live."],
  ["Structured extraction", "POST /v1/extract. Today it returns INVALID_REQUEST with an explanatory message."],
  ["Datacenter, ISP and mobile classes", "Requesting them explicitly returns NETWORK_UNAVAILABLE until they launch."],
  ["Webhooks", "Event delivery signed with HMAC-SHA256 (including crawl webhook_url). Not delivered yet."],
  ["CLI", "A command-line client. Not available."],
  ["Teams & invitations", "Multi-member organizations."],
  ["Published SDK packages", "@fetcha/sdk on npm and fetcha on PyPI. Both exist as source in the repository today."],
];

export default function IntroductionPage() {
  return (
    <DocPage
      path="/docs"
      title="Introduction"
      description="Fetcha is Intelligent Web Access Infrastructure: one HTTP API that fetches web pages for you and figures out which network, exit location and retry strategy each target needs."
      status="Stable"
    >
      <Lead>
        The mental model is deliberately simple: <Strong>you give Fetcha a URL, Fetcha figures out how to access it.</Strong> You do not manage proxies, rotate IPs, detect block pages or
        tune retry loops. You send one request and receive the page, the final URL, headers, cookies and metadata describing how the request was served.
      </Lead>

      <H2>How it works</H2>
      <P>
        Every call to <Code>POST /v1/fetch</Code> goes through the same pipeline:
      </P>
      <Ul>
        <Li>
          <Strong>Validate.</Strong> The body is checked against a strict schema; unknown fields are rejected. Plan limits are applied (timeout is capped, network classes are gated).
        </Li>
        <Li>
          <Strong>Protect.</Strong> Only <Code>http</Code> and <Code>https</Code> are allowed. Localhost, private, link-local, cloud-metadata and internal hostnames are refused, and every redirect hop is
          re-validated before it is followed.
        </Li>
        <Li>
          <Strong>Route.</Strong> The routing engine scores the available routes for the target domain using historical success, cost, latency, network health, geography and session stability, then
          orders them from cheapest to most reliable.
        </Li>
        <Li>
          <Strong>Execute and escalate.</Strong> The request is sent through the best route with a complete browser header profile. If the response looks like a block page (403, 429, captcha, anti-bot
          challenge, WAF page, soft 200 block), Fetcha retries with a fresh exit identity or an alternate route, and renders the page in the managed browser when the block is a JavaScript
          challenge, all within the request&apos;s retry budget and single overall timeout.
        </Li>
        <Li>
          <Strong>Learn.</Strong> Each attempt updates a per-domain profile so future requests to the same site start from the route most likely to succeed.
        </Li>
      </Ul>

      <H2>Base URL</H2>
      <P>The API is served on the same domain as the website. There is no separate API host to configure.</P>
      <CodeBlock code={`https://www.fetcha.co`} lang="text" copy />
      <P>
        All endpoints are versioned under <Code>/v1</Code>. Requests and responses are JSON (<Code>Content-Type: application/json</Code>). Health probes are public at{" "}
        <Code>/api/health</Code> and <Code>/api/ready</Code>.
      </P>

      <H2>Your first request</H2>
      <P>
        Authenticate with a Bearer API key and post a URL. A minimal call looks like this; see the <A href="/docs/quickstart">Quickstart</A> for the full walkthrough and the{" "}
        <A href="/docs/fetch">Fetch API</A> reference for every field.
      </P>
      <CodeBlock
        lang="bash"
        code={`curl https://www.fetcha.co/v1/fetch \\
  -X POST \\
  -H "Authorization: Bearer $FETCHA_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"url": "https://example.com", "country": "CA", "format": "text"}'`}
      />

      <H2>Request IDs</H2>
      <P>
        Every response, successful or not, carries an <Code>X-Fetcha-Request-ID</Code> header of the form <Code>req_…</Code>. Fetch responses repeat it as <Code>request_id</Code> in the body, and
        error envelopes include it as <Code>error.request_id</Code>. The same identifier appears in your dashboard request log. Quote it when you write to{" "}
        <A href="mailto:support@fetcha.co">support@fetcha.co</A>: it lets us find the exact attempt sequence for your call.
      </P>
      <CodeBlock
        lang="text"
        code={`HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
X-Fetcha-Request-ID: req_k3j9d0f2a8b1c7e4
X-Fetcha-Version: 0.1.0
Cache-Control: no-store`}
      />

      <H2>What is live today</H2>
      <P>
        Fetcha is a private platform: access is granted by invitation and every account runs on the single unlimited plan. The table below is the authoritative list of what you can call right
        now; the section after it lists what is planned. The docs never describe a capability as working unless it is.
      </P>
      <Table>
        <THead>
          <Tr>
            <Th>Capability</Th>
            <Th>Status</Th>
            <Th>Notes</Th>
          </Tr>
        </THead>
        <TBody>
          {LIVE.map(([name, note]) => (
            <Tr key={name}>
              <Td mono>{name}</Td>
              <Td>
                <Badge variant="success" dot>
                  Live
                </Badge>
              </Td>
              <Td>{note}</Td>
            </Tr>
          ))}
        </TBody>
      </Table>

      <H3>Coming soon</H3>
      <Table>
        <THead>
          <Tr>
            <Th>Capability</Th>
            <Th>Status</Th>
            <Th>Current behaviour</Th>
          </Tr>
        </THead>
        <TBody>
          {SOON.map(([name, note]) => (
            <Tr key={name}>
              <Td mono>{name}</Td>
              <Td>
                <Badge variant="warning" dot>
                  Coming soon
                </Badge>
              </Td>
              <Td>{note}</Td>
            </Tr>
          ))}
        </TBody>
      </Table>
      <Callout variant="info" title="Network classes">
        Fetcha exposes <Code>network</Code> classes (<Code>auto</Code>, <Code>datacenter</Code>, <Code>residential</Code>, <Code>isp</Code>, <Code>mobile</Code>) rather than the identity of the upstream
        networks behind them. Debug metadata refers to routes by neutral aliases such as <Code>network-a</Code>.
      </Callout>

      <H2>Where to go next</H2>
      <CardGrid>
        <LinkCard href="/docs/quickstart" title="Quickstart" description="Create a key and make your first request in under five minutes." />
        <LinkCard href="/docs/fetch" title="Fetch API reference" description="Every request field, the response shape, size limits and redirect rules." />
        <LinkCard href="/docs/browser" title="Browser" description="Rendered fetches, automatic escalation on JavaScript challenges, screenshots." />
        <LinkCard href="/docs/crawl" title="Crawl & Map" description="Turn a whole site into Markdown with an asynchronous job, or list its URLs." />
        <LinkCard href="/docs/networks" title="Network selection" description="What auto does, how routes are scored and what each class means." />
        <LinkCard href="/docs/errors" title="Errors" description="All error codes with HTTP status, meaning and how to recover." />
        <LinkCard href="/docs/sdks" title="SDKs" description="JavaScript/TypeScript and Python clients, installed from source." />
        <LinkCard href="/docs/examples" title="Examples" description="Eight recipes covering sessions, POST bodies, blocks, concurrency and debugging." />
      </CardGrid>
    </DocPage>
  );
}