"use client";

import { KeyRound } from "lucide-react";
import { DashboardNavigationLink as Link } from "@/components/dashboard-navigation-link";
import { Button } from "@/components/ui/button";
import { useDashboardWorkspace } from "@/contexts/dashboard-workspace-context";
import { useTranslations } from "@/i18n/provider";

function formatKeyIdentifier(keyPrefix: string): string {
  const trimmed = keyPrefix.trim();
  if (!trimmed) {
    return "api_key...";
  }

  if (trimmed.endsWith("...")) {
    return trimmed;
  }

  if (trimmed.length <= 12) {
    return `${trimmed}...`;
  }

  return `${trimmed.slice(0, 12)}...`;
}

function formatApiKeyLabel(name: string, keyPrefix: string): string {
  return `${name} (${formatKeyIdentifier(keyPrefix)})`;
}

export function PlaygroundApiKeySelector() {
  const t = useTranslations();
  const {
    dashboardAccess,
    playgroundApiKeys,
    selectedPlaygroundApiKeyId,
    setSelectedPlaygroundApiKeyId,
  } = useDashboardWorkspace();
  const selectedApiKey =
    playgroundApiKeys.find((apiKey) => apiKey.id === selectedPlaygroundApiKeyId) ??
    playgroundApiKeys[0];

  if (playgroundApiKeys.length === 0) {
    if (!dashboardAccess.capabilities.canManageApiKeys) {
      return null;
    }

    return (
      <Button asChild className="h-11 rounded-[14px] px-4 whitespace-nowrap">
        <Link href="/dashboard/api-keys">{t("Shared.SharedComponents.createApiKey")}</Link>
      </Button>
    );
  }

  return (
    <div className="w-full min-w-[260px] lg:max-w-[360px]">
      <div className="relative">
        <div className="pointer-events-none flex h-11 w-full items-center rounded-[14px] border border-border-default bg-surface-raised px-4 shadow-none">
          <span className="flex min-w-0 items-center gap-2 pr-8">
            <KeyRound className="h-4 w-4 text-tertiary" />
            <span className="truncate text-left text-sm font-medium text-primary">
              {selectedApiKey
                ? formatApiKeyLabel(selectedApiKey.name, selectedApiKey.keyPrefix)
                : t("Shared.SharedComponents.selectApiKey")}
            </span>
          </span>
        </div>

        <select
          aria-label={t("Shared.SharedComponents.selectApiKey")}
          className="absolute inset-0 h-full w-full cursor-pointer appearance-none rounded-[14px] bg-surface-raised text-primary opacity-0"
          value={selectedPlaygroundApiKeyId ?? playgroundApiKeys[0].id}
          onChange={(event) => setSelectedPlaygroundApiKeyId(event.currentTarget.value)}
        >
          {playgroundApiKeys.map((apiKey) => (
            <option key={apiKey.id} value={apiKey.id} className="bg-surface-raised text-primary">
              {formatApiKeyLabel(apiKey.name, apiKey.keyPrefix)}
            </option>
          ))}
        </select>

        <svg
          aria-hidden="true"
          viewBox="0 0 16 16"
          className="pointer-events-none absolute top-1/2 right-4 h-4 w-4 -translate-y-1/2 text-muted"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="m4 6 4 4 4-4" />
        </svg>
      </div>
    </div>
  );
}
