/* global React */
// OrangeCat — the reader's guide. Variants: "sit" | "nap" | "peek".
// `riso` flag shifts the palette to the duotone realm.
const { useState: _useStateCat } = React;

function OrangeCat({ variant = "sit", size = 150, riso = false, blink = true, style = {} }) {
  // palette
  const c = riso
    ? { fur: "#F2503B", deep: "#c93722", cream: "#F4ECDC", stripe: "#2BBFB3", nose: "#2BBFB3", line: "#23201d" }
    : { fur: "var(--cat-orange)", deep: "var(--cat-orange-deep)", cream: "var(--cat-cream)", stripe: "var(--cat-stripe)", nose: "#c96a55", line: "#3a2414" };

  const [closed, setClosed] = _useStateCat(variant === "nap");
  React.useEffect(() => {
    if (!blink || variant === "nap") return;
    let t;
    const loop = () => {
      const next = 2200 + Math.random() * 3500;
      t = setTimeout(() => {
        setClosed(true);
        setTimeout(() => setClosed(false), 150);
        loop();
      }, next);
    };
    loop();
    return () => clearTimeout(t);
  }, [blink, variant]);

  const napping = variant === "nap";
  const eyesShut = napping || closed;

  return (
    <svg viewBox="0 0 200 230" width={size} height={size * 230 / 200} style={style} aria-label="Orange cat" role="img">
      {napping ? (
        // curled, sleeping
        <g>
          <ellipse cx="100" cy="158" rx="78" ry="46" fill={c.fur} />
          <ellipse cx="100" cy="158" rx="78" ry="46" fill="none" stroke={c.deep} strokeOpacity=".5" strokeWidth="2" />
          {/* tail wrapping */}
          <path d="M170 150 q34 6 22 36 q-10 22 -34 12" fill="none" stroke={c.deep} strokeWidth="16" strokeLinecap="round" />
          <path d="M170 150 q34 6 22 36 q-10 22 -34 12" fill="none" stroke={c.stripe} strokeWidth="4" strokeLinecap="round" strokeDasharray="2 14" />
          {/* head resting */}
          <circle cx="56" cy="150" r="40" fill={c.fur} />
          <path d="M28 122 l-6 -26 l26 12 Z" fill={c.fur} />
          <path d="M84 122 l8 -26 l-26 12 Z" fill={c.fur} />
          <path d="M30 120 l-3 -14 l14 7 Z" fill={c.cream} />
          {/* closed eyes */}
          <path d="M40 150 q8 6 16 0" fill="none" stroke={c.line} strokeWidth="2.4" strokeLinecap="round" />
          <path d="M64 150 q8 6 16 0" fill="none" stroke={c.line} strokeWidth="2.4" strokeLinecap="round" />
          <path d="M58 160 l5 4 l5 -4" fill="none" stroke={c.nose} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          {/* zzz */}
          <text x="120" y="92" fontFamily="'Space Mono',monospace" fontSize="16" fill={c.deep} opacity=".7">z</text>
          <text x="134" y="78" fontFamily="'Space Mono',monospace" fontSize="20" fill={c.deep} opacity=".55">Z</text>
        </g>
      ) : (
        // sitting upright
        <g>
          {/* tail curling around front-right */}
          <path d="M150 196 q44 -6 40 -52 q-3 -34 -34 -34" fill="none" stroke={c.fur} strokeWidth="20" strokeLinecap="round" />
          <path d="M150 196 q44 -6 40 -52 q-3 -34 -34 -34" fill="none" stroke={c.stripe} strokeWidth="5" strokeLinecap="round" strokeDasharray="2 18" opacity=".85" />
          {/* body */}
          <path d="M100 96 C58 96 48 150 50 184 C51 202 70 210 100 210 C130 210 149 202 150 184 C152 150 142 96 100 96 Z" fill={c.fur} />
          <ellipse cx="100" cy="176" rx="34" ry="40" fill={c.cream} opacity=".7" />
          {/* front paws */}
          <ellipse cx="80" cy="206" rx="15" ry="11" fill={c.fur} />
          <ellipse cx="120" cy="206" rx="15" ry="11" fill={c.fur} />
          <ellipse cx="80" cy="206" rx="15" ry="11" fill="none" stroke={c.deep} strokeWidth="1.5" strokeOpacity=".4" />
          <ellipse cx="120" cy="206" rx="15" ry="11" fill="none" stroke={c.deep} strokeWidth="1.5" strokeOpacity=".4" />
          {/* head */}
          <g>
            {/* ears */}
            <path d="M62 58 L52 16 L92 42 Z" fill={c.fur} />
            <path d="M138 58 L148 16 L108 42 Z" fill={c.fur} />
            <path d="M66 52 L60 28 L82 42 Z" fill={c.cream} />
            <path d="M134 52 L140 28 L118 42 Z" fill={c.cream} />
            <circle cx="100" cy="78" r="48" fill={c.fur} />
            {/* forehead stripes */}
            <path d="M100 34 v22" stroke={c.deep} strokeWidth="4" strokeLinecap="round" opacity=".55" />
            <path d="M86 38 l5 18" stroke={c.deep} strokeWidth="3.4" strokeLinecap="round" opacity=".45" />
            <path d="M114 38 l-5 18" stroke={c.deep} strokeWidth="3.4" strokeLinecap="round" opacity=".45" />
            {/* muzzle */}
            <ellipse cx="100" cy="92" rx="30" ry="24" fill={c.cream} />
            {/* eyes */}
            {eyesShut ? (
              <g>
                <path d="M72 78 q9 7 18 0" fill="none" stroke={c.line} strokeWidth="2.8" strokeLinecap="round" />
                <path d="M110 78 q9 7 18 0" fill="none" stroke={c.line} strokeWidth="2.8" strokeLinecap="round" />
              </g>
            ) : (
              <g>
                <ellipse cx="81" cy="78" rx="9" ry="11" fill="#fff" />
                <ellipse cx="119" cy="78" rx="9" ry="11" fill="#fff" />
                <circle cx="82" cy="79" r="5.4" fill={c.line} />
                <circle cx="118" cy="79" r="5.4" fill={c.line} />
                <circle cx="84" cy="76" r="1.8" fill="#fff" />
                <circle cx="120" cy="76" r="1.8" fill="#fff" />
              </g>
            )}
            {/* nose + mouth */}
            <path d="M100 92 l-5 5 h10 Z" fill={c.nose} />
            <path d="M100 97 v5 M100 102 q-7 5 -13 1 M100 102 q7 5 13 1" fill="none" stroke={c.line} strokeWidth="2" strokeLinecap="round" />
            {/* whiskers */}
            <g stroke={c.line} strokeWidth="1.4" strokeLinecap="round" opacity=".55">
              <path d="M70 92 l-26 -5 M70 99 l-26 4" />
              <path d="M130 92 l26 -5 M130 99 l26 4" />
            </g>
          </g>
        </g>
      )}
    </svg>
  );
}

window.OrangeCat = OrangeCat;