import React from 'react';
import type { GhostNote, ResearchDensityMode, ResearchNote } from '../../../types/research';
import { NoteCard } from '../primitives/NoteCard';
import { GhostCard } from '../primitives/GhostCard';

interface ResearchCanvasProps {
  notes: ResearchNote[];
  ghosts: GhostNote[];
  density: ResearchDensityMode;
  selectedNoteIds: string[];
  selectedGhostId: string | null;
  onSelectNote: (noteId: string) => void;
  onSelectGhost: (ghostId: string) => void;
  emptyMessage?: string;
}

const laneOrder = ['critical', 'high', 'normal', 'low'] as const;

export const ResearchCanvas: React.FC<ResearchCanvasProps> = ({
  notes,
  ghosts,
  density,
  selectedNoteIds,
  selectedGhostId,
  onSelectNote,
  onSelectGhost,
  emptyMessage = 'No saved notes or ghosts are visible for this workspace.',
}) => {
  if (notes.length === 0 && ghosts.length === 0) {
    return (
      <div className="rounded-2xl border border-term-border bg-term-surface p-8 text-center">
        <h2 className="text-base font-semibold text-term-text">No research items visible</h2>
        <p className="mt-2 text-sm leading-6 text-term-text-muted">{emptyMessage}</p>
      </div>
    );
  }

  return (
  <div className="space-y-4 sm:space-y-5 md:space-y-6">
    {ghosts.length > 0 ? (
      <section className="space-y-3">
        <div className="flex items-center justify-between gap-2">
          <h2 className="text-xs uppercase tracking-[0.2em] text-term-text-tertiary sm:text-sm">
            Ghost Rail
          </h2>
          <div className="text-xs text-term-text-tertiary">Top provisional syntheses</div>
        </div>
        <div className="grid gap-3 sm:gap-4 grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
          {ghosts.map((ghost) => (
            <GhostCard
              key={ghost.id}
              ghost={ghost}
              density={density}
              isSelected={selectedGhostId === ghost.id}
              onSelect={() => onSelectGhost(ghost.id)}
              onSelectNote={onSelectNote}
            />
          ))}
        </div>
      </section>
    ) : null}

    {laneOrder.map((lane) => {
      const laneNotes = notes.filter((note) => note.priority === lane);
      if (laneNotes.length === 0) {
        return null;
      }

      return (
        <section key={lane} className="space-y-3">
          <div className="flex items-center justify-between gap-2">
            <h2 className="text-xs uppercase tracking-[0.2em] text-term-text-tertiary sm:text-sm">
              {lane} priority
            </h2>
            <div className="text-xs text-term-text-tertiary">{laneNotes.length} notes</div>
          </div>
          <div className="grid gap-3 sm:gap-4 grid-cols-1 xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
            {laneNotes.map((note) => (
              <NoteCard
                key={note.id}
                note={note}
                density={density}
                isSelected={selectedNoteIds.includes(note.id)}
                onSelect={() => onSelectNote(note.id)}
              />
            ))}
          </div>
        </section>
      );
    })}
  </div>
  );
};
