// App shell — calculator flow + auth + dashboard routing
const { Step1: S1, Step2: S2, Step3: S3 } = window;

function readHashView() {
  return (window.location.hash || "").indexOf("dashboard") !== -1 ? "dashboard" : "calculator";
}

function App() {
  const [step, setStep] = useState(1);
  const [profile, setProfile] = useState({ salaryBand: "", monthlySpend: 0, program: "", horizon: 0 });
  const [history, setHistory] = useState([]);

  const [user, setUser] = useState(null);
  const [view, setView] = useState(readHashView());
  const [authOpen, setAuthOpen] = useState(false);
  const [saved, setSaved] = useState(false);

  // ── Routing helpers (hash-based, so refresh/links work) ──
  function navigate(v) {
    window.location.hash = v === "dashboard" ? "#/dashboard" : "#/";
    setView(v);
  }
  useEffect(() => {
    const onHash = () => setView(readHashView());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // ── Auth bootstrap + listener ──
  useEffect(() => {
    if (!window.SUPABASE_READY) return;
    const sb = window.supabaseClient;
    sb.auth.getUser().then(({ data }) => setUser((data && data.user) || null));
    const { data: sub } = sb.auth.onAuthStateChange(async (_event, session) => {
      const u = (session && session.user) || null;
      setUser(u);
      if (u) {
        // Flush any plan the user generated before logging in.
        try {
          const flushed = await window.Store.flushPending(u);
          if (flushed) { setSaved(true); setAuthOpen(false); navigate("dashboard"); }
        } catch (e) { console.error("flushPending failed", e); }
      }
    });
    return () => { sub && sub.subscription && sub.subscription.unsubscribe(); };
  }, []);

  function restart() { setSaved(false); setStep(1); navigate("calculator"); }

  // Save CTA on results page.
  async function handleSavePlan(result) {
    const planObj = window.buildPlanObject(profile, history, result);
    window.PendingPlan.save(planObj);
    if (user && window.SUPABASE_READY) {
      try {
        await window.Store.flushPending(user);
        setSaved(true);
        navigate("dashboard");
      } catch (e) { console.error(e); setAuthOpen(true); }
    } else {
      setAuthOpen(true); // prompt login/signup; flush happens on SIGNED_IN
    }
  }

  // Dashboard → generate a new plan, pre-filled with saved card history.
  async function startNewPlan() {
    setSaved(false);
    if (user && window.SUPABASE_READY) {
      try {
        const rows = await window.Store.loadCardHistory(user.id);
        const items = rows.map(window.historyItemFromRow).filter(h => h.cardId);
        setHistory(items);
      } catch (e) { console.error(e); }
    }
    setStep(1);
    navigate("calculator");
  }

  // Dashboard → view the saved plan in the full results screen.
  async function viewSavedPlan(plan) {
    if (plan && plan.inputs) setProfile(plan.inputs);
    if (user && window.SUPABASE_READY) {
      try {
        const rows = await window.Store.loadCardHistory(user.id);
        setHistory(rows.map(window.historyItemFromRow).filter(h => h.cardId));
      } catch (e) { console.error(e); }
    }
    setSaved(true);
    setStep(3);
    navigate("calculator");
  }

  async function logout() {
    if (window.SUPABASE_READY) { try { await window.supabaseClient.auth.signOut(); } catch (e) {} }
    setUser(null); setSaved(false); navigate("calculator"); setStep(1);
  }

  // ── Dashboard view ──
  if (view === "dashboard") {
    if (!user) {
      return (
        <div className="app">
          <div className="topbar"><Logo /></div>
          <div className="empty-results" style={{ marginTop: 40 }}>
            <h3>Please log in</h3>
            <p>Log in to see your saved card history and plan.</p>
            <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => setAuthOpen(true)}>Log in</button>
          </div>
          <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} onAuthed={() => setAuthOpen(false)} />
          <DisclaimerBar />
        </div>
      );
    }
    return (
      <div className="app">
        <div className="topbar">
          <Logo />
        </div>
        <Dashboard
          user={user}
          onNewPlan={startNewPlan}
          onViewPlan={viewSavedPlan}
          onUpdateHistory={async () => { await startNewPlan(); setStep(2); }}
          onLogout={logout}
        />
        <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} onAuthed={() => setAuthOpen(false)} />
        <DisclaimerBar />
      </div>
    );
  }

  // ── Calculator view ──
  return (
    <div className="app">
      <div className="topbar">
        <Logo />
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          {step > 1 && (
            <button className="btn btn-ghost" onClick={restart} style={{ padding: "8px 16px", fontSize: "0.88rem" }}>↻ Start over</button>
          )}
          {user ? (
            <button className="btn btn-soft" onClick={() => navigate("dashboard")} style={{ padding: "8px 16px", fontSize: "0.88rem" }}>Dashboard</button>
          ) : (
            <button className="btn btn-soft" onClick={() => setAuthOpen(true)} style={{ padding: "8px 16px", fontSize: "0.88rem" }}>Log in</button>
          )}
        </div>
      </div>
      <Progress step={step} />

      {step === 1 && <S1 profile={profile} setProfile={setProfile} onNext={() => setStep(2)} />}
      {step === 2 && <S2 history={history} setHistory={setHistory} onNext={() => setStep(3)} onBack={() => setStep(1)} />}
      {step === 3 && (
        <S3
          profile={profile}
          history={history}
          onBack={() => setStep(2)}
          onRestart={restart}
          onSavePlan={handleSavePlan}
          user={user}
          saved={saved}
        />
      )}

      <AuthModal open={authOpen} onClose={() => setAuthOpen(false)} onAuthed={() => setAuthOpen(false)} />
      <DisclaimerBar />
    </div>
  );
}

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