/* Dulius App UI Kit — main app (routing + apply flow) */

const TITLES = {
  dashboard: ["Dashboard", "Here's where your funding stands today"],
  myscore: ["My Score", "Exactly what's shaping your Dulius Score — and how to grow it"],
  offers: ["My Offers", "Real offers from funders, matched and ranked for your profile"],
  approved: ["Approved", "You're approved — finish the final steps to get funded"],
  analysis: ["Profile Analysis", "Your complete financial picture — auto-generated, updated in real time"],
  history: ["Funding history", "Every deal, payment, and balance in one place"],
  documents: ["Documents", "Your encrypted document vault — connected accounts and uploads"],
  disputes: ["Disputes & Services", "We step in between you and a lender when issues arise"],
  settings: ["Settings", "Notifications, preferences, and account"],
    support: ["Support", "Connect with our team — and reach lenders through us"],
  plans: ["Premium", "Pick the plan that grows with your business"],
  profile: ["Profile", "Your business, accounts, and preferences"],
};

function App() {
  const [route, setRoute] = React.useState("dashboard");
  const [applyOffer, setApplyOffer] = React.useState(null); // offer object or null
  const [applyFunding, setApplyFunding] = React.useState(false); // funding application overlay
  const [profileRevision, setProfileRevision] = React.useState(0);
  const main = React.useRef(null);

  React.useEffect(() => { if (main.current) main.current.scrollTop = 0; }, [route]);
  React.useEffect(() => { document.body.style.overflow = (applyOffer || applyFunding) ? "hidden" : ""; }, [applyOffer, applyFunding]);
  React.useEffect(() => {
    const refresh = () => setProfileRevision((value) => value + 1);
    window.addEventListener("dulius:profile-updated", refresh);
    return () => window.removeEventListener("dulius:profile-updated", refresh);
  }, []);

  const openApply = (offer) => setApplyOffer(offer || DULIUS.offers[0]);
  const openFunding = () => setApplyFunding(true);

  const screens = {
    dashboard: <Dashboard onNav={setRoute} onApply={openApply} onApplyFunding={openFunding} />,
    myscore: <MyScore onNav={setRoute} />,
    offers: <Offers onApply={openApply} onApplyFunding={openFunding} onNav={setRoute} />,
    approved: <Approved />,
    analysis: <Analysis onNav={setRoute} onUpgrade={() => setRoute("plans")} locked={((window.DULIUS && DULIUS.plans && DULIUS.plans.current) || "Free") === "Free"} />,
    history: <FundingHistory />,
    documents: <Documents />,
    disputes: <Disputes />,
    support: <Support />,
    settings: <Settings />,
    plans: <Plans />,
    profile: <Profile onNav={setRoute} onApplyFunding={openFunding} />,
  };

  return (
    <div className="dapp" data-profile-revision={profileRevision}>
      <Sidebar active={route} onNav={setRoute} />
      <div className="dmain" ref={main}>
        <Topbar title={TITLES[route][0]} subtitle={TITLES[route][1]} />
        <div className="dmain-scroll">{screens[route]}</div>
      </div>
      {applyOffer && <ApplyFlow offer={applyOffer} onClose={() => { setApplyOffer(null); setRoute("dashboard"); }} />}
      {applyFunding && <FundingApplication onClose={() => { setApplyFunding(false); setRoute("dashboard"); }} />}
    </div>
  );
}

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