"use client";

/**
 * Avatars, drawn rather than chosen.
 *
 * ── Where the shape rules come from ───────────────────────────────────────
 * `github.com/s1dashu/ip-as-logo-skill` (MIT). That repository turned out to
 * hold **no avatar files** — it is a `SKILL.md` telling an image model how to
 * draw a mascot, plus a showcase picture. So there was nothing to download and
 * the useful thing it does have is the specification, which is followed here
 * literally:
 *
 *   · a silhouette of four to seven large basic shapes, one dominant outline;
 *   · **no sharp features** — every tip visibly blunt and rounded;
 *   · at most one species-specific element, and paired features kept in pairs;
 *   · readable at 32x32;
 *   · **exactly three colours** — two for the subject, one solid background,
 *     with facial marks reusing the subject's two;
 *   · the background solid and uniform, no texture or vignette;
 *   · the character rising out of an assigned lower corner, filling 85–95% of
 *     the square, upright, never centred.
 *
 * The one thing the spec assumes and this cannot use is an image model. These
 * are SVG, generated from the id, because an avatar has to render offline, at
 * any size, in a table row, and identically for the same person for ever.
 *
 * ── Why it is deterministic and not random ────────────────────────────────
 * The whole job of an avatar is to be *the same one* next time. The id is
 * hashed and every choice — species, colours, which corner — is read out of
 * that hash, so the same person is the same creature on every device and after
 * every deploy, with nothing stored.
 */

/* FNV-1a. Small, fast, and stable across engines — which matters, because a
   hash that differs between Node and the browser would give a person one face
   on the server and another after hydration. */
