/* ======================================================================
   KOREALM — App shell: top bar, role switcher, sidebar, router
   Role modules register into window.KOREALM.roles[role] = { nav, Screen }
   ====================================================================== */
window.KOREALM = window.KOREALM || { roles: {} };


/* Randomized display name for the account menu (regenerated each load) */
const DISPLAY_NAME = (() => {
  const first = ["Maya", "Leo", "Nadia", "Owen", "Priya", "Theo", "Zara", "Felix", "Imani", "Rohan"];
  const last = ["Carter", "Nguyen", "Okafor", "Silva", "Hansen", "Moreau", "Patel", "Kowalski", "Reyes", "Doyle"];
  return first[Math.floor(Math.random() * first.length)] + " " + last[Math.floor(Math.random() * last.length)];
})();

/* ---------------- Brand mark ---------------- */
function Logo({ size = 30, variant = "compact", onDark = false }) {
  const isFull = variant === "full";
  const src = isFull ? "logo-full.png" : "logo-compact.png";
  const h = isFull ? 130 : 42;
  const plate = onDark
    ? { background: "#ffffff", padding: isFull ? "20px 26px" : "12px 16px", borderRadius: 18, boxShadow: "0 16px 40px rgba(8,18,33,0.34)" }
    : { background: "#ffffff", padding: "7px 13px", borderRadius: 12, border: "1px solid var(--line-2)", boxShadow: "var(--sh-1)" };
  return (
    <div style={{ display: "inline-flex", alignItems: "center", cursor: "pointer", ...plate }}>
      <img src={src} alt="Korealm — Property Management" style={{ height: h, width: "auto", display: "block" }} />
    </div>
  );
}

/* ---------------- Role switcher ---------------- */
const ROLE_META = {
  public:   { label: "Public", icon: "search", path: "/", desc: "Marketing site & listings" },
  tenant:   { label: "Tenant", icon: "user", path: "/tenant", desc: "Renter workspace" },
  landlord: { label: "Landlord", icon: "building", path: "/landlord", desc: "Owner workspace" },
  admin:    { label: "Admin", icon: "shield", path: "/admin", desc: "Operations console" },
};

