// MobileShell — versión simplificada para teléfono.
// En lugar del cuarto con TV+VHS+cardbox 3D, muestra una lista vertical estilo
// timeline con thumbnails. Reusa Reader y CardAlbum existentes.

// Hook que detecta si la viewport es móvil. Reactivo al resize.
// Combina matchMedia (la fuente correcta) con innerWidth como fallback,
// y también detecta touch + UA para robustez en mobile browsers raros.
function detectMobileNow() {
  if (typeof window === "undefined") return false;
  // Primary: matchMedia con breakpoint 720px (cubre teléfonos y portrait tablets pequeñas)
  if (window.matchMedia) {
    try {
      if (window.matchMedia("(max-width: 720px)").matches) return true;
    } catch (e) {}
  }
  // Fallback: innerWidth directo
  if (typeof window.innerWidth === "number" && window.innerWidth <= 720) return true;
  return false;
}

function useIsMobile() {
  const [m, setM] = React.useState(detectMobileNow);
  React.useEffect(() => {
    const onChange = () => setM(detectMobileNow());
    onChange(); // re-check on mount
    window.addEventListener("resize", onChange);
    window.addEventListener("orientationchange", onChange);
    return () => {
      window.removeEventListener("resize", onChange);
      window.removeEventListener("orientationchange", onChange);
    };
  }, []);
  return m;
}
window.useIsMobile = useIsMobile;

// Selector de idioma — 3 botones visibles (ES / EN / KO) con flag.
// El idioma activo queda destacado. Click en otro lo cambia.
function LangSwitcher({ compact }) {
  const lang = window.useLang ? window.useLang() : "es";
  const OPTIONS = [
    { k: "es", flag: "🇲🇽" },
    { k: "en", flag: "🇺🇸" },
    { k: "ko", flag: "🇰🇷" },
  ];
  return (
    <div className={"lang-switcher" + (compact ? " is-compact" : "")} role="group" aria-label="Cambiar idioma">
      {OPTIONS.map(({ k, flag }) => (
        <button
          key={k}
          type="button"
          className={"lang-switcher-opt" + (lang === k ? " active" : "")}
          onClick={() => window.setCurrentLang && window.setCurrentLang(k)}
          aria-pressed={lang === k}
          title={k.toUpperCase()}
        >
          <span className="lang-switcher-flag">{flag}</span>
          <span className="lang-switcher-code">{k.toUpperCase()}</span>
        </button>
      ))}
    </div>
  );
}
window.LangSwitcher = LangSwitcher;

