// Światowid brand logo, renders the official SVG inline so `color`/`currentColor` cascades.
// Single source of truth: assets/logos/sviatovid-logo.svg is loaded once and cached.

const BRAND_LOGO_PATH = 'assets/logos/sviatovid-logo.svg';
const BRAND_THIN_FILTER_ID = 'brand-logo-thin';
let __logoCache = null;
let __logoPromise = null;
let __thinFilterInjected = false;

function ensureThinFilter() {
  if (typeof document === 'undefined') return;
  if (__thinFilterInjected) return;
  if (document.getElementById(BRAND_THIN_FILTER_ID)) {
    __thinFilterInjected = true;
    return;
  }
  const svgNS = 'http://www.w3.org/2000/svg';
  const svg = document.createElementNS(svgNS, 'svg');
  svg.setAttribute('width', '0');
  svg.setAttribute('height', '0');
  svg.style.position = 'absolute';
  svg.style.width = '0';
  svg.style.height = '0';
  svg.style.overflow = 'hidden';
  svg.setAttribute('aria-hidden', 'true');
  svg.innerHTML = `<defs><filter id="${BRAND_THIN_FILTER_ID}" x="-5%" y="-5%" width="110%" height="110%"><feMorphology in="SourceGraphic" operator="erode" radius="1"/></filter></defs>`;
  document.body.appendChild(svg);
  __thinFilterInjected = true;
}

function useBrandLogoSVG() {
  const [svg, setSvg] = React.useState(__logoCache);
  React.useEffect(() => {
    if (__logoCache) return;
    if (!__logoPromise) {
      __logoPromise = fetch(BRAND_LOGO_PATH).then(r => r.text()).then(text => {
        // strip XML decl + ensure currentColor fill
        let s = text.replace(/<\?xml[^>]*\?>/, '').trim();
        if (!/fill="currentColor"/.test(s)) {
          s = s.replace('<path ', '<path fill="currentColor" ');
        }
        // Strip the intrinsic width/height attrs so the wrapping span's size wins
        s = s.replace(/<svg([^>]*?)\s+width="[^"]*"/, '<svg$1').replace(/<svg([^>]*?)\s+height="[^"]*"/, '<svg$1');
        // Inject width/height 100% so SVG fills its span
        s = s.replace('<svg', '<svg width="100%" height="100%" preserveAspectRatio="xMidYMid meet"');
        __logoCache = s;
        return s;
      });
    }
    __logoPromise.then(s => setSvg(s));
  }, []);
  return svg;
}

function BrandLogo({ size = 28, color = 'currentColor', style = {}, className = '', thin = false, thinAmount }) {
  const svg = useBrandLogoSVG();
  React.useEffect(() => {
    if (thin) ensureThinFilter();
  }, [thin]);
  const filterStyle = thin
    ? { filter: `url(#${BRAND_THIN_FILTER_ID})` }
    : undefined;
  // size === 'fill' → stretch to the parent box (preserve aspect via the SVG itself).
  // Otherwise treat size as a CSS pixel value.
  const isFill = size === 'fill';
  const widthVal = isFill ? '100%' : size;
  const heightVal = isFill ? '100%' : size * (564 / 534);
  return (
    <span
      className={className}
      style={{
        display: 'inline-flex',
        width: widthVal,
        height: heightVal,
        color,
        lineHeight: 0,
        ...filterStyle,
        ...style,
      }}
      dangerouslySetInnerHTML={{ __html: svg || '' }}
    />
  );
}

// Keep RotatingLogo + TotemLogo as aliases, same static logo, unified brand mark
function RotatingLogo({ size = 28, color = 'currentColor', thin = false }) {
  return <BrandLogo size={size} color={color} thin={thin} />;
}

function TotemLogo({ size = 100, color = 'currentColor', thin = false }) {
  return <BrandLogo size={size} color={color} thin={thin} />;
}

Object.assign(window, { BrandLogo, RotatingLogo, TotemLogo });