// TARA — App shell, navigation, routing
const { useState: useAppState, useEffect } = React;

const ROLES = {
  bank:        { label: "Bank & Pembiayaan", icon: "landmark",    region: "Kab. Ngawi, Jatim", commodity: "Padi" },
  pemda:       { label: "Pemerintah Daerah", icon: "building-2",  region: "Prov. Jawa Timur",  commodity: "Padi & Beras" },
  distributor: { label: "Distributor",       icon: "truck",       region: "Koridor Jatim → NTT", commodity: "Beras" },
  koperasi:    { label: "Koperasi Tani",      icon: "users",       region: "Kab. Ngawi, Jatim", commodity: "Jagung" },
};

function TaraSidebar({ current, onNav }) {
  const meta = ROLES[current];
  return (
    <aside className="sidebar">
      <div className="brand">
        <TaraMark size={30} />
        <span className="brand-text"><span className="name">TARA</span><span className="brand-sub">Decision Engine</span></span>
      </div>

      <a className="item" onClick={() => onNav("hero")} style={{ marginBottom: 4 }}>
        <span className="ic"><Icon name="globe" size={16} /></span>National Command View
      </a>

      <div className="section-label">Ruang Keputusan</div>
      {Object.entries(ROLES).map(([k, r]) => (
        <a key={k} className={"item " + (current === k ? "on" : "")} onClick={() => onNav(k)}>
          <span className="ic"><Icon name={r.icon} size={16} /></span>{r.label}
        </a>
      ))}

      {meta && <>
        <div className="section-label" style={{ marginTop: 14 }}>Konteks Aktif</div>
        <div className="role-meta">
          <div className="k">Wilayah</div>
          <div className="v">{meta.region}</div>
        </div>
        <div className="role-meta" style={{ marginTop: 6 }}>
          <div className="k">Komoditas · Musim</div>
          <div className="v">{meta.commodity} · MT2 2026</div>
        </div>
      </>}

      <div className="section-label" style={{ marginTop: 14 }}>Lainnya</div>
      <a className={"item " + (current === "peringatan" ? "on" : "")} onClick={() => onNav("peringatan")}>
        <span className="ic"><Icon name="bell" size={16} /></span>Peringatan Dini
        <span className="nav-count">{WARNINGS.length}</span>
      </a>
      <a className="item"><span className="ic"><Icon name="settings" size={16} /></span>Pengaturan</a>
    </aside>
  );
}

const VIEW_LABELS = { peringatan: "Peringatan Dini" };

function TaraTopbar({ current, onNav }) {
  const meta = ROLES[current];
  const isRole = !!meta;
  return (
    <header className="topbar">
      <div className="crumbs">
        TARA <span style={{ margin: "0 6px", color: "var(--fg5)" }}>/</span>
        {isRole ? "Ruang Keputusan" : "Pemantauan"} <span style={{ margin: "0 6px", color: "var(--fg5)" }}>/</span>
        <b>{isRole ? meta.label : (VIEW_LABELS[current] || current)}</b>
      </div>
      <div className="right">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "500 12px/16px var(--font-sans)", color: "var(--fg3)", padding: "5px 12px", borderRadius: 999, background: "var(--bg2)", border: "1px solid var(--border-2)" }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--success-solid)" }} />Vintage data: Feb 2026<VintageNote align="right" dir="down" />
        </span>
        <button className="btn btn-icon btn-default topbar-bell" title="Peringatan Dini" onClick={() => onNav("peringatan")}><Icon name="bell" size={16} /><span className="bell-dot" /></button>
        <div className="avatar">AN</div>
      </div>
    </header>
  );
}

const VIEWS = { bank: BankView, pemda: PemdaView, distributor: DistributorView, koperasi: KoperasiView, peringatan: EarlyWarningView };

function App() {
  const [view, setView] = useAppState(() => localStorage.getItem("tara.view") || "hero");
  useEffect(() => { localStorage.setItem("tara.view", view); }, [view]);
  useEffect(() => { window.scrollTo(0, 0); const m = document.querySelector(".page"); if (m) m.scrollTop = 0; }, [view]);

  if (view === "hero") return <HeroView onSelectRole={setView} />;

  const ViewComp = VIEWS[view] || BankView;
  return (
    <div className="shell">
      <TaraSidebar current={view} onNav={setView} />
      <div>
        <TaraTopbar current={view} onNav={setView} />
        <main className="page">
          <ViewComp onNav={setView} />
        </main>
      </div>
    </div>
  );
}

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