import React from "react";
import ReactDOM from "react-dom/client";
import { Layout } from "@/components/layout";
import { BookmarksNotesPage } from "@/components/annotations/BookmarksNotesPage";
import "./styles.css";

function App(): React.ReactElement {
  const path = window.location.pathname;

  // Simple client-side routing
  if (path.startsWith("/books/") && path.includes("bookmarks-notes")) {
    // /books/:id/bookmarks-notes
    const bookId = path.split("/")[2];
    return (
      <Layout title="Cloud Reader">
        <BookmarksNotesPage bookId={bookId} />
      </Layout>
    );
  }

  if (path === "/bookmarks-notes" || path === "/bookmarks-notes/") {
    return (
      <Layout title="Cloud Reader">
        <BookmarksNotesPage />
      </Layout>
    );
  }

  // Default: landing page
  return (
    <Layout title="Cloud Reader">
      <div className="page">
        <h2>Welcome to Cloud Reader</h2>
        <p>Your personal e-book reader with cross-device sync.</p>
        <div className="quick-links">
          <a href="/bookmarks-notes" className="card-link">
            <h3>Bookmarks & Notes</h3>
            <p>View and manage all your annotations</p>
          </a>
        </div>
      </div>
    </Layout>
  );
}

const rootElement = document.getElementById("root");
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}