import { readFile, writeFile } from "node:fs/promises";

const sourcePath = "/Users/moto/Downloads/Royals & Rogues logo trans.svg";
const sigilPngPath = "/var/folders/zc/3rxdfdx97w7216g8gn0zb2080000gn/T/codex-clipboard-2d5cdc29-f12d-49d5-bf2b-1655f0c41d29.png";
const outputDir = new URL("./", import.meta.url);
const source = await readFile(sourcePath, "utf8");
const sigilPng = await readFile(sigilPngPath);
const sigilData = `data:image/png;base64,${sigilPng.toString("base64")}`;

const glyphStart = source.indexOf('<g fill="#f4e8c9"');
if (glyphStart < 0) throw new Error("Could not locate the vector wordmark glyphs.");
const glyphs = source.slice(glyphStart, source.lastIndexOf("</svg>"));

const defs = `
  <defs>
    <radialGradient id="rr-enamel" cx="36%" cy="28%" r="78%">
      <stop offset="0" stop-color="#17362f"/>
      <stop offset="0.48" stop-color="#0b211d"/>
      <stop offset="1" stop-color="#020b09"/>
    </radialGradient>
    <linearGradient id="rr-gold" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#fff0a8"/>
      <stop offset="0.18" stop-color="#e7bd58"/>
      <stop offset="0.48" stop-color="#9b5c15"/>
      <stop offset="0.72" stop-color="#f4cf69"/>
      <stop offset="1" stop-color="#6c390d"/>
    </linearGradient>
    <linearGradient id="rr-arrow" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffe088"/>
      <stop offset="0.5" stop-color="#daa12c"/>
      <stop offset="1" stop-color="#a96a12"/>
    </linearGradient>
    <radialGradient id="rr-ruby" cx="35%" cy="28%" r="75%">
      <stop offset="0" stop-color="#ff9c66"/>
      <stop offset="0.32" stop-color="#d7492d"/>
      <stop offset="0.7" stop-color="#7d1716"/>
      <stop offset="1" stop-color="#350606"/>
    </radialGradient>
    <radialGradient id="rr-stud" cx="33%" cy="25%" r="70%">
      <stop offset="0" stop-color="#fff4bb"/>
      <stop offset="0.28" stop-color="#e8bd57"/>
      <stop offset="0.72" stop-color="#8a4d11"/>
      <stop offset="1" stop-color="#3f1d05"/>
    </radialGradient>
    <filter id="rr-shadow" x="-30%" y="-30%" width="160%" height="170%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"/>
      <feOffset dy="9" result="offset"/>
      <feColorMatrix in="offset" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .62 0"/>
      <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="rr-gem-glow" x="-80%" y="-80%" width="260%" height="260%">
      <feGaussianBlur stdDeviation="8" result="glow"/>
      <feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="rr-grain" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="11" result="noise"/>
      <feColorMatrix in="noise" type="saturate" values="0" result="mono"/>
      <feComponentTransfer in="mono" result="faint"><feFuncA type="table" tableValues="0 0.10"/></feComponentTransfer>
      <feBlend in="SourceGraphic" in2="faint" mode="soft-light"/>
    </filter>
    <clipPath id="rr-disc"><circle cx="225" cy="240" r="187"/></clipPath>
  </defs>`;

