function App() {
  const [active, setActive]       = useState(() => localStorage.getItem("cc.tab") || "dashboard");
  const [pieces, setPieces]       = useState(INITIAL_PIECES);
  const [ideas, setIdeas]         = useState(INITIAL_IDEAS);
  const [brands, setBrands]       = useState(INITIAL_BRANDS);
  const [mediaKitUrl, setMediaKitUrl] = useState(() => localStorage.getItem("cc.mkurl") || "");
  const [openPieceId, setOpenPieceId] = useState(null);

  useEffect(() => { localStorage.setItem("cc.tab", active); }, [active]);
  useEffect(() => { localStorage.setItem("cc.mkurl", mediaKitUrl); }, [mediaKitUrl]);

  // Listen for pipeline move events (from PipeCard which can't call setPieces directly)
  useEffect(() => {
    const handler = (e) => {
      const { id, stage, approved } = e.detail;
      setPieces(ps => ps.map(p => p.id === id ? { ...p, stage, approved: approved !== undefined ? approved : p.approved } : p));
    };
    document.addEventListener("pipe-move", handler);
    return () => document.removeEventListener("pipe-move", handler);
  }, []);

  const updatePiece = (id, patch) => setPieces(ps => ps.map(p => p.id === id ? { ...p, ...patch } : p));
  const deletePiece = (id) => { setPieces(ps => ps.filter(p => p.id !== id)); setOpenPieceId(null); };
  const addPiece = (piece) => setPieces(ps => [...ps, piece]);

  const openPiece = pieces.find(p => p.id === openPieceId);

  const counts = {
    calendar: pieces.filter(p => p.scheduledDate).length,
    pipeline: pieces.filter(p => !p.scheduledDate).length,
    brands:   brands.length,
    ideas:    ideas.length,
  };

  return (
    <div className="app">
      <Sidebar active={active} onNav={setActive} counts={counts} />
      <main className="main">
        {active === "dashboard" && (
          <Dashboard pieces={pieces} onNav={setActive} setOpenPieceId={setOpenPieceId} />
        )}
        {active === "calendar" && (
          <Calendar pieces={pieces} onPieceAdd={addPiece} setOpenPieceId={setOpenPieceId} />
        )}
        {active === "pipeline" && (
          <Pipeline pieces={pieces} onPieceAdd={addPiece} setOpenPieceId={setOpenPieceId} />
        )}
        {active === "brands" && (
          <Brands brands={brands} setBrands={setBrands} mediaKitUrl={mediaKitUrl} setMediaKitUrl={setMediaKitUrl} />
        )}
        {active === "ideas" && (
          <Ideas ideas={ideas} setIdeas={setIdeas} />
        )}
      </main>
      <MobileTabs active={active} onNav={setActive} />

      {openPiece && (
        <PieceDrawer
          piece={openPiece}
          onClose={() => setOpenPieceId(null)}
          onUpdate={updatePiece}
          onDelete={deletePiece}
        />
      )}
    </div>
  );
}

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