// app.jsx — Vetfluence root: marketing ↔ report flow with analyzing transition.

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0071e3",
  "density": "airy",
  "view": "marketing",
  "headline": "Know before you pay."
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#0071e3", // Apple blue (default)
  "#1d1d1f", // Mono / near-black
  "#1f8a5b", // Vetting green
  "#7a5af8", // Indigo
];

const HEADLINES = [
  "Know before you pay.",
  "Vet any creator in seconds.",
  "Spot the fakes. Skip the doubt.",
  "One score. One clear answer.",
];

// Status messages cycled during the analyzing transition.
const ANALYZE_STEPS = [
  "Finding the profile…",
  "Checking the last 30 posts…",
  "Analyzing comment threads…",
  "Looking at follower stability…",
  "Comparing to category baseline…",
  "Building your report…",
];

function Analyzing({ username, onDone }) {
  const [step, setStep] = useStateA(0);
  useEffectA(() => {
    let i = 0;
    const interval = setInterval(() => {
      i++;
      if (i >= ANALYZE_STEPS.length) {
        clearInterval(interval);
        setTimeout(onDone, 280);
      } else {
        setStep(i);
      }
    }, 280);
    return () => clearInterval(interval);
  }, [onDone]);

  return (
    <div className="analyzing">
      <div className="ring"></div>
      <div className="status">
        <b>@{username}</b> · {ANALYZE_STEPS[step]}
      </div>
    </div>
  );
}

function MarketingPage({ onSearch, onCta, headline }) {
  return (
    <>
      <Nav onCta={() => {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }} />
      <Hero onSearch={onSearch} headline={headline} />
      <HowItWorks />
      <hr className="divider" />
      <ExampleReport />
      <WhatWeCheck />
      <WhoFor />
      <Pricing />
      <FAQ />
      <FooterCTA onSearch={onSearch} />
      <FooterEnd />
    </>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateA("marketing"); // marketing | analyzing | report
  const [report, setReport] = useStateA(null);
  const [pendingUsername, setPendingUsername] = useStateA("");

  // Apply tweaks to :root.
  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.dataset.density = t.density;
  }, [t.accent, t.density]);

  // Scroll to top on view change.
  useEffectA(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [view]);

  function handleSearch(username, platform) {
    const generated = window.VF.generate(username, platform);
    setPendingUsername(username);
    setReport(generated);
    setView("analyzing");
  }

  function finishAnalyzing() {
    setView("report");
  }

  function backToMarketing() {
    setView("marketing");
  }

  return (
    <div className="vf-app">
      {view === "marketing" && (
        <MarketingPage onSearch={handleSearch} headline={t.headline} />
      )}
      {view === "report" && report && (
        <ReportScreen report={report} onBack={backToMarketing} onSearch={handleSearch} />
      )}
      {view === "analyzing" && (
        <>
          {/* Keep the page underneath visible while we analyze, so we look like an overlay. */}
          <MarketingPage onSearch={handleSearch} headline={t.headline} />
          <Analyzing username={pendingUsername} onDone={finishAnalyzing} />
        </>
      )}

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["airy", "cozy"]}
          onChange={(v) => setTweak("density", v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Headline"
          value={t.headline}
          options={HEADLINES}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakButton
          label="Show example report"
          onClick={() => handleSearch("staycation.sfbayarea", "instagram")}
        >Open low-risk report</TweakButton>
        <TweakButton
          label=" "
          onClick={() => handleSearch("glow.aesthetics.daily", "instagram")}
        >Open high-risk report</TweakButton>
        <TweakButton
          label=" "
          onClick={backToMarketing}
        >Back to landing page</TweakButton>
      </TweaksPanel>
    </div>
  );
}

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