import Script from "next/script";

type ConsentState = "legacy" | "granted" | "denied" | "pending";
type StorageMode = "persistent" | "none";

export interface ClickReportScriptProps {
  siteToken: string;
  consent?: ConsentState;
  storage?: StorageMode;
}

const SITE_TOKEN_PATTERN = /^[A-Za-z0-9_-]{6,128}$/;

/** Render once in the root app/layout.tsx so the tracker survives navigation. */
export function ClickReportScript({
  siteToken,
  consent = "legacy",
  storage = "persistent",
}: ClickReportScriptProps) {
  if (!SITE_TOKEN_PATTERN.test(siteToken)) {
    throw new Error("ClickReport siteToken is invalid");
  }

  return (
    <Script
      id="clickreport-tracker"
      src={`https://www.clickreport.com/track.js?id=${encodeURIComponent(siteToken)}`}
      strategy="afterInteractive"
      data-clickreport-site-token={siteToken}
      data-consent={consent}
      data-storage={storage}
    />
  );
}