// Main app shell
const { useState: uS, useEffect: uE } = React;

function App() {
  const [route, setRoute] = uS(() => localStorage.getItem("ksatax-route") || "dashboard");
  const [, force] = uS(0);

  uE(() => { localStorage.setItem("ksatax-route", route); }, [route]);
  uE(() => {
    const t = window.__TWEAKS;
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.setAttribute("data-accent", t.accent);
    const h = () => force(x => x + 1);
    window.addEventListener("tweaks-changed", h);
    return () => window.removeEventListener("tweaks-changed", h);
  }, []);

  const { t, lang } = useT();

  const navGroups = [
    {
      title_cn: "", title_en: "",
      items: [
        { k: "dashboard", ic: Icon.Dashboard, label_cn: "总览", label_en: "Overview" },
      ],
    },
    {
      title_cn: "申报与发票", title_en: "Filing & Invoicing",
      items: [
        { k: "vat", ic: Icon.Receipt, label_cn: "增值税申报", label_en: "VAT Return", badge: true },
        { k: "einvoice", ic: Icon.Broadcast, label_cn: "电子发票", label_en: "E-Invoicing" },
        { k: "invoices", ic: Icon.File, label_cn: "发票列表", label_en: "Invoices" },
        { k: "zakat", ic: Icon.Mosque, label_cn: "天课", label_en: "Zakat" },
      ],
    },
    {
      title_cn: "账务与洞察", title_en: "Ledger & Insights",
      items: [
        { k: "transactions", ic: Icon.Wallet, label_cn: "交易对账", label_en: "Transactions" },
        { k: "reports", ic: Icon.Chart, label_cn: "报告分析", label_en: "Reports" },
        { k: "calendar", ic: Icon.Calendar, label_cn: "税务日历", label_en: "Calendar" },
      ],
    },
    {
      title_cn: "管理", title_en: "Admin",
      items: [
        { k: "settings", ic: Icon.Settings, label_cn: "设置", label_en: "Settings" },
      ],
    },
  ];

  const screens = {
    dashboard: Dashboard,
    vat: VATReturn,
    einvoice: EInvoice,
    invoices: Invoices,
    transactions: Transactions,
    zakat: Zakat,
    reports: Reports,
    calendar: Calendar,
    settings: Settings,
  };
  const Current = screens[route] || Dashboard;

  const activeLabel = navGroups.flatMap(g => g.items).find(i => i.k === route);
  const crumb = activeLabel ? (lang === "cn" ? activeLabel.label_cn : activeLabel.label_en) : "";

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark">岁</div>
          <div className="brand-name">
            {lang === "cn" ? "岁税" : "Suishui"}
            <span className="en">{lang === "cn" ? "Suishui · KSA Tax" : "岁税 · 沙特税务"}</span>
          </div>
        </div>

        {navGroups.map((g, gi) => (
          <React.Fragment key={gi}>
            {(g.title_cn || g.title_en) && <div className="nav-group-title">{lang === "cn" ? g.title_cn : g.title_en}</div>}
            {g.items.map(i => {
              const Ic = i.ic;
              return (
                <button key={i.k} className={`nav-item ${route === i.k ? "active" : ""}`} onClick={() => setRoute(i.k)}>
                  <Ic size={16} />
                  <span>{lang === "cn" ? i.label_cn : i.label_en}</span>
                  {i.badge && <span className="badge-dot" />}
                </button>
              );
            })}
          </React.Fragment>
        ))}

        <div className="sidebar-footer">
          <div className="avatar">L</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ color: "var(--bg)", fontWeight: 500, fontSize: 12 }}>{lang === "cn" ? "林雨晴" : "Lin Yuqing"}</div>
            <div style={{ opacity: .55, fontSize: 10.5 }}>{lang === "cn" ? "塔米米贸易 · CFO" : "Tamimi Trading · CFO"}</div>
          </div>
          <button className="icon-btn" style={{ color: "rgba(245,241,232,.55)" }}><Icon.More size={14} /></button>
        </div>
      </aside>

      <main className="main">
        <header className="topbar">
          <div className="breadcrumbs">
            <span>{lang === "cn" ? "塔米米贸易" : "Tamimi Trading"}</span>
            <span>›</span>
            <span className="current">{crumb}</span>
          </div>
          <div className="search">
            <Icon.Search size={14} />
            <input placeholder={t("search_placeholder")} />
            <span className="kbd">⌘K</span>
          </div>
          <div className="topbar-actions">
            <button className="icon-btn" title="Arabic"><Icon.Globe size={16} /></button>
            <button className="icon-btn"><Icon.Bell size={16} /><span className="dot" /></button>
            <button className="icon-btn"><Icon.Sliders size={16} /></button>
          </div>
        </header>
        <div className="content">
          <Current />
        </div>
      </main>

      <Tweaks />
    </div>
  );
}

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