"use client";

/**
 * CurlExamples (TASK-0130) — the developer-hub "Curl examples" tab.
 *
 * Per-resource snippets curated from docs/api/*.md (pages, databases,
 * records, comments, files, webhooks). Each uses the REAL runtime base URL
 * (API_BASE) and a `<YOUR_API_KEY>` placeholder — never a real credential.
 * Copy buttons announce via an aria-live region.
 */
import { useState } from "react";
import { Check, Copy } from "lucide-react";
import { API_BASE } from "@/lib/constants";

const KEY = "$FACTORY_API_KEY";

function CurlCard({ title, code }: { title: string; code: 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}
          aria-label={`Copy ${title} example`}
          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} example copied` : ""}
      </span>
      <pre className="overflow-x-auto p-2.5 font-mono text-[11px] leading-relaxed">{code}</pre>
    </div>
  );
}

export function CurlExamples({ workspaceSlug }: { workspaceSlug: string }) {
  const W = `${API_BASE}/workspaces/${workspaceSlug}`;

  const pages = `# List pages
curl -s ${W}/pages -H "Authorization: Bearer ${KEY}"

# Create a page
curl -s -X POST ${W}/pages -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"title":"Q2 Launch Checklist"}'

# Update (rename)
curl -s -X PATCH ${W}/pages/<pageId> -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"title":"Risks"}'`;

  const databases = `# List databases
curl -s ${W}/databases -H "Authorization: Bearer ${KEY}"

# Create a database (page of type "database")
curl -s -X POST ${W}/pages -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"title":"Tasks","type":"database"}'

# Add a record
curl -s -X POST ${W}/databases/<dbId>/records -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"title":"Ship the release"}'`;

  const records = `# List records
curl -s ${W}/databases/<dbId>/records -H "Authorization: Bearer ${KEY}"

# Update a record
curl -s -X PATCH ${W}/records/<recordId> -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"title":"Shipped"}'`;

  const comments = `# List comments on a page
curl -s ${W}/pages/<pageId>/comments -H "Authorization: Bearer ${KEY}"

# Add a comment
curl -s -X POST ${API_BASE}/comments -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' \\
  -d '{"targetType":"page","targetId":"<pageId>","body":"Looks good"}'`;

  const files = `# Upload a file (multipart)
curl -s -X POST ${W}/files -H "Authorization: Bearer ${KEY}" \\
  -F "file=@./diagram.png"

# Download
curl -s ${W}/files/<fileId> -H "Authorization: Bearer ${KEY}" -o diagram.png`;

  const webhooks = `# List webhooks
curl -s ${W}/webhooks -H "Authorization: Bearer ${KEY}"

# Create a webhook (returns the secret ONCE)
curl -s -X POST ${W}/webhooks -H "Authorization: Bearer ${KEY}" \\
  -H 'Content-Type: application/json' -d '{"url":"https://example.com/hook","events":["page.*"]}'

# Send a test delivery
curl -s -X POST ${W}/webhooks/<webhookId>/test -H "Authorization: Bearer ${KEY}"`;

  return (
    <div className="space-y-3">
      <p className="text-xs text-muted-foreground">
        Replace <code className="font-mono">&lt;…&gt;</code> placeholders with real ids and set{" "}
        <code className="font-mono">FACTORY_API_KEY</code> to a key created in the{" "}
        <span className="font-medium text-foreground">API keys</span> tab.
      </p>
      <CurlCard title="Pages" code={pages} />
      <CurlCard title="Databases" code={databases} />
      <CurlCard title="Records" code={records} />
      <CurlCard title="Comments" code={comments} />
      <CurlCard title="Files" code={files} />
      <CurlCard title="Webhooks" code={webhooks} />
    </div>
  );
}