"use client";
import * as React from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { CodeBlock, type CodeLang } from "@/components/ui/code-block";
import { Badge } from "@/components/ui/badge";

const REQUEST_SAMPLES: Array<{ id: string; label: string; lang: CodeLang; title: string; code: string }> = [
  {
    id: "curl",
    label: "cURL",
    lang: "bash",
    title: "terminal",
    code: `curl -X POST https://www.fetcha.co/v1/fetch \\
  -H "Authorization: Bearer fch_live_..." \\
  -H "Content-Type: application/json" \\
  -d '{ "url": "https://example.com", "country": "CA" }'`,
  },
  {
    id: "javascript",
    label: "JavaScript",
    lang: "javascript",
    title: "fetch.mjs",
    code: `import { Fetcha } from "@fetcha/sdk";

const fetcha = new Fetcha({ apiKey: process.env.FETCHA_API_KEY });

const res = await fetcha.fetch({
  url: "https://example.com",
  country: "CA",
});

console.log(res.status, res.metadata.network); // 200 "residential"`,
  },
  {
    id: "python",
    label: "Python",
    lang: "python",
    title: "fetch.py",
    code: `import os
from fetcha import Fetcha

client = Fetcha(api_key=os.environ["FETCHA_API_KEY"])

res = client.fetch("https://example.com", country="CA")

print(res.status, res.metadata.network)  # 200 residential`,
  },
];

const RESPONSE_SAMPLE = `{
  "request_id": "req_01j8x4k2m9v7q3",
  "success": true,
  "status": 200,
  "url": "https://example.com",
  "final_url": "https://example.com/",
  "content_type": "text/html; charset=utf-8",
  "metadata": {
    "network": "residential",
    "country": "CA",
    "attempts": 1,
    "duration_ms": 842,
    "bytes": 1256
  }
}`;

export function HeroCodeTabs() {
  return (
    <div className="rounded-xl border border-border bg-bg-elevated p-2 shadow-lg dark:shadow-none">
      <Tabs defaultValue="curl">
        <div className="flex flex-wrap items-center justify-between gap-2 px-1.5 pt-1.5">
          <TabsList aria-label="Request example language" className="h-8">
            {REQUEST_SAMPLES.map((s) => (
              <TabsTrigger key={s.id} value={s.id} className="[[data-variant=pill]_&]:h-6 [[data-variant=pill]_&]:px-2.5 [[data-variant=pill]_&]:text-[12.5px]">
                {s.label}
              </TabsTrigger>
            ))}
          </TabsList>
          <div className="flex items-center gap-2 pr-1 font-mono text-[11.5px] text-fg-subtle">
            <span className="rounded-sm bg-accent-soft px-1.5 py-0.5 font-semibold text-accent">POST</span>
            <span className="truncate">/v1/fetch</span>
          </div>
        </div>
        {REQUEST_SAMPLES.map((s) => (
          <TabsContent key={s.id} value={s.id} className="mt-2">
            <CodeBlock code={s.code} lang={s.lang} title={s.title} className="rounded-lg" />
          </TabsContent>
        ))}
      </Tabs>
      <div className="mt-2">
        <div className="mb-1.5 flex items-center justify-between px-1.5">
          <span className="text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">Response</span>
          <Badge variant="success" dot className="font-mono">
            200 · 842 ms
          </Badge>
        </div>
        <CodeBlock code={RESPONSE_SAMPLE} lang="json" title="application/json" className="rounded-lg" maxHeight={260} />
      </div>
    </div>
  );
}