Gamification System

export type AchievementId =
  | "first_step"          // Loaded the site
  | "explorer"            // Scrolled and read content
  | "curious"             // (reserved)
  | "observer"            // (reserved)
  | "map_complete"        // (reserved)
  | "services_decoded"    // Interacted with services
  | "projects_gallery"    // Explored multiple projects
  | "read_between_lines"  // (reserved)
  | "critical_thinker"    // (reserved)
  | "good_eye"            // (reserved)
  | "curious_player"      // (reserved)
  | "visual_match"        // Returned on a different day
  | "almost_talked"       // Reached contact form
  | "took_courage"        // Started writing message
  | "first_contact";      // Sent the form

const lastHumanInputAtRef = useRef(0);
const maxScrollRatioRef = useRef(0);
const ignoreScrollUntilRef = useRef(0);

useEffect(() => {
  // Mark human interaction
  const markHuman = () => {
    lastHumanInputAtRef.current = Date.now();
  };

  // 1. Detect real human input
  const onWheel = () => markHuman();
  const onTouchMove = () => markHuman();
  const onKeyDown = (e: KeyboardEvent) => {
    const keys = ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "];
    if (keys.includes(e.key)) markHuman();
  };

  window.addEventListener("wheel", onWheel, { passive: true });
  window.addEventListener("touchmove", onTouchMove, { passive: true });
  window.addEventListener("keydown", onKeyDown);

  // 2. Block scroll events after hash navigation
  const lockScroll = (ms = 1200) => {
    ignoreScrollUntilRef.current = Date.now() + ms;
  };

  window.addEventListener("hashchange", () => lockScroll(1200));

  // 3. Scroll handler - only count if human input was recent
  const onScroll = () => {
    const now = Date.now();
    const isMobile = window.matchMedia("(max-width: 768px)").matches;
    const THRESHOLD = isMobile ? 0.55 : 0.35;

    // Ignore if in blocked window (hash navigation)
    if (now < ignoreScrollUntilRef.current) return;

    // Ignore if no recent human input
    if (now - lastHumanInputAtRef.current > 800) return;

    const scrollTop = window.scrollY;
    const scrollable = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const ratio = scrollTop / scrollable;

    if (ratio > maxScrollRatioRef.current) maxScrollRatioRef.current = ratio;

    if (!hasAchievement("explorer") && maxScrollRatioRef.current >= THRESHOLD) {
      unlockAchievement("explorer");
    }
  };

  window.addEventListener("scroll", onScroll, { passive: true });
}, []);

// If user stays on a section for 2.8s with active engagement
const startExplorerTimer = () => {
  if (hasAchievement("explorer")) return;
  if (explorerTimerRef.current) return;

  explorerTimerRef.current = window.setTimeout(() => {
    explorerTimerRef.current = null;

    // Revalidate: still human interaction?
    const now2 = Date.now();
    if (now2 < ignoreScrollUntilRef.current) return;
    if (now2 - lastHumanInputAtRef.current > 2500) return;

    unlockAchievement("explorer");
    checkMissionRoute();
  }, 2800);
};

// Watch key sections with IntersectionObserver
const idsToWatch = ["services", "projects", "about", "faq", "contacto"];
const els = idsToWatch.map((id) => document.getElementById(id)).filter(Boolean);

const io = new IntersectionObserver(
  (entries) => {
    const anyGood = entries.some((en) => 
      en.isIntersecting && en.intersectionRatio >= 0.6
    );

    if (!anyGood) {
      cancelExplorerTimer();
      return;
    }

    // Only start timer if recent human interaction
    const now3 = Date.now();
    if (now3 < ignoreScrollUntilRef.current) return;
    if (now3 - lastHumanInputAtRef.current > 1200) return;

    startExplorerTimer();
  },
  { threshold: [0.6] }
);

els.forEach((el) => io.observe(el));

const servicesClicksRef = useRef(0);

useEffect(() => {
  const root = document.getElementById("services");
  if (!root) return;

  const onClickCapture = (e: Event) => {
    if (hasAchievement("services_decoded")) return;

    const target = e.target as HTMLElement | null;
    if (!target) return;

    // Count clicks on buttons within services section
    const btn = target.closest("button");
    if (!btn) return;

    servicesClicksRef.current += 1;

    // Unlock after 2 real clicks
    if (servicesClicksRef.current >= 2) {
      unlockAchievement("services_decoded");
      checkMissionRoute();
    }
  };

  root.addEventListener("click", onClickCapture, true);
}, []);

const seenSlidesRef = useRef<Set<number>>(new Set());

const getTotalSlides = () => {
  const root = document.getElementById("projects");
  const track = root?.querySelector(".flex");
  return Math.max(1, track?.children?.length ?? 0);
};

