// Left rail of the Study stage: every chunk of the project as an outline, with
// three dots (Observe / Interpret / Apply) showing which notes are written.
import { formatChunkReference } from '../../utils/bibleUtils.jsx';

const filled = (s) => (s ?? '').trim().length > 0;

export default function OutlineRail({ project, selectedId, onSelect, onEditOutline }) {
  return (
    <nav aria-label="Chunks" className="flex h-full min-h-0 flex-col">
      <div className="flex items-center justify-between px-3 pb-2 pt-3">
        <span className="text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Outline</span>
        <button type="button" onClick={onEditOutline} className="text-[11px] text-[var(--r-accent)] hover:underline">Edit</button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-4">
        {project.chapters.map((ch, chapterIndex) => (
          <div key={`${ch.bookAbbrev}-${ch.chapter}`} className="mb-3">
            {project.chapters.length > 1 && <p className="px-2 pb-1 text-[11px] text-[var(--r-sub)]">{ch.book} {ch.chapter}</p>}
            {ch.chunks.length === 0 && <p className="px-2 text-xs text-[var(--r-sub)]">No chunks in this chapter.</p>}
            {ch.chunks.map((chunk) => {
              const selected = chunk.id === selectedId;
              const first = ch.verses.find((v) => v.number === chunk.startVerse)?.text ?? '';
              return (
                <button key={chunk.id} type="button" onClick={() => onSelect(chunk.id)} aria-current={selected ? 'true' : undefined}
                  className={`mb-1 block w-full rounded-xl border px-2.5 py-2 text-left transition ${selected ? 'border-[var(--r-line)] bg-[var(--r-bg)]' : 'border-transparent hover:bg-black/5'}`}>
                  <span className="flex items-center justify-between gap-2">
                    <span className="text-[13px] font-medium">{formatChunkReference(project, chapterIndex, chunk, '–')}</span>
                    <span className="flex gap-1" aria-hidden="true">
                      {['observation', 'interpretation', 'application'].map((f) => (
                        <span key={f} className={`h-2 w-2 rounded-full border ${filled(chunk[f]) ? 'border-[var(--r-accent)] bg-[var(--r-accent)]' : 'border-[var(--r-sub)]'}`} />
                      ))}
                    </span>
                  </span>
                  {chunk.episodeTitle && <span className="mt-0.5 block truncate text-[11px] text-[var(--r-accent)]">{chunk.episodeNumber ? `${chunk.episodeNumber} · ` : ''}{chunk.episodeTitle}</span>}
                  <span className="mt-0.5 block truncate font-serif text-xs text-[var(--r-sub)]">{first}</span>
                </button>
              );
            })}
          </div>
        ))}
      </div>
    </nav>
  );
}