/* Pantallas del juez — Mentores Up! Steam (adaptadas para usar API + meta.js) */
const { useState: scUseState, useMemo: scUseMemo, useEffect: scUseEffect } = React;

// ---------- Login ----------
function ScreenLogin({ onLogin, prefilledCode, errorMsg }) {
  const [mode, setMode] = scUseState("code"); // "code" | "recover"
  const [code, setCode] = scUseState(prefilledCode || "");
  const [loading, setLoading] = scUseState(false);
  const [err, setErr] = scUseState(errorMsg || null);

  // Recovery state
  const [recoverEmail, setRecoverEmail] = scUseState("");
  const [recoverLoading, setRecoverLoading] = scUseState(false);
  const [recoverMsg, setRecoverMsg] = scUseState(null);
  const [recoverErr, setRecoverErr] = scUseState(null);

  async function submit(e) {
    if (e) e.preventDefault();
    if (!code.trim()) return;
    setLoading(true);
    setErr(null);
    try {
      const r = await window.API.login(code.trim().toUpperCase());
      onLogin(r);
    } catch (e2) {
      setErr(e2.message || "Código no válido");
    } finally {
      setLoading(false);
    }
  }

  async function submitRecover(e) {
    if (e) e.preventDefault();
    const email = recoverEmail.trim();
    if (!email) return;
    setRecoverLoading(true);
    setRecoverErr(null);
    setRecoverMsg(null);
    try {
      const r = await window.API.requestMagicLink(email);
      setRecoverMsg(r?.message || "Si el email está registrado, te hemos enviado un enlace de acceso.");
    } catch (e2) {
      setRecoverErr(e2.message || "No hemos podido enviar el enlace. Inténtalo de nuevo.");
    } finally {
      setRecoverLoading(false);
    }
  }

  // Auto-login si llega ?code=xxx
  scUseEffect(() => {
    if (prefilledCode && !err) {
      submit();
    }
    // eslint-disable-next-line
  }, []);

  return (
    <>
      <div style={{background:"var(--gradient-brand)", padding:"32px var(--app-pad) 28px", color:"white"}}>
        <img src="assets/logo-mentores-app-blanco.png" alt="Mentores Up! Steam" style={{height:72, marginBottom:24, display:"block"}}/>
        <h1 className="t-display" style={{color:"white", marginTop:6, marginBottom:8}}>Evalúa los proyectos de la edición 7</h1>
        <p style={{color:"rgba(255,255,255,.92)", lineHeight:1.5, fontSize:"var(--fs-md)"}}>
          {mode === "code"
            ? <>Introduce tu <b>código de mentor</b> para empezar a comparar proyectos.</>
            : <>Te enviaremos un <b>enlace de acceso</b> a tu email de mentor.</>}
        </p>
      </div>

      {mode === "code" ? (
        <form style={{padding:"28px var(--app-pad) 40px", flex:1}} onSubmit={submit}>
          <div className="field" style={{marginBottom:18}}>
            <label className="field-label">Código personal</label>
            <input
              className="input"
              type="text"
              value={code}
              onChange={(e) => setCode(e.target.value.toUpperCase())}
              placeholder="Ej: AB3D7XYZ"
              autoComplete="off"
              spellCheck="false"
              autoFocus
              style={{textTransform:"uppercase", letterSpacing:"3px", fontFamily:"ui-monospace, Menlo, monospace"}}
            />
            {err && <div className="t-caption" style={{color:"var(--danger)", marginTop:6}}>{err}</div>}
          </div>
          <button className="btn btn-primary btn-block btn-lg" type="submit" disabled={loading || !code.trim()}>
            {loading ? "Comprobando…" : "Entrar como mentor"}
          </button>
          <div style={{textAlign:"center", marginTop:16}}>
            <button type="button" className="btn btn-ghost btn-sm"
              onClick={() => { setErr(null); setMode("recover"); }}>
              ¿Has perdido tu código?
            </button>
          </div>
        </form>
      ) : (
        <form style={{padding:"28px var(--app-pad) 40px", flex:1}} onSubmit={submitRecover}>
          <div className="field" style={{marginBottom:18}}>
            <label className="field-label">Tu email de mentor</label>
            <input
              className="input"
              type="email"
              value={recoverEmail}
              onChange={(e) => setRecoverEmail(e.target.value)}
              placeholder="nombre@ejemplo.com"
              autoComplete="email"
              spellCheck="false"
              autoFocus
            />
            {recoverErr && <div className="t-caption" style={{color:"var(--danger)", marginTop:6}}>{recoverErr}</div>}
            {recoverMsg && (
              <div className="alert alert-success" style={{marginTop:10}}>
                {recoverMsg}
              </div>
            )}
          </div>
          <button className="btn btn-primary btn-block btn-lg" type="submit"
            disabled={recoverLoading || !recoverEmail.trim()}>
            {recoverLoading ? "Enviando…" : "Enviarme el enlace"}
          </button>
          <div style={{textAlign:"center", marginTop:16}}>
            <button type="button" className="btn btn-ghost btn-sm"
              onClick={() => { setRecoverErr(null); setRecoverMsg(null); setMode("code"); }}>
              ← Volver al login con código
            </button>
          </div>
        </form>
      )}
    </>
  );
}

