study-bible-project/src/components/study/ResourcePane.jsx

// Right-hand pane of the Study stage: commentary, word study, cross-references and
// people & places, all driven by the selected chunk.
import { useEffect, useState } from 'react';
import CommentaryChunkTab from './CommentaryChunkTab.jsx';
import WordStudyTab from './WordStudyTab.jsx';
import CrossRefsTab from './CrossRefsTab.jsx';
import PeopleChunkTab from './PeopleChunkTab.jsx';
import ReadingListTab from './ReadingListTab.jsx';
import IqChunkAids from '../iq/IqChunkAids.jsx';
import { useIqAvailable } from '../../hooks/useIq.js';
import { OBSERVE_FIRST_MIN, observeFirstDone, ownWords } from '../../utils/ownWork.js';

export const RESOURCE_TABS = [
  { id: 'commentary', label: 'Commentary' },
  { id: 'words', label: 'Word study' },
  { id: 'refs', label: 'Cross-refs' },
  { id: 'people', label: 'People & places' },
  { id: 'readings', label: 'Reading list' },
  { id: 'aids', label: 'Study aids', needsIq: true }, // shown only when the server has an IQ Bible key
];

export default function ResourcePane({ tab, setTab, chunk, chapter, chapterIndex, project, updateChunk, updateProject, notify, resources, wordStudy, crossRefs, openWordId, setOpenWordId }) {
  const iq = useIqAvailable();
  const tabs = RESOURCE_TABS.filter((t) => !t.needsIq || iq);
  if (tab === 'aids' && !iq) tab = 'commentary';
  // Commentary-type tabs wait for your own Observe notes (per chunk, until you choose to look anyway).
  const [unlocked, setUnlocked] = useState(() => new Set());
  useEffect(() => { setUnlocked(new Set()); }, [chunk.id]);
  const held = (tab === 'commentary' || tab === 'aids') && !observeFirstDone(chunk) && !unlocked.has(chunk.id);
  // The first time commentary or study aids are on screen for a chunk, keep a copy of your notes as they were,
  // so you can later see what changed after reading others (shown under "More" in the notes).
  const seeing = (tab === 'commentary' || tab === 'aids') && !held;
  useEffect(() => {
    if (!seeing || chunk.firstDraft) return;
    updateChunk(chunk.id, { firstDraft: { at: Date.now(), observation: chunk.observation ?? '', interpretation: chunk.interpretation ?? '', application: chunk.application ?? '' } }, { touch: false });
  }, [seeing, chunk.id, chunk.firstDraft]); // eslint-disable-line react-hooks/exhaustive-deps
  const counts = { words: chunk.greekWords.length, refs: (chunk.crossReferences ?? []).length, readings: (project?.readingList ?? []).filter((i) => !i.done).length };
  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <div role="tablist" aria-label="Study resources" className="flex shrink-0 flex-wrap gap-1.5 border-b border-[var(--r-line)] px-3 py-2.5">
        {tabs.map((t) => (
          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id)}
            className={`rounded-full border px-3 py-1 text-xs ${tab === t.id ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`}>
            {t.label}{counts[t.id] ? ` · ${counts[t.id]}` : ''}
          </button>
        ))}
      </div>
      <div role="tabpanel" className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
        {held && (
          <div role="note" className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bar)] p-4 text-sm">
            <p className="font-medium">Observe first</p>
            <p className="mt-1 text-xs text-[var(--r-sub)]">Write what you notice in the text before reading what others say. Commentary opens after {OBSERVE_FIRST_MIN} words of your own Observe notes ({ownWords(chunk, 'observation')} so far).</p>
            <button type="button" onClick={() => setUnlocked((u) => new Set(u).add(chunk.id))} className="mt-2 text-xs text-[var(--r-accent)] hover:underline">Show it anyway</button>
          </div>
        )}
        {!held && tab === 'commentary' && <CommentaryChunkTab resources={resources} chunk={chunk} project={project} chapterIndex={chapterIndex} updateChunk={updateChunk} notify={notify} />}
        {tab === 'words' && <WordStudyTab wordStudy={wordStudy} chunk={chunk} openWordId={openWordId} setOpenWordId={setOpenWordId} />}
        {tab === 'refs' && <CrossRefsTab crossRefs={crossRefs} chunk={chunk} />}
        {tab === 'people' && <PeopleChunkTab book={chapter.bookAbbrev} chapter={chapter.chapter} chunk={chunk} />}
        {tab === 'readings' && updateProject && <ReadingListTab project={project} updateProject={updateProject} />}
        {!held && tab === 'aids' && <IqChunkAids chunk={chunk} chapter={chapter} updateChunk={updateChunk} notify={notify} />}
      </div>
    </div>
  );
}

export function useResourceTab() {
  const [tab, setTabState] = useState(() => {
    try {
      const saved = localStorage.getItem('studyResourceTab');
      return RESOURCE_TABS.some((t) => t.id === saved) ? saved : 'commentary';
    } catch { return 'commentary'; }
  });
  const setTab = (id) => {
    setTabState(id);
    try { localStorage.setItem('studyResourceTab', id); } catch { /* storage unavailable */ }
  };
  return [tab, setTab];
}