"use client";

import { useId } from "react";

/* Official Increlog animated logo (screen/UI only).
   Renders the SVG inline so the SMIL animations (hand draw-in,
   rotating gradient, spinning circles) keep running. Gradient IDs
   are suffixed with a React useId so multiple instances on the
   same page never collide.
   Printable documents (reports, cards) must NOT use the animated
   mark — they embed the static recolored artwork PNG instead via
   increlogLogoSvgString() below. */

const HAND_BOTTOM_D =
  "M 158.5 214.824219 L 105.664062 302.980469 C 101.777344 309.480469 104.109375 317.785156 110.835938 321.527344 C 117.5625 325.269531 126.199219 323.042969 130.085938 316.542969 L 163.921875 260.078125 C 168.816406 251.90625 179.664062 249.105469 188.144531 253.824219 C 196.625 258.542969 199.527344 268.992188 194.632812 277.160156 L 186.050781 291.539062 C 182.15625 298.21875 184.613281 306.671875 191.542969 310.429688 C 198.316289 314.101562 206.890625 311.929688 210.914062 305.519531 L 244.085938 250.160156 C 250.667969 239.125 246.746094 225.039062 235.289062 218.660156 L 95.84375 141.074219 C 84.398438 134.777344 69.824219 138.5625 63.214844 149.550781 L 54.257812 164.535156 C 59.152344 156.363281 69.992188 153.5625 78.472656 158.28125 C 86.953125 163 89.855469 173.449219 84.96875 181.617188 L 73.449219 200.804688 C 67.167969 211.292969 70.898438 224.699219 81.78125 230.753906 C 92.660156 236.8125 106.578125 233.210938 112.859375 222.726562 L 127.820312 197.765625 C 132.714844 189.589844 143.554688 186.792969 152.03125 191.511719 C 160.511719 196.230469 163.417188 206.679688 158.527344 214.84375 Z";
const CIRCLE_BOTTOM_D =
  "M 45.300781 247.667969 C 39.011719 258.15625 42.714844 271.570312 53.613281 277.632812 C 64.507812 283.695312 78.410156 280.105469 84.703125 269.621094 C 90.996094 259.136719 87.289062 245.726562 76.394531 239.664062 C 65.5 233.601562 51.566406 237.183594 45.300781 247.667969 Z";
const HAND_TOP_D =
  "M 183.175781 127.425781 L 236.011719 39.273438 C 239.898438 32.777344 237.566406 24.472656 230.839844 20.730469 C 224.113281 16.984375 215.476562 19.214844 211.59375 25.714844 L 177.734375 82.121094 C 172.832031 90.292969 161.992188 93.074219 153.496094 88.375 C 145 83.675781 142.113281 73.210938 147.007812 65.039062 L 155.59375 50.710938 C 159.378906 43.972656 156.78125 35.554688 149.792969 31.910156 C 143.117188 28.425781 134.789062 30.535156 130.742188 36.734375 L 97.617188 92.09375 C 91.035156 103.117188 94.949219 117.195312 106.367188 123.578125 L 245.835938 201.164062 C 257.277344 207.507812 271.890625 203.734375 278.507812 192.730469 L 287.464844 177.742188 C 282.570312 185.910156 271.726562 188.710938 263.246094 183.996094 C 254.765625 179.28125 251.863281 168.828125 256.757812 160.660156 L 268.269531 141.476562 C 274.554688 130.988281 270.824219 117.582031 259.945312 111.527344 C 249.0625 105.476562 235.144531 109.066406 228.863281 119.554688 L 213.90625 144.515625 C 209.011719 152.6875 198.164062 155.488281 189.683594 150.769531 C 181.203125 146.046875 178.300781 135.605469 183.195312 127.433594 Z";
const CIRCLE_TOP_D =
  "M 296.347656 94.582031 C 302.636719 84.097656 298.9375 70.683594 288.035156 64.625 C 277.132812 58.570312 263.234375 62.152344 256.941406 72.636719 C 250.652344 83.121094 254.355469 96.53125 265.257812 102.59375 C 276.125 108.65625 290.050781 105.074219 296.339844 94.585938 Z";

