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

interface CatalystRiskMapProps {
  notes: ResearchNote[];
  ghosts: GhostNote[];
  density: ResearchDensityMode;
  selectedNoteIds: string[];
  onSelectNote: (noteId: string) => void;
  onSelectGhost: (ghostId: string) => void;
}

export const CatalystRiskMap: React.FC<CatalystRiskMapProps> = ({
  notes,
  ghosts,
  density,
  selectedNoteIds,
  onSelectNote,
  onSelectGhost,
}) => {
  const catalysts = notes.filter((note) => note.noteType === 'catalyst');
  const risks = notes.filter((note) => note.noteType === 'risk' || note.noteType === 'contradiction');
  const ghostCandidates = ghosts.filter((ghost) =>
    ghost.ghostClass === 'candidate_catalyst' || ghost.ghostClass === 'candidate_risk',
  );

  return (
    <div className="space-y-6">
      {ghostCandidates.length > 0 ? (
        <section className="grid gap-4 xl:grid-cols-2">
          {ghostCandidates.map((ghost) => (
            <GhostCard
              key={ghost.id}
              ghost={ghost}
              density={density}
              onSelect={() => onSelectGhost(ghost.id)}
              onSelectNote={onSelectNote}
            />
          ))}
        </section>
      ) : null}
      <div className="grid gap-4 xl:grid-cols-2">
        <section className="rounded-[28px] border border-positive/25 bg-positive/8 p-4">
          <div className="mb-4 text-[10px] uppercase tracking-[0.2em] text-positive">Catalysts</div>
          <div className="space-y-3">
            {catalysts.map((note) => (
              <NoteCard
                key={note.id}
                note={note}
                density={density}
                isSelected={selectedNoteIds.includes(note.id)}
                onSelect={() => onSelectNote(note.id)}
              />
            ))}
          </div>
        </section>
        <section className="rounded-[28px] border border-negative/25 bg-negative/8 p-4">
          <div className="mb-4 text-[10px] uppercase tracking-[0.2em] text-negative">Risks</div>
          <div className="space-y-3">
            {risks.map((note) => (
              <NoteCard
                key={note.id}
                note={note}
                density={density}
                isSelected={selectedNoteIds.includes(note.id)}
                onSelect={() => onSelectNote(note.id)}
              />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};