const vectorSigil = `
  <g id="royals-and-rogues-sigil" filter="url(#rr-shadow)" aria-label="Royals and Rogues sigil">
    <circle cx="225" cy="240" r="205" fill="#050806" stroke="#3b1d08" stroke-width="9"/>
    <circle cx="225" cy="240" r="197" fill="url(#rr-gold)"/>
    <circle cx="225" cy="240" r="187" fill="url(#rr-enamel)" stroke="#1a1008" stroke-width="8"/>
    <circle cx="225" cy="240" r="174" fill="none" stroke="url(#rr-gold)" stroke-width="6"/>
    <circle cx="225" cy="240" r="161" fill="none" stroke="#5b3a16" stroke-width="2"/>

    <g clip-path="url(#rr-disc)" opacity="0.55" fill="none" stroke="#1f6657" stroke-width="2">
      <circle cx="225" cy="240" r="126"/>
      <circle cx="225" cy="240" r="98"/>
      <path d="M58 240C96 190 147 164 225 164s129 26 167 76"/>
      <path d="M58 240C96 290 147 316 225 316s129-26 167-76"/>
      <path d="M86 126C138 154 181 167 225 167s87-13 139-41"/>
      <path d="M86 354C138 326 181 313 225 313s87 13 139 41"/>
      <path d="M109 111L156 158M294 158l47-47M109 369l47-47M294 322l47 47"/>
    </g>
    <g fill="url(#rr-stud)" stroke="#311707" stroke-width="5">
      <circle cx="225" cy="53" r="14"/>
      <circle cx="412" cy="240" r="14"/>
      <circle cx="225" cy="427" r="14"/>
      <circle cx="38" cy="240" r="14"/>
    </g>
    <g fill="#fff1b3" opacity="0.8">
      <circle cx="220" cy="48" r="4"/><circle cx="407" cy="235" r="4"/>
      <circle cx="220" cy="422" r="4"/><circle cx="33" cy="235" r="4"/>
    </g>

    <path d="M225 82L104 209l81-30 40 46 40-46 81 30L225 82Z" fill="url(#rr-arrow)" stroke="#fff0a2" stroke-width="4" stroke-linejoin="round"/>
    <path d="M225 398L142 307h53v-70h60v70h53l-83 91Z" fill="url(#rr-arrow)" stroke="#fff0a2" stroke-width="4" stroke-linejoin="round"/>
    <rect x="122" y="222" width="206" height="38" rx="3" fill="#f4e8c9" stroke="url(#rr-gold)" stroke-width="6"/>
    <rect x="130" y="229" width="190" height="23" fill="#fffaf0" opacity="0.58"/>

    <g transform="translate(225 241) rotate(45)" filter="url(#rr-gem-glow)">
      <rect x="-39" y="-39" width="78" height="78" rx="4" fill="url(#rr-ruby)" stroke="url(#rr-gold)" stroke-width="8"/>
      <path d="M-30-30L0-10 30-30 10 0 30 30 0 10-30 30-10 0Z" fill="none" stroke="#ff9f73" stroke-width="2" opacity="0.55"/>
    </g>
    <g transform="translate(225 241)" fill="#fff9cf">
      <path d="M0-31L5-5 31 0 5 5 0 31-5 5-31 0-5-5Z"/>
      <circle r="5" fill="#fff"/>
    </g>
  </g>`;

const enamelSigil = `
  <g id="royals-and-rogues-sigil" filter="url(#rr-shadow)" aria-label="Royals and Rogues enamel sigil">
    <image href="${sigilData}" x="9" y="24" width="452" height="452" preserveAspectRatio="xMidYMid meet"/>
  </g>`;

const wordmark = `
  <g id="royals-and-rogues-wordmark" aria-label="Royals and Rogues wordmark">
    <svg x="410" y="17" width="650" height="478" viewBox="0 0 543 399.75" preserveAspectRatio="xMidYMid meet" overflow="visible">
      ${glyphs}
    </svg>
  </g>`;

function document(background = "", sigilArtwork = enamelSigil) {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="500" viewBox="0 0 1100 500" role="img" aria-labelledby="rr-title rr-desc">
  <title id="rr-title">Royals &amp; Rogues</title>
  <desc id="rr-desc">A gold and deep-green enamel sigil joined to the cream and gold Royals &amp; Rogues wordmark.</desc>
  ${defs}
  ${background}
  <path d="M388 240H1040" stroke="#7a4914" stroke-width="2" opacity="0.45"/>
  ${sigilArtwork}
  ${wordmark}
</svg>\n`;
}

await writeFile(new URL("royals-and-rogues-complete-logo.svg", outputDir), document(), "utf8");
await writeFile(
  new URL("royals-and-rogues-complete-logo-preview.svg", outputDir),
  document('<rect width="1100" height="500" rx="28" fill="#110b08"/>'),
  "utf8",
);
await writeFile(
  new URL("royals-and-rogues-complete-logo-vector.svg", outputDir),
  document("", vectorSigil),
  "utf8",
);
