import { AddNoteForm } from './AddNoteForm';
import { NoteItem } from './NoteItem';
import type { ReviewNote } from '../../types/api';

interface NotesSidebarProps {
  notes: ReviewNote[];
  currentUserId: string;
  currentTimestamp: number;
  isPaused: boolean;
  highlightedNoteIds: Set<string>;
  isLoading?: boolean;
  isSubmitting?: boolean;
  onSeek: (timestamp: number) => void;
  onAddNote: (content: string, timestamp: number) => void;
  onEditNote: (noteId: string, content: string) => void;
  onDeleteNote: (noteId: string) => void;
}

export function NotesSidebar({
  notes,
  currentUserId,
  currentTimestamp,
  isPaused,
  highlightedNoteIds,
  isLoading = false,
  isSubmitting = false,
  onSeek,
  onAddNote,
  onEditNote,
  onDeleteNote,
}: NotesSidebarProps) {
  // Sort notes by timestamp
  const sortedNotes = [...notes].sort((a, b) => a.timestamp_seconds - b.timestamp_seconds);

  return (
    <div className="flex flex-col h-full bg-gray-50 border-l border-gray-200">
      {/* Header */}
      <div className="p-4 border-b border-gray-200 bg-white">
        <h3 className="text-sm font-semibold text-gray-900 flex items-center">
          <svg className="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
          </svg>
          Notes
          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
            {notes.length}
          </span>
        </h3>
      </div>

      {/* Add Note Form */}
      <div className="p-4 border-b border-gray-200 bg-white">
        <AddNoteForm
          currentTimestamp={currentTimestamp}
          isPaused={isPaused}
          onAddNote={onAddNote}
          isSubmitting={isSubmitting}
        />
      </div>

      {/* Notes List */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <div className="animate-spin h-6 w-6 border-2 border-indigo-600 border-t-transparent rounded-full"></div>
          </div>
        ) : sortedNotes.length === 0 ? (
          <div className="text-center py-8">
            <svg className="mx-auto h-8 w-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
            </svg>
            <p className="mt-2 text-sm text-gray-500">No notes yet</p>
            <p className="text-xs text-gray-400">Pause the video and add a note</p>
          </div>
        ) : (
          sortedNotes.map((note) => (
            <NoteItem
              key={note.id}
              note={note}
              isHighlighted={highlightedNoteIds.has(note.id)}
              isOwnNote={note.user_id === currentUserId}
              onSeek={onSeek}
              onEdit={onEditNote}
              onDelete={onDeleteNote}
            />
          ))
        )}
      </div>
    </div>
  );
}