// Form de login/register simplificado para móvil. Reusa /api/auth/* del backend.
function MobileAuthScreen({ onAuthed }) {
  // eslint-disable-next-line no-unused-vars
  const lang = window.useLang ? window.useLang() : "es";
  const t = window.t || ((k) => k);
  const [mode, setMode] = React.useState("login"); // login | register
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [handle, setHandle] = React.useState("");
  const [name, setName] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e?.preventDefault?.();
    if (!email.includes("@") || !password) {
      setError(t("auth.error.required"));
      return;
    }
    if (mode === "register" && !handle.trim()) {
      setError(t("auth.error.handle"));
      return;
    }
    if (mode === "register" && !name.trim()) {
      setError(t("auth.error.name"));
      return;
    }
    setBusy(true);
    setError(null);
    try {
      const url = mode === "login" ? "/api/auth/login" : "/api/auth/register";
      const body = mode === "login"
        ? { email, password }
        : { email, password, handle: handle.trim(), name: name.trim() };
      const r = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify(body),
      });
      const data = await r.json();
      if (!r.ok) throw new Error(data.error || `Error ${r.status}`);
      try { localStorage.setItem("trooper_user_v1", JSON.stringify(data.user)); } catch (e) {}
      onAuthed && onAuthed(data.user);
    } catch (e) {
      setError(e?.message || t("auth.error.generic"));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="m-auth">
      <div className="m-auth-lang">
        <LangSwitcher />
      </div>
      <div className="m-auth-brand">
        <div className="m-auth-logo">TROOPER</div>
        <div className="m-auth-tag">{t("auth.tagline")}</div>
      </div>
      <form className="m-auth-form" onSubmit={submit}>
        <div className="m-auth-tabs">
          <button
            type="button"
            className={"m-auth-tab" + (mode === "login" ? " active" : "")}
            onClick={() => setMode("login")}
          >
            {t("auth.login")}
          </button>
          <button
            type="button"
            className={"m-auth-tab" + (mode === "register" ? " active" : "")}
            onClick={() => setMode("register")}
          >
            {t("auth.register")}
          </button>
        </div>

        {mode === "register" && (
          <>
            <label className="m-auth-field">
              <span>{t("auth.field.name")}</span>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={t("auth.placeholder.name")}
                autoComplete="name"
                required
              />
            </label>
            <label className="m-auth-field">
              <span>{t("auth.field.handle")}</span>
              <input
                type="text"
                value={handle}
                onChange={(e) => setHandle(e.target.value)}
                placeholder={t("auth.placeholder.handle")}
                autoComplete="username"
                required
              />
            </label>
          </>
        )}
        <label className="m-auth-field">
          <span>{t("auth.field.email")}</span>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={t("auth.placeholder.email")}
            autoComplete="email"
            required
          />
        </label>
        <label className="m-auth-field">
          <span>{t("auth.field.password")}</span>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="••••••••"
            autoComplete={mode === "login" ? "current-password" : "new-password"}
            required
          />
        </label>

        {error && <div className="m-auth-error">{error}</div>}

        <button type="submit" className="m-auth-submit" disabled={busy}>
          {busy ? "..." : mode === "login" ? t("auth.btn.enter") : t("auth.btn.create")}
        </button>
      </form>
    </div>
  );
}

// Header sticky: logo + selector de idioma + botón de colección + menú user.
function MobileHeader({ user, ownedCount, totalCards, onOpenAlbum, onLogout }) {
  const t = window.t || ((k) => k);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const close = () => setMenuOpen(false);
    if (menuOpen) {
      document.addEventListener("click", close);
      return () => document.removeEventListener("click", close);
    }
  }, [menuOpen]);

  return (
    <header className="m-header">
      <div className="m-header-title">TROOPER</div>
      <div className="m-header-actions">
        <LangSwitcher compact />
        {totalCards > 0 && (
          <button className="m-header-cards" onClick={onOpenAlbum}>
            ◆ {ownedCount}/{totalCards}
          </button>
        )}
        <button
          className="m-header-user"
          onClick={(e) => { e.stopPropagation(); setMenuOpen(o => !o); }}
        >
          @{(user?.handle || "").toUpperCase()}
        </button>
        {menuOpen && (
          <div className="m-header-menu" onClick={(e) => e.stopPropagation()}>
            <button className="m-header-menu-item" onClick={onLogout}>
              {t("header.logout")}
            </button>
          </div>
        )}
      </div>
    </header>
  );
}

// Card-row de un capítulo en la lista. Usa la traducción del idioma actual.
function MobileChapterCard({ arc, chapter, isRead, onClick }) {
  const t = window.t || ((k) => k);
  const lang = window.useLang ? window.useLang() : "es";
  const accent = arc.cover?.accent || "#ff5aa0";
  const a = window.resolveArc ? window.resolveArc(arc, lang) : arc;
  const c = window.resolveChapter ? window.resolveChapter(chapter, lang) : chapter;
  return (
    <button
      className={"m-cap" + (isRead ? " is-read" : "")}
      onClick={onClick}
      style={{ "--m-accent": accent }}
    >
      <div className="m-cap-thumb">
        {chapter.image ? (
          <img
            src={chapter.image}
            alt=""
            style={{
              objectPosition: `${chapter.imageOffsetX ?? 50}% ${chapter.imageOffsetY ?? 50}%`,
              transform: `scale(${chapter.imageScale ?? 1})`,
              transformOrigin: `${chapter.imageOffsetX ?? 50}% ${chapter.imageOffsetY ?? 50}%`,
            }}
          />
        ) : (
          <div className="m-cap-thumb-ph" style={{ color: accent }}>{chapter.num}</div>
        )}
        {isRead && <div className="m-cap-thumb-tag">{t("cap.read")}</div>}
        {c.audioUrl && <div className="m-cap-thumb-audio">▶</div>}
      </div>
      <div className="m-cap-info">
        <div className="m-cap-eyebrow" style={{ color: accent }}>
          {a.title} · {t("reader.cap")} {chapter.num}
        </div>
        <div className="m-cap-title">{c.title}</div>
        {c.desc && <div className="m-cap-desc">{c.desc}</div>}
      </div>
    </button>
  );
}

