import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18n-lite";
import { MarkerThreadsView } from "./MarkerThreadsView";

export function BookmarksNotesPage(): React.ReactElement {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { bookId } = useParams<{ bookId?: string }>();

  return (
    <div className="page bookmarks-notes-page" style={{ maxWidth: 720, margin: "0 auto", padding: 16 }}>
      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
        <button
          type="button"
          onClick={() => navigate("/")}
          style={{
            padding: "8px 16px",
            borderRadius: 6,
            border: "1px solid #ddd",
            background: "#fff",
            cursor: "pointer",
            fontSize: 14,
          }}
        >
          ← {t("common.back")}
        </button>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700 }}>{t("annotations.title")}</h2>
      </header>
      <MarkerThreadsView
        ebookIdFilter={bookId}
        onGoToPassage={(ebookId, epubCfi) => {
          navigate(`/read/${ebookId}`, { state: { epubLocation: epubCfi } });
        }}
      />
    </div>
  );
}