// ---------- Home (lista de grupos) ----------
function ScreenHome({ judgeName, onOpenGroup, onLogout }) {
  const [loading, setLoading] = scUseState(true);
  const [groups, setGroups] = scUseState([]);
  const [err, setErr] = scUseState(null);
  const [me, setMe] = scUseState(null);

  scUseEffect(() => {
    let cancelled = false;
    Promise.all([window.API.getGroups(), window.API.me()])
      .then(([gs, m]) => { if (!cancelled) { setGroups(gs.groups || []); setMe(m); setLoading(false); } })
      .catch((e) => { if (!cancelled) { setErr(e.message); setLoading(false); } });
    return () => { cancelled = true; };
  }, []);

  if (loading) return <CenteredSpinner/>;
  if (err) return <ErrorPanel msg={err}/>;

  const completedGroups = groups.filter(g => g.isComplete).length;
  const donePairs = groups.reduce((a,g)=>a+(g.donePairs||0),0);

  return (
    <>
      <header className="appbar appbar-brand">
        <img src="assets/logo-mentores-app-blanco.png" alt="Mentores Up! Steam" className="appbar-logo"/>
        <div className="appbar-spacer"/>
        <button className="iconbtn appbar-icon-dark" onClick={onLogout} title="Cerrar sesión"><Icon.Logout/></button>
      </header>

      <main style={{paddingBottom:90}}>
        <section className="home-hero" style={{padding:"24px var(--app-pad) 8px"}}>
          <div className="home-hero-greet">
            <p className="t-caption">Hola,</p>
            <h1 className="t-h1" style={{marginBottom:6}}>{judgeName} 👋</h1>
            <p className="t-body" style={{color:"var(--ink-600)"}}>
              Has completado <b>{completedGroups}</b> de <b>{groups.length}</b> grupos.
            </p>
          </div>

          <div className="hero-card-info">
            <div className="hero-card-info-icon">
              <Icon.Vs/>
            </div>
            <div className="hero-card-info-body">
              <div className="t-eyebrow" style={{color:"rgba(255,255,255,.85)"}}>{donePairs} comparaciones realizadas</div>
              <div className="hero-card-info-text">
                Abre el grupo con menos progreso y compara hasta llegar al <b>100%</b>.
              </div>
            </div>
          </div>
        </section>

        <section style={{padding:"4px var(--app-pad) 8px"}}>
          {groups.length === 0 && (
            <div className="alert alert-warning">Aún no hay grupos cargados. Pídele al admin que sincronice.</div>
          )}
          <div className="groups-grid">
            {groups.map(g => {
              const cat = window.MENTORES_DATA.CATEGORIES[g.category] || { id: g.category, label: g.category, color: "#999" };
              const stg = window.MENTORES_DATA.STAGES[g.stage] || { id: g.stage, label: g.stage };
              // Progreso por fase: exploring → refining → saturated
              let pct = 0, label = `${g.donePairs || 0}/${g.totalPairs || 0}`, isDone = false;
              if (g.phase === "exploring") {
                pct = g.count ? Math.round(((g.seenUnique || 0) / g.count) * 100) : 0;
                label = `${g.seenUnique || 0}/${g.count || 0} vistos`;
              } else if (g.phase === "refining") {
                pct = g.recommendedTarget
                  ? Math.min(100, Math.round((g.donePairs / g.recommendedTarget) * 100))
                  : 0;
                label = `${g.donePairs}/${g.recommendedTarget}`;
              } else if (g.phase === "saturated") {
                pct = 100;
                label = `${g.donePairs} ✓`;
                isDone = true;
              }
              return (
                <button key={g.id} className={`group-card ${isDone || g.isComplete ? "is-complete" : ""}`}
                  onClick={() => onOpenGroup(g)}
                  style={{"--gt-color": cat.color}}>
                  <div className="group-card-head">
                    <span className={`badge badge-cat badge-${cat.id}`}>{cat.label}</span>
                    <span className={`badge badge-${stg.id}`}>{stg.label}</span>
                  </div>
                  <div className="group-card-progress-num">
                    <span className="group-card-pct">{pct}%</span>
                    <span className="group-card-pairs">{label}</span>
                  </div>
                  <div className="group-card-bar">
                    <span style={{width: `${pct}%`}}/>
                  </div>
                  <div className="group-card-foot">
                    <span className="group-card-count">{g.count} proyectos</span>
                    {isDone
                      ? <span className="group-card-check" title="Objetivo recomendado alcanzado"><Icon.Check width="14" height="14"/></span>
                      : <span className="group-card-cta">Evaluar <Icon.ChevronRight width="14" height="14"/></span>}
                  </div>
                </button>
              );
            })}
          </div>
        </section>
      </main>
    </>
  );
}

