// Black fullscreen + cyan sticker-style face, plus touch-only 2 links.
// State via SSE /events from face_server (nginx proxies /events -> :8001/events)
//
// Payload example:
// {"emotion":"angry","intensity":0.9,"look":{"x":0.9,"y":0.0},"speaking":true}

(() => {
  const OVERLAY_TIMEOUT_MS = 3500;

  const clamp = (n,a,b) => Math.max(a, Math.min(b, n));
  const clamp01 = (v) => {
    const n = Number(v);
    if (Number.isNaN(n)) return 0;
    return clamp(n, 0, 1);
  };

  const EMOTIONS = new Set(["neutral","happy","sad","angry","sleepy","surprised","excited"]);

  const state = {
    emotion: "neutral",
    intensity: 0.85,
    look: { x: 0, y: 0 },
    lookLock: false,
    speaking: false,
    eyesMoving: true,
  };

  // DOM
  const stage = document.getElementById("stage");
  const overlay = document.getElementById("overlay");
  const controlLink = document.getElementById("controlLink");
  const emotionLabel = document.getElementById("emotionLabel");

  const eyeL = document.getElementById("eyeL");
  const eyeR = document.getElementById("eyeR");
  const eyesGroup = document.getElementById("eyesGroup");
  const mouth = document.getElementById("mouth");

  const topbarLit = document.getElementById("topbarLit");
  const faceGroup = document.getElementById("faceGroup");

  // Touch overlay show
  let overlayTimer = null;
  function showOverlay() {
    overlay.classList.add("show");
    clearTimeout(overlayTimer);
    overlayTimer = setTimeout(() => overlay.classList.remove("show"), OVERLAY_TIMEOUT_MS);
  }
  stage.addEventListener("pointerdown", () => showOverlay(), { passive: true });

  // Layout tuned to your reference composition
  const BASE = {
    L: { x: 360, y: 300 },
    R: { x: 640, y: 300 },
    eyeW: 170,
    eyeH: 180,
    lookMaxPx: 28,
    mouthCx: 500,
    mouthY: 415,
  };

  function updateControlLink() {
    emotionLabel.textContent = state.emotion;
    controlLink.href = `/control?current=${encodeURIComponent(state.emotion)}`;
  }

  function applyIntensity(intensity) {
    state.intensity = clamp01(intensity);

    // bar brightness
    topbarLit.setAttribute("opacity", String(0.35 + state.intensity * 0.65));

    // stronger glow at high intensity
    faceGroup.setAttribute("filter", state.intensity > 0.8 ? "url(#glowStrong)" : "url(#glow)");
  }

  function setStroke(el, width) {
    el.setAttribute("fill", "none");
    el.setAttribute("stroke", `rgba(120,255,235,${0.86 + 0.14 * state.intensity})`);
    el.setAttribute("stroke-width", String(width));
    el.setAttribute("stroke-linecap", "round");
    el.setAttribute("stroke-linejoin", "round");
  }

  // ---- Eye shapes (icon-like) ----
  function eyeOval(cx, cy, w, h) {
    const rx = w * 0.30;
    const ry = h * 0.22;
    return `M ${cx - rx},${cy}
            C ${cx - rx},${cy - ry} ${cx - rx*0.35},${cy - ry} ${cx},${cy - ry}
            C ${cx + rx*0.35},${cy - ry} ${cx + rx},${cy - ry} ${cx + rx},${cy}
            C ${cx + rx},${cy + ry} ${cx + rx*0.35},${cy + ry} ${cx},${cy + ry}
            C ${cx - rx*0.35},${cy + ry} ${cx - rx},${cy + ry} ${cx - rx},${cy}`;
  }

  function eyeRound(cx, cy, r) {
    return `M ${cx - r},${cy}
            C ${cx - r},${cy - r} ${cx - r*0.2},${cy - r} ${cx},${cy - r}
            C ${cx + r*0.2},${cy - r} ${cx + r},${cy - r} ${cx + r},${cy}
            C ${cx + r},${cy + r} ${cx + r*0.2},${cy + r} ${cx},${cy + r}
            C ${cx - r*0.2},${cy + r} ${cx - r},${cy + r} ${cx - r},${cy}`;
  }

  function eyeSleepLine(cx, cy, w) {
    const half = w * 0.20;
    return `M ${cx - half},${cy} L ${cx + half},${cy}`;
  }

  function eyeHappyArc(cx, cy, w) {
    const half = w * 0.20;
    const lift = 22;
    return `M ${cx - half},${cy} Q ${cx},${cy + lift} ${cx + half},${cy}`;
  }

  function eyeAngrySlashL(cx, cy) { return `M ${cx - 60},${cy - 18} L ${cx + 26},${cy + 26}`; }
  function eyeAngrySlashR(cx, cy) { return `M ${cx + 60},${cy - 18} L ${cx - 26},${cy + 26}`; }

  function eyeSadSmall(cx, cy, w) {
    const rx = w * 0.16;
    const ry = 18;
    const y = cy + 8;
    return `M ${cx - rx},${y}
            C ${cx - rx},${y - ry} ${cx - rx*0.35},${y - ry} ${cx},${y - ry}
            C ${cx + rx*0.35},${y - ry} ${cx + rx},${y - ry} ${cx + rx},${y}
            C ${cx + rx},${y + ry} ${cx + rx*0.35},${y + ry} ${cx},${y + ry}
            C ${cx - rx*0.35},${y + ry} ${cx - rx},${y + ry} ${cx - rx},${y}`;
  }

  // ---- Mouth shapes (sticker-like) ----
  function mouthDot(cx, y) {
    setStroke(mouth, 24); // thick capsule-dot
    const half = 14;
    return `M ${cx - half},${y} L ${cx + half},${y}`;
  }

  function mouthLine(cx, y, w=170) {
    setStroke(mouth, 18);
    const half = w/2;
    return `M ${cx - half},${y} L ${cx + half},${y}`;
  }

  function mouthSmile(cx, y, w=190) {
    setStroke(mouth, 18);
    const half = w/2;
    return `M ${cx - half},${y} Q ${cx},${y + 70} ${cx + half},${y}`;
  }

  function mouthGrin(cx, y) {
    setStroke(mouth, 18);
    const w = 220;
    const half = w/2;
    return `M ${cx - half},${y}
            Q ${cx - half*0.15},${y + 70} ${cx},${y + 70}
            Q ${cx + half*0.15},${y + 70} ${cx + half},${y}`;
  }

  function mouthFrown(cx, y, w=190) {
    setStroke(mouth, 18);
    const half = w/2;
    return `M ${cx - half},${y + 50} Q ${cx},${y - 25} ${cx + half},${y + 50}`;
  }

  function mouthO(cx, y) {
    setStroke(mouth, 18);
    const r = 38;
    return eyeRound(cx, y + 10, r);
  }

  function mouthShout(cx, y) {
    // filled open mouth with neon outline
    mouth.setAttribute("stroke", `rgba(120,255,235,${0.90 + 0.10 * state.intensity})`);
    mouth.setAttribute("stroke-width", "18");
    mouth.setAttribute("stroke-linecap", "round");
    mouth.setAttribute("stroke-linejoin", "round");
    mouth.setAttribute("fill", "rgba(0,0,0,0.38)");

    const wTop = 90, wBot = 150, h = 78;
    const x1 = cx - wTop/2, x2 = cx + wTop/2;
    const x3 = cx + wBot/2, x4 = cx - wBot/2;
    const y1 = y - 10, y2 = y + h;
    return `M ${x1},${y1} L ${x2},${y1} L ${x3},${y2} L ${x4},${y2} Z`;
  }

  // speaking animation overlays ANY mouth shape
  let speakTimer = null;
  function startSpeaking() {
    stopSpeaking();
    let open = false;
    const base = state.emotion === "excited" ? 85 : (state.emotion === "sleepy" ? 170 : 115);

    speakTimer = setInterval(() => {
      if (!state.speaking) return;
      open = !open;
      const amp = 0.10 + 0.18 * state.intensity;
      const sy = 1 + amp * (open ? 1 : -0.35);
      const ty = open ? 5 : 0;
      mouth.setAttribute("transform", `translate(0,${ty}) scale(1,${sy})`);
    }, base);
  }

  function stopSpeaking() {
    if (speakTimer) clearInterval(speakTimer);
    speakTimer = null;
    mouth.setAttribute("transform", "");
  }

  // blink by temporarily switching to sleepy lines
  let blinkTimer = null;
  let blinking = false;

  function render() {
    // look -> subtle move of the whole eyesGroup (keeps sticker look)
    const lookX = clamp(state.look.x, -1, 1);
    const lookY = clamp(state.look.y, -1, 1);

    const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
    const lookScale = iconLocked ? 0.20 : 1.0;

    const dx = lookX * BASE.lookMaxPx * lookScale;
    const dy = lookY * BASE.lookMaxPx * lookScale;
    eyesGroup.setAttribute("transform", `translate(${dx},${dy})`);

    // eyes styling
    setStroke(eyeL, state.emotion === "excited" ? 22 : 20);
    setStroke(eyeR, state.emotion === "excited" ? 22 : 20);

    const emo = state.emotion;
    const useBlink = blinking && emo !== "sleepy";

    if (useBlink) {
      eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
      eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
    } else {
      switch (emo) {
        case "happy":
          eyeL.setAttribute("d", eyeHappyArc(BASE.L.x, BASE.L.y, BASE.eyeW));
          eyeR.setAttribute("d", eyeHappyArc(BASE.R.x, BASE.R.y, BASE.eyeW));
          break;
        case "angry":
          eyeL.setAttribute("d", eyeAngrySlashL(BASE.L.x, BASE.L.y));
          eyeR.setAttribute("d", eyeAngrySlashR(BASE.R.x, BASE.R.y));
          break;
        case "sleepy":
          eyeL.setAttribute("d", eyeSleepLine(BASE.L.x, BASE.L.y + 10, BASE.eyeW));
          eyeR.setAttribute("d", eyeSleepLine(BASE.R.x, BASE.R.y + 10, BASE.eyeW));
          break;
        case "surprised":
          eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y, 40));
          eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y, 40));
          break;
        case "excited":
          eyeL.setAttribute("d", eyeRound(BASE.L.x, BASE.L.y - 6, 46));
          eyeR.setAttribute("d", eyeRound(BASE.R.x, BASE.R.y - 6, 46));
          break;
        case "sad":
          eyeL.setAttribute("d", eyeSadSmall(BASE.L.x, BASE.L.y, BASE.eyeW));
          eyeR.setAttribute("d", eyeSadSmall(BASE.R.x, BASE.R.y, BASE.eyeW));
          break;
        default:
          eyeL.setAttribute("d", eyeOval(BASE.L.x, BASE.L.y, BASE.eyeW, BASE.eyeH));
          eyeR.setAttribute("d", eyeOval(BASE.R.x, BASE.R.y, BASE.eyeW, BASE.eyeH));
      }
    }

    // mouth mapping
    switch (emo) {
      case "neutral":
        mouth.setAttribute("d", mouthDot(BASE.mouthCx, BASE.mouthY + 20));
        break;
      case "happy":
        mouth.setAttribute("d", state.intensity > 0.75 ? mouthGrin(BASE.mouthCx, BASE.mouthY) : mouthSmile(BASE.mouthCx, BASE.mouthY, 190));
        break;
      case "excited":
        mouth.setAttribute("d", mouthGrin(BASE.mouthCx, BASE.mouthY - 6));
        break;
      case "sad":
        mouth.setAttribute("d", mouthFrown(BASE.mouthCx, BASE.mouthY - 6, 190));
        break;
      case "angry":
        mouth.setAttribute("d", mouthShout(BASE.mouthCx, BASE.mouthY - 12));
        break;
      case "sleepy":
        mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 26, 170));
        break;
      case "surprised":
        mouth.setAttribute("d", mouthO(BASE.mouthCx, BASE.mouthY - 6));
        break;
      default:
        mouth.setAttribute("d", mouthLine(BASE.mouthCx, BASE.mouthY + 20, 170));
    }

    // top bar color hint
    if (emo === "angry") topbarLit.setAttribute("stroke", "rgba(255,107,107,0.95)");
    else if (emo === "sad" || emo === "sleepy") topbarLit.setAttribute("stroke", "rgba(120,200,255,0.95)");
    else topbarLit.setAttribute("stroke", "rgba(120,255,235,0.95)");

    updateControlLink();
  }

  function scheduleBlink() {
    clearTimeout(blinkTimer);
    const base = state.emotion === "sleepy" ? 5200 : (state.emotion === "excited" ? 2000 : 2800);
    blinkTimer = setTimeout(() => {
      blinking = true;
      render();
      setTimeout(() => {
        blinking = false;
        render();
        scheduleBlink();
      }, 140);
    }, base + Math.random() * 2200);
  }

  let driftTimer = null;
  function scheduleDrift() {
    clearTimeout(driftTimer);
    if (state.lookLock) return;
    if (!state.eyesMoving) return;

    const iconLocked = (state.emotion === "angry" || state.emotion === "happy" || state.emotion === "sleepy");
    if (iconLocked) return;

    state.look = {
      x: (Math.random() * 2 - 1) * 0.5,
      y: (Math.random() * 2 - 1) * 0.35,
    };
    render();
    driftTimer = setTimeout(scheduleDrift, 900 + Math.random() * 900);
  }

  // Public API
  window.applyFaceState = (payload) => {
    if (!payload || typeof payload !== "object") return;

    if (payload.intensity !== undefined) applyIntensity(payload.intensity);
    if (typeof payload.emotion === "string") state.emotion = EMOTIONS.has(payload.emotion) ? payload.emotion : "neutral";

    if (payload.look && typeof payload.look === "object") {
      state.look = {
        x: clamp(Number(payload.look.x ?? 0), -1, 1),
        y: clamp(Number(payload.look.y ?? 0), -1, 1),
      };
      state.lookLock = true;
    } else {
      state.lookLock = false;
    }

    if (typeof payload.speaking === "boolean") state.speaking = payload.speaking;
    if (typeof payload.eyesMoving === "boolean") state.eyesMoving = payload.eyesMoving;

    render();
    scheduleBlink();
    if (!state.lookLock && state.eyesMoving) scheduleDrift();

    if (state.speaking) startSpeaking(); else stopSpeaking();
  };

  // SSE /events
  (function connectSSE(){
    let es;
    function open() {
      es = new EventSource("/events");

      // server recommended: event: state
      es.addEventListener("state", (ev) => {
        try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
      });

      // fallback for plain data:
      es.onmessage = (ev) => {
        try { window.applyFaceState(JSON.parse(ev.data)); } catch (_) {}
      };

      es.onerror = () => {
        try { es.close(); } catch (_) {}
        setTimeout(open, 1200);
      };
    }
    open();
  })();

  // Init default
  applyIntensity(state.intensity);
  updateControlLink();
  render();
  scheduleBlink();
  scheduleDrift();
})();