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

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

export const ThesisBoard: React.FC<ThesisBoardProps> = ({
  notes,
  ghosts,
  density,
  selectedNoteIds,
  selectedGhostId,
  onSelectNote,
  onSelectGhost,
}) => {
  const thesisNotes = notes.filter((note) => note.noteType === 'thesis' || note.noteType === 'sub_thesis');
  const supporting = notes.filter((note) => note.thesisStatus === 'accepted_support' || note.thesisStatus === 'candidate_support');
  const risks = notes.filter((note) => note.noteType === 'risk' || note.noteType === 'contradiction');
  const catalysts = notes.filter((note) => note.noteType === 'catalyst' || note.noteType === 'valuation_point');
  const ghostSuggestions = ghosts.filter((ghost) =>
    ['candidate_thesis', 'candidate_risk', 'candidate_catalyst', 'valuation_bridge', 'scenario_implication'].includes(ghost.ghostClass),
  );

  const columns = [
    ['Core Thesis', thesisNotes],
    ['Supporting Evidence', supporting],
    ['Risks / Contradictions', risks],
    ['Catalysts / Rerating Drivers', catalysts],
  ] as const;

  return (
    <div className="space-y-6">
      {ghostSuggestions.length > 0 ? (
        <section className="grid gap-4 xl:grid-cols-3">
          {ghostSuggestions.map((ghost) => (
            <GhostCard
              key={ghost.id}
              ghost={ghost}
              density={density}
              isSelected={selectedGhostId === ghost.id}
              onSelect={() => onSelectGhost(ghost.id)}
              onSelectNote={onSelectNote}
            />
          ))}
        </section>
      ) : null}
      <div className="grid gap-4 xl:grid-cols-4">
        {columns.map(([label, items]) => (
          <section key={label} className="rounded-[28px] border border-term-border bg-term-surface p-4">
            <div className="mb-4 text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">{label}</div>
            <div className="space-y-3">
              {items.map((note) => (
                <NoteCard
                  key={note.id}
                  note={note}
                  density={density}
                  isSelected={selectedNoteIds.includes(note.id)}
                  onSelect={() => onSelectNote(note.id)}
                />
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
};
