/* Dulius App UI Kit — App shell: sidebar + topbar */

const NAV = [
  { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
  { id: "myscore", label: "My Score", icon: "gauge" },
  { id: "offers", label: "My Offers", icon: "badge-dollar-sign" },
  { id: "approved", label: "Approved", icon: "circle-check-big" },
  { id: "analysis", label: "Profile Analysis", icon: "line-chart" },
  { id: "history", label: "Funding history", icon: "history" },
  { id: "documents", label: "Documents", icon: "folder" },
  { id: "disputes", label: "Disputes", icon: "shield" },
  { id: "support", label: "Support", icon: "life-buoy" },
      { id: "settings", label: "Settings", icon: "settings" },
  { id: "plans", label: "Premium", icon: "gem" },
  { id: "profile", label: "Profile", icon: "user-round" },
];

function Sidebar({ active, onNav }) {
  return (
    <aside className="dsidebar">
      <div className="dsidebar-logo">
        <img src="../../assets/dulius-wordmark.png" alt="Dulius" />
      </div>
      <nav className="dnav">
        {NAV.map((n) => (
          <button key={n.id} className={`dnav-item ${active === n.id ? "active" : ""}`} onClick={() => onNav(n.id)}>
            <Icon name={n.icon} size={20} />
            <span>{n.label}</span>
            {n.id === "offers" && <span className="dnav-count">6</span>}
          </button>
        ))}
      </nav>
      <div className="dsidebar-foot">
        {DULIUS.plans.current !== "Pro" ? (
          <button className="dproupsell" onClick={() => onNav("plans")}>
            <div className="dproupsell-top"><Icon name="gem" size={16} /> Upgrade to Pro</div>
            <div className="dproupsell-s">Score simulator, priority matching, and discounted dispute &amp; negotiation.</div>
            <span className="dproupsell-cta">See Pro — $49/mo →</span>
          </button>
        ) : (
          <Card className="dupsell" pad={false}>
            <div className="dupsell-in">
              <Icon name="shield-check" size={18} />
              <div>
                <div className="dupsell-t">No credit pull</div>
                <div className="dupsell-s">Checking your score never affects your credit.</div>
              </div>
            </div>
          </Card>
        )}
      </div>
    </aside>
  );
}

function ensureDuliusProfileMenuStyles(){ if(document.getElementById("dulius-pmenu-styles")) return; var st=document.createElement("style"); st.id="dulius-pmenu-styles"; st.textContent=[".dprofilechip-wrap{position:relative}",".dprofilechip{cursor:pointer}",".dprofile-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #e6ece8;border-radius:14px;box-shadow:0 12px 32px rgba(20,50,34,.16);min-width:236px;padding:8px;z-index:60}",".dprofile-menu-head{padding:8px 12px 10px;border-bottom:1px solid #f0f4f1}",".dpm-name{font-weight:700;font-size:14px;color:#143222}",".dpm-sub{font-size:12px;color:#6b7a70;margin-top:1px;max-width:206px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",".dpm-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:none;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#21402c;border-radius:9px;text-align:left}",".dpm-item:hover{background:#f6faf7}",".dpm-item.danger{color:#E05C5C}",".dpm-item.danger:hover{background:#fdecec}",".dpm-sep{border-top:1px solid #f0f4f1;margin:6px 0}"].join("\n"); document.head.appendChild(st); }
function Topbar({ title, subtitle }) {
  const u = DULIUS.user;
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [ident, setIdent] = React.useState(null);
  React.useEffect(function(){
    var cu = window.Clerk && window.Clerk.user;
    var nm = (cu && (cu.fullName || ((cu.firstName||"")+" "+(cu.lastName||"")).trim())) || u.name;
    var em = (cu && cu.primaryEmailAddress && cu.primaryEmailAddress.emailAddress) || u.email || "";
    (async function(){
      var biz = "";
      try{
        if(cu && window.Clerk.session){
          var tk = await window.Clerk.session.getToken();
          var j = await fetch("/api/member/profile",{headers:{Authorization:"Bearer "+tk},cache:"no-store"}).then(function(r){return r.json();});
          biz = (j.account && j.account.business_name) || (j.application && j.application.business_name) || (j.profile && (j.profile.businessName||j.profile.legalName)) || "";
        }
      }catch(e){}
      var name = nm || em || "Your account";
      var ini = name.split(/\s+/).map(function(x){return x[0]||"";}).join("").slice(0,2).toUpperCase() || "U";
      setIdent({ name: name, email: em, business: biz, initials: ini });
    })();
  }, []);
  var who = ident || { name: u.name, email: u.email || "", business: u.business, initials: u.initials };
  React.useEffect(function(){ ensureDuliusProfileMenuStyles(); }, []);
  React.useEffect(function(){ if(!menuOpen) return; var hh=function(){ setMenuOpen(false); }; document.addEventListener("click", hh); return function(){ document.removeEventListener("click", hh); }; }, [menuOpen]);
  function navTo(label){ var b=Array.prototype.slice.call(document.querySelectorAll("button")).find(function(x){return x.textContent.trim()===label;}); if(b) b.click(); setMenuOpen(false); }
  async function doSignOut(){ setMenuOpen(false); try{ if(window.Clerk){ await window.Clerk.signOut({ redirectUrl: "/" }); } else { window.location.href="/"; } }catch(e){ window.location.href="/"; } }
  return (
    <header className="dtopbar">
      <div>
        <h1 className="dtopbar-title">{title}</h1>
        {subtitle && <div className="dtopbar-sub">{subtitle}</div>}
      </div>
      <div className="dtopbar-right">
        <div className="dsearch">
          <Icon name="search" size={18} />
          <input placeholder="Search offers, lenders…" />
        </div>
        <button className="dicon-btn" aria-label="Notifications">
          <Icon name="bell" size={20} />
          <span className="ddotnotif" />
        </button>
        <div className="dprofilechip-wrap" onClick={function(e){ e.stopPropagation(); }}>
          <div className="dprofilechip" role="button" onClick={function(){ setMenuOpen(function(o){ return !o; }); }}>
            <Avatar initials={who.initials} size={34} />
            <div className="dprofilechip-txt">
              <div className="dpc-name">{who.name}</div>
              <div className="dpc-biz">{who.business}</div>
            </div>
            <Icon name="chevron-down" size={16} />
          </div>
          {menuOpen && (
            <div className="dprofile-menu">
              <div className="dprofile-menu-head">
                <div className="dpm-name">{who.name}</div>
                <div className="dpm-sub">{who.email || who.business}</div>
              </div>
              <button className="dpm-item" onClick={function(){ navTo("Profile"); }}><Icon name="user" size={16} /> Profile</button>
              <button className="dpm-item" onClick={function(){ navTo("Settings"); }}><Icon name="settings" size={16} /> Settings</button>
              <div className="dpm-sep" />
              <button className="dpm-item danger" onClick={doSignOut}><Icon name="log-out" size={16} /> Sign out</button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, Topbar, NAV });