const required = () => {
  const total = getTotalSlides();
  return Math.ceil(total / 2); // Half the slides
};

const tryRegisterVisible = () => {
  if (!projectsInteractedRef.current) return; // Anti-autoplay
  if (hasAchievement("projects_gallery")) return;

  const slides = Array.from(
    root.querySelectorAll<HTMLElement>(".min-w-0.flex-\\[0_0_100\\%\\]")
  );

  // Find most visible slide
  let bestIdx = 0;
  let bestScore = -Infinity;

  slides.forEach((el, idx) => {
    const r = el.getBoundingClientRect();
    const overlap = Math.max(0, Math.min(r.right, vr.right) - Math.max(r.left, vr.left));
    if (overlap > bestScore) {
      bestScore = overlap;
      bestIdx = idx;
    }
  });

  seenSlidesRef.current.add(bestIdx);

  // Unlock when user has seen half the slides
  if (seenSlidesRef.current.size >= required()) {
    unlockAchievement("projects_gallery");
  }
};

// A) NEXT/PREV button clicks count as interaction
const onClickCapture = (e: Event) => {
  const btn = (e.target as HTMLElement).closest("button");
  if (!btn) return;

  const txt = (btn.textContent || "").trim().toUpperCase();
  if (txt === "PREVIOUS" || txt === "NEXT") {
    markInteraction();
    setTimeout(tryRegisterVisible, 250);
  }
};

// B) Swipe/drag counts as interaction
root.addEventListener("pointerdown", () => {
  markInteraction();
  setTimeout(tryRegisterVisible, 250);
});

const checkMissionRoute = () => {
  if (hasMission("mission_route")) return;

  if (
    hasAchievement("explorer") &&
    hasAchievement("services_decoded") &&
    hasAchievement("projects_gallery")
  ) {
    completeMission("mission_route");
  }
};

const projectsMs = 20_000; // 20 seconds
const aboutMs = 15_000;     // 15 seconds

const pVisibleRef = useRef(false);
const aVisibleRef = useRef(false);
const pMsRef = useRef(0);
const aMsRef = useRef(0);

useEffect(() => {
  const pEl = await waitForEl("projects");
  const aEl = await waitForEl("about");

  // IntersectionObserver tracks visibility
  const ioP = new IntersectionObserver(
    (entries) => {
      pVisibleRef.current = entries.some((e) => e.isIntersecting);
      if (pVisibleRef.current) startLoop();
    },
    { threshold: 0.6 }
  );

  // requestAnimationFrame loop accumulates time
  const loop = () => {
    if (hasMission("mission_attention")) {
      stopLoop();
      return;
    }

    // Only count time if human interaction occurred
    if (!humanRef.current) {
      rafRef.current = requestAnimationFrame(loop);
      return;
    }

    const now = performance.now();
    const dt = now - lastTickRef.current;

    if (pVisibleRef.current && !pDoneRef.current) pMsRef.current += dt;
    if (aVisibleRef.current && !aDoneRef.current) aMsRef.current += dt;

    if (pMsRef.current >= projectsMs) pDoneRef.current = true;
    if (aMsRef.current >= aboutMs) aDoneRef.current = true;

    if (pDoneRef.current && aDoneRef.current) {
      completeMission("mission_attention");
      stopLoop();
      return;
    }

    rafRef.current = requestAnimationFrame(loop);
  };
}, []);

useEffect(() => {
  if (hasMission("mission_easter")) return;

  const seq = ["G","U","I","G","O","L","O"];
  let idx = 0;
  let lastAt = 0;

  const onKey = (e: KeyboardEvent) => {
    if (hasMission("mission_easter")) return;

    const key = (e.key || "").toUpperCase();
    const now = Date.now();

    // Reset if too much time between keys (1.6s)
    if (lastAt && now - lastAt > 1600) idx = 0;
    lastAt = now;

    if (key === seq[idx]) {
      idx += 1;
      if (idx >= seq.length) {
        completeMission("mission_easter");
        idx = 0;
      }
    } else {
      // Restart if user types 'G' (allows GUUUIGOLO to still work)
      idx = key === "G" ? 1 : 0;
    }
  };

  window.addEventListener("keydown", onKey);
}, []);

const COOLDOWN_MS = 2500;
const COOLDOWN_KEY = "guigolo_achievements_cooldown_v1";

try {
  const last = Number(sessionStorage.getItem(COOLDOWN_KEY) ?? "0");
  if (now - last < COOLDOWN_MS) {
    // Don't block real form submission, only spam achievements
    if (id !== "first_contact") {
      return { unlockedNow: false, state: st, entry: { at: now, count: 1 } };
    }
  }
  sessionStorage.setItem(COOLDOWN_KEY, String(now));
} catch {}