"use client";
import * as React from "react";
import Link from "next/link";
import type { FetchRequestInput } from "@fetcha/core/client";
import { KeyRound } from "lucide-react";
import { CodeBlock } from "@/components/ui/code-block";
import { CopyButton } from "@/components/ui/copy-button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CODEGEN_LANGS, codegenInfo, generateCode, type CodegenLang } from "@/lib/codegen";
import { cn } from "@/lib/utils";
import type { PlaygroundKey } from "./types";

export function keyPlaceholder(k: PlaygroundKey | undefined): string {
  if (!k) return "YOUR_API_KEY";
  const prefix = k.keyPrefix.endsWith("_") ? k.keyPrefix : `${k.keyPrefix}_`;
  return `${prefix}••••${k.last4}`;
}

/** Language tabs + API key selector + generated snippet for the current request. */
export function CodePanel({ request, keys, baseUrl, lang, onLangChange, keyId, onKeyChange, className }: { request: FetchRequestInput; keys: PlaygroundKey[]; baseUrl: string; lang: CodegenLang; onLangChange: (l: CodegenLang) => void; keyId: string; onKeyChange: (id: string) => void; className?: string }) {
  const key = keys.find((k) => k.id === keyId) ?? keys[0];
  const info = codegenInfo(lang);
  const code = React.useMemo(() => generateCode(lang, request, { apiKeyPlaceholder: keyPlaceholder(key), baseUrl }), [lang, request, key, baseUrl]);

  return (
    <div className={cn("grid gap-3", className)}>
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div role="tablist" aria-label="Language" className="flex items-center gap-1 overflow-x-auto no-scrollbar -mx-1 px-1">
          {CODEGEN_LANGS.map((l) => (
            <button
              key={l.id}
              type="button"
              role="tab"
              aria-selected={l.id === lang}
              onClick={() => onLangChange(l.id)}
              className={cn("h-7 shrink-0 rounded-[5px] px-2.5 text-[12.5px] font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/30", l.id === lang ? "bg-fg text-bg" : "text-fg-muted hover:bg-bg-muted hover:text-fg")}
            >
              {l.label}
            </button>
          ))}
        </div>
        <div className="flex items-center gap-2 sm:shrink-0">
          {keys.length ? (
            <Select value={key?.id ?? ""} onValueChange={onKeyChange}>
              <SelectTrigger className="h-8 w-full sm:w-[220px] text-[12.5px]" aria-label="API key used in the snippet">
                <KeyRound className="size-3.5 shrink-0 text-fg-subtle" aria-hidden />
                <SelectValue placeholder="API key" />
              </SelectTrigger>
              <SelectContent>
                {keys.map((k) => (
                  <SelectItem key={k.id} value={k.id}>
                    <span className="font-mono text-[12px]">{keyPlaceholder(k)}</span>
                    <span className="ml-2 text-fg-muted">{k.name}</span>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          ) : null}
          <CopyButton value={code} label="Copy" variant="outline" size="sm" className="h-8 text-fg" />
        </div>
      </div>
      <CodeBlock code={code} lang={info.codeLang} title={`fetch.${info.ext}`} maxHeight={480} copy={false} />
      <p className="text-xs text-fg-subtle leading-relaxed">
        {keys.length ? (
          <>
            <span className="font-mono">{keyPlaceholder(key)}</span> is a placeholder for <span className="font-medium text-fg-muted">{key?.name}</span>. Replace it with your key — keys are only shown once, at creation.{" "}
          </>
        ) : (
          <>
            This project has no API key yet.{" "}
            <Link href="/dashboard/api-keys" className="text-accent underline-offset-4 hover:underline">
              Create one
            </Link>{" "}
            and replace <span className="font-mono">YOUR_API_KEY</span>.{" "}
          </>
        )}
        {lang === "typescript" || lang === "python-sdk" ? "SDKs are not published yet: install from source (repo packages/sdk and sdk-python)." : null}
      </p>
    </div>
  );
}