/* ---------------- Route Dashboard (persona router) ---------------- */
function RouteSwitcher() {
  const app = useApp();
  const { session, setRole, db, me } = app;
  const [open, setOpen] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
  }, []);

  const cur = ROLE_META[session.role];
  const subRoutes = (r) => {
    if (r === "public") return 0;
    try { const cfg = window.KOREALM.roles[r]; return cfg ? cfg.nav(db, me(r), app).length : 0; } catch (e) { return 0; }
  };

  return (
    <div className="route-switch" ref={ref}>
      <button className={"route-trigger" + (open ? " open" : "")} onClick={() => setOpen(o => !o)}>
        <Icon name="gitBranch" size={16} className="route-trigger-ic" />
        <span className="route-trigger-label">Route</span>
        <span className="route-trigger-path mono">{cur.path}</span>
        <Icon name="chevD" size={14} className="dim" />
      </button>
      {open && (
        <div className="route-dash">
          <div className="route-dash-head">
            <span className="route-dash-icon"><Icon name="route" size={17} /></span>
            <div className="col" style={{ lineHeight: 1.25 }}>
              <span className="route-dash-title">Route Dashboard</span>
              <span className="hint">Switch the active persona route</span>
            </div>
          </div>
          <div className="route-list">
            {Object.keys(ROLE_META).map(r => {
              const m = ROLE_META[r];
              const active = session.role === r;
              const n = subRoutes(r);
              return (
                <button key={r} className={"route-row" + (active ? " active" : "")} onClick={() => { setRole(r); setOpen(false); }}>
                  <span className="route-node"><Icon name={m.icon} size={16} /></span>
                  <div className="grow" style={{ minWidth: 0 }}>
                    <div className="row gap-8" style={{ alignItems: "center" }}>
                      <span className="route-name">{m.label}</span>
                      {active && <span className="route-live"><span className="route-live-dot" />active</span>}
                    </div>
                    <div className="route-path mono">korealm.app{m.path}</div>
                  </div>
                  <span className="route-meta">{r === "public" ? "site" : n + " routes"}</span>
                  <Icon name="chevR" size={15} className="route-row-go" />
                </button>
              );
            })}
          </div>
          <div className="route-dash-foot">
            <Icon name="info" size={13} />
            <span>Each persona is served as an isolated route.</span>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- Route counting helper ---------------- */
function countRoutes(r, app) {
  if (r === "public") return 0;
  try { const cfg = window.KOREALM.roles[r]; return cfg ? cfg.nav(app.db, app.me(r), app).length : 0; } catch (e) { return 0; }
}

/* ---------------- Route Map landing (POC launcher) ---------------- */
function RouteLanding() {
  const app = useApp();
  const { setRole } = app;
  const order = ["public", "tenant", "landlord", "admin"];
  const total = order.reduce((s, r) => s + countRoutes(r, app), 0);
  return (
    <div className="route-landing">
      <div className="rl-inner anim-rise">
        <div className="rl-head">
          <span className="rl-kicker"><Icon name="gitBranch" size={13} />POC · Route map</span>
          <h1 className="rl-title">Where would you like to start?</h1>
          <p className="rl-sub">Korealm serves each persona as an isolated route off a single origin. Choose a route to enter that workspace — you can switch anytime from the top bar.</p>
        </div>
        <div className="rl-tree">
          <div className="rl-origin">
            <span className="rl-origin-node"><Icon name="route" size={18} /></span>
            <div className="col" style={{ lineHeight: 1.3 }}>
              <span className="rl-origin-name mono">korealm.app</span>
              <span className="rl-origin-meta mono">production origin · {total} routes</span>
            </div>
            <span className="rl-origin-live"><span className="route-live-dot" />online</span>
          </div>
          <div className="rl-stem" />
          <div className="rl-grid">
            {order.map(r => {
              const m = ROLE_META[r];
              const n = countRoutes(r, app);
              return (
                <button key={r} className="rl-card" onClick={() => setRole(r)}>
                  <div className="rl-card-top">
                    <span className="rl-card-node"><Icon name={m.icon} size={18} /></span>
                    <span className="rl-card-meta mono">{r === "public" ? "site" : n + " routes"}</span>
                  </div>
                  <div className="rl-card-name">{m.label}</div>
                  <div className="rl-card-path mono">korealm.app{m.path}</div>
                  <div className="rl-card-desc">{m.desc}</div>
                  <span className="rl-card-go">Enter route <Icon name="arrowR" size={15} /></span>
                </button>
              );
            })}
          </div>
        </div>
        <div className="rl-foot">
          <Icon name="info" size={14} />
          <span>Sandbox build · payments use a test gateway, no real charges occur.</span>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Account menu ---------------- */
function AccountMenu() {
  const { session, db, me, actions, go, setRole } = useApp();
  const [open, setOpen] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h);
  }, []);
  const u = session.role === "public" ? null : me(session.role);
  const displayName = u && u.registered ? u.name : DISPLAY_NAME;

  return (
    <div className="row gap-8" ref={ref} style={{ position: "relative" }}>
      <button className="btn btn-ghost btn-icon btn-sm" title="Reset demo data" onClick={() => actions.reset()}>
        <Icon name="refresh" size={16} />
      </button>
      {u ? (
        <button className="acct" onClick={() => setOpen(o => !o)}>
          <Avatar name={displayName} size={30} />
          <div className="col" style={{ alignItems: "flex-start", lineHeight: 1.15 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>{displayName.split(" ")[0]}</span>
            <span style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "capitalize" }}>{u.role}</span>
          </div>
          <Icon name="chevD" size={15} className="dim" />
        </button>
      ) : (
        <div className="row gap-8">
          <Button variant="ghost" size="sm" onClick={() => go("auth", { mode: "signin" })}>Sign in</Button>
          <Button variant="primary" size="sm" onClick={() => go("auth", { mode: "register" })}>Get started</Button>
        </div>
      )}
      {open && u && (
        <div className="menu">
          <div className="menu-head">
            <Avatar name={displayName} size={40} />
            <div className="col gap-2">
              <span style={{ fontWeight: 600, fontSize: 14 }}>{displayName}</span>
              <span className="hint">{u.email}</span>
            </div>
          </div>
          <div className="divider" />
          <div className="menu-item" onClick={() => { setOpen(false); }}><Icon name="user" size={16} />Profile & settings</div>
          <div className="menu-item" onClick={() => { setOpen(false); }}><Icon name="bell" size={16} />Notifications</div>
          <div className="divider" />
          <div className="menu-item danger" onClick={() => { setOpen(false); setRole("public"); }}><Icon name="logout" size={16} />Sign out</div>
        </div>
      )}
    </div>
  );
}

/* ---------------- Top bar ---------------- */
function TopBar() {
  const { session, setRole } = useApp();
  const launch = session.role === "launch";
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="row gap-20" style={{ minWidth: 0 }}>
          <div onClick={() => setRole("launch")}><Logo /></div>
          <span className="poc-tag">POC</span>
        </div>
        {!launch && <RouteSwitcher />}
        {!launch && (
          <div className="row gap-12">
            {session.role !== "public" && <button className="btn btn-ghost btn-icon btn-sm bell-btn" title="Notifications"><Icon name="bell" size={17} /><span className="bell-dot" /></button>}
            <AccountMenu />
          </div>
        )}
      </div>
    </header>
  );
}

/* ---------------- Page header ---------------- */
function PageHeader({ title, sub, actions, back, children }) {
  return (
    <div className="page-head">
      <div className="row between wrap gap-16">
        <div className="col gap-4" style={{ minWidth: 0 }}>
          {back && <button className="btn-link row gap-6" style={{ marginBottom: 2 }} onClick={back.onClick}><Icon name="chevL" size={15} />{back.label}</button>}
          <h1 style={{ fontSize: 26, letterSpacing: "-0.02em" }}>{title}</h1>
          {sub && <p className="muted" style={{ fontSize: 14.5, maxWidth: 620 }}>{sub}</p>}
        </div>
        {actions && <div className="row gap-10 wrap">{actions}</div>}
      </div>
      {children}
    </div>
  );
}

/* ---------------- Sidebar (dashboard roles) ---------------- */
function Sidebar({ role }) {
  const app = useApp();
  const { session, go, db, me } = app;
  const cfg = window.KOREALM.roles[role];
  const items = cfg.nav(db, me(role), app);
  return (
    <aside className="sidebar">
      <div className="side-role">
        <span className="avatar sq" style={{ width: 30, height: 30, background: "var(--green-soft)", color: "var(--green)" }}><Icon name={ROLE_META[role].icon} size={17} /></span>
        <div className="col" style={{ lineHeight: 1.2 }}>
          <span style={{ fontWeight: 700, fontSize: 14 }}>{ROLE_META[role].label}</span>
          <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Workspace</span>
        </div>
      </div>
      <nav className="side-nav">
        {items.map(it => (
          <button key={it.view} className={"side-item" + (session.view === it.view ? " active" : "")} onClick={() => go(it.view)}>
            <Icon name={it.icon} size={18} />
            <span className="grow" style={{ textAlign: "left" }}>{it.label}</span>
            {it.count ? <span className="side-count">{it.count}</span> : null}
          </button>
        ))}
      </nav>
      <div className="side-foot">
        <div className="panel" style={{ padding: 13 }}>
          <div className="row gap-8" style={{ marginBottom: 6 }}><Icon name="sparkle" size={15} className="" style={{ color: "var(--green)" }} /><span style={{ fontWeight: 600, fontSize: 13 }}>Sandbox mode</span></div>
          <p className="hint" style={{ lineHeight: 1.45 }}>Payments use a test gateway. No real charges occur.</p>
        </div>
      </div>
    </aside>
  );
}

/* ---------------- App body / router ---------------- */
function AppBody() {
  const app = useApp();
  const { session } = app;
  const role = session.role;

  if (role === "launch") {
    return <RouteLanding />;
  }
  if (role === "public") {
    return <window.PublicApp />;
  }
  const cfg = window.KOREALM.roles[role];
  const Screen = cfg.Screen;
  return (
    <div className="dash">
      <Sidebar role={role} />
      <main className="dash-main">
        <div className="dash-scroll">
          <div className="dash-inner anim-rise" key={session.view}>
            <Screen view={session.view} params={session.params} app={app} />
          </div>
        </div>
      </main>
    </div>
  );
}

function Shell() {
  return (
    <StoreProvider>
      <TopBar />
      <AppBody />
      <Toasts />
    </StoreProvider>
  );
}

Object.assign(window, { Logo, PageHeader, Shell, ROLE_META });