"use client";

/**
 * OverviewTab (TASK-0130) — the developer-hub "Overview" tab.
 *
 * Base URL, a copyable curl quickstart (API-key auth + a page create), an
 * API-key example, an OAuth2 token example, and links to the public docs
 * (markdown `/docs/api` if present, always the OpenAPI UI `/api/v1/docs`).
 *
 * All snippets use the REAL runtime base URL (API_BASE) and a
 * `<YOUR_KEY>` / `<ACCESS_TOKEN>` placeholder — never a real credential.
 */
import { useState } from "react";
import { Check, Copy, FileText, Webhook as WebhookIcon } from "lucide-react";
import { API_BASE } from "@/lib/constants";
import { cn } from "@/lib/utils";

const KEY_PLACEHOLDER = "$FACTORY_API_KEY";
const TOKEN_PLACEHOLDER = "$ACCESS_TOKEN";

function CodeBlock({
  title,
  code,
  testId
}: {
  title: string;
  code: string;
  testId?: string;
}) {
  const [copied, setCopied] = useState(false);
  const doCopy = async () => {
    let ok = false;
    try {
      await navigator.clipboard.writeText(code);
      ok = true;
    } catch {
      try {
        const ta = document.createElement("textarea");
        ta.value = code;
        ta.setAttribute("readonly", "");
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        ok = document.execCommand("copy");
        document.body.removeChild(ta);
      } catch {
        ok = false;
      }
    }
    setCopied(ok);
    setTimeout(() => setCopied(false), 2000);
  };
  return (
    <div className="rounded-md border border-border">
      <div className="flex items-center justify-between border-b border-border px-2.5 py-1.5">
        <p className="text-xs font-medium text-muted-foreground">{title}</p>
        <button
          type="button"
          onClick={doCopy}
          data-testid={testId}
          aria-label={`Copy ${title}`}
          className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] hover:bg-accent"
        >
          {copied ? (
            <Check className="size-3 text-emerald-600" aria-hidden />
          ) : (
            <Copy className="size-3" aria-hidden />
          )}
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <span role="status" className="sr-only">
        {copied ? `${title} copied` : ""}
      </span>
      <pre className="overflow-x-auto p-2.5 font-mono text-[11px] leading-relaxed">{code}</pre>
    </div>
  );
}

export function OverviewTab({ workspaceSlug }: { workspaceSlug: string }) {
  const quickstart = `# 1. List your pages (API-key auth)
curl -s ${API_BASE}/workspaces/${workspaceSlug}/pages \\
  -H "Authorization: Bearer ${KEY_PLACEHOLDER}"

# 2. Create a page
curl -s -X POST ${API_BASE}/workspaces/${workspaceSlug}/pages \\
  -H "Authorization: Bearer ${KEY_PLACEHOLDER}" \\
  -H 'Content-Type: application/json' \\
  -d '{"title":"Hello from the API"}'`;

  const apiKey = `# API keys are created in this hub (API keys tab) and shown ONCE.
# Use them server-to-server with the Authorization header:
curl -s ${API_BASE}/workspaces/${workspaceSlug}/pages/\\<pageId\\> \\
  -H "Authorization: Bearer ${KEY_PLACEHOLDER}"

# Scopes: READ < WRITE < ADMIN (ADMIN implies the lower scopes).`;

  const oauth = `# 1. Exchange the authorization code (server-side, secret kept private)
curl -s -X POST ${API_BASE}/oauth/token \\
  -H 'Content-Type: application/x-www-form-urlencoded' \\
  -d 'grant_type=authorization_code&code=\\<code\\>&client_id=\\<clientId\\>&client_secret=\\<clientSecret\\>&redirect_uri=\\<redirectUri\\>'

# 2. Use the access token
curl -s ${API_BASE}/workspaces/${workspaceSlug}/pages \\
  -H "Authorization: Bearer $ACCESS_TOKEN"`;

  const webhook = `# Verify a webhook signature (Node):
const crypto = require("node:crypto");
function verify(req, secret) {
  const header = req.headers["x-factory-signature"]; // "t=<ts>,v1=<hex>"
  const m = header.match(/^t=(\\d+),v1=([0-9a-f]{64})$/);
  if (!m) return false;
  const [t, v1] = m.slice(1, 3);
  if (Math.abs(Date.now() / 1000 - Number(t)) > 300) return false; // ±5 min
  const expected = crypto.createHmac("sha256", secret).update(t + "." + rawBody).digest("hex");
  return crypto.timingSafeEqual(Buffer.from(v1, "hex"), Buffer.from(expected, "hex"));
}`;

  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-border p-4">
        <h3 className="text-sm font-semibold">Base URL</h3>
        <p className="mt-1 text-xs text-muted-foreground">
          All Factory API endpoints are under this prefix. The OpenAPI UI is at{" "}
          <a className="underline" href={`${API_BASE}/docs`} target="_blank" rel="noreferrer">
            {API_BASE}/docs
          </a>
          , the markdown reference at{" "}
          <a className="underline" href="/docs/api" target="_blank" rel="noreferrer">
            /docs/api
          </a>
          .
        </p>
        <div className="mt-2 flex items-center gap-2">
          <code className="flex-1 truncate rounded-md bg-muted px-2.5 py-1.5 font-mono text-xs">
            {API_BASE}
          </code>
        </div>
      </div>

      <CodeBlock title="Quickstart — create a page" code={quickstart} testId="overview-quickstart" />
      <CodeBlock title="API-key authentication" code={apiKey} />
      <CodeBlock title="OAuth2 — token exchange" code={oauth} />
      <CodeBlock title="Verifying webhook signatures" code={webhook} />

      <div className="flex flex-wrap gap-2 text-xs">
        <a
          href="/docs/api"
          target="_blank"
          rel="noreferrer"
          className={cn(
            "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 hover:bg-accent"
          )}
        >
          <FileText className="size-3.5" aria-hidden /> API reference (markdown)
        </a>
        <a
          href={`${API_BASE}/docs`}
          target="_blank"
          rel="noreferrer"
          className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 hover:bg-accent"
        >
          <WebhookIcon className="size-3.5" aria-hidden /> OpenAPI / Swagger
        </a>
      </div>
    </div>
  );
}