function hash(seed: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < seed.length; i++) {
    h ^= seed.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

/** A deterministic stream of small integers from one seed. */
function reader(seed: string) {
  let state = hash(seed) || 1;
  return (n: number) => {
    state ^= state << 13;
    state ^= state >>> 17;
    state ^= state << 5;
    state >>>= 0;
    return state % n;
  };
}

/*
  The palette.

  Three semantic colours per avatar, as the spec insists: two for the subject
  and one solid background. The background is the same hue as the subject at a
  much lower saturation — the spec's "lower the background saturation slightly
  while keeping it clearly chromatic" — so the square reads as one considered
  object rather than a sticker on a coloured card.

  These are the only place in the product where colour is unconstrained, and
  that is deliberate: an avatar's job is to be *told apart*, which is the one
  job a monochrome palette cannot do.
*/
const PALETTES: { base: string; mark: string; bg: string }[] = [
  { base: "#e8734a", mark: "#7c3a22", bg: "#f6ded2" },
  { base: "#4a90d9", mark: "#1f4468", bg: "#d5e5f4" },
  { base: "#5aab7a", mark: "#22503a", bg: "#d9ecdf" },
  { base: "#d9a441", mark: "#6b4c14", bg: "#f7ebd2" },
  { base: "#a97bd1", mark: "#4b2c68", bg: "#e9dcf4" },
  { base: "#d96a86", mark: "#6b2436", bg: "#f7dde3" },
  { base: "#48b0ab", mark: "#1a4f4d", bg: "#d4ecea" },
  { base: "#8c8f9a", mark: "#3a3d47", bg: "#e3e4e8" },
];

/**
 * The creatures.
 *
 * Each is four to seven blunt shapes over the same body, and each has exactly
 * one species-specific element — the rule the spec is strictest about, because
 * two of them is what turns a mascot into an illustration.
 *
 * Coordinates are in a 100x100 box whose origin is the *lower* corner the
 * character rises from. The renderer mirrors the whole group for the other
 * corner rather than each shape having two versions.
 */
type Species = (c: { base: string; mark: string }) => React.ReactNode;

const SPECIES: Species[] = [
  /* Ears — a pair, kept in a pair. */
  (c) => (
    <>
      <circle cx="30" cy="30" r="13" fill={c.base} />
      <circle cx="70" cy="30" r="13" fill={c.base} />
      <rect x="14" y="26" width="72" height="74" rx="34" fill={c.base} />
      <circle cx="38" cy="58" r="6" fill={c.mark} />
      <circle cx="62" cy="58" r="6" fill={c.mark} />
      <rect x="42" y="72" width="16" height="8" rx="4" fill={c.mark} />
    </>
  ),
  /* Horns. */
  (c) => (
    <>
      <rect x="20" y="16" width="14" height="26" rx="7" fill={c.mark} />
      <rect x="66" y="16" width="14" height="26" rx="7" fill={c.mark} />
      <rect x="12" y="30" width="76" height="70" rx="32" fill={c.base} />
      <circle cx="36" cy="60" r="6" fill={c.mark} />
      <circle cx="64" cy="60" r="6" fill={c.mark} />
      <ellipse cx="50" cy="78" rx="12" ry="7" fill={c.mark} />
    </>
  ),
  /* One pouch. */
  (c) => (
    <>
      <rect x="16" y="20" width="68" height="80" rx="30" fill={c.base} />
      <rect x="30" y="62" width="40" height="38" rx="19" fill={c.mark} opacity="0.35" />
      <circle cx="37" cy="46" r="6" fill={c.mark} />
      <circle cx="63" cy="46" r="6" fill={c.mark} />
      <rect x="40" y="56" width="20" height="7" rx="3.5" fill={c.mark} />
    </>
  ),
  /* A single crest. */
  (c) => (
    <>
      <rect x="42" y="10" width="16" height="24" rx="8" fill={c.mark} />
      <circle cx="50" cy="56" r="34" fill={c.base} />
      <rect x="22" y="66" width="56" height="34" rx="24" fill={c.base} />
      <circle cx="38" cy="52" r="6.5" fill={c.mark} />
      <circle cx="62" cy="52" r="6.5" fill={c.mark} />
      <rect x="43" y="66" width="14" height="7" rx="3.5" fill={c.mark} />
    </>
  ),
  /* Wings, paired. */
  (c) => (
    <>
      <ellipse cx="16" cy="62" rx="14" ry="22" fill={c.mark} opacity="0.5" />
      <ellipse cx="84" cy="62" rx="14" ry="22" fill={c.mark} opacity="0.5" />
      <rect x="22" y="24" width="56" height="76" rx="28" fill={c.base} />
      <circle cx="39" cy="52" r="6" fill={c.mark} />
      <circle cx="61" cy="52" r="6" fill={c.mark} />
      <circle cx="50" cy="66" r="5" fill={c.mark} />
    </>
  ),
  /* One bell. */
  (c) => (
    <>
      <rect x="18" y="22" width="64" height="78" rx="31" fill={c.base} />
      <circle cx="50" cy="84" r="10" fill={c.mark} />
      <circle cx="36" cy="50" r="6.5" fill={c.mark} />
      <circle cx="64" cy="50" r="6.5" fill={c.mark} />
      <rect x="41" y="63" width="18" height="7" rx="3.5" fill={c.mark} />
    </>
  ),
];

export type MascotSeed = string;

/**
 * Draw the mascot for a seed.
 *
 * `size` is the rendered box. The viewBox is fixed at 100x100 and the shapes
 * are laid out to fill 85–95% of it, so scaling never changes the composition —
 * which is what "readable at 32x32" requires.
 */
export function MascotAvatar({
  seed,
  size = 40,
  className,
}: {
  seed: MascotSeed;
  size?: number;
  className?: string;
}) {
  const next = reader(seed || "onthic");
  const palette = PALETTES[next(PALETTES.length)];
  const species = SPECIES[next(SPECIES.length)];
  /* Lower-left or lower-right, never centred — the spec's framing rule. The
     body is drawn once and mirrored, so a species never needs two versions. */
  const rightCorner = next(2) === 1;

  return (
    <svg
      viewBox="0 0 100 100"
      width={size}
      height={size}
      className={className}
      style={{ display: "block" }}
      aria-hidden
    >
      {/* Solid and uniform. No texture, no vignette, no lighting variation. */}
      <rect width="100" height="100" fill={palette.bg} />
      <g
        /*
          Out of the assigned corner — off centre, never centred, as the spec
          requires — but only 8%, not 14%.

          The spec assumes a square. These are rendered in a circle, and at 14%
          a secondary shape landed on the circle's edge and read as a mistake
          rather than as a crop. Eight keeps the composition asymmetric while
          the silhouette stays inside the round frame.
        */
        transform={`translate(${rightCorner ? 8 : -8}, 10)`}
      >
        {species(palette)}
      </g>
    </svg>
  );
}

/**
 * The same seed as a two-stop gradient.
 *
 * For the profile's cover band, which wanted a colour of its own per person.
 * It reads the same palette the mascot does, so a person's banner and their
 * face are the same two colours rather than two unrelated random choices.
 */
export function mascotGradient(seed: MascotSeed): string {
  const next = reader(seed || "onthic");
  const palette = PALETTES[next(PALETTES.length)];
  const angle = 100 + next(9) * 20;
  return `linear-gradient(${angle}deg, ${palette.base}, ${palette.mark})`;
}

/**
 * An avatar, wherever one is drawn.
 *
 * ── Why this replaced `getPixelFace(...) ? <PixelFace/> : <initials/>` ────
 * That pair appeared at ten call sites, and every one of them had to decide
 * what to do when the lookup missed — which is a decision none of them should
 * have been making, and which they made three different ways: initials on a
 * tinted square here, initials on a black square there, a bare glyph in the
 * third. A generated mascot has no miss: a seed always draws something, so the
 * branch disappears and with it the three answers.
 *
 * The seed is the chosen id when there is one and the person's name when there
 * is not, so somebody who has never opened the picker still has a face, and
 * still the *same* face everywhere they appear.
 *
 * ── Round, everywhere ─────────────────────────────────────────────────────
 * A face is a face whether it is 76px above a cover band or 24px beside a
 * message. Two shapes for one thing would say they are two things.
 */
export function Avatar({
  id,
  name,
  imageUrl,
  size = 32,
  className,
}: {
  /** The chosen avatar, when the account has one. */
  id?: string | null;
  /** Falls back to this, so an account that never chose still has a face. */
  name?: string | null;
  /**
   * A real photograph, from an OAuth provider.
   *
   * It wins. A generated mascot is a stand-in for a picture nobody supplied,
   * and one that overrode a picture somebody *did* supply would be the product
   * deciding it knows better.
   */
  imageUrl?: string | null;
  size?: number;
  className?: string;
}) {
  /*
    Only render an image if what arrived is actually addressable.

    `Project.clientAvatar` is named like a picture and holds `initials(name)` —
    "P", "ST", "ا". Handed to this prop it became `<img src="P">`: a *relative*
    URL, so the browser dutifully requested `/dashboard/admin/P`, got HTML back,
    and drew a broken-image glyph. No console error worth the name, nothing for
    tsc to catch — both are `string` — and the mascot fallback that exists for
    exactly this case never ran, because a non-empty string is truthy.

    A real avatar URL is always absolute (`https:`), a data/blob URL, or rooted
    at `/`. Anything else is a caller mistake, and falling back to the mascot is
    both what the caller wanted and the only thing that can be drawn.
  */
  const usable =
    !!imageUrl && /^(https?:|data:|blob:|\/)/.test(imageUrl);

  return (
    <span
      className={className}
      style={{
        display: "block",
        width: size,
        height: size,
        borderRadius: 9999,
        overflow: "hidden",
        flex: "none",
      }}
    >
      {usable ? (
        /* eslint-disable-next-line @next/next/no-img-element -- the host is a
           provider CDN that changes per account; `next/image` would need every
           one of them in `remotePatterns`, and a miss there is a broken avatar
           rather than an unoptimised one. */
        <img
          src={imageUrl}
          alt=""
          width={size}
          height={size}
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        />
      ) : (
        <MascotAvatar seed={id || name || "onthic"} size={size} />
      )}
    </span>
  );
}