// ---------- Project Detail ----------
function ScreenProjectDetail({ projectId, onBack }) {
  const [loading, setLoading] = scUseState(true);
  const [project, setProject] = scUseState(null);
  const [err, setErr] = scUseState(null);

  scUseEffect(() => {
    let cancelled = false;
    window.API.getProject(projectId)
      .then((d) => { if (!cancelled) { setProject(d.project); setLoading(false); } })
      .catch((e) => { if (!cancelled) { setErr(e.message); setLoading(false); } });
    return () => { cancelled = true; };
  }, [projectId]);

  if (loading) return <CenteredSpinner/>;
  if (err || !project) return <ErrorPanel msg={err || "Proyecto no encontrado"} onBack={onBack}/>;

  const cat = window.MENTORES_DATA.CATEGORIES[project.group_category] || null;
  const stg = window.MENTORES_DATA.STAGES[project.group_stage] || null;

  return (
    <>
      <header className="appbar">
        <button className="iconbtn" onClick={onBack}><Icon.ArrowLeft/></button>
        <div className="appbar-title">Proyecto</div>
      </header>
      <main style={{paddingBottom:40}}>
        <div className="proj-card-v2" style={{margin:"16px var(--app-pad)", boxShadow:"var(--shadow-md)"}}>
          <ProjectPoster project={project} large/>
          <div className="proj-body">
            <div style={{display:"flex", gap:6, flexWrap:"wrap", marginBottom:8}}>
              {cat && <span className={`badge badge-cat badge-${cat.id}`}>{cat.label}</span>}
              {stg && <span className={`badge badge-${stg.id}`}>{stg.label}</span>}
            </div>
            <h2 className="t-h2" style={{marginBottom:8}}>{project.name}</h2>
            {project.equipo && <p className="t-caption" style={{marginBottom:6}}>{project.equipo}{project.location ? ` · ${project.location}` : ""}</p>}
            {project.description && <p className="t-body" style={{color:"var(--ink-700)"}}>{project.description}</p>}
            <div className="proj-actions" style={{marginTop:14}}>
              {project.project_url && <a className="proj-action" href={project.project_url} target="_blank" rel="noreferrer" aria-label="Ver web"><Icon.Search width="18" height="18"/></a>}
              {project.video_url && <a className="proj-action" href={project.video_url} target="_blank" rel="noreferrer" aria-label="Vídeo"><Icon.Play width="18" height="18"/></a>}
            </div>
          </div>
        </div>
        <div style={{padding:"0 var(--app-pad)"}}>
          <div className="alert alert-info">
            <Icon.Info width="20" height="20"/>
            <div>La evaluación detallada de cada proyecto se realiza <b>presencialmente</b>. Aquí solo necesitas reconocerlo para compararlo con otros.</div>
          </div>
        </div>
      </main>
    </>
  );
}

