/* global React, ReactDOM, PublicSite, Hub, Icon, AlzioBot */
const { useState: useStateApp } = React;

function ViewToggle({ view, setView }) {
  const opts = [
    { id: "site", label: "Sitio público", icon: "Globe" },
    { id: "hub", label: "3H Hub", icon: "LayoutDashboard" },
  ];
  return (
    <div className="fixed bottom-5 left-1/2 z-50 -translate-x-1/2">
      <div className="flex items-center gap-1 rounded-full bg-taupe-900/95 p-1 shadow-xl shadow-taupe-900/25 ring-1 ring-white/10 backdrop-blur">
        {opts.map((o) => {
          const active = view === o.id;
          return (
            <button key={o.id} onClick={() => setView(o.id)}
              className={`flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold transition sm:px-4 ${active ? "bg-amber-400 text-taupe-900" : "text-taupe-200 hover:text-white"}`}>
              <Icon name={o.icon} size={16} />
              <span className="whitespace-nowrap">{o.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function App() {
  const [view, setView] = useStateApp("site");
  const [, setDataTick] = useStateApp(0);
  React.useEffect(() => {
    window.__refreshVentures = () =>
      window.__loadVentures().then((ok) => { if (ok) setDataTick((t) => t + 1); return ok; });
    window.__refreshVentures();
    return () => { delete window.__refreshVentures; };
  }, []);
  return (
    <div>
      {view === "site" ? <PublicSite /> : <Hub />}
      <ViewToggle view={view} setView={setView} />
      {view === "site" && <AlzioBot />}
    </div>
  );
}

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