/* ============================================================
   APP — routing + tweaks wiring + mount
   ============================================================ */
const { useApp, Icon } = window;

const FONT_PAIRS = {
  editorial: { head: '"Tiro Bangla", serif', ui: '"Hind Siliguri", sans-serif', label: "এডিটোরিয়াল" },
  classic:   { head: '"Noto Serif Bengali", serif', ui: '"Anek Bangla", sans-serif', label: "ক্লাসিক" },
  modern:    { head: '"Baloo Da 2", cursive', ui: '"Hind Siliguri", sans-serif', label: "মডার্ন" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sliderStyle": "cinematic",
  "accent": "#0e8388",
  "fontPair": "editorial",
  "density": "regular",
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const app = useApp();
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  window.__tweaks = t;

  // apply tweaks to document root
  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    r.setAttribute("data-density", t.density);
    r.style.setProperty("--accent", t.accent);
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.editorial;
    r.style.setProperty("--font-head", fp.head);
    r.style.setProperty("--font-ui", fp.ui);
  }, [t.dark, t.density, t.accent, t.fontPair]);

  const { view, params } = app.state.route;
  const isAdmin = view.startsWith("admin");

  let page;
  if (!isAdmin) {
    if (view === "home") page = <window.Home />;
    else if (view === "category") page = <window.Category slug={params.slug} />;
    else if (view === "article") page = <window.Article id={params.id} />;
    else if (view === "login") page = <window.Login />;
    else if (view === "bookmarks") page = <window.Bookmarks />;
    else if (view === "account") page = <window.Account />;
    else if (view === "page") page = <window.StaticPage slug={params.slug} />;
    else page = <window.Home />;
  }

  return (
    <>
      {isAdmin ? <AdminRouter view={view} params={params} /> : (
        <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
          <window.Header />
          <div style={{ flex: 1 }}>{page}</div>
          <window.Footer />
        </div>
      )}
      <window.Toast />
      <TweaksUI t={t} setTweak={setTweak} />
    </>
  );
}

function AccessDenied() {
  const app = useApp();
  return (
    <div style={{ display: "grid", placeItems: "center", padding: "80px 20px", textAlign: "center" }}>
      <div>
        <div style={{ display: "inline-grid", placeItems: "center", width: 64, height: 64, borderRadius: "50%", background: "var(--surface-2)", color: "var(--ink-3)", marginBottom: 16 }}><Icon name="x" size={30} /></div>
        <h2 className="serif" style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>প্রবেশাধিকার নেই</h2>
        <p className="muted" style={{ marginBottom: 18 }}>আপনার বর্তমান ভূমিকায় এই পৃষ্ঠাটি দেখার অনুমতি নেই।<br />উপরের ডানদিকে ভূমিকা বদলে দেখুন।</p>
        <button className="btn primary" onClick={() => app.nav("admin")}>ড্যাশবোর্ডে ফিরুন</button>
      </div>
    </div>
  );
}

function AdminRouter({ view, params }) {
  const app = useApp();
  if (!app.state.staffUser) return <AdminLogin />;
  const me = app.state.staffUser;
  const need = { "admin-rss": "rss", "admin-people": "manageUsers", "admin-editor": "create" };
  const allowed = !need[view] || (me.perms && me.perms[need[view]]);

  let inner;
  if (!allowed) inner = <AccessDenied />;
  else if (view === "admin") inner = <window.AdminDashboard />;
  else if (view === "admin-posts") inner = <window.AdminPosts />;
  else if (view === "admin-editor") inner = <window.AdminEditor id={params.id} />;
  else if (view === "admin-rss") inner = <window.AdminRSS />;
  else if (view === "admin-people") inner = <window.AdminPeople />;
  else inner = <window.AdminDashboard />;

  return <window.AdminShell active={view}>{inner}</window.AdminShell>;
}

function AdminLogin() {
  const app = useApp();
  const [email, setEmail] = React.useState("admin@probhat.local");
  const [pw, setPw] = React.useState("admin123");
  const [busy, setBusy] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    try { await app.staffLogin(email, pw); app.nav("admin"); }
    catch (_) { /* toast already shown */ }
    finally { setBusy(false); }
  };
  return (
    <div style={{ minHeight: "100vh", background: "var(--ink)", display: "grid", placeItems: "center", padding: 20 }}>
      <form onSubmit={submit} style={{ width: "min(380px, 100%)", background: "var(--surface)", borderRadius: 12, padding: "32px 30px", boxShadow: "var(--shadow-2)" }}>
        <div className="serif" style={{ fontSize: 30, fontWeight: 700, marginBottom: 4 }}>প্রভাত<span style={{ color: "var(--accent)" }}>.</span></div>
        <div style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 22 }}>Newsroom CMS</div>
        <h1 className="serif" style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>অ্যাডমিন প্রবেশ</h1>
        <p className="muted" style={{ fontSize: 13.5, marginBottom: 20 }}>আপনার সম্পাদকীয় অ্যাকাউন্টে প্রবেশ করুন</p>
        <div style={{ display: "grid", gap: 14 }}>
          <label className="field"><span className="lbl">ইমেইল</span>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} autoFocus required /></label>
          <label className="field"><span className="lbl">পাসওয়ার্ড</span>
            <input type="password" value={pw} onChange={e => setPw(e.target.value)} required /></label>
          <button className="btn primary" type="submit" disabled={busy} style={{ justifyContent: "center", padding: "12px", fontSize: 15 }}>
            {busy ? "প্রবেশ হচ্ছে…" : "প্রবেশ করুন"}
          </button>
          <button type="button" className="btn ghost sm" onClick={() => app.nav("home")} style={{ justifyContent: "center" }}>
            পাবলিক সাইটে ফিরে যান
          </button>
        </div>
      </form>
    </div>
  );
}

function TweaksUI({ t, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect, TweakToggle } = window;
  return (
    <TweaksPanel>
      <TweakSection label="হোমপেজ স্লাইডার" />
      <TweakRadio label="স্লাইডার ধরন" value={t.sliderStyle}
        options={[{ value: "cinematic", label: "সিনেম্যাটিক" }, { value: "billboard", label: "বিলবোর্ড" }]}
        onChange={(v) => setTweak("sliderStyle", v)} />

      <TweakSection label="থিম ও রঙ" />
      <TweakColor label="অ্যাকসেন্ট" value={t.accent}
        options={["#0e8388", "#c0362c", "#1f5fa8", "#2e7d52", "#7a4fd0"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakToggle label="ডার্ক মোড" value={t.dark} onChange={(v) => setTweak("dark", v)} />

      <TweakSection label="টাইপোগ্রাফি ও ঘনত্ব" />
      <TweakSelect label="ফন্ট জোড়া" value={t.fontPair}
        options={Object.keys(FONT_PAIRS).map(k => ({ value: k, label: FONT_PAIRS[k].label }))}
        onChange={(v) => setTweak("fontPair", v)} />
      <TweakRadio label="ঘনত্ব" value={t.density}
        options={[{ value: "compact", label: "সংকুচিত" }, { value: "regular", label: "নিয়মিত" }, { value: "comfy", label: "প্রশস্ত" }]}
        onChange={(v) => setTweak("density", v)} />
    </TweaksPanel>
  );
}

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