/* global React, ReactDOM, Ic, Logo, useFlux, fluxActions, toast, Field, Copyable, DangerButton, SignIn, Browse, Detail, Dashboard, DiscountForm, ApiKeys, ApiDocs, Webhooks, ToastHost */
const { useState: useMS } = React;

// ---------- nav definition ----------
const NAV = [
  { group: "Database" },
  { view: "discounts", name: "Discounts", icon: "tag" },
  { view: "dashboard", name: "Overview", icon: "trend" },
  { view: "add", name: "Add discount", icon: "plus" },
  { group: "Developers" },
  { view: "docs", name: "API & console", icon: "cmd" },
  { view: "keys", name: "API keys", icon: "shield" },
  { view: "webhooks", name: "Webhooks", icon: "webhook" },
  { group: "Account" },
  { view: "settings", name: "Settings", icon: "settings" },
];

const TITLES = {
  discounts: ["Discounts", "Browse the database"],
  detail: ["Discount", "Detail & delivery history"],
  dashboard: ["Overview", "Ingestion, storage & delivery"],
  add: ["Add discount", "Manual entry"],
  edit: ["Edit discount", "Manual edit"],
  docs: ["API & console", "Push discounts in"],
  keys: ["API keys", "Authenticate your scrapers"],
  webhooks: ["Webhooks", "Discord delivery"],
  settings: ["Settings", "Database & connection"],
};

function AppSidebar({ route, go }) {
  const s = useFlux();
  const counts = { discounts: s.discounts.length, webhooks: s.webhooks.filter((w) => w.active).length, keys: s.apiKeys.filter((k) => !k.revoked).length };
  const activeView = route.view === "detail" || route.view === "edit" ? "discounts" : route.view;
  return (
    <div className="sidebar">
      <div className="brand"><Logo name="Discounts" sub="DISCOUNTS DB" /></div>
      <div className="nav">
        {NAV.map((it, i) => {
          if (it.group) return <div key={i} className="group">{it.group}</div>;
          const Icon = Ic[it.icon];
          const count = counts[it.view];
          return (
            <div key={i} className={`item ${activeView === it.view ? "active" : ""}`} onClick={() => go(it.view)}>
              <Icon className="ico" />
              <span>{it.name}</span>
              {count != null && it.view !== "add" ? <span className="count">{count}</span> : null}
            </div>
          );
        })}
      </div>
      <div className="user">
        <div className="avatar"></div>
        <div style={{ flex: 1 }}>
          <div className="name">{s.session.user.name}</div>
          <div className="role">{s.session.user.role}</div>
        </div>
        <button className="signout" title="Sign out" onClick={() => fluxActions.signOut()}><Ic.external style={{ width: 15, height: 15 }} /></button>
      </div>
    </div>
  );
}

// ---------- settings ----------
function Settings() {
  const s = useFlux();
  const [base, setBase] = useMS(s.settings.apiBase || "");
  return (
    <div className="view-pad fade-in" style={{ maxWidth: 720 }}>
      <div className="sec-head"><h2>Settings</h2><span className="desc">Connection & maintenance</span></div>

      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <Field label="API base URL" hint="where your deployed backend lives — used in the docs & cURL examples">
          <div style={{ display: "flex", gap: 8 }}>
            <input className="input mono" style={{ fontSize: 12.5 }} value={base} onChange={(e) => setBase(e.target.value)} placeholder="https://flux-discounts.up.railway.app" />
            <button className="btn" onClick={() => { fluxActions.setSetting("apiBase", base.trim()); toast("Saved", "success"); }}>Save</button>
          </div>
        </Field>
      </div>

      <div className="card" style={{ padding: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Ic.database style={{ width: 18, height: 18, color: "var(--text-3)" }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>Refresh from server</div>
            <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 3 }}>Re-pull discounts, keys, webhooks and the delivery log from the live database.</div>
          </div>
          <button className="btn" onClick={() => { fluxActions.resetAll(); toast("Refreshed", "success"); }}><Ic.history className="ico" />Refresh</button>
        </div>
      </div>

      <div style={{ marginTop: 20, fontSize: 12, color: "var(--text-4)", lineHeight: 1.6 }}>
        This dashboard reads and writes the <span className="mono-sm">server/</span> backend (SQLite) over its API. Your scrapers POST to the same ingestion endpoint, and Discord webhooks fire server-side.
      </div>
    </div>
  );
}

// ---------- root ----------
function App() {
  const s = useFlux();
  const [route, setRoute] = useMS({ view: "discounts", param: null });
  const go = (view, param = null) => { setRoute({ view, param }); document.querySelector(".app-body")?.scrollTo(0, 0); };

  if (s.booting) return (
    <div className="panel haze" style={{ height: "100vh", width: "100vw", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div className="pulse" style={{ color: "var(--text-3)", fontSize: 13, letterSpacing: "0.06em" }}>Connecting to database…</div>
    </div>
  );
  if (!s.session.signedIn) return <><SignIn /><ToastHost /></>;

  const [title, sub] = TITLES[route.view] || ["", ""];
  let body;
  switch (route.view) {
    case "discounts": body = <Browse go={go} />; break;
    case "detail": body = <Detail id={route.param} go={go} />; break;
    case "dashboard": body = <Dashboard go={go} />; break;
    case "add": body = <DiscountForm go={go} />; break;
    case "edit": body = <DiscountForm id={route.param} go={go} />; break;
    case "docs": body = <ApiDocs />; break;
    case "keys": body = <ApiKeys />; break;
    case "webhooks": body = <Webhooks go={go} />; break;
    case "settings": body = <Settings />; break;
    default: body = <Browse go={go} />;
  }

  return (
    <div className="app-shell">
      <AppSidebar route={route} go={go} />
      <div className="app-main">
        <div className="app-topbar">
          <h1>{title}</h1>
          <span className="sub">· {sub}</span>
          <span style={{ flex: 1 }} />
          <span className="pill green dot" style={{ fontSize: 10.5 }}>API LIVE</span>
        </div>
        <div className="app-body">{body}</div>
      </div>
      <ToastHost />
    </div>
  );
}

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