import React from 'react';
import type { ResearchNote, TimelineEvent } from '../../../types/research';

interface ResearchTimelineProps {
  events: TimelineEvent[];
  notes: ResearchNote[];
  onSelectNote: (noteId: string) => void;
}

export const ResearchTimeline: React.FC<ResearchTimelineProps> = ({
  events,
  notes,
  onSelectNote,
}) => {
  const noteMap = new Map(notes.map((note) => [note.id, note]));

  return (
    <div className="space-y-4">
      {events.map((event, index) => {
        const note = noteMap.get(event.noteId);
        return (
          <button
            key={event.id}
            type="button"
            onClick={() => onSelectNote(event.noteId)}
            className="flex w-full items-start gap-4 rounded-[28px] border border-term-border bg-term-surface p-5 text-left transition-colors hover:border-info/45"
          >
            <div className="flex w-16 shrink-0 flex-col items-center">
              <div className="h-3 w-3 rounded-full bg-info" />
              {index < events.length - 1 ? <div className="mt-2 h-full w-px bg-term-border-focus/70" /> : null}
            </div>
            <div className="min-w-0">
              <div className="text-[10px] uppercase tracking-[0.18em] text-term-text-tertiary">
                {event.at ?? 'Undated'}
              </div>
              <div className="mt-1 text-base font-semibold text-term-text">{event.label}</div>
              <div className="mt-2 text-sm leading-6 text-term-text-muted">
                {note?.aiAnnotation || note?.cleanedText || 'No associated note text'}
              </div>
            </div>
          </button>
        );
      })}
    </div>
  );
};
