// ============================================================
// App — router + tweaks integration + live scan state
// ============================================================
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "default",
  "store": "dima",
  "lang": "ar"
}/*EDITMODE-END*/;

function App() {
  const [values, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = useState("landing");
  const [input, setInput] = useState("");
  const [storeId, setStoreId] = useState(values.store || "dima");
  const [shareOpen, setShareOpen] = useState(false);
  const [lang, setLang] = useState(values.lang || "ar");
  // Live scan state — null in demo mode (tweaks panel), populated in live mode.
  const [liveScanId, setLiveScanId] = useState(null);
  const [liveScan, setLiveScan] = useState(null);

  // Sync HTML dir + editorial theme class
  useEffect(() => {
    document.documentElement.setAttribute("dir", lang === "ar" ? "rtl" : "ltr");
    document.documentElement.lang = lang;
    document.body.classList.toggle("editorial", values.style === "editorial");
  }, [lang, values.style]);

  // Reflect tweak changes into local state (demo mode)
  useEffect(() => { if (values.lang && values.lang !== lang) setLang(values.lang); }, [values.lang]);
  useEffect(() => {
    if (values.store && values.store !== storeId) {
      setStoreId(values.store);
      setLiveScan(null);
      setLiveScanId(null);
    }
  }, [values.store]);

  const handleLang = (l) => { setLang(l); setTweak("lang", l); };

  // Live mode: Landing submit returned a scanId — poll it on the Scanning screen.
  const handleScan = (val, scanId) => {
    setInput(val);
    setLiveScanId(scanId);
    setLiveScan(null);
    setScreen("scanning");
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Called when ScanningScreen finishes: a live scan payload, or null for demo mode.
  const handleScanDone = (scanResponse) => {
    if (scanResponse) setLiveScan(scanResponse);
    setScreen("results");
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const handleHome = () => {
    setScreen("landing");
    setLiveScan(null);
    setLiveScanId(null);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const storeLabel = {
    dima: lang === "ar" ? "ديما للأزياء — قوي ٦٤" : "Dima Fashion — Solid 64",
    suhail: lang === "ar" ? "سهيل للعود — رائد ٨٧" : "Suhail Oud — Leader 87",
    nourah: lang === "ar" ? "بيت نورة — يحتاج تحسين ٤١" : "Beit Nourah — Needs work 41",
  };

  return (
    <div className="app">
      <AppTopbar lang={lang} onLang={handleLang} onHome={handleHome} screen={screen} />

      {screen === "landing" && <Landing lang={lang} onScan={handleScan} />}
      {screen === "scanning" && (
        <ScanningScreen
          lang={lang}
          input={input || (liveScan && liveScan.inputUrl) || STORES[storeId].url}
          storeId={storeId}
          scanId={liveScanId}
          onDone={handleScanDone}
        />
      )}
      {screen === "results" && (
        <Results
          lang={lang}
          storeId={storeId}
          live={liveScan}
          onRescan={handleHome}
          onShare={() => setShareOpen(true)}
          editorial={values.style === "editorial"}
        />
      )}
      {shareOpen && (
        <ShareModal
          lang={lang}
          storeId={storeId}
          live={liveScan}
          editorial={values.style === "editorial"}
          onClose={() => setShareOpen(false)}
        />
      )}

      <TweaksPanel title={lang === "ar" ? "إعدادات العرض" : "Tweaks"}>
        <TweakSection label={lang === "ar" ? "اتجاه التصميم" : "Design direction"}>
          <TweakRadio
            label={lang === "ar" ? "النمط" : "Style"}
            value={values.style}
            onChange={(v) => setTweak("style", v)}
            options={[
              { value: "default", label: lang === "ar" ? "كلاسيكي" : "Classic" },
              { value: "editorial", label: lang === "ar" ? "تحريري (داكن)" : "Editorial (dark)" },
            ]}
          />
        </TweakSection>
        <TweakSection label={lang === "ar" ? "المحتوى" : "Content"}>
          <TweakRadio
            label={lang === "ar" ? "المتجر التجريبي" : "Demo store"}
            value={values.store}
            onChange={(v) => { setTweak("store", v); setStoreId(v); setLiveScan(null); setLiveScanId(null); }}
            options={[
              { value: "dima", label: storeLabel.dima },
              { value: "suhail", label: storeLabel.suhail },
              { value: "nourah", label: storeLabel.nourah },
            ]}
          />
          <TweakRadio
            label={lang === "ar" ? "اللغة" : "Language"}
            value={values.lang}
            onChange={(v) => { setTweak("lang", v); setLang(v); }}
            options={[
              { value: "ar", label: "عربي (RTL)" },
              { value: "en", label: "English" },
            ]}
          />
        </TweakSection>
        <TweakSection label={lang === "ar" ? "التنقل" : "Jump to screen"}>
          <TweakButton
            label={lang === "ar" ? "الصفحة الرئيسية" : "Landing"}
            onClick={handleHome}
          />
          <TweakButton
            label={lang === "ar" ? "شاشة الفحص (تجريبي)" : "Scanning (demo)"}
            onClick={() => {
              setInput(STORES[storeId].url);
              setLiveScan(null);
              setLiveScanId(null);
              setScreen("scanning");
              window.scrollTo(0, 0);
            }}
          />
          <TweakButton
            label={lang === "ar" ? "شاشة النتائج (تجريبي)" : "Results (demo)"}
            onClick={() => { setLiveScan(null); setLiveScanId(null); setScreen("results"); window.scrollTo(0, 0); }}
          />
          <TweakButton
            label={lang === "ar" ? "بطاقة المشاركة (تجريبي)" : "Share card (demo)"}
            onClick={() => { setLiveScan(null); setLiveScanId(null); setScreen("results"); setShareOpen(true); window.scrollTo(0, 0); }}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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