/* ===== ContaBilè — app shell ===== */
const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#456882",
  "density": "regular",
  "businessType": "restaurant"
}/*EDITMODE-END*/;

const NAV_ORDER = ["dashboard","transactions","receipts","payments","reports","team","settings"];

const PAGE_META = {
  dashboard:    ["Dashboard", "Your finances at a glance"],
  transactions: ["Transactions", "Every euro in and out"],
  receipts:     ["Receipts", "Scanned, extracted & matched"],
  payments:     ["Payments", "Schedules & automation"],
  reports:      ["Reports", "P&L, expenses & exports"],
  team:         ["Team", "Members & role-based access"],
  settings:     ["Settings", "Profile, branding & integrations"],
};

function App() {
  const [tick, setTick] = uS(0);
  const [screen, setScreen] = uS('loading');
  const [user, setUser] = uS(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setViewRaw] = uS("dashboard");
  const [dir, setDir] = uS("fwd");
  const setView = (next) => {
    setDir(NAV_ORDER.indexOf(next) >= NAV_ORDER.indexOf(view) ? "fwd" : "back");
    setViewRaw(next);
  };
  const [asstOpen, setAsstOpen] = uS(false);
  const [receiptId, setReceiptId] = uS(null);
  const [addReceipt, setAddReceipt] = uS(false);
  const [showNotifs, setShowNotifs] = uS(false);

  uE(() => {
    window.refreshAppData = () => setTick((n) => n + 1);
    (async () => {
      try {
        const session = await window.ContaAuth.getSession();
        if (session) {
          setUser(session);
          await window.ContaAPI.load();
          setScreen('app');
        } else {
          setScreen('login');
        }
      } catch {
        setScreen('login');
      }
    })();
    return () => { window.refreshAppData = null; };
  }, []);

  uE(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.density, t.accent]);

  const handleLogin = async (loggedInUser) => {
    setUser(loggedInUser);
    try {
      await window.ContaAPI.load();
      setScreen('app');
    } catch (err) {
      console.error(err);
      window.ContaAuth.logout();
      setUser(null);
      setScreen('login');
    }
  };

  const handleLogout = () => {
    window.ContaAuth.logout();
    setUser(null);
    setScreen('login');
  };

  if (screen === 'loading') {
    return (
      <div className="login-loading">
        <img className="brand-word brand-on-dark" src="assets/wordmark.png" alt="ContaBilè"/>
        <div>Loading ContaBilè…</div>
      </div>
    );
  }

  if (screen === 'login') {
    return <LoginScreen onLogin={handleLogin}/>;
  }

  const DATA = window.DATA;
  if (!DATA) {
    return (
      <div className="app" style={{ alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
        <div style={{ textAlign: "center", color: "var(--text-2)" }}>Unable to load data.</div>
      </div>
    );
  }

  void tick;

  const org = { ...DATA.org, type: t.businessType, typeLabel: DATA.businessTypes[t.businessType].label };
  const counts = {
    txn: DATA.txns.filter(x => x.status==="review" || x.status==="uncategorized").length,
    receipts: DATA.receipts.filter(r => r.status==="review" || r.status==="extracted").length,
    payments: DATA.payments.filter(p => p.status==="needs-approval").length,
  };
  const [title, sub] = PAGE_META[view];

  return (
    <div className="app">
      <Sidebar view={view} setView={setView} org={org} counts={counts} user={user}/>
      <div className="main">
        <Topbar title={title} sub={sub} user={user}
          theme={t.theme}
          onTheme={() => setTweak("theme", t.theme==="dark" ? "light" : "dark")}
          onAssistant={() => setAsstOpen(true)}
          onLogout={handleLogout}
          notifs={DATA.notifications} showNotifs={showNotifs}
          onNotifs={() => setShowNotifs(s => !s)}
          onAddReceipt={() => setAddReceipt(true)}/>
        <div className="content">
          <div key={view} className={dir==="fwd" ? "page-fwd" : "page-back"}>
          {view==="dashboard"    && <Dashboard org={org} openAssistant={() => setAsstOpen(true)} openReceipt={setReceiptId} goTo={setView}/>}
          {view==="transactions" && <Transactions openReceipt={setReceiptId}/>}
          {view==="receipts"     && <Receipts openReceipt={setReceiptId} openAdd={() => setAddReceipt(true)}/>}
          {view==="payments"     && <Payments/>}
          {view==="reports"      && <Reports/>}
          {view==="team"         && <Team/>}
          {view==="settings"     && <Settings org={org}/>}
          </div>
        </div>
      </div>

      <Assistant open={asstOpen} onClose={() => setAsstOpen(false)} user={user}/>
      {receiptId && <ReceiptModal id={receiptId} onClose={() => setReceiptId(null)}/>}
      {addReceipt && <AddReceiptModal onClose={() => setAddReceipt(false)}/>}

      <TweaksPanel>
        <TweakSection label="Theme"/>
        <TweakRadio label="Mode" value={t.theme} options={["light","dark"]} onChange={v => setTweak("theme", v)}/>
        <TweakColor label="Accent" value={t.accent}
          options={["#456882","#242d3c","#5a7390","#3d7260","#70879f"]}
          onChange={v => setTweak("accent", v)}/>
        <TweakSection label="Layout"/>
        <TweakRadio label="Density" value={t.density} options={["compact","regular","comfy"]} onChange={v => setTweak("density", v)}/>
        <TweakSection label="Tenant"/>
        <TweakSelect label="Business type" value={t.businessType}
          options={Object.keys(DATA.businessTypes).map(k => ({ value:k, label:DATA.businessTypes[k].label }))}
          onChange={v => setTweak("businessType", v)}/>
      </TweaksPanel>
    </div>
  );
}

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