/* global React, ReactDOM, Starfield, HeroScreen, UploadScreen, LoadingScreen, PaywallScreen, ResultScreen */
// ============================================
// QUIROMANTE — App shell & screen orchestration
// ============================================

const { useState, useCallback, useEffect } = React;

// Localhost → local backend; otherwise (ngrok tunnel / prod) → window.QUIROMANTE_API (set in index.html).
const API =
  location.hostname === "localhost" || location.hostname === "127.0.0.1"
    ? "http://localhost:8000"
    : window.QUIROMANTE_API;

const SCREENS = ["hero", "upload", "loading", "paywall", "result"];

function App() {
  const [screen, setScreen] = useState("hero");
  const [image, setImage] = useState(null);
  const [sessionId, setSessionId] = useState(null);
  const [readingData, setReadingData] = useState(null);

  // Mercado Pago redirects back here with ?pago=...&session=...
  // Reload wipes in-memory state, so we re-fetch the reading from the backend.
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const pago = params.get("pago");
    const sid = params.get("session");
    if (!pago || !sid) return;

    // Clear query so a refresh doesn't re-trigger.
    window.history.replaceState({}, "", window.location.pathname);
    setSessionId(sid);

    if (pago === "sucesso") {
      fetch(`${API}/api/reading/${sid}`)
        .then((r) => r.json())
        .then((d) => {
          if (d.reading) setReadingData(d.reading);
          setScreen("result");
        })
        .catch(() => setScreen("paywall"));
    } else {
      // falha / pendente — back to paywall to retry.
      setScreen("paywall");
    }
  }, []);

  const goTo = useCallback((next) => {
    // Scroll inner frame to top on transition
    const frame = document.querySelector(".app-frame");
    if (frame) frame.scrollTop = 0;
    window.scrollTo({ top: 0, behavior: "auto" });
    setScreen(next);
  }, []);

  return (
    <div className="app-root">
      <div className="app-frame">
        <Starfield count={70} />

        {screen === "hero" && (
          <HeroScreen onStart={() => goTo("upload")} />
        )}

        {screen === "upload" && (
          <UploadScreen
            image={image}
            setImage={setImage}
            onBack={() => goTo("hero")}
            onUploadDone={(sid) => { setSessionId(sid); goTo("loading"); }}
          />
        )}

        {screen === "loading" && (
          <LoadingScreen
            sessionId={sessionId}
            onBack={() => goTo("upload")}
            onDone={(reading) => { setReadingData(reading); goTo("paywall"); }}
          />
        )}

        {screen === "paywall" && (
          <PaywallScreen
            sessionId={sessionId}
            onBack={() => goTo("upload")}
          />
        )}

        {screen === "result" && (
          <ResultScreen reading={readingData} onBack={() => goTo("hero")} />
        )}
      </div>

      {/* Dev nav — quick screen jump (visible only in this prototype) */}
      <DevNav current={screen} onJump={goTo} />
    </div>
  );
}

// Small floating screen-jump pill for the prototype.
// Sits outside the phone frame on desktop, hides on real mobile.
function DevNav({ current, onJump }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="dev-nav-wrap" aria-label="Navegação do protótipo">
      <button
        className="dev-nav-toggle"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
      >
        {open ? "×" : "✦"}
      </button>
      {open && (
        <div className="dev-nav">
          <p className="dev-nav-label">Telas</p>
          {SCREENS.map((s, i) => (
            <button
              key={s}
              className={`dev-nav-item ${current === s ? "is-active" : ""}`}
              onClick={() => { onJump(s); setOpen(false); }}
            >
              <span className="dev-nav-num">{String(i + 1).padStart(2, "0")}</span>
              <span>{prettyName(s)}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function prettyName(s) {
  return {
    hero: "Início",
    upload: "Enviar foto",
    loading: "Lendo as linhas",
    paywall: "Desbloquear",
    result: "Leitura",
  }[s] || s;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);