// app.jsx — main App, routing, state, Tweaks
const { useState, useEffect, useMemo } = React;

const PALETTE_DEFS = [
  // [ink800, ink900, ink700, primary500, primary700]
  { id: "espresso",  swatch: ["#2A231C", "#D97B4D", "#FBF3E4"], v: ["#2A231C", "#1A1510", "#3E342B", "#D97B4D", "#B35A2D"] },
  { id: "forest",    swatch: ["#1B3A30", "#D4AF37", "#FBF3E4"], v: ["#1B3A30", "#0D211A", "#264D40", "#D4AF37", "#9E8329"] },
  { id: "terracotta",swatch: ["#4A2B23", "#E0A96D", "#FBF3E4"], v: ["#4A2B23", "#331E18", "#633B30", "#E0A96D", "#BA864E"] },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "regular",
  "palette": ["#2A231C", "#D97B4D", "#FBF3E4"],
  "freshnessStyle": "animated"
}/*EDITMODE-END*/;

function applyPalette(swatch) {
  const root = document.documentElement;
  const def = PALETTE_DEFS.find(p => JSON.stringify(p.swatch) === JSON.stringify(swatch)) || PALETTE_DEFS[0];
  const [navy800, navy900, navy700, gold500, gold700] = def.v;
  root.style.setProperty("--navy-800", navy800);
  root.style.setProperty("--navy-900", navy900);
  root.style.setProperty("--navy-700", navy700);
  root.style.setProperty("--gold-500", gold500);
  root.style.setProperty("--gold-700", gold700);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home");
  const [jobs, setJobs] = useState(() => {
    try {
      const stored = localStorage.getItem("gyd-jobs-v2");
      if (stored) return JSON.parse(stored);
    } catch (e) {}
    return window.INITIAL_JOBS;
  });

  // Fetch active jobs from Next.js API in the background
  useEffect(() => {
    fetch("/api/jobs")
      .then(res => res.json())
      .then(res => {
        if (res.success && res.data) {
          const activeList = res.data.filter(j => j.status === "active" && j.active !== false);
          setJobs(activeList);
        }
      })
      .catch(err => {
        console.warn("Backend API not available. Running on local static client data.", err);
      });
  }, []);

  const [user, setUser] = useState(null);
  const [savedIds, setSavedIds] = useState(() => {
    try { return new Set(JSON.parse(localStorage.getItem("gyd-saved") || "[]")); } catch { return new Set(); }
  });
  const isCloudLoaded = React.useRef(false);

  // Auth Listener & Cloud Sync Initialization
  useEffect(() => {
    const unsubscribe = window.onAuthChange(async (u) => {
      if (u) {
        if (u.emailVerified) {
          setUser(u);
          setAuthOpen(false);
          // Fetch cloud saves on login
          const cloudSaved = await window.getSavedJobs(u.uid);
          if (cloudSaved.length > 0) {
            setSavedIds(new Set(cloudSaved));
          }
          isCloudLoaded.current = true;
        }
      } else {
        setUser(null);
        isCloudLoaded.current = false;
      }
    });
    return () => unsubscribe();
  }, []);

  // Cloud Sync Effect
  useEffect(() => {
    // Only sync if we have a user and we've already finished the initial cloud load
    if (user && isCloudLoaded.current) {
      window.syncSavedJobs(user.uid, savedIds);
    }
  }, [user, savedIds]);

  const [openJob, setOpenJob] = useState(null);
  const [authOpen, setAuthOpen] = useState(false);
  const [applyJob, setApplyJob] = useState(null);
  const [searchSeed, setSearchSeed] = useState({});
  const [toast, setToast] = useState("");

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { localStorage.setItem("gyd-jobs-v2", JSON.stringify(jobs)); }, [jobs]);
  // localStorage for user is now handled by Firebase automatically or via auth state
  useEffect(() => { localStorage.setItem("gyd-saved", JSON.stringify([...savedIds])); }, [savedIds]);

  // toast auto-dismiss
  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(""), 2200);
    return () => clearTimeout(t);
  }, [toast]);

  // freshness toggle (subtle vs animated)
  useEffect(() => {
    if (t.freshnessStyle === "subtle") {
      document.documentElement.style.setProperty("--fresh-anim-state", "paused");
    } else {
      document.documentElement.style.setProperty("--fresh-anim-state", "running");
    }
  }, [t.freshnessStyle]);

  const onSave = (job) => {
    if (!user) { setAuthOpen(true); return; }
    setSavedIds(prev => {
      const n = new Set(prev);
      if (n.has(job.id)) { n.delete(job.id); setToast("Removed from shortlist"); }
      else { n.add(job.id); setToast(`Saved · ${job.title}`); }
      return n;
    });
  };
  const onAuth = (u) => { 
    // This is now mostly handled by the onAuthChange listener, 
    // but we can still keep it for immediate UI feedback if needed
    setAuthOpen(false); 
    if (u) setToast(`Welcome, ${u.name}`); 
  };
  const onSignOut = async () => { 
    await window.signOutUser();
    setUser(null); 
    setSavedIds(new Set()); 
    setToast("Signed out"); 
  };
  const onApply = (job) => {
    if (!user) { setOpenJob(null); setAuthOpen(true); return; }
    setOpenJob(null);
    setApplyJob(job);
  };



  return (
    <>
      <TopBar/>
      <Nav route={route} setRoute={setRoute}
           user={user}
           onSignIn={() => setAuthOpen(true)}
           onSignOut={onSignOut}
           savedCount={savedIds.size}/>

      <main key={route} className="page-transition" style={{animation: "fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both", minHeight: "80vh"}}>
        {route === "home" && (
          <HomeScreen jobs={jobs} setRoute={setRoute}
                      onOpen={setOpenJob} onSave={onSave} savedIds={savedIds}
                      density={t.density} setSearchSeed={setSearchSeed} />
        )}
        {route === "jobs" && (
          <JobsScreen jobs={jobs} onOpen={setOpenJob} onSave={onSave}
                      savedIds={savedIds} density={t.density}
                      searchSeed={searchSeed}/>
        )}
        {route === "countries" && (
          <CountriesScreen jobs={jobs} setSearchSeed={setSearchSeed} setRoute={setRoute}/>
        )}
        {route === "saved" && (
          <SavedScreen jobs={jobs} savedIds={savedIds}
                       onOpen={setOpenJob} onSave={onSave}
                       density={t.density}
                       user={user}
                       onSignIn={() => setAuthOpen(true)}/>
        )}
      </main>

      <Footer/>

      {/* Modals */}
      {openJob && <JobDetailModal job={openJob} onClose={() => setOpenJob(null)}
                                  onSave={onSave} isSaved={savedIds.has(openJob.id)}
                                  onApply={onApply}/>}
      {authOpen && <AuthModal onClose={() => setAuthOpen(false)} onAuth={onAuth}/>}
      {applyJob && <ApplyModal job={applyJob} onClose={() => setApplyJob(null)}/>}

      <Toast msg={toast}/>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette"/>
        <TweakColor label="Color theme" value={t.palette}
          options={PALETTE_DEFS.map(p => p.swatch)}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Layout"/>
        <TweakRadio label="Card density" value={t.density}
                    options={["compact", "regular", "spacious"]}
                    onChange={(v) => setTweak("density", v)}/>
        <TweakRadio label="Freshness badge" value={t.freshnessStyle}
                    options={["subtle", "animated"]}
                    onChange={(v) => setTweak("freshnessStyle", v)}/>

        <TweakSection label="Quick demo"/>
        <TweakButton label="Re-verify all jobs to today" onClick={() => {
          const today = new Date().toISOString().slice(0,10);
          setJobs(jobs.map(j => ({ ...j, verifiedDate: today })));
          setToast("All listings re-verified to today");
        }}/>
        <TweakButton label="Reset demo data" onClick={() => {
          localStorage.removeItem("gyd-jobs-v2");
          localStorage.removeItem("gyd-user");
          localStorage.removeItem("gyd-saved");
          location.reload();
        }}/>
      </TweaksPanel>
    </>
  );
}

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