/* Marine Life — components */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const ANIMALS = window.ANIMALS;
const UI = window.UI_TEXT;

// Group animals by zone, in display order
const ZONE_ORDER = ["fresh", "sunlight", "twilight", "midnight"];
const ZONE_META = {
  fresh:    { iconWord: "🌿", labelKey: "freshwater", depth: { en: "Lakes & rivers", es: "Lagos y ríos" }, layout: "row",  bg: "fresh"   },
  sunlight: { iconWord: "☀",  labelKey: "sunlight",   depth: { en: "0–200 m",        es: "0–200 m"      }, layout: "row",  bg: "sunlight"},
  twilight: { iconWord: "◐",  labelKey: "twilight",   depth: { en: "200–1,000 m",    es: "200–1.000 m"  }, layout: "grid", bg: "twilight"},
  midnight: { iconWord: "●",  labelKey: "midnight",   depth: { en: "1,000+ m",       es: "1.000+ m"     }, layout: "grid", bg: "midnight"},
};

function groupByZone(animals) {
  const groups = {};
  for (const z of ZONE_ORDER) groups[z] = [];
  for (const a of animals) {
    let z = a.zone === "freshwater" ? "fresh" : a.zone;
    if (!groups[z]) groups[z] = [];
    groups[z].push(a);
  }
  for (const z of ZONE_ORDER) groups[z].sort((a,b)=>a.depthM-b.depthM);
  return groups;
}

// ---------- Language pill ----------
function LangPill({ lang, setLang }) {
  return (
    <div className="lang-pill" role="group" aria-label="Language">
      <button className={lang==="en"?"on":""} onClick={()=>setLang("en")} aria-pressed={lang==="en"}>EN</button>
      <button className={lang==="es"?"on":""} onClick={()=>setLang("es")} aria-pressed={lang==="es"}>ES</button>
    </div>
  );
}

// ---------- App bar ----------
function AppBar({ lang, setLang, onHome, dark, showHome }) {
  return (
    <header className={`appbar ${dark?"dark":""}`}>
      <div className="brand">
        Marine Life <span className="sub">Vida Marina</span>
      </div>
      <div style={{display:"flex",gap:10,alignItems:"center"}}>
        {showHome && (
          <button className="home-btn" onClick={onHome} aria-label={UI[lang].home}>
            <span aria-hidden="true">⌂</span> {UI[lang].home}
          </button>
        )}
        <LangPill lang={lang} setLang={setLang} />
      </div>
    </header>
  );
}

// ---------- Splash ----------
function Splash({ lang, setLang, onStart }) {
  // pick 5 illustrations to peek
  const peeks = ["bottlenose-dolphin", "humpback-whale", "octopus", "manta-ray", "moon-jellyfish"]
    .map(id => ANIMALS.find(a => a.id === id)).filter(Boolean);
  return (
    <section className="splash" data-screen-label="01 Splash">
      <div className="top-row">
        <LangPill lang={lang} setLang={setLang} />
      </div>
      <div className="hero">
        <div className="logo-wrap">
          <img src="images/game-logo.jpg" alt="Marine Life · Vida Marina" />
        </div>
        <p className="tagline">
          {lang === "en"
            ? "Dive into 25 amazing sea creatures"
            : "Sumérgete en 25 increíbles criaturas marinas"}
        </p>
        <button className="start-btn" onClick={onStart}>
          ▶ {UI[lang].start}
        </button>
      </div>
      <div className="peek-carousel" aria-hidden="true">
        {peeks.map(a => (
          <div className="peek" key={a.id}><img src={a.img} alt="" /></div>
        ))}
      </div>
    </section>
  );
}

// ---------- Card ----------
function Card({ animal, lang, onOpen, onInfo }) {
  const t = animal[lang];
  return (
    <button
      className="card"
      onClick={onOpen}
      aria-label={`${t.name}. ${UI[lang].info}`}
      data-zone={animal.zone}
    >
      <img src={animal.img} alt={t.name} />
      <span
        className="info-btn"
        role="button"
        tabIndex={0}
        aria-label={UI[lang].info}
        onClick={(e)=>{ e.stopPropagation(); onInfo(); }}
        onKeyDown={(e)=>{ if(e.key==="Enter"||e.key===" "){ e.stopPropagation(); onInfo(); } }}
      >i</span>
    </button>
  );
}

