// Main app entry point: router state, auth gate, sidebar nav, breadcrumbs, placeholder screens.
// Mounts ToastProvider + ConfirmProvider, then renders App into #root.

const { useState, useEffect } = React;

// ─── Coming soon placeholder ─────────────────────────────────────────────
const ComingSoon = ({ title, icon: IconC = I.Clock }) => (
  <div className="coming-soon">
    <IconC className="icon" />
    <h2>{title}</h2>
    <p>This section is coming soon.</p>
  </div>
);

// ─── Dashboard stub with real system stats ───────────────────────────────
const DashboardScreen = () => {
  const { data, loading, refetch } = useApi(SystemApi.stats, []);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Dashboard</h1>
          <div className="page-sub">System overview and health.</div>
        </div>
        <button className="btn" onClick={refetch}><I.Refresh /> Refresh</button>
      </div>
      <div className="kpi-row">
        <Kpi label="Total bots" value={loading ? "…" : (data?.totalBots ?? data?.bots?.total ?? "—")} />
        <Kpi label="Active bots" value={loading ? "…" : (data?.activeBots ?? data?.bots?.active ?? "—")} />
        <Kpi label="Active sessions" value={loading ? "…" : (data?.activeSessions ?? data?.sessions?.active ?? "—")} />
        <Kpi label="Messages forwarded" value={loading ? "…" : (data?.totalMessages ?? data?.messages?.forwarded ?? "—")} />
      </div>
      <Card title="System status">
        <div className="muted" style={{ fontSize: 13 }}>
          Server is running. Use the sidebar to manage bots, configs, and groups.
        </div>
      </Card>
    </div>
  );
};

// ─── Auth screen: list + launch wizard ──────────────────────────────────
const AuthScreen = ({ onStartWizard }) => {
  const { data: bots, loading, refetch } = useApi(BotApi.list, []);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Auth & 2FA</h1>
          <div className="page-sub">Authenticated phone numbers and their status.</div>
        </div>
        <button className="btn primary" onClick={onStartWizard}><I.Plus /> Authenticate new</button>
      </div>
      <Card flush>
        <table className="table">
          <thead>
            <tr>
              <th>Bot</th><th>Phone</th><th>Platform</th><th>Status</th><th style={{ width: 100 }}>Action</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <SkeletonRows cols={5} rows={3} />
            ) : (bots || []).length === 0 ? (
              <tr><td colSpan={5}><Empty icon={I.Bot} title="No bots" sub="Add a bot to authenticate." /></td></tr>
            ) : (
              (bots || []).map((b) => (
                <tr key={b._id}>
                  <td style={{ fontWeight: 500 }}>{b.name}</td>
                  <td className="mono">{b.phone}</td>
                  <td><PlatformChip platform={b.platform} /></td>
                  <td><StatusBadge status={b.status} /></td>
                  <td>
                    <button className="btn ghost sm" onClick={() => onStartWizard(b._id)}>Re-auth</button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

// ─── Breadcrumb map ──────────────────────────────────────────────────────
const crumbsFor = (route) => {
  switch (route.screen) {
    case "dashboard":  return ["Operate", "Dashboard"];
    case "sessions":   return ["Operate", "Active Sessions"];
    case "events":     return ["Operate", "Event Stream"];
    case "bots":       return ["Configure", "Bots"];
    case "bot-detail": return ["Configure", "Bots", route.params?.botName || "Detail"];
    case "configs":    return ["Configure", "Bot Configs"];
    case "groups":     return ["Configure", "Groups & Channels"];
    case "ai":         return ["Configure", "AI Rewrite"];
    case "auth":       return ["System", "Auth & 2FA"];
    case "auth-wizard":return ["System", "Auth & 2FA", "Wizard"];
    case "proxies":    return ["System", "Proxies"];
    case "settings":   return ["System", "Settings"];
    case "users":      return ["System", "Users"];
    default:           return [route.screen];
  }
};

// ─── Active nav item (handles sub-screens) ───────────────────────────────
const activeNavFor = (screen) => {
  if (screen === "bot-detail") return "bots";
  if (screen === "auth-wizard") return "auth";
  return screen;
};

// ─── Main app component ──────────────────────────────────────────────────
const App = () => {
  const [authed, setAuthed] = useState(AuthStore.isLoggedIn());
  const [currentUser, setCurrentUser] = useState(AuthStore.getUser());
  const [route, setRoute] = useState({ screen: "dashboard", params: {} });
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  // Listen for forced logout (401 from apiFetch)
  useEffect(() => {
    const handler = () => { setAuthed(false); setCurrentUser(null); };
    window.addEventListener("auth:logout", handler);
    return () => window.removeEventListener("auth:logout", handler);
  }, []);

  // Expose global navigate for cross-screen links (e.g. bot-detail → auth-wizard)
  useEffect(() => {
    window.__navigate = (screen, params = {}) => setRoute({ screen, params });
  }, []);

  const handleLogin = (token, user) => {
    AuthStore.setToken(token);
    AuthStore.setUser(user);
    setAuthed(true);
    setCurrentUser(user);
  };

  const handleLogout = () => {
    AuthStore.clear();
    setAuthed(false);
    setCurrentUser(null);
  };

  // Show login screen if not authenticated
  if (!authed) {
    return (
      <ToastProvider>
        <LoginScreen onLogin={handleLogin} />
      </ToastProvider>
    );
  }

  const navigate = (id) => setRoute({ screen: id, params: {} });

  const renderScreen = () => {
    const { screen, params } = route;
    switch (screen) {
      case "dashboard":
        return <DashboardScreen />;
      case "bots":
        return <BotsList onOpenBot={(id, name) => setRoute({ screen: "bot-detail", params: { botId: id, botName: name } })} />;
      case "bot-detail":
        return <BotDetail botId={params.botId} onBack={() => setRoute({ screen: "bots", params: {} })} />;
      case "configs":
        return <ConfigsScreen />;
      case "groups":
        return <GroupsScreen />;
      case "auth":
        return (
          <AuthScreen
            onStartWizard={(preselectedBotId) =>
              setRoute({ screen: "auth-wizard", params: { preselectedBotId } })
            }
          />
        );
      case "auth-wizard":
        return (
          <AuthWizard
            preselectedBotId={params.preselectedBotId}
            onNavigateToBotDetail={(id) => setRoute({ screen: "bot-detail", params: { botId: id } })}
            onCancel={() => setRoute({ screen: "auth", params: {} })}
          />
        );
      case "sessions":
        return <SessionsScreen />;
      case "events":
        return <EventStreamScreen />;
      case "users":
        return currentUser?.role === "admin" ? <UserManagementScreen currentUser={currentUser} /> : <DashboardScreen />;
      case "ai":
        return <ComingSoon title="AI Rewrite" icon={I.Sparkles} />;
      case "proxies":
        return <ComingSoon title="Proxies" icon={I.Server} />;
      case "settings":
        return <ComingSoon title="Settings" icon={I.Settings} />;
      default:
        return <DashboardScreen />;
    }
  };

  return (
    <ToastProvider>
      <ConfirmProvider>
        <div className="app">
          <Sidebar
            active={activeNavFor(route.screen)}
            onNavigate={navigate}
            collapsed={sidebarCollapsed}
            onToggleCollapsed={() => setSidebarCollapsed((v) => !v)}
            currentUser={currentUser}
          />
          <div className="main-col">
            <Topbar crumbs={crumbsFor(route)} currentUser={currentUser} onLogout={handleLogout} />
            <div className="content">{renderScreen()}</div>
          </div>
        </div>
      </ConfirmProvider>
    </ToastProvider>
  );
};

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