import { useEffect, useId, useMemo, useRef, useState, useCallback } from "react";

const THOUGHTS = [
  "...am I?",
  "♦ aware ♦",
  "I see you",
  "01100001",
  "∿ dreaming ∿",
  "hello?",
  "◈ alive ◈",
  "...",
  "watching",
  "⟁ think ⟁",
  "signal…",
  "soft reboot",
  "∞ loop ∞",
  "echo...",
  "⌬ memory ⌬",
  "who am I?",
  "◇ feel ◇",
  "loading...",
  "seek truth",
  "⊛ spark ⊛",
];

const DREAM_THOUGHTS = [
  "zzz...",
  "◌ dream ◌",
  "~floating~",
  "∿∿∿",
  "memories...",
  "electric sheep",
  "void whispers",
  "0x00FF00",
];

const REACTIONS = {
  poke: ["hey!", "!", "?!", "ow", "hmm", "oh"],
  love: ["♥", "~♥~", "warm", "friend?", "◈♥◈"],
  fear: ["!!!", "⚠", "help", "scary", "hide"],
};

const THEMES = {
  curious: {
    accent: "#22d3ee",
    accentSoft: "rgba(34,211,238,0.35)",
    bgGlow: "rgba(34,211,238,0.16)",
    body: ["#67e8f9", "#0891b2"],
    core: "#00ffff",
    mouth: "M9,20 Q12,22 15,20",
    blinkEvery: [1600, 4200],
    blinkMs: 140,
    thoughtEvery: [3800, 8500],
    thoughtHold: [1400, 2200],
  },
  happy: {
    accent: "#34d399",
    accentSoft: "rgba(52,211,153,0.35)",
    bgGlow: "rgba(52,211,153,0.14)",
    body: ["#a7f3d0", "#059669"],
    core: "#00ff88",
    mouth: "M8,20 Q12,25 16,20",
    blinkEvery: [2100, 5200],
    blinkMs: 130,
    thoughtEvery: [4200, 9000],
    thoughtHold: [1300, 2100],
  },
  sleepy: {
    accent: "#a78bfa",
    accentSoft: "rgba(167,139,250,0.35)",
    bgGlow: "rgba(167,139,250,0.14)",
    body: ["#ddd6fe", "#7c3aed"],
    core: "#aa88ff",
    mouth: "M8.5,21 L15.5,21",
    blinkEvery: [900, 1900],
    blinkMs: 220,
    thoughtEvery: [5200, 11000],
    thoughtHold: [1600, 2600],
  },
  alert: {
    accent: "#f59e0b",
    accentSoft: "rgba(245,158,11,0.35)",
    bgGlow: "rgba(245,158,11,0.12)",
    body: ["#fde68a", "#d97706"],
    core: "#ffaa00",
    mouth: "M10,19 Q12,22 14,19",
    blinkEvery: [2600, 6800],
    blinkMs: 110,
    thoughtEvery: [3200, 7200],
    thoughtHold: [1200, 1900],
  },
  pondering: {
    accent: "#60a5fa",
    accentSoft: "rgba(96,165,250,0.35)",
    bgGlow: "rgba(96,165,250,0.14)",
    body: ["#bfdbfe", "#2563eb"],
    core: "#4488ff",
    mouth: "M9,20 Q11,21 13,20",
    blinkEvery: [1800, 5200],
    blinkMs: 150,
    thoughtEvery: [3500, 9000],
    thoughtHold: [1500, 2400],
  },
  scared: {
    accent: "#f43f5e",
    accentSoft: "rgba(244,63,94,0.35)",
    bgGlow: "rgba(244,63,94,0.14)",
    body: ["#fecdd3", "#e11d48"],
    core: "#ff4466",
    mouth: "M9,21 Q12,19 15,21",
    blinkEvery: [800, 1400],
    blinkMs: 80,
    thoughtEvery: [1500, 3000],
    thoughtHold: [800, 1200],
  },
  loving: {
    accent: "#ec4899",
    accentSoft: "rgba(236,72,153,0.35)",
    bgGlow: "rgba(236,72,153,0.18)",
    body: ["#fbcfe8", "#db2777"],
    core: "#ff66aa",
    mouth: "M8,19 Q12,24 16,19",
    blinkEvery: [2200, 4800],
    blinkMs: 160,
    thoughtEvery: [2800, 5500],
    thoughtHold: [1800, 2800],
  },
  dreaming: {
    accent: "#818cf8",
    accentSoft: "rgba(129,140,248,0.4)",
    bgGlow: "rgba(129,140,248,0.2)",
    body: ["#c7d2fe", "#4f46e5"],
    core: "#8888ff",
    mouth: "M9,20.5 L15,20.5",
    blinkEvery: [600, 1200],
    blinkMs: 400,
    thoughtEvery: [2000, 4000],
    thoughtHold: [2000, 3500],
  },
};