// Banner de NUEVO CAPÍTULO / PRÓXIMAMENTE en mobile (versión compacta).
function MobileBanner({ arcs, readIds, onOpenChapter }) {
  const t = window.t || ((k) => k);
  const lang = window.useLang ? window.useLang() : "es";
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(x => x + 1), 60 * 1000);
    return () => clearInterval(id);
  }, []);
  const now = Date.now();
  const all = [];
  for (const a of arcs || []) {
    for (const c of a.chapters || []) {
      if (!c.publishAt) continue;
      const ts = new Date(c.publishAt).getTime();
      if (isNaN(ts)) continue;
      all.push({ chapter: c, arc: a, publishMs: ts });
    }
  }
  // Próximo programado
  const upcoming = all
    .filter(x => x.publishMs > now)
    .sort((a, b) => a.publishMs - b.publishMs)[0];
  if (upcoming) {
    const ms = upcoming.publishMs - now;
    const day = Math.floor(ms / (24 * 3600 * 1000));
    const hour = Math.floor(ms / (3600 * 1000));
    const min = Math.floor(ms / (60 * 1000));
    let when;
    if (day >= 1) when = t("banner.in.days", day);
    else if (hour >= 1) when = t("banner.in.hours", hour);
    else if (min >= 1) when = t("banner.in.minutes", min);
    else when = t("banner.almost");
    const accent = upcoming.arc.cover?.accent || "#ff5aa0";
    const a = window.resolveArc ? window.resolveArc(upcoming.arc, lang) : upcoming.arc;
    const c = window.resolveChapter ? window.resolveChapter(upcoming.chapter, lang) : upcoming.chapter;
    return (
      <div className="m-banner" style={{ "--m-accent": accent }}>
        {c.image && (
          <div className="m-banner-bg" style={{ backgroundImage: `url("${c.image}")` }} />
        )}
        <div className="m-banner-shade" />
        <div className="m-banner-body">
          <div className="m-banner-eyebrow" style={{ color: accent }}>{t("banner.upcoming")}</div>
          <div className="m-banner-title">{c.title}</div>
          <div className="m-banner-meta">{a.title} · {when}</div>
        </div>
      </div>
    );
  }
  // Cap reciente sin leer
  const reads = readIds || new Set();
  const recent = all
    .filter(x => x.publishMs <= now && now - x.publishMs <= 14 * 24 * 3600 * 1000)
    .filter(x => !reads.has(x.chapter.id))
    .sort((a, b) => b.publishMs - a.publishMs)[0];
  if (recent) {
    const accent = recent.arc.cover?.accent || "#ff5aa0";
    const a = window.resolveArc ? window.resolveArc(recent.arc, lang) : recent.arc;
    const c = window.resolveChapter ? window.resolveChapter(recent.chapter, lang) : recent.chapter;
    return (
      <button
        className="m-banner is-clickable"
        style={{ "--m-accent": accent }}
        onClick={() => onOpenChapter && onOpenChapter(recent.chapter, recent.arc)}
      >
        {c.image && (
          <div className="m-banner-bg" style={{ backgroundImage: `url("${c.image}")` }} />
        )}
        <div className="m-banner-shade" />
        <div className="m-banner-body">
          <div className="m-banner-eyebrow" style={{ color: accent }}>{t("banner.new")}</div>
          <div className="m-banner-title">{c.title}</div>
          <div className="m-banner-meta">{a.title} · {t("banner.available")}</div>
        </div>
      </button>
    );
  }
  return null;
}

