// Main App — router + tweaks + toasts
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EA580C",
  "density": "comfortable",
  "default_lang": "en"
}/*EDITMODE-END*/;

function useToasts() {
  const [toasts, setToasts] = useState([]);
  const push = (msg) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((arr) => [...arr, { id, msg }]);
    setTimeout(() => setToasts((arr) => arr.filter(x => x.id !== id)), 3200);
  };
  return [toasts, push];
}

function App() {
  const [lang, setLang] = useState(TWEAK_DEFAULTS.default_lang);
  const [page, setPage] = useState("login");
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [toasts, pushToast] = useToasts();

  const t = (key) => (window.I18N[lang] && window.I18N[lang][key]) || key;

  // Apply accent color tweak
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // soft tints
    const soft = tweaks.accent + "14";
    const line = tweaks.accent + "33";
    document.documentElement.style.setProperty("--accent-soft", soft);
    document.documentElement.style.setProperty("--accent-line", line);
  }, [tweaks.accent]);

  // Apply lang class to body for font swap
  useEffect(() => {
    document.body.classList.toggle("lang-th", lang === "th");
  }, [lang]);

  // Density tweak
  useEffect(() => {
    document.body.style.fontSize = tweaks.density === "compact" ? "13px" : tweaks.density === "spacious" ? "15px" : "14px";
  }, [tweaks.density]);

  const user = { name: "Nathanon T.", email: "nathanon.t@gmail.com", initials: "NT" };

  const ACCENT_OPTIONS = ["#EA580C", "#D97706", "#DC2626", "#0D9488", "#171717"];

  return (
    <>
      {page === "login" ? (
        <LoginPage t={t} lang={lang} setLang={setLang} onLogin={() => setPage("dashboard")} />
      ) : (
        <div className="app">
          <Sidebar page={page} setPage={setPage} t={t} user={user} />
          <div className="main">
            <Topbar t={t} lang={lang} setLang={setLang} onLogout={() => setPage("login")} />
            {page === "dashboard" && <Dashboard t={t} lang={lang} toast={pushToast} />}
            {page === "form" && <FormPage t={t} lang={lang} toast={pushToast} />}
            {page === "analytics" && <AnalyticsPage t={t} lang={lang} toast={pushToast} />}
            {page === "users" && <UsersPage t={t} lang={lang} toast={pushToast} />}
            {page === "utilities" && <UtilitiesPage t={t} lang={lang} toast={pushToast} />}
          </div>
        </div>
      )}

      {/* Toasts */}
      <div className="toast-rack">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            <span className="dot"></span>
            <span>{t.msg}</span>
          </div>
        ))}
      </div>

      {/* Tweaks panel */}
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Brand accent">
          <window.TweakColor
            label="Accent color"
            value={tweaks.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak("accent", v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Default language">
          <window.TweakRadio
            label="Open in"
            value={tweaks.default_lang}
            options={[
              { value: "en", label: "EN" },
              { value: "th", label: "TH" },
            ]}
            onChange={(v) => { setTweak("default_lang", v); setLang(v); }}
          />
        </window.TweakSection>
        <window.TweakSection label="Density">
          <window.TweakRadio
            label="UI density"
            value={tweaks.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Default" },
              { value: "spacious", label: "Spacious" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Navigate">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {["login","dashboard","form","analytics","users","utilities"].map(p => (
              <button key={p}
                      onClick={() => setPage(p)}
                      style={{
                        border: "1px solid var(--line)",
                        background: page === p ? "var(--accent-soft)" : "var(--panel)",
                        borderColor: page === p ? "var(--accent-line)" : "var(--line)",
                        color: page === p ? "var(--accent)" : "var(--text-2)",
                        padding: "6px 10px",
                        borderRadius: 6,
                        fontSize: 12,
                        fontWeight: 600,
                        cursor: "pointer",
                        textTransform: "capitalize"
                      }}>
                {p}
              </button>
            ))}
          </div>
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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