export function IncrelogLogo({
  size = 38,
  className,
  animated = true,
  tone = "brand",
}: {
  size?: number;
  className?: string;
  animated?: boolean;
  /** brand = slate/teal strokes; smokewhite = warm off-white for dark surfaces (login brand panel) */
  tone?: "brand" | "smokewhite";
}) {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const g1 = `grad1Logo${uid}`;
  const g2 = `grad2Logo${uid}`;
  const g3 = `grad3Logo${uid}`;

  // gradient stop sets per tone — smokewhite keeps a hint of depth so the
  // animated rotation still reads on the teal panel
  const c =
    tone === "smokewhite"
      ? { dark: "#d6d6cf", mid: "#ecece6", light: "#f8f8f3" }
      : { dark: "#374f54", mid: "#7a9a9f", light: "#1e2c2f" };

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 342 342"
      preserveAspectRatio="xMidYMid meet"
      className={className}
      style={animated ? { filter: "drop-shadow(0 5px 15px rgba(55,79,84,0.3))" } : undefined}
      role="img"
      aria-label="Increlog"
    >
      <defs>
        <linearGradient id={g1} gradientUnits="userSpaceOnUse" x1="0" y1="320" x2="250" y2="140">
          <stop offset="0%" stopColor={c.dark} />
          <stop offset="100%" stopColor={c.light} />
        </linearGradient>
        <linearGradient id={g2} gradientUnits="userSpaceOnUse" x1="300" y1="20" x2="90" y2="200">
          <stop offset="0%" stopColor={c.mid} />
          <stop offset="100%" stopColor={c.dark} />
        </linearGradient>
        <linearGradient id={g3} gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="100">
          <stop offset="0%" stopColor={c.dark} />
          <stop offset="50%" stopColor={c.mid} />
          <stop offset="100%" stopColor={c.dark} />
          {animated && (
            <animateTransform
              attributeName="gradientTransform"
              type="rotate"
              values="0 50 50;360 50 50"
              dur="3s"
              repeatCount="indefinite"
            />
          )}
        </linearGradient>
      </defs>

      {/* First hand (bottom-left) */}
      <path
        stroke={`url(#${g1})`}
        strokeWidth="8"
        strokeLinejoin="round"
        strokeLinecap="round"
        fill="none"
        d={HAND_BOTTOM_D}
      >
        {animated && (
          <>
            <animate
              attributeName="stroke-dasharray"
              values="0 1 359 0;0 359 1 0;359 1 0 0"
              dur="2s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
            />
            <animate attributeName="stroke-dashoffset" values="385;5" dur="2s" repeatCount="indefinite" />
          </>
        )}
      </path>

      {/* First circle (bottom-left) */}
      <path
        stroke={`url(#${g3})`}
        strokeWidth="10"
        strokeLinejoin="round"
        strokeLinecap="round"
        fill="none"
        d={CIRCLE_BOTTOM_D}
      >
        {animated && (
          <>
            <animate
              attributeName="stroke-dasharray"
              values="270 90;0 360;270 90"
              dur="2s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
            />
            <animate attributeName="stroke-dashoffset" values="385;5" dur="2s" repeatCount="indefinite" />
            <animateTransform
              attributeName="transform"
              type="rotate"
              values="0 65 258;270 65 258;270 65 258;540 65 258;540 65 258;810 65 258;810 65 258;1080 65 258;1080 65 258"
              keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1"
              dur="8s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"
            />
          </>
        )}
      </path>

      {/* Second hand (top-right) */}
      <path
        stroke={`url(#${g2})`}
        strokeWidth="8"
        strokeLinejoin="round"
        strokeLinecap="round"
        fill="none"
        d={HAND_TOP_D}
      >
        {animated && (
          <>
            <animate
              attributeName="stroke-dasharray"
              values="0 1 359 0;0 359 1 0;359 1 0 0"
              dur="2s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
            />
            <animate attributeName="stroke-dashoffset" values="385;5" dur="2s" repeatCount="indefinite" />
          </>
        )}
      </path>

      {/* Second circle (top-right) */}
      <path
        stroke={`url(#${g3})`}
        strokeWidth="10"
        strokeLinejoin="round"
        strokeLinecap="round"
        fill="none"
        d={CIRCLE_TOP_D}
      >
        {animated && (
          <>
            <animate
              attributeName="stroke-dasharray"
              values="270 90;0 360;270 90"
              dur="2s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
            />
            <animate attributeName="stroke-dashoffset" values="385;5" dur="2s" repeatCount="indefinite" />
            <animateTransform
              attributeName="transform"
              type="rotate"
              values="0 276 83;270 276 83;270 276 83;540 276 83;540 276 83;810 276 83;810 276 83;1080 276 83;1080 276 83"
              keyTimes="0;0.125;0.25;0.375;0.5;0.625;0.75;0.875;1"
              dur="8s"
              repeatCount="indefinite"
              calcMode="spline"
              keySplines="0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1;0.4 0 0.6 1"
            />
          </>
        )}
      </path>
    </svg>
  );
}

/* Static, print-safe Increlog mark for printable documents only
   (certificates, report footers, ID cards). Uses the recolored 3D
   artwork PNG (app reference teal #24695c, transparent background)
   so nothing animates on paper and it can be embedded any number
   of times in the same printed batch. */
export function increlogLogoSvgString(size: number): string {
  return (
    `<img src="/assets/images/increlog-logo.png" alt="Increlog" width="${size}" height="${size}" ` +
    `draggable="false" style="height:${size}px;width:auto;vertical-align:-${Math.max(1, Math.round(size / 6))}px"/>`
  );
}