// ---------- Ranking POR GRUPO (juez) ----------
function ScreenRanking({ onBack, onOpenDetail, currentGroupId }) {
  const [loading, setLoading] = scUseState(true);
  const [groups, setGroups] = scUseState([]);
  const [selectedGroupId, setSelectedGroupId] = scUseState(currentGroupId || null);
  const [ranking, setRanking] = scUseState([]);
  const [groupMeta, setGroupMeta] = scUseState(null);

  scUseEffect(() => {
    window.API.getGroups().then((d) => {
      setGroups(d.groups || []);
      setLoading(false);
      if (!selectedGroupId && d.groups?.length) setSelectedGroupId(d.groups[0].id);
    }).catch(() => setLoading(false));
  }, []);

  scUseEffect(() => {
    if (!selectedGroupId) return;
    setLoading(true);
    fetch(`/api/groups/${selectedGroupId}/ranking`, { credentials: "include" })
      .then((r) => r.json())
      .then((d) => {
        setRanking(d.ranking || []);
        setGroupMeta(d.group || null);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [selectedGroupId]);

  const selectedGroup = groups.find(g => g.id === selectedGroupId);
  const cat = selectedGroup && window.MENTORES_DATA.CATEGORIES[selectedGroup.category];
  const stg = selectedGroup && window.MENTORES_DATA.STAGES[selectedGroup.stage];

  return (
    <>
      <header className="appbar">
        <button className="iconbtn" onClick={onBack}><Icon.ArrowLeft/></button>
        <div className="appbar-title">Ranking por grupo</div>
      </header>
      <main style={{padding:"12px var(--app-pad) 90px"}}>
        <p className="t-caption" style={{marginBottom:12}}>Cada grupo (categoría × etapa) tiene su propio ranking Crowd-BT.</p>

        <div className="t-eyebrow" style={{marginBottom:6}}>Grupo</div>
        <div className="chip-row" style={{marginBottom:14, flexWrap:"wrap"}}>
          {groups.map(g => {
            const c = window.MENTORES_DATA.CATEGORIES[g.category] || {label:g.category};
            const s = window.MENTORES_DATA.STAGES[g.stage] || {label:g.stage};
            return (
              <button key={g.id}
                className={`chip ${selectedGroupId===g.id?"is-active":""} chip-cat-${g.category}`}
                onClick={() => setSelectedGroupId(g.id)}>{c.label} · {s.label}</button>
            );
          })}
        </div>

        {selectedGroup && (
          <div style={{display:"flex", alignItems:"center", gap:8, marginBottom:12}}>
            {cat && <span className={`badge badge-cat badge-${cat.id}`}>{cat.label}</span>}
            {stg && <span className={`badge badge-${stg.id}`}>{stg.label}</span>}
            <span className="t-caption" style={{marginLeft:"auto"}}>{ranking.length} proyectos</span>
          </div>
        )}

        {loading ? <CenteredSpinner/> : ranking.length === 0 ? (
          <div className="alert alert-warning">No hay proyectos en este grupo.</div>
        ) : (
          <ul className="rank-list">
            {ranking.map((p, i) => (
              <li key={p.project_id} className="rank-row" onClick={() => onOpenDetail(p.project_id)}>
                <div className="rank-pos">{i+1}</div>
                <div className="rank-thumb" style={{
                  width:48, height:48, borderRadius:"var(--r-md)", flexShrink:0,
                  background: p.cover_url ? `url(${p.cover_url}) center/cover` : "var(--ink-100)"
                }}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontWeight:700, color:"var(--brand-navy)", fontSize:"var(--fs-sm)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{p.name}</div>
                  <div className="t-caption" style={{display:"flex", gap:10}}>
                    <span>μ {Number(p.mu).toFixed(2)}</span>
                    <span style={{color:"var(--ink-400)"}}>·</span>
                    <span>{p.wins}–{p.losses}</span>
                  </div>
                </div>
                <Icon.ChevronRight width="18" height="18" style={{color:"var(--ink-400)"}}/>
              </li>
            ))}
          </ul>
        )}
      </main>
    </>
  );
}

// ---------- Profile ----------
function ScreenProfile({ onBack, onLogout }) {
  const [me, setMe] = scUseState(null);
  scUseEffect(() => { window.API.me().then(setMe).catch(()=>{}); }, []);

  const initials = (me?.name || "")
    .split(/\s+/).filter(Boolean).slice(0,2).map(s => s[0]?.toUpperCase()).join("");

  return (
    <>
      <header className="appbar">
        <button className="iconbtn" onClick={onBack}><Icon.ArrowLeft/></button>
        <div className="appbar-title">Mi perfil</div>
      </header>
      <main style={{padding:"20px var(--app-pad) 90px"}}>
        <div style={{display:"flex", flexDirection:"column", alignItems:"center", textAlign:"center"}}>
          <div className="avatar" style={{width:88, height:88, fontSize:32}}>{initials || "?"}</div>
          <h2 className="t-h1" style={{marginTop:14, marginBottom:4}}>{me?.name || "—"}</h2>
          <p className="t-caption">Mentor · Ed. 7 Up! Steam</p>
        </div>
        <div className="card card-pad" style={{marginTop:24}}>
          <h3 className="t-h3" style={{marginBottom:12}}>Tu actividad</h3>
          <div className="stat-grid">
            <div className="stat"><div className="stat-num">{me?.my_decisions ?? "—"}</div><div className="stat-label">Comparaciones</div></div>
            <div className="stat"><div className="stat-num">{me?.total_decisions ?? "—"}</div><div className="stat-label">Total grupo</div></div>
          </div>
        </div>
        <div style={{marginTop:18, display:"flex", flexDirection:"column", gap:8}}>
          <button className="row-action" onClick={onLogout} style={{color:"var(--danger)"}}><Icon.Logout/> Cerrar sesión</button>
        </div>
      </main>
    </>
  );
}

// ---------- ProjectPoster (cover real con fallback gradient) ----------
function ProjectPoster({ project, large, categoryHint, stageHint }) {
  const catId = project?.group_category || categoryHint;
  const stgId = project?.group_stage    || stageHint;
  const cat = catId ? window.MENTORES_DATA.CATEGORIES[catId] : null;
  const stg = stgId ? window.MENTORES_DATA.STAGES[stgId] : null;
  const fallbackBg = cat
    ? `linear-gradient(135deg, ${cat.color} 0%, var(--brand-navy) 100%)`
    : "linear-gradient(135deg, #475569 0%, #0F172A 100%)";

  return (
    <div className="proj-poster" style={{background: fallbackBg, ...(large ? { minHeight: 200 } : null)}}>
      {project?.cover_url && (
        <img className="proj-poster-img" src={project.cover_url} alt={project.name || ""}
          onError={(e) => { e.currentTarget.style.display = "none"; }}/>
      )}
      {!project?.cover_url && project?.name && (
        <span className="proj-poster-title">{project.name}</span>
      )}
      {(cat || stg) && (
        <div className="proj-badges">
          {cat && <span className={`badge badge-cat badge-${cat.id}`}>{cat.label}</span>}
          {stg && <span className={`badge badge-${stg.id}`}>{stg.label}</span>}
        </div>
      )}
    </div>
  );
}

// ---------- Helpers UI ----------
function CenteredSpinner() {
  return <div style={{padding:"60px 20px", textAlign:"center", color:"var(--ink-500)"}}>Cargando…</div>;
}
function ErrorPanel({ msg, onBack }) {
  return (
    <div style={{padding:"32px var(--app-pad)"}}>
      <div className="alert alert-danger">{msg}</div>
      {onBack && <button className="btn btn-secondary" style={{marginTop:12}} onClick={onBack}>Volver</button>}
    </div>
  );
}

// expose
Object.assign(window, {
  ScreenLogin, ScreenHome, ScreenProjectDetail, ScreenRanking, ScreenProfile,
  ProjectPoster, CenteredSpinner, ErrorPanel,
});