cloud-reader/frontend/src/components/annotations/AnnotationsDashboard.tsx

import React from "react";
import { useAnnotations } from "@/context/AnnotationsContext";
import type { AnnotationEntry } from "@/types";

interface AnnotationsDashboardProps {
  bookId?: string;
  onNavigateToPage?: (bookId: string, page: number) => void;
}

export function AnnotationsDashboard({
  bookId,
  onNavigateToPage,
}: AnnotationsDashboardProps): React.ReactElement {
  const {
    mergedAnnotations,
    loadBookmarks,
    loadNotes,
    removeBookmark,
    removeNote,
    state,
  } = useAnnotations();

  React.useEffect(() => {
    loadBookmarks(bookId);
    loadNotes(bookId);
  }, [loadBookmarks, loadNotes, bookId]);

  const handleDelete = async (entry: AnnotationEntry): Promise<void> => {
    if (entry.kind === "bookmark") {
      await removeBookmark(entry.id);
    } else {
      await removeNote(entry.id);
    }
  };

  if (state.bookmarksLoading || state.notesLoading) {
    return <div className="annotations-loading">Loading annotations...</div>;
  }

  if (mergedAnnotations.length === 0) {
    return (
      <div className="annotations-empty">
        No bookmarks or notes yet.
      </div>
    );
  }

  return (
    <div className="annotations-dashboard">
      <div className="annotations-summary">
        <span className="summary-count">
          {state.bookmarks.length} bookmarks
        </span>
        <span className="summary-separator">&middot;</span>
        <span className="summary-count">
          {state.notes.length} notes
        </span>
      </div>
      <div className="annotations-list">
        {mergedAnnotations.map((entry: AnnotationEntry) => (
          <div key={`${entry.kind}-${entry.id}`} className="annotation-card">
            <div className="annotation-card-header">
              <span
                className={`annotation-kind-badge ${
                  entry.kind === "bookmark" ? "bookmark-badge" : "note-badge"
                }`}
              >
                {entry.kind === "bookmark" ? "Bookmark" : "Note"}
              </span>
              <span className="annotation-book-title">
                {entry.book_title}
              </span>
              <span className="annotation-page">p.{entry.page}</span>
              <span className="annotation-date">
                {new Date(entry.created_at).toLocaleDateString()}
              </span>
            </div>
            {entry.location_text && (
              <blockquote className="annotation-quote">
                &ldquo;{entry.location_text}&rdquo;
              </blockquote>
            )}
            {entry.kind === "note" && entry.content && (
              <p className="note-content-text">{entry.content}</p>
            )}
            <div className="annotation-actions">
              {onNavigateToPage && (
                <button
                  className="btn btn-sm"
                  onClick={() =>
                    onNavigateToPage(entry.book_id, entry.page)
                  }
                >
                  Go to page
                </button>
              )}
              <button
                className="btn btn-sm btn-danger"
                onClick={() => handleDelete(entry)}
              >
                Delete
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}