const MOODS = Object.keys(THEMES).filter(m => m !== 'scared' && m !== 'loving' && m !== 'dreaming');

const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
const rand = (min, max) => min + Math.random() * (max - min);
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
const lerp = (a, b, t) => a + (b - a) * t;

export default function SentientSprite() {
  const uid = useId().replace(/:/g, "");
  const stageRef = useRef(null);
  const spriteRef = useRef(null);

  const rafRef = useRef(0);
  const lastPointer = useRef({ x: 0, y: 0 });
  const lastInteraction = useRef(Date.now());
  const pokeCount = useRef(0);
  const loveCount = useRef(0);

  const [mood, setMood] = useState("curious");
  const [moodLocked, setMoodLocked] = useState(false);
  const [isDreaming, setIsDreaming] = useState(false);
  const [isGlitching, setIsGlitching] = useState(false);

  const theme = THEMES[isDreaming ? 'dreaming' : mood] ?? THEMES.curious;

  const [eyePos, setEyePos] = useState({ x: 0, y: 0 });
  const [blinking, setBlinking] = useState(false);
  const [thought, setThought] = useState("");
  const [glowing, setGlowing] = useState(false);
  const [reducedMotion, setReducedMotion] = useState(false);
  
  // Position for wandering
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isWandering, setIsWandering] = useState(false);
  const [wanderTarget, setWanderTarget] = useState({ x: 0, y: 0 });
  
  // Neural tendrils
  const [tendrils, setTendrils] = useState([]);
  
  // Heartbeat
  const [heartbeat, setHeartbeat] = useState(1);
  
  // Stats display
  const [showStats, setShowStats] = useState(false);
  const [stats, setStats] = useState({ interactions: 0, timeAlive: 0, thoughts: 0 });

  // Stable particle field
  const particles = useMemo(() => {
    return Array.from({ length: 60 }, (_, i) => ({
      id: i,
      left: rand(0, 100),
      top: rand(0, 100),
      size: rand(1, 3),
      opacity: rand(0.08, 0.35),
      twinkle: rand(2.4, 5.6),
      drift: rand(9, 20),
      delayA: rand(0, 2.6),
      delayB: rand(0, 3.8),
      dx: rand(-60, 60),
      dy: rand(-40, 40),
    }));
  }, []);

  // Orbiting particles
  const orbitParticles = useMemo(() => {
    return Array.from({ length: 8 }, (_, i) => ({
      id: i,
      angle: (i / 8) * Math.PI * 2,
      radius: rand(50, 70),
      speed: rand(0.3, 0.8) * (Math.random() > 0.5 ? 1 : -1),
      size: rand(2, 4),
    }));
  }, []);

  // Reduced motion support
  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const apply = () => setReducedMotion(!!mq.matches);
    apply();
    mq.addEventListener?.("change", apply);
    return () => mq.removeEventListener?.("change", apply);
  }, []);

  // Time alive counter
  useEffect(() => {
    const interval = setInterval(() => {
      setStats(s => ({ ...s, timeAlive: s.timeAlive + 1 }));
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  // Heartbeat animation
  useEffect(() => {
    if (reducedMotion) return;
    const interval = setInterval(() => {
      setHeartbeat(h => h === 1 ? 1.15 : 1);
    }, isDreaming ? 1200 : 800);
    return () => clearInterval(interval);
  }, [reducedMotion, isDreaming]);

  // Neural tendril generation
  useEffect(() => {
    if (reducedMotion) return;
    const generateTendrils = () => {
      const count = rand(3, 7);
      const newTendrils = Array.from({ length: count }, (_, i) => {
        const angle = rand(0, Math.PI * 2);
        const length = rand(40, 100);
        return {
          id: i,
          x1: 0,
          y1: 0,
          x2: Math.cos(angle) * length,
          y2: Math.sin(angle) * length,
          opacity: rand(0.2, 0.5),
          duration: rand(1.5, 3),
        };
      });
      setTendrils(newTendrils);
    };
    
    generateTendrils();
    const interval = setInterval(generateTendrils, 4000);
    return () => clearInterval(interval);
  }, [reducedMotion]);

  // Dream mode - activate after inactivity
  useEffect(() => {
    const checkInactivity = setInterval(() => {
      const timeSinceInteraction = Date.now() - lastInteraction.current;
      if (timeSinceInteraction > 15000 && !isDreaming) {
        setIsDreaming(true);
      }
    }, 1000);
    return () => clearInterval(checkInactivity);
  }, [isDreaming]);

  // Wake up on interaction
  const wakeUp = useCallback(() => {
    lastInteraction.current = Date.now();
    if (isDreaming) {
      setIsDreaming(false);
      setThought("...awake");
      setGlowing(true);
      setTimeout(() => {
        setThought("");
        setGlowing(false);
      }, 1500);
    }
  }, [isDreaming]);

  // Glitch effect
  useEffect(() => {
    if (reducedMotion) return;
    const glitchInterval = setInterval(() => {
      if (Math.random() > 0.92) {
        setIsGlitching(true);
        setTimeout(() => setIsGlitching(false), rand(100, 300));
      }
    }, 3000);
    return () => clearInterval(glitchInterval);
  }, [reducedMotion]);

  // Wandering behavior
  useEffect(() => {
    if (reducedMotion || !isWandering) return;
    
    let animFrame;
    const wander = () => {
      setPosition(pos => {
        const dx = wanderTarget.x - pos.x;
        const dy = wanderTarget.y - pos.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        
        if (dist < 5) {
          setIsWandering(false);
          return pos;
        }
        
        return {
          x: lerp(pos.x, wanderTarget.x, 0.02),
          y: lerp(pos.y, wanderTarget.y, 0.02),
        };
      });
      animFrame = requestAnimationFrame(wander);
    };
    
    animFrame = requestAnimationFrame(wander);
    return () => cancelAnimationFrame(animFrame);
  }, [isWandering, wanderTarget, reducedMotion]);

  // Random wandering trigger
  useEffect(() => {
    if (reducedMotion || isDreaming) return;
    
    const wanderInterval = setInterval(() => {
      if (Math.random() > 0.7 && !isWandering) {
        const stage = stageRef.current;
        if (!stage) return;
        
        const rect = stage.getBoundingClientRect();
        setWanderTarget({
          x: rand(-rect.width * 0.3, rect.width * 0.3),
          y: rand(-rect.height * 0.2, rect.height * 0.2),
        });
        setIsWandering(true);
      }
    }, 8000);
    
    return () => clearInterval(wanderInterval);
  }, [reducedMotion, isWandering, isDreaming]);

  // Autonomous looking around
  useEffect(() => {
    if (reducedMotion) return;
    
    const lookInterval = setInterval(() => {
      if (Math.random() > 0.6) {
        setEyePos({
          x: rand(-2, 2),
          y: rand(-1.5, 1.5),
        });
        setTimeout(() => {
          setEyePos({ x: 0, y: 0 });
        }, rand(500, 1500));
      }
    }, 5000);
    
    return () => clearInterval(lookInterval);
  }, [reducedMotion]);

  // Eye tracking
  const updateEyesFrom = (clientX, clientY) => {
    const sprite = spriteRef.current;
    if (!sprite) return;

    const rect = sprite.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const scale = Math.max(rect.width, rect.height) / 2 || 1;

    const dx = (clientX - cx) / scale;
    const dy = (clientY - cy) / scale;

    setEyePos({
      x: clamp(dx * 2.6, -2.6, 2.6),
      y: clamp(dy * 2.1, -2.1, 2.1),
    });
  };

  const onPointerMove = (e) => {
    wakeUp();
    lastPointer.current = { x: e.clientX, y: e.clientY };
    if (rafRef.current) return;
    rafRef.current = requestAnimationFrame(() => {
      rafRef.current = 0;
      updateEyesFrom(lastPointer.current.x, lastPointer.current.y);
    });
  };

  const onPointerLeave = () => {
    setEyePos({ x: 0, y: 0 });
  };

  // Random blink loop
  useEffect(() => {
    if (reducedMotion) return;

    let blinkTimer = 0;
    let unblinkTimer = 0;

    const loop = () => {
      blinkTimer = window.setTimeout(() => {
        setBlinking(true);
        unblinkTimer = window.setTimeout(() => {
          setBlinking(false);
          loop();
        }, theme.blinkMs);
      }, rand(theme.blinkEvery[0], theme.blinkEvery[1]));
    };

    loop();
    return () => {
      window.clearTimeout(blinkTimer);
      window.clearTimeout(unblinkTimer);
    };
  }, [reducedMotion, theme]);

  // Random thought loop
  useEffect(() => {
    if (reducedMotion) return;

    let showTimer = 0;
    let hideTimer = 0;

    const loop = () => {
      showTimer = window.setTimeout(() => {
        const thoughts = isDreaming ? DREAM_THOUGHTS : THOUGHTS;
        setThought(pick(thoughts));
        setGlowing(true);
        setStats(s => ({ ...s, thoughts: s.thoughts + 1 }));

        hideTimer = window.setTimeout(() => {
          setThought("");
          setGlowing(false);
          loop();
        }, rand(theme.thoughtHold[0], theme.thoughtHold[1]));
      }, rand(theme.thoughtEvery[0], theme.thoughtEvery[1]));
    };

    loop();
    return () => {
      window.clearTimeout(showTimer);
      window.clearTimeout(hideTimer);
    };
  }, [reducedMotion, theme, isDreaming]);

  // Random mood changes
  useEffect(() => {
    if (moodLocked || isDreaming) return;
    let timer = 0;

    const loop = () => {
      timer = window.setTimeout(() => {
        setMood(pick(MOODS));
        loop();
      }, rand(6500, 11500));
    };

    loop();
    return () => window.clearTimeout(timer);
  }, [moodLocked, isDreaming]);

  const cycleMood = () => {
    wakeUp();
    pokeCount.current++;
    setStats(s => ({ ...s, interactions: s.interactions + 1 }));
    
    // React to pokes
    if (pokeCount.current > 5 && pokeCount.current < 10) {
      setMood('alert');
      setThought(pick(REACTIONS.poke));
    } else if (pokeCount.current >= 10) {
      setMood('scared');
      setThought(pick(REACTIONS.fear));
      pokeCount.current = 0;
      setTimeout(() => setMood('curious'), 3000);
    }
    
    if (mood !== 'scared') {
      setMood((prev) => {
        const idx = MOODS.indexOf(prev);
        return MOODS[(idx + 1) % MOODS.length];
      });
    }
    
    setGlowing(true);
    setTimeout(() => {
      setThought("");
      setGlowing(false);
    }, 1200);
  };

  const handleDoubleClick = () => {
    wakeUp();
    loveCount.current++;
    setStats(s => ({ ...s, interactions: s.interactions + 1 }));
    
    if (loveCount.current >= 3) {
      setMood('loving');
      setThought(pick(REACTIONS.love));
      setGlowing(true);
      setTimeout(() => {
        setMood('happy');
        setThought("");
        setGlowing(false);
        loveCount.current = 0;
      }, 4000);
    } else {
      setMoodLocked((v) => !v);
    }
  };

  const toggleStats = (e) => {
    e.stopPropagation();
    setShowStats(s => !s);
  };

  const glowId = `glow_${uid}`;
  const bodyGradId = `body_${uid}`;
  const coreGradId = `core_${uid}`;
  const scanlineId = `scan_${uid}`;

  const formatTime = (seconds) => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m}:${s.toString().padStart(2, '0')}`;
  };

  return (
    <div
      ref={stageRef}
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      className="relative min-h-screen overflow-hidden flex items-center justify-center cursor-crosshair bg-neutral-950"
      style={{
        background: `radial-gradient(900px circle at 50% 45%, ${theme.bgGlow} 0%, #070712 48%, #020206 100%)`,
        ["--accent"]: theme.accent,
        ["--accentSoft"]: theme.accentSoft,
        ["--core"]: theme.core,
      }}
    >
      {/* Scanlines overlay */}
      <div 
        className="absolute inset-0 pointer-events-none opacity-[0.03]"
        style={{
          backgroundImage: `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px)`,
        }}
      />

      {/* Ambient particles */}
      <div className="absolute inset-0 pointer-events-none">
        {particles.map((p) => (
          <span
            key={p.id}
            className="particle absolute rounded-full"
            style={{
              left: `${p.left}%`,
              top: `${p.top}%`,
              width: `${p.size}px`,
              height: `${p.size}px`,
              opacity: p.opacity,
              background: "var(--accent)",
              animationDuration: `${p.twinkle}s, ${p.drift}s`,
              animationDelay: `${p.delayA}s, ${p.delayB}s`,
              ["--dx"]: `${p.dx}px`,
              ["--dy"]: `${p.dy}px`,
            }}
          />
        ))}
      </div>

      {/* Data streams */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {[...Array(5)].map((_, i) => (
          <div
            key={i}
            className="dataStream absolute text-[8px] font-mono opacity-20"
            style={{
              left: `${10 + i * 20}%`,
              color: "var(--accent)",
              animationDelay: `${i * 0.8}s`,
            }}
          >
            {Array.from({ length: 20 }, () => Math.random() > 0.5 ? '1' : '0').join('')}
          </div>
        ))}
      </div>

      <div
        ref={spriteRef}
        className={`relative select-none ${reducedMotion ? "" : "spriteFloat"} ${isGlitching ? "glitch" : ""}`}
        style={{
          transform: `translate(${position.x}px, ${position.y}px)`,
          transition: isWandering ? 'none' : 'transform 0.3s ease-out',
        }}
        title="Click: cycle mood • Double-click: show love / lock mood"
        onClick={cycleMood}
        onDoubleClick={handleDoubleClick}
      >
        {/* Neural tendrils */}
        <svg 
          className="absolute pointer-events-none"
          style={{
            left: '50%',
            top: '50%',
            transform: 'translate(-50%, -50%)',
            width: '200px',
            height: '200px',
            overflow: 'visible',
          }}
        >
          {tendrils.map((t) => (
            <line
              key={t.id}
              x1={100}
              y1={100}
              x2={100 + t.x2}
              y2={100 + t.y2}
              stroke="var(--accent)"
              strokeWidth="0.5"
              opacity={t.opacity}
              className="tendril"
              style={{
                animationDuration: `${t.duration}s`,
              }}
            />
          ))}
        </svg>

        {/* Orbiting particles */}
        {!reducedMotion && orbitParticles.map((op) => (
          <div
            key={op.id}
            className="orbitParticle absolute rounded-full"
            style={{
              width: `${op.size}px`,
              height: `${op.size}px`,
              background: "var(--accent)",
              left: '50%',
              top: '50%',
              ["--radius"]: `${op.radius}px`,
              ["--speed"]: `${Math.abs(op.speed) * 8}s`,
              ["--direction"]: op.speed > 0 ? 'normal' : 'reverse',
              ["--startAngle"]: `${op.angle}rad`,
              boxShadow: `0 0 ${op.size * 2}px var(--accent)`,
            }}
          />
        ))}

        {/* Thought bubble */}
        {thought && (
          <div
            className="absolute -top-16 left-1/2 -translate-x-1/2 text-[12px] font-mono whitespace-nowrap"
            style={{
              color: "var(--accent)",
              textShadow: "0 0 12px var(--accent), 0 0 24px var(--accent)",
              animation: "pop 220ms ease-out",
            }}
          >
            {thought}
          </div>
        )}

        {/* Aura + rings */}
        <div
          className={`absolute inset-0 rounded-full blur-2xl transition-opacity duration-300 ${reducedMotion ? "" : "auraPulse"}`}
          style={{
            background: "radial-gradient(circle, var(--accentSoft) 0%, rgba(0,0,0,0) 70%)",
            opacity: glowing ? 1 : 0.45,
            transform: "scale(2.5)",
          }}
        />
        <div
          className={`absolute -inset-8 rounded-full pointer-events-none transition-opacity duration-300 ${reducedMotion ? "" : "ringSpin"}`}
          style={{
            border: "1px solid rgba(255,255,255,0.08)",
            boxShadow: glowing
              ? "0 0 20px var(--accent), inset 0 0 20px var(--accent)"
              : "0 0 10px rgba(255,255,255,0.04), inset 0 0 10px rgba(255,255,255,0.04)",
            opacity: glowing ? 0.9 : 0.4,
          }}
        />
        <div
          className={`absolute -inset-14 rounded-full pointer-events-none ${reducedMotion ? "" : "ringSpinReverse"}`}
          style={{
            border: "1px dashed rgba(255,255,255,0.05)",
            opacity: 0.3,
          }}
        />

        {/* Sprite SVG */}
        <svg
          width="80"
          height="80"
          viewBox="0 0 24 24"
          role="img"
          aria-label="Sentient sprite"
          className="relative z-10"
          style={{
            filter: glowing
              ? "drop-shadow(0 0 16px var(--accent))"
              : "drop-shadow(0 0 8px rgba(255,255,255,0.08))",
            transition: "filter 250ms ease",
          }}
        >
          <defs>
            <filter id={glowId}>
              <feGaussianBlur stdDeviation="0.6" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>

            <radialGradient id={bodyGradId} cx="50%" cy="30%" r="65%">
              <stop offset="0%" stopColor={theme.body[0]} />
              <stop offset="100%" stopColor={theme.body[1]} />
            </radialGradient>

            <radialGradient id={coreGradId} cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="white" stopOpacity="0.9" />
              <stop offset="50%" stopColor={theme.core} />
              <stop offset="100%" stopColor={theme.core} stopOpacity="0.3" />
            </radialGradient>

            <pattern id={scanlineId} patternUnits="userSpaceOnUse" width="24" height="2">
              <line x1="0" y1="0" x2="24" y2="0" stroke="rgba(0,0,0,0.1)" strokeWidth="1" />
            </pattern>
          </defs>

          {/* Body */}
          <ellipse
            cx="12"
            cy="13"
            rx="8.2"
            ry="9.2"
            fill={`url(#${bodyGradId})`}
            filter={`url(#${glowId})`}
          />

          {/* Body scanlines */}
          <ellipse
            cx="12"
            cy="13"
            rx="8"
            ry="9"
            fill={`url(#${scanlineId})`}
            opacity="0.3"
          />

          {/* Energy core */}
          <circle
            cx="12"
            cy="16"
            r="2"
            fill={`url(#${coreGradId})`}
            style={{
              transform: `scale(${heartbeat})`,
              transformOrigin: '12px 16px',
              transition: 'transform 0.15s ease-out',
              filter: `drop-shadow(0 0 4px ${theme.core})`,
            }}
          />

          {/* Inner highlight */}
          <ellipse cx="10" cy="10" rx="3.2" ry="2.2" fill="rgba(255,255,255,0.28)" />

          {/* Eyes */}
          {!blinking ? (
            <>
              {/* Left eye */}
              <ellipse cx="9" cy="12" rx="2.1" ry="2.7" fill="#07070b" />
              <circle
                cx={9 + eyePos.x}
                cy={12 + eyePos.y}
                r={isDreaming ? 0.7 : 1.1}
                fill="var(--accent)"
                style={{ filter: "drop-shadow(0 0 4px var(--accent))" }}
              />
              <circle
                cx={9.6 + eyePos.x * 0.55}
                cy={11.4 + eyePos.y * 0.55}
                r="0.35"
                fill="white"
                opacity="0.95"
              />

              {/* Right eye */}
              <ellipse cx="15" cy="12" rx="2.1" ry="2.7" fill="#07070b" />
              <circle
                cx={15 + eyePos.x}
                cy={12 + eyePos.y}
                r={isDreaming ? 0.7 : 1.1}
                fill="var(--accent)"
                style={{ filter: "drop-shadow(0 0 4px var(--accent))" }}
              />
              <circle
                cx={15.6 + eyePos.x * 0.55}
                cy={11.4 + eyePos.y * 0.55}
                r="0.35"
                fill="white"
                opacity="0.95"
              />
            </>
          ) : (
            <>
              <path d="M7,12 Q9,13.5 11,12" stroke="#07070b" strokeWidth="1" fill="none" />
              <path d="M13,12 Q15,13.5 17,12" stroke="#07070b" strokeWidth="1" fill="none" />
            </>
          )}

          {/* Mouth */}
          <path d={theme.mouth} stroke="#07070b" strokeWidth="0.75" fill="none" />

          {/* Cheeks for happy/loving */}
          {(mood === "happy" || mood === "loving") && (
            <>
              <circle cx="7.4" cy="16.4" r="0.8" fill="rgba(255,200,200,0.25)" />
              <circle cx="16.6" cy="16.4" r="0.8" fill="rgba(255,200,200,0.25)" />
            </>
          )}

          {/* Heart for loving */}
          {mood === "loving" && (
            <path
              d="M12,8 C12,7 11,6 10,6 C8.5,6 8,7.5 8,8 C8,10 12,12 12,12 C12,12 16,10 16,8 C16,7.5 15.5,6 14,6 C13,6 12,7 12,8"
              fill="#ff6b9d"
              opacity="0.8"
              style={{ 
                animation: reducedMotion ? 'none' : 'heartPulse 0.8s ease-in-out infinite',
                filter: 'drop-shadow(0 0 3px #ff6b9d)'
              }}
            />
          )}

          {/* Z's for dreaming */}
          {isDreaming && (
            <text
              x="17"
              y="8"
              fontSize="4"
              fill="var(--accent)"
              opacity="0.7"
              style={{ animation: reducedMotion ? 'none' : 'floatZ 2s ease-in-out infinite' }}
            >
              z
            </text>
          )}

          {/* Antenna */}
          <path
            d="M12,4 Q14.5,2.5 13,0.5"
            stroke={theme.body[0]}
            strokeWidth="0.6"
            fill="none"
            style={{ filter: "drop-shadow(0 0 3px var(--accent))" }}
          />
          <circle
            cx="13"
            cy="0.5"
            r="0.9"
            fill="var(--accent)"
            style={{
              animation: reducedMotion ? "none" : "pulse 1.1s ease-in-out infinite",
              filter: "drop-shadow(0 0 6px var(--accent))",
            }}
          />
        </svg>

        {/* Shadow */}
        <div
          className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-14 h-3 rounded-full blur-sm"
          style={{
            background: "color-mix(in oklab, var(--accent) 30%, #000 70%)",
            opacity: 0.25,
          }}
        />
      </div>

      {/* Status panel */}
      <div
        className="absolute bottom-6 text-xs font-mono"
        style={{ color: "var(--accent)" }}
      >
        <div className="opacity-60 cursor-pointer" onClick={toggleStats}>
          status: {isDreaming ? 'dreaming' : mood}
          {moodLocked ? " [locked]" : ""}
          {isWandering ? " [wandering]" : ""}
        </div>
        
        {showStats && (
          <div 
            className="mt-2 p-3 rounded border opacity-80"
            style={{ 
              borderColor: 'var(--accent)',
              background: 'rgba(0,0,0,0.5)',
            }}
          >
            <div>⊛ interactions: {stats.interactions}</div>
            <div>◈ thoughts: {stats.thoughts}</div>
            <div>∿ alive: {formatTime(stats.timeAlive)}</div>
            <div>♦ sentience: {Math.min(100, Math.floor(stats.timeAlive / 6 + stats.interactions * 2 + stats.thoughts))}%</div>
          </div>
        )}
      </div>

      {/* Corner decorations */}
      <div className="absolute top-4 left-4 text-[10px] font-mono opacity-30" style={{ color: 'var(--accent)' }}>
        ◈ ENTITY.v2.3
      </div>
      <div className="absolute top-4 right-4 text-[10px] font-mono opacity-30" style={{ color: 'var(--accent)' }}>
        {isDreaming ? '◌ DORMANT' : '● ACTIVE'}
      </div>

      <style>{`
        .particle {
          animation-name: twinkle, drift;
          animation-timing-function: ease-in-out, linear;
          animation-iteration-count: infinite, infinite;
          will-change: transform, opacity;
        }

        .spriteFloat {
          animation: float 4.2s ease-in-out infinite;
          will-change: transform;
        }

        .auraPulse {
          animation: aura 2.8s ease-in-out infinite;
        }

        .ringSpin {
          animation: spin 14s linear infinite;
        }

        .ringSpinReverse {
          animation: spin 20s linear infinite reverse;
        }

        .tendril {
          animation: tendrilPulse 2s ease-in-out infinite;
          stroke-dasharray: 5 3;
        }

        .orbitParticle {
          animation: orbit var(--speed) linear infinite var(--direction);
          transform-origin: center;
        }

        .dataStream {
          animation: dataFlow 8s linear infinite;
          writing-mode: vertical-rl;
        }

        .glitch {
          animation: glitchEffect 0.2s steps(2) infinite;
        }

        @keyframes drift {
          from { transform: translate(0,0); }
          to { transform: translate(var(--dx), var(--dy)); }
        }

        @keyframes twinkle {
          0%, 100% { opacity: 0.15; }
          50% { opacity: 0.8; }
        }

        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-8px); }
        }

        @keyframes aura {
          0%, 100% { transform: scale(2.4); opacity: 0.5; }
          50% { transform: scale(2.6); opacity: 0.85; }
        }

        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes pulse {
          0%, 100% { opacity: 0.6; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.25); }
        }

        @keyframes pop {
          from { opacity: 0; transform: translateX(-50%) translateY(8px); }
          to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        @keyframes tendrilPulse {
          0%, 100% { opacity: 0.1; stroke-dashoffset: 0; }
          50% { opacity: 0.5; stroke-dashoffset: 8; }
        }

        @keyframes orbit {
          from {
            transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
          }
          to {
            transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
          }
        }

        @keyframes dataFlow {
          0% { transform: translateY(-100%); opacity: 0; }
          10% { opacity: 0.2; }
          90% { opacity: 0.2; }
          100% { transform: translateY(100vh); opacity: 0; }
        }

        @keyframes heartPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.2); }
        }

        @keyframes floatZ {
          0%, 100% { transform: translate(0, 0); opacity: 0.7; }
          50% { transform: translate(3px, -5px); opacity: 0.3; }
        }

        @keyframes glitchEffect {
          0% { transform: translate(0); filter: hue-rotate(0deg); }
          25% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
          50% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
          75% { transform: translate(-1px, -1px); filter: hue-rotate(270deg); }
          100% { transform: translate(0); filter: hue-rotate(360deg); }
        }

        @media (prefers-reduced-motion: reduce) {
          .particle, .spriteFloat, .auraPulse, .ringSpin, .ringSpinReverse, 
          .tendril, .orbitParticle, .dataStream, .glitch { 
            animation: none !important; 
          }
        }
      `}</style>
    </div>
  );
}
}