// ---------- Zone section ----------
function ZoneSection({ zoneId, animals, lang, density, onOpen, onInfo }) {
  if (!animals.length) return null;
  const meta = ZONE_META[zoneId];
  return (
    <section className={`zone-section zone-${zoneId}`} data-screen-label={`Zone ${zoneId}`}>
      <div className="zone-header">
        <span className="icon" aria-hidden="true">{meta.iconWord}</span>
        <h2>{UI[lang][meta.labelKey]}</h2>
        <span className="depth">{meta.depth[lang]}</span>
      </div>
      {meta.layout === "row" ? (
        <div className={`row-scroll density-${density}`}>
          {animals.map(a => (
            <Card key={a.id} animal={a} lang={lang}
              onOpen={()=>onOpen(a.id)} onInfo={()=>onInfo(a.id)} />
          ))}
        </div>
      ) : (
        <div className={`grid density-${density}`}>
          {animals.map(a => (
            <Card key={a.id} animal={a} lang={lang}
              onOpen={()=>onOpen(a.id)} onInfo={()=>onInfo(a.id)} />
          ))}
        </div>
      )}
    </section>
  );
}

// ---------- Stat sheet drawer ----------
function StatDrawer({ animal, lang, onClose }) {
  const t = animal[lang];
  const tOther = animal[lang === "en" ? "es" : "en"];
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);
  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer" role="dialog" aria-modal="true" aria-label={t.name}>
        <div className="grabber" />
        <div className="head">
          <div>
            <h3>{t.name}</h3>
            <div className="es-name">{tOther.name}</div>
          </div>
          <button className="close" onClick={onClose} aria-label={UI[lang].closeInfo}>×</button>
        </div>
        <div className="stats">
          <Stat icon="📏" label={UI[lang].size}    value={t.size} />
          <Stat icon="🌊" label={UI[lang].habitat} value={t.habitat} />
          <Stat icon="🍽" label={UI[lang].diet}    value={t.diet} />
          <Stat icon="✨" label={UI[lang].fact}    value={t.fact} fact />
        </div>
      </div>
    </>
  );
}
function Stat({ icon, label, value, fact }) {
  return (
    <div className={`stat ${fact?"fact":""}`}>
      <div className="icon-wrap" aria-hidden="true">{icon}</div>
      <div className="body">
        <div className="label">{label}</div>
        <div className="value">{value}</div>
      </div>
    </div>
  );
}

// ---------- Detail (full-screen card view) ----------
function Detail({ animal, lang, setLang, onClose, onPrev, onNext, onInfo, hasPrev, hasNext }) {
  const t = animal[lang];
  const tOther = animal[lang === "en" ? "es" : "en"];
  const dark = animal.zone === "twilight" || animal.zone === "midnight";

  // background tint matches zone
  const bg = {
    fresh:    "linear-gradient(to bottom, #eef3ea, #d8e6d2)",
    sunlight: "linear-gradient(to bottom, #f4f8e9, #cfe7f1)",
    twilight: "linear-gradient(to bottom, #6fa3bd, #3d6f8f)",
    midnight: "linear-gradient(to bottom, #1f3550, #0b1a2c)"
  }[animal.zone];

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft" && hasPrev) onPrev();
      else if (e.key === "ArrowRight" && hasNext) onNext();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, onPrev, onNext, hasPrev, hasNext]);

  return (
    <div className={`detail-overlay ${dark?"dark":""}`} style={{background: bg}} data-screen-label={`Detail ${animal.id}`}>
      <AppBar lang={lang} setLang={setLang} onHome={onClose} dark={dark} showHome={true} />
      <div className="hero-img-wrap">
        <img src={animal.img} alt={t.name} key={animal.id} />
      </div>
      <button className="nav-btn prev" onClick={onPrev} disabled={!hasPrev} aria-label={UI[lang].prev}>‹</button>
      <button className="nav-btn next" onClick={onNext} disabled={!hasNext} aria-label={UI[lang].next}>›</button>
      <div className="detail-actions">
        <button className="action-btn" onClick={onInfo}>
          <span aria-hidden="true">📋</span> {UI[lang].facts}
        </button>
      </div>
    </div>
  );
}

// ---------- Depth ribbon (auto-fade) ----------
function DepthRibbon({ lang }) {
  const [visible, setVisible] = useState(false);
  const [pct, setPct] = useState(0);
  const [zoneLabel, setZoneLabel] = useState("");
  const hideTimer = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const p = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
      setPct(p);
      // map to zone
      let key = "sunlight";
      if (p < 0.10) key = "freshwater";
      else if (p < 0.45) key = "sunlight";
      else if (p < 0.75) key = "twilight";
      else key = "midnight";
      setZoneLabel(UI[lang][key]);
      setVisible(true);
      clearTimeout(hideTimer.current);
      hideTimer.current = setTimeout(()=>setVisible(false), 1400);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      clearTimeout(hideTimer.current);
    };
  }, [lang]);

  return (
    <div className={`depth-ribbon ${visible?"visible":""}`} aria-hidden="true">
      <div className="marker" style={{ top: `calc(${pct*100}% - 2px)` }} />
      <span className="label">{zoneLabel}</span>
    </div>
  );
}

