function AppShell() {
  const [view, setView]         = React.useState("pipeline");
  const [openId, setOpenId]     = React.useState(null);
  const [showAdd, setShowAdd]   = React.useState(false);
  const [search, setSearch]     = React.useState("");
  const [overdueOnly, setOverdueOnly] = React.useState(false);
  const [clients, setClients]   = React.useState(() => [...CLIENTS]);
  const [stages, setStages]     = React.useState(() =>
    Object.fromEntries(CLIENTS.map(c => [c.id, c.stage]))
  );
  const [tasks, setTasks] = React.useState([
    { id: 1, t: "Review Andrews mowing hero copy",  done: false },
    { id: 2, t: "Resend Clear Cut invoice",         done: false },
    { id: 3, t: "Ship snow-removal contract draft", done: false },
    { id: 4, t: "Onboard Capitol City SEO upsell",  done: true  },
  ]);

  // Sub-view state — controlled here so Sidebar can drive them
  const [pipelineTab,   setPipelineTab]   = React.useState("active");
  const [stageFilter,   setStageFilter]   = React.useState(null);   // null = all stages
  const [paymentsTab,   setPaymentsTab]   = React.useState("active");
  const [sitesTab,      setSitesTab]      = React.useState("live");

  function toggleTask(id) {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t));
  }
  function addTask(text) {
    setTasks(prev => [...prev, { id: Date.now(), t: text, done: false }]);
  }

  React.useEffect(() => {
    setClients(prev => prev.map(c => ({ ...c, stage: stages[c.id] ?? c.stage })));
  }, [stages]);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { "stroke-width": "1.5" } });
  });

  // ⌘K focuses the search input
  React.useEffect(() => {
    function onKey(e) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        const inp = document.querySelector(".cm-search input");
        if (inp) { inp.focus(); inp.select(); }
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  function handleStage(id, key) {
    setStages(prev => ({ ...prev, [id]: key }));
  }

  function handleAddClient(client) {
    setClients(prev => [client, ...prev]);
    setStages(prev => ({ ...prev, [client.id]: client.stage }));
  }

  function handleNotesSave(id, notes) {
    setClients(prev => prev.map(c => c.id === id ? { ...c, notes } : c));
  }

  // When switching views, reset sub-filters so things look fresh
  function handleView(v) {
    setView(v);
    if (v !== "pipeline") { setOverdueOnly(false); setStageFilter(null); }
  }

  const mainView = (() => {
    switch (view) {
      case "dashboard": return <Dashboard onOpenClient={setOpenId} clients={clients} onView={handleView} />;
      case "pipeline":  return <Pipeline  onOpenClient={setOpenId} onAddClient={() => setShowAdd(true)}
                                          search={search} onSearch={setSearch}
                                          overdueOnly={overdueOnly} clients={clients}
                                          pipelineTab={pipelineTab} onPipelineTab={setPipelineTab}
                                          stageFilter={stageFilter} />;
      case "calendar":  return <Calendar  clients={clients} onOpenClient={setOpenId} />;
      case "payments":  return <Payments  clients={clients} onOpenClient={setOpenId}
                                          tab={paymentsTab} onTab={setPaymentsTab} />;
      case "sites":     return <Sites     clients={clients} onOpenClient={setOpenId}
                                          tab={sitesTab} onTab={setSitesTab} />;
      case "settings":  return <Settings />;
      default: return null;
    }
  })();

  return (
    <div className="cm-app" data-screen-label="CRM">
      <IconRail activeView={view} onView={handleView} />
      <Sidebar  activeView={view} onView={handleView} clients={clients}
                overdueOnly={overdueOnly}
                onOverdueToggle={() => { setOverdueOnly(o => !o); handleView("pipeline"); }}
                stageFilter={stageFilter} onStageFilter={s => { setStageFilter(s); handleView("pipeline"); }}
                paymentsTab={paymentsTab} onPaymentsTab={t => { setPaymentsTab(t); handleView("payments"); }}
                sitesTab={sitesTab} onSitesTab={t => { setSitesTab(t); handleView("sites"); }}
                pipelineTab={pipelineTab} onPipelineTab={t => { setPipelineTab(t); handleView("pipeline"); }}
      />
      <main className="cm-main">
        {mainView}
      </main>
      <RightPanel onOpenClient={setOpenId} clients={clients} tasks={tasks} onToggleTask={toggleTask} onAddTask={addTask} />

      {openId && (
        <ClientDetail
          clientId={openId}
          onClose={() => setOpenId(null)}
          onStage={handleStage}
          onNotesSave={handleNotesSave}
          clients={clients}
        />
      )}

      {showAdd && (
        <AddClient
          onClose={() => setShowAdd(false)}
          onAdd={handleAddClient}
        />
      )}
    </div>
  );
}
window.AppShell = AppShell;