/* @component-map
 * App — Main container, layout with dragon banner and main frame
 * DragonBanner — Dragon image positioning and banner title
 * StatsTally — Book count statistics display
 * Toolbar — Sort, filter, book club toggle, add button
 * BookList — Renders filtered/sorted book cards
 * BookCard — Individual book display with edit/delete
 * BookModal — Add/edit book form modal
 * PersonalityPopup — Animated popup notifications
 * @end-component-map */

import { useCollection } from '@deplixo/sdk';
import { DragonBanner } from './components/DragonBanner.jsx';
import { StatsTally } from './components/StatsTally.jsx';
import { Toolbar } from './components/Toolbar.jsx';
import { BookList } from './components/BookList.jsx';
import { BookModal } from './components/BookModal.jsx';
import { useCallback, useState } from 'react';
import { PersonalityPopup } from './components/PersonalityPopup.jsx';

function App() {
  const { items: books, loading, add, update, remove } = useCollection('books', { personal: true });
  const [sort, setSort] = useState('title');
  const [filter, setFilter] = useState('all');
  const [bookClubMode, setBookClubMode] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editBook, setEditBook] = useState(null);
  const [popup, setPopup] = useState(null);

  const showPopup = useCallback((icon, text) => {
    setPopup({ icon, text, key: Date.now() });
  }, []);

  const openModal = useCallback((book) => {
    setEditBook(book || null);
    setModalOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    setModalOpen(false);
    setEditBook(null);
  }, []);

  return (
    <div>
      <PersonalityPopup popup={popup} />
      <DragonBanner />
      <div className="app-shell">
        <div className="main-frame" id="mainFrame">
          <div className="dragon-in-frame" id="dragonWrap">
            <img id="dragonImg"
              src="https://cdn.deplixo.com/i/rosemanmom/Reading_Dragon_with_Books_and_Mice.png"
              alt="A dragon reading amongst piles of ancient books and scrolls" />
          </div>
          <StatsTally books={books} />
          <Toolbar sort={sort} setSort={setSort} filter={filter} setFilter={setFilter}
            bookClubMode={bookClubMode} setBookClubMode={setBookClubMode} openModal={openModal} />
          {loading ? (
            <div className="loading">Consulting the dragon's library...</div>
          ) : (
            <BookList books={books} sort={sort} filter={filter} bookClubMode={bookClubMode}
              openModal={openModal} remove={remove} showPopup={showPopup} />
          )}
        </div>
      </div>
      {modalOpen && (
        <BookModal editBook={editBook} bookClubMode={bookClubMode}
          add={add} update={update} closeModal={closeModal} showPopup={showPopup} books={books} />
      )}
    </div>
  );
}

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