import type { HistoryEvent } from "../../lib/api";
import { TimelineEventCard } from "./TimelineEventCard";

interface TimelineListProps {
  events: HistoryEvent[];
  loading: boolean;
  error: string | null;
  selectedEvent: HistoryEvent | null;
  onSelectEvent: (event: HistoryEvent) => void;
  onRefresh: () => void;
}

export function TimelineList({
  events,
  loading,
  error,
  selectedEvent,
  onSelectEvent,
  onRefresh,
}: TimelineListProps) {
  return (
    <div className="panel flex flex-col h-full">
      {/* Header */}
      <div className="shrink-0 p-3 border-b border-[rgba(117,170,252,0.15)] flex items-center justify-between">
        <h2 className="font-mono text-xs text-[#9bc3ff] uppercase tracking-wide">
          Timeline
        </h2>
        <button
          onClick={onRefresh}
          disabled={loading}
          className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors disabled:opacity-50"
          title="Refresh timeline"
        >
          <svg
            className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
        </button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto">
        {loading && events.length === 0 ? (
          <div className="flex items-center justify-center h-32">
            <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
          </div>
        ) : error ? (
          <div className="p-4">
            <div className="font-mono text-red-400 text-xs mb-2">Error loading timeline</div>
            <div className="font-mono text-[#7788aa] text-[10px]">{error}</div>
          </div>
        ) : events.length === 0 ? (
          <div className="flex items-center justify-center h-32">
            <div className="font-mono text-[#7788aa] text-xs">No events found</div>
          </div>
        ) : (
          <div className="divide-y divide-[rgba(117,170,252,0.1)]">
            {events.map((event) => (
              <TimelineEventCard
                key={event.id}
                event={event}
                isSelected={selectedEvent?.id === event.id}
                onClick={() => onSelectEvent(event)}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}