/* PLASTIFY · ADMIN — main entry: login, layout, router, toast.
   Componentele de pagini sunt in admin-pages.jsx (incarcat dupa). */

const ADM = window.PLASTIFY_ADMIN;

/* ---------- Toast ---------- */
window.AdmToast = { _setMsg: null };
function ToastMount() {
  const [msg, setMsg] = React.useState(null);
  React.useEffect(() => {
    window.AdmToast._setMsg = setMsg;
    return () => { window.AdmToast._setMsg = null; };
  }, []);
  React.useEffect(() => {
    if (!msg) return;
    const t = setTimeout(() => setMsg(null), 2200);
    return () => clearTimeout(t);
  }, [msg]);
  return (
    <div className={`adm-toast ${msg ? "show" : ""}`}>
      <i data-lucide="check-circle"></i>
      <span>{msg || ""}</span>
    </div>
  );
}
window.toast = function (m) { if (window.AdmToast._setMsg) window.AdmToast._setMsg(m); };

/* ---------- Hash router ---------- */
function useAdmRoute() {
  const [route, setRoute] = React.useState(() => window.location.hash || "#/dashboard");
  React.useEffect(() => {
    const onHash = () => { setRoute(window.location.hash || "#/dashboard"); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const clean = (route || "#/dashboard").replace(/^#/, "");
  const parts = clean.split("/").filter(Boolean);
  return { route, clean, top: parts[0] || "dashboard", parts };
}
window.admNavigate = function (h) { window.location.hash = h; };

/* ---------- Login ---------- */
function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState("aron@aronplastify.eu");
  const [password, setPassword] = React.useState("••••••••");
  const submit = (e) => { e.preventDefault(); onLogin({ email, name: "Aron" }); };

  return (
    <div className="adm-login">
      <div className="adm-login-card">
        <div className="brand">
          <img src="../assets/logos/icon_hex.png" alt="" />
          <div className="lockup">
            <div className="name">PLASTIFY</div>
            <div className="sub">ADMIN PANEL</div>
          </div>
        </div>
        <h1>Bun venit înapoi.</h1>
        <p className="sublead">Intră în contul tău pentru a administra catalogul, cererile de ofertă și conținutul site-ului.</p>
        <form onSubmit={submit}>
          <div>
            <label htmlFor="email">Email</label>
            <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
          </div>
          <div>
            <label htmlFor="password">Parolă</label>
            <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} required />
          </div>
          <button type="submit" className="btn-submit">Intră în panou →</button>
        </form>
        <div className="hint">
          <b>DEMO MODE</b> — datele se salvează în localStorage. Pentru demonstrație, orice email și parolă funcționează.
        </div>
      </div>
    </div>
  );
}

/* ---------- Sidebar nav ---------- */
const NAV_ITEMS = [
  { hash: "#/dashboard",   label: "Dashboard",  icon: "layout-dashboard", section: "Principal" },
  { hash: "#/cereri",      label: "Cereri ofertă", icon: "inbox",          section: "Principal", badgeFrom: "newRequests" },
  { hash: "#/produse",     label: "Produse",     icon: "package",          section: "Catalog",   badgeFrom: "productCount" },
  { hash: "#/categorii",   label: "Categorii",   icon: "layers",           section: "Catalog" },
  { hash: "#/continut",    label: "Conținut site", icon: "edit-3",         section: "Conținut" },
  { hash: "#/parteneri",   label: "Parteneri",   icon: "users",            section: "Conținut" },
  { hash: "#/contact",     label: "Contact",     icon: "phone",            section: "Conținut" },
  { hash: "#/legale",      label: "Legale",      icon: "scroll",           section: "Conținut" },
  { hash: "#/setari",      label: "Setări",      icon: "settings",         section: "Configurare" },
];

function Sidebar({ active, state, onClose }) {
  const newReqs = (state.requests || []).filter(r => r.status === "Nou").length;
  const productCount = (state.products || []).length;
  const badges = { newRequests: newReqs, productCount };
  let lastSection = "";
  return (
    <aside className="adm-sidebar">
      <div className="brand">
        <img src="../assets/logos/icon_hex.png" alt="" />
        <div className="lockup">
          <div className="name">PLASTIFY</div>
          <div className="sub">ADMIN</div>
        </div>
      </div>
      <nav className="adm-nav">
        {NAV_ITEMS.map(n => {
          const showSection = n.section !== lastSection;
          lastSection = n.section;
          const isActive = active === n.hash || (active.startsWith(n.hash) && n.hash !== "#/dashboard");
          const badge = n.badgeFrom ? badges[n.badgeFrom] : null;
          return (
            <React.Fragment key={n.hash}>
              {showSection && <div className="adm-nav-section">{n.section}</div>}
              <a href={n.hash} className={isActive ? "active" : ""} onClick={() => onClose && onClose()}>
                <i data-lucide={n.icon}></i>
                <span>{n.label}</span>
                {badge ? <span className="badge">{badge}</span> : null}
              </a>
            </React.Fragment>
          );
        })}
        <a href="https://plastify-a1.pages.dev/" target="_blank" rel="noopener" className="ext-link">
          <i data-lucide="external-link"></i>
          <span>Vezi site →</span>
        </a>
      </nav>
    </aside>
  );
}

/* ---------- Topbar ---------- */
function Topbar({ user, onLogout, onMenu, crumb }) {
  return (
    <div className="adm-topbar">
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button className="menu-trigger" onClick={onMenu} aria-label="Meniu" style={{ display: "none" }}>
          <i data-lucide="menu" style={{ width: 18, height: 18 }}></i>
        </button>
        <div className="crumbs">
          <b>{crumb}</b>
        </div>
      </div>
      <div className="actions">
        <div className="adm-user">
          <div className="avatar">{(user.name || "A").substring(0, 1).toUpperCase()}</div>
          <div>
            <div className="name">{user.name || "Aron"}</div>
            <div className="role">ADMINISTRATOR</div>
          </div>
        </div>
        <button className="adm-logout" onClick={onLogout}>Logout</button>
      </div>
    </div>
  );
}

/* ---------- App ---------- */
function AdminApp() {
  const [state, setState] = React.useState(() => ADM.getState());
  const [user, setUser] = React.useState(() => state.session?.user || null);
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const router = useAdmRoute();

  // Persist mutations through one helper
  const update = React.useCallback((mutator) => {
    setState(prev => {
      const next = mutator(prev);
      ADM.saveState(next);
      return next;
    });
  }, []);

  const onLogin = (u) => {
    update(s => ({ ...s, session: { user: u } }));
    setUser(u);
    if (!window.location.hash || window.location.hash === "#/") {
      window.location.hash = "#/dashboard";
    }
  };
  const onLogout = () => {
    update(s => ({ ...s, session: { user: null } }));
    setUser(null);
    window.location.hash = "#/";
  };

  // refresh lucide icons whenever route changes
  React.useEffect(() => {
    const t = setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 50);
    return () => clearTimeout(t);
  });

  if (!user) {
    return (<>
      <LoginScreen onLogin={onLogin} />
      <ToastMount />
    </>);
  }

  // Crumb
  const crumbMap = {
    dashboard: "Dashboard",
    cereri: "Cereri ofertă",
    produse: "Produse",
    categorii: "Categorii & filtre",
    continut: "Conținut site",
    parteneri: "Parteneri",
    contact: "Date de contact",
    legale: "Pagini legale",
    setari: "Setări",
  };
  const crumb = crumbMap[router.top] || "Panou";

  // Page renderer
  const PageMap = window.AdmPages || {};
  const PageEl = PageMap[router.top] || PageMap.dashboard;

  return (<>
    <div className="adm-shell">
      <Sidebar active={"#/" + router.top} state={state} onClose={() => setDrawerOpen(false)} />
      <main className="adm-main">
        <Topbar user={user} onLogout={onLogout} onMenu={() => setDrawerOpen(true)} crumb={crumb} />
        {PageEl ? <PageEl state={state} update={update} router={router} /> : null}
      </main>
    </div>
    <ToastMount />
  </>);
}

/* mounted by index.html after admin-pages.jsx loads */
window.PlastifyAdminApp = AdminApp;