"use client";

import { BookOpen } from "lucide-react";
import { Card } from "@/components/ui/card";
import { buttonVariants } from "@/components/ui/button";
import { CopyField } from "@/features/portal/integration/copy-field";
import { PORTAL_API_URL } from "@/config/site";
import { useT } from "@/i18n";

/**
 * The address the store's servers call, derived from where this portal talks to.
 *
 * Only shown when that address is absolute. Behind the same-origin proxy the portal's own base is a
 * relative path, which is the dashboard's address and not one a store's server could call, and
 * printing it as "the API address" would send an integrator to the wrong host.
 */
export function EndpointCard() {
  const t = useT();

  const absolute = /^https?:\/\//i.test(PORTAL_API_URL);
  const base = absolute ? PORTAL_API_URL.replace(/\/api\/store-portal\/?$/, "") : null;

  return (
    <Card className="p-5 sm:p-6">
      <h3 className="text-sm font-semibold text-foreground">{t("portal.integration.endpointTitle")}</h3>
      <p className="mt-1 text-xs text-muted-foreground">{t("portal.integration.endpointHint")}</p>

      {base ? (
        <div className="mt-4 space-y-3">
          <CopyField label={t("portal.integration.apiBase")} value={`${base}/api/integration/v1`} />
          <a
            href={`${base}/api/documentation/integration`}
            target="_blank"
            rel="noopener noreferrer"
            className={buttonVariants({ variant: "outline", size: "sm" })}
          >
            <BookOpen aria-hidden />
            {t("portal.integration.docs")}
          </a>
        </div>
      ) : null}
    </Card>
  );
}