"use client";
import { useId } from "react";
import { cn } from "@/lib/utils";

/**
 * PolyLLM mark — "the Prism P".
 * A bold P (Poly) whose bowl emits three beams of decreasing intensity: one interface, every model.
 * Keep in sync with `public/icon.svg` and `scripts/brand-assets.sh` (favicon / PWA / OG renders).
 */
export function LogoMark({ className, size = 28, mono = false }: { className?: string; size?: number; mono?: boolean }) {
  // Unique gradient id per instance: a duplicate id inside a `display:none` sidebar would otherwise
  // win the lookup and the mark would paint black on mobile.
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const gid = `plm-g-${uid}`;
  const hid = `plm-h-${uid}`;
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn("shrink-0", className)} aria-hidden>
      <defs>
        <linearGradient id={gid} x1="3" y1="3" x2="29" y2="29" gradientUnits="userSpaceOnUse">
          <stop stopColor="#6366f1" />
          <stop offset="0.52" stopColor="#8b5cf6" />
          <stop offset="1" stopColor="#f472b6" />
        </linearGradient>
        <radialGradient id={hid} cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9 6) rotate(48) scale(26 22)">
          <stop stopColor="#fff" stopOpacity="0.32" />
          <stop offset="1" stopColor="#fff" stopOpacity="0" />
        </radialGradient>
      </defs>
      {mono ? <rect x="1" y="1" width="30" height="30" rx="9" fill="currentColor" /> : (
        <>
          <rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${gid})`} />
          <rect x="1" y="1" width="30" height="30" rx="9" fill={`url(#${hid})`} />
        </>
      )}
      <g fill={mono ? "var(--bg, #fff)" : "#fff"}>
        {/* P stem */}
        <rect x="7.5" y="7" width="5" height="18" rx="2.5" />
        {/* P bowl (ring) */}
        <path fillRule="evenodd" d="M12 7h5.4a5.6 5.6 0 0 1 0 11.2H12V7Zm0 3.4v4.4h5.3a2.2 2.2 0 0 0 0-4.4H12Z" />
        {/* Beams: one → many */}
        <rect x="24.6" y="9.1" width="3.2" height="2.3" rx="1.15" opacity="0.95" />
        <rect x="24.6" y="12.55" width="3.2" height="2.3" rx="1.15" opacity="0.62" />
        <rect x="24.6" y="16" width="3.2" height="2.3" rx="1.15" opacity="0.34" />
      </g>
    </svg>
  );
}

export function Logo({ className, size = 24, wordmark = true, mono }: { className?: string; size?: number; wordmark?: boolean; mono?: boolean }) {
  return (
    <span className={cn("inline-flex items-center gap-2", className)}>
      <LogoMark size={size} mono={mono} />
      {wordmark ? <Wordmark className="text-[17px]" /> : null}
    </span>
  );
}

/** Text wordmark — "Poly" solid, "LLM" slightly lighter for rhythm. */
export function Wordmark({ className }: { className?: string }) {
  return (
    <span className={cn("font-semibold tracking-[-0.02em] leading-none", className)}>
      Poly<span className="font-medium text-fg-muted">LLM</span>
    </span>
  );
}