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

import React, { useState } from "react";
import { useAnnotations } from "@/context/AnnotationsContext";
import type { Note } from "@/types";

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

export function NoteList({
  bookId,
  onNavigateToPage,
}: NoteListProps): React.ReactElement {
  const { state, loadNotes, editNote, removeNote } = useAnnotations();
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editContent, setEditContent] = useState<string>("");
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [savingId, setSavingId] = useState<string | null>(null);

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

  const handleEdit = (note: Note): void => {
    setEditingId(note.id);
    setEditContent(note.content);
  };

  const handleSave = async (id: string): Promise<void> => {
    setSavingId(id);
    try {
      await editNote(id, editContent.trim());
      setEditingId(null);
    } catch {
      // error handled by context
    } finally {
      setSavingId(null);
    }
  };

  const handleCancelEdit = (): void => {
    setEditingId(null);
    setEditContent("");
  };

  const handleDelete = async (id: string): Promise<void> => {
    setDeletingId(id);
    try {
      await removeNote(id);
    } catch {
      // error handled by context
    } finally {
      setDeletingId(null);
    }
  };

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

  if (state.notes.length === 0) {
    return (
      <div className="annotations-empty">
        No notes yet. Select a passage and add a note while reading.
      </div>
    );
  }

  return (
    <div className="annotations-list">
      {state.notes.map((note: Note) => (
        <div key={note.id} className="annotation-card">
          <div className="annotation-card-header">
            <span className="annotation-kind-badge note-badge">Note</span>
            <span className="annotation-page">Page {note.page}</span>
            <span className="annotation-date">
              {new Date(note.created_at).toLocaleDateString()}
            </span>
          </div>
          {note.location_text && (
            <blockquote className="annotation-quote">
              &ldquo;{note.location_text}&rdquo;
            </blockquote>
          )}
          <div className="annotation-note-content">
            {editingId === note.id ? (
              <div className="note-edit-form">
                <textarea
                  className="note-edit-textarea"
                  value={editContent}
                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                    setEditContent(e.target.value)
                  }
                  rows={4}
                  autoFocus
                />
                <div className="note-edit-actions">
                  <button
                    className="btn btn-sm"
                    onClick={() => handleSave(note.id)}
                    disabled={savingId === note.id || !editContent.trim()}
                  >
                    {savingId === note.id ? "Saving..." : "Save"}
                  </button>
                  <button
                    className="btn btn-sm btn-secondary"
                    onClick={handleCancelEdit}
                  >
                    Cancel
                  </button>
                </div>
              </div>
            ) : (
              <p className="note-content-text">{note.content}</p>
            )}
          </div>
          <div className="annotation-actions">
            {onNavigateToPage && (
              <button
                className="btn btn-sm"
                onClick={() =>
                  onNavigateToPage(note.book, note.page)
                }
              >
                Go to page
              </button>
            )}
            {editingId !== note.id && (
              <button
                className="btn btn-sm btn-secondary"
                onClick={() => handleEdit(note)}
              >
                Edit
              </button>
            )}
            <button
              className="btn btn-sm btn-danger"
              onClick={() => handleDelete(note.id)}
              disabled={deletingId === note.id}
            >
              {deletingId === note.id ? "Deleting..." : "Delete"}
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}