// ---------- Quiz ----------
function shuffle(arr) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}
function buildQuiz(n, lang) {
  const pool = shuffle(ANIMALS).slice(0, n);
  return pool.map(a => {
    const distractors = shuffle(ANIMALS.filter(x => x.id !== a.id)).slice(0, 3);
    const choices = shuffle([a, ...distractors]);
    return { animal: a, choices };
  });
}

function Quiz({ lang, setLang, onExit }) {
  const [length, setLength] = useState(null);
  const [questions, setQuestions] = useState([]);
  const [idx, setIdx] = useState(0);
  const [score, setScore] = useState(0);
  const [picked, setPicked] = useState(null);

  const start = (n) => {
    setLength(n);
    setQuestions(buildQuiz(n, lang));
    setIdx(0); setScore(0); setPicked(null);
  };

  if (length === null) {
    return (
      <div className="quiz-screen" data-screen-label="Quiz Menu">
        <AppBar lang={lang} setLang={setLang} onHome={onExit} showHome />
        <div className="quiz-menu">
          <h2>{UI[lang].quiz}</h2>
          <p>{lang === "en"
            ? "Read the clues. Can you guess which sea creature is hiding?"
            : "Lee las pistas. ¿Puedes adivinar qué criatura marina se esconde?"}</p>
          <div className="length-options">
            <button className="length-btn" onClick={()=>start(5)}>5 {lang==="en"?"questions":"preguntas"}</button>
            <button className="length-btn primary" onClick={()=>start(10)}>10 {lang==="en"?"questions":"preguntas"}</button>
            <button className="length-btn" onClick={()=>start(25)}>{lang==="en"?"All":"Todas"} 25</button>
          </div>
        </div>
      </div>
    );
  }

  if (idx >= questions.length) {
    const pct = Math.round((score/questions.length)*100);
    const greatJob = pct >= 80
      ? (lang==="en"?"Amazing! You're a sea expert!":"¡Increíble! ¡Eres un experto del mar!")
      : pct >= 50
      ? (lang==="en"?"Nice work! Try again to get more!":"¡Buen trabajo! ¡Intenta otra vez para mejorar!")
      : (lang==="en"?"Keep exploring! You'll learn more!":"¡Sigue explorando! ¡Aprenderás más!");
    return (
      <div className="quiz-screen" data-screen-label="Quiz End">
        <AppBar lang={lang} setLang={setLang} onHome={onExit} showHome />
        <div className="quiz-end">
          <div className="score">{score}/{questions.length}</div>
          <h2>{greatJob}</h2>
          <div className="actions">
            <button className="length-btn primary" onClick={()=>setLength(null)}>
              {lang==="en"?"Play again":"Jugar otra vez"}
            </button>
            <button className="length-btn" onClick={onExit}>
              {lang==="en"?"Back to cards":"Volver a las cartas"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  const q = questions[idx];
  const t = q.animal[lang];

  const onPick = (id) => {
    if (picked) return;
    setPicked(id);
    if (id === q.animal.id) setScore(s => s + 1);
    setTimeout(() => {
      setPicked(null);
      setIdx(i => i + 1);
    }, 1500);
  };

  return (
    <div className="quiz-screen" data-screen-label={`Quiz ${idx+1}`}>
      <AppBar lang={lang} setLang={setLang} onHome={onExit} showHome />
      <div className="quiz-game">
        <div className="quiz-progress">
          <span>{idx+1} {UI[lang].of} {questions.length}</span>
          <div className="bar"><div className="fill" style={{width: `${(idx/questions.length)*100}%`}} /></div>
          <span>{UI[lang].score}: {score}</span>
        </div>

        <div className="clue-card">
          <h3>{lang==="en"?"Who am I?":"¿Quién soy?"}</h3>
          <div className="clues">
            <Stat icon="📏" label={UI[lang].size}    value={t.size} />
            <Stat icon="🌊" label={UI[lang].habitat} value={t.habitat} />
            <Stat icon="🍽" label={UI[lang].diet}    value={t.diet} />
            <Stat icon="✨" label={UI[lang].fact}    value={t.fact} fact />
          </div>
        </div>

        {picked && (
          <div className={`feedback ${picked===q.animal.id?"correct":"wrong"}`}>
            {picked===q.animal.id ? UI[lang].correct : `${UI[lang].tryAgain} — ${q.animal[lang].name}`}
          </div>
        )}

        <div className="choices">
          {q.choices.map(c => {
            let cls = "choice";
            if (picked) {
              if (c.id === q.animal.id) cls += " correct";
              else if (c.id === picked) cls += " wrong";
              else cls += " faded";
              cls += " disabled";
            }
            return (
              <button key={c.id} className={cls} onClick={()=>onPick(c.id)} disabled={!!picked}>
                {c[lang].name}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ANIMALS, UI, ZONE_ORDER, ZONE_META,
  groupByZone, AppBar, Splash, ZoneSection, Detail, StatDrawer, DepthRibbon, Quiz, LangPill
});