"use client";

import clsx from "clsx";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Check, Copy } from "lucide-react";

const TABS = [
  { href: "/developers", label: "API keys" },
  { href: "/developers/webhooks", label: "Webhooks" },
  { href: "/developers/reference", label: "API reference" },
];

export function DevTabs() {
  const path = usePathname();
  return (
    <nav aria-label="Developers" className="mb-6 flex gap-1 overflow-x-auto border-b border-line">
      {TABS.map((t) => {
        const active = t.href === "/developers" ? path === t.href : path.startsWith(t.href);
        return (
          <Link key={t.href} href={t.href} aria-current={active ? "page" : undefined} className={clsx("-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium", active ? "border-teal text-teal" : "border-transparent text-muted hover:text-ink")}>
            {t.label}
          </Link>
        );
      })}
    </nav>
  );
}

/** A secret or snippet with a copy button. */
export function CopyField({ value, label, mono = true }: { value: string; label: string; mono?: boolean }) {
  const [copied, setCopied] = useState(false);
  return (
    <div className="flex items-stretch overflow-hidden rounded-lg border border-line bg-paper">
      <code aria-label={label} className={clsx("min-w-0 flex-1 break-all px-3 py-2 text-[13px]", mono && "font-mono")}>
        {value}
      </code>
      <button
        type="button"
        onClick={() => navigator.clipboard?.writeText(value).then(() => (setCopied(true), setTimeout(() => setCopied(false), 1500)))}
        className="flex shrink-0 items-center gap-1.5 border-l border-line bg-white px-3 text-sm font-medium hover:bg-paper"
      >
        {copied ? <Check className="size-4 text-teal" /> : <Copy className="size-4" />}
        {copied ? "Copied" : "Copy"}
      </button>
    </div>
  );
}

export const METHOD_TONE: Record<string, string> = { GET: "bg-teal-soft text-teal", POST: "bg-amber-soft text-amber", PATCH: "bg-amber-soft text-amber", DELETE: "bg-brick-soft text-brick" };