/* Wa by Elivate — App router */
const { useState, useEffect } = React;

function App() {
  const [route, setRoute] = useState("dashboard");
  const [status, setStatus] = useState({ status: "reconnecting", number: null });
  const [builder, setBuilder] = useState(null); // null = closed, else {rule|null}

  const go = (r) => { setBuilder(null); setRoute(r); };
  const openBuilder = (rule) => setBuilder({ rule });
  const closeBuilder = () => setBuilder(null);

  useEffect(() => {
    let alive = true;
    const load = async () => {
      try {
        const next = await window.WaApi.status();
        if (alive) setStatus(next);
      } catch (error) {
        if (alive) setStatus({ status: "reconnecting", number: null, error: error.message });
      }
    };
    load();
    const timer = setInterval(load, 3000);
    return () => { alive = false; clearInterval(timer); };
  }, []);

  const connected = status.status === "connected";

  // Topbar right-side actions per route
  const topRight = {
    dashboard: <button className="btn primary" onClick={() => openBuilder(null)}><Icons.plus size={16} /> New automation</button>,
    connection: connected ? <span className="tag green"><span className="dot green"></span> Connected</span> : <span className="tag amber"><span className="dot amber"></span> Waiting for scan</span>,
  }[route];

  if (builder) {
    return (
      <div className="app">
        <Sidebar route="automations" go={go} status={status} />
        <div className="main">
          <BuilderScreen initial={builder.rule} onClose={() => { closeBuilder(); setRoute("automations"); }} go={go} />
        </div>
      </div>
    );
  }

  return (
    <div className="app">
      <Sidebar route={route} go={go} status={status} />
      <div className="main">
        <Topbar route={route} right={topRight} />
        <div className="content">
          {route === "dashboard" && <DashboardScreen go={go} />}
          {route === "automations" && <AutomationsScreen go={go} openBuilder={openBuilder} />}
          {route === "groups" && <GroupsScreen go={go} />}
          {route === "send" && <SendScreen go={go} />}
          {route === "logs" && <LogsScreen />}
          {route === "connection" && <ConnectionScreen status={status} setStatus={setStatus} />}
          {route === "settings" && <SettingsScreen go={go} />}
        </div>
      </div>
    </div>
  );
}

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