// Home: dos cards grandes (LEER / TARJETAS) + banner arriba.
function MobileHome({ user, arcs, readIds, ownedCount, totalCards, onLeer, onTarjetas }) {
  const t = window.t || ((k) => k);
  // eslint-disable-next-line no-unused-vars
  const lang = window.useLang ? window.useLang() : "es";
  const totalChapters = arcs.reduce((n, a) => n + (a.chapters?.length || 0), 0);
  const readCount = arcs.reduce((n, a) =>
    n + (a.chapters || []).filter(c => readIds?.has?.(c.id)).length, 0);

  return (
    <main className="m-content m-home">
      <div className="m-greeting">
        <div className="m-greeting-eyebrow">{t("home.greeting")}</div>
        <div className="m-greeting-name">@{(user?.handle || "").toUpperCase()}</div>
      </div>

      <MobileBanner
        arcs={arcs}
        readIds={readIds}
        onOpenChapter={() => onLeer && onLeer()}
      />

      <div className="m-home-grid">
        <button className="m-home-card m-home-card-leer" onClick={onLeer}>
          <div className="m-home-card-icon">▮▮▮</div>
          <div className="m-home-card-title">{t("home.read.title")}</div>
          <div className="m-home-card-meta">
            {t("home.read.meta", readCount, totalChapters)}
          </div>
        </button>

        <button
          className="m-home-card m-home-card-tarjetas"
          onClick={onTarjetas}
          disabled={totalCards === 0}
        >
          <div className="m-home-card-icon">◆</div>
          <div className="m-home-card-title">{t("home.cards.title")}</div>
          <div className="m-home-card-meta">
            {t("home.cards.meta", ownedCount, totalCards)}
          </div>
        </button>
      </div>

      <div className="m-footer">
        {t("footer.label")}
      </div>
    </main>
  );
}

// Library: lista vertical de arcos + caps. Tiene back arrow al home.
function MobileLibrary({ arcs, readIds, onReadChapter, onBack }) {
  const t = window.t || ((k) => k);
  const lang = window.useLang ? window.useLang() : "es";
  return (
    <main className="m-content">
      <button className="m-back" onClick={onBack}>{t("library.back")}</button>

      {arcs.length === 0 ? (
        <div className="m-empty">
          <div className="m-empty-eyebrow">{t("library.empty.eyebrow")}</div>
          <div className="m-empty-msg">{t("library.empty.msg")}</div>
        </div>
      ) : (
        arcs.map(arc => {
          const ra = window.resolveArc ? window.resolveArc(arc, lang) : arc;
          return (
            <section key={arc.id} className="m-arc">
              <h2 className="m-arc-title" style={{ color: arc.cover?.accent || "#ff5aa0" }}>
                {ra.title}
              </h2>
              <div className="m-arc-list">
                {arc.chapters.map(ch => (
                  <MobileChapterCard
                    key={ch.id}
                    arc={arc}
                    chapter={ch}
                    isRead={readIds?.has?.(ch.id)}
                    onClick={() => onReadChapter && onReadChapter(ch, arc)}
                  />
                ))}
              </div>
            </section>
          );
        })
      )}

      <div className="m-footer">{t("footer.label")}</div>
    </main>
  );
}

function MobileShell({
  user,
  novelStore,
  readIds,
  ownedCount,
  totalCards,
  onReadChapter,
  onOpenAlbum,
  onLogout,
}) {
  const [screen, setScreen] = React.useState("home"); // home | library
  const arcs = window.NovelStore.filterForReader(novelStore || { arcs: [] });

  return (
    <div className="m-shell">
      <MobileHeader
        user={user}
        ownedCount={ownedCount}
        totalCards={totalCards}
        onOpenAlbum={onOpenAlbum}
        onLogout={onLogout}
      />

      {screen === "home" ? (
        <MobileHome
          user={user}
          arcs={arcs}
          readIds={readIds}
          ownedCount={ownedCount}
          totalCards={totalCards}
          onLeer={() => setScreen("library")}
          onTarjetas={onOpenAlbum}
        />
      ) : (
        <MobileLibrary
          arcs={arcs}
          readIds={readIds}
          onReadChapter={onReadChapter}
          onBack={() => setScreen("home")}
        />
      )}
    </div>
  );
}

window.MobileShell = MobileShell;
window.MobileAuthScreen = MobileAuthScreen;