study-bible-project/src/components/reader/VerseSheet.jsx

// The single home for per-verse tools: original words, cross-references,
// commentary, and people & places, plus bookmark / copy.
import { useEffect, useState } from 'react';
import Sheet from './Sheet.jsx';
import { CommentaryTab, PeoplePlacesTab } from '../StudyPanel.jsx';
import { BookmarkIcon, CopyIcon } from '../../utils/bibleUtils.jsx';
import { formatCrossRef, speakOriginalWord } from '../../utils/wordStudy.js';
import { READER_TRANSLATIONS, fetchChapter } from '../../utils/bibleText.js';
import { diffVerses, differenceLabel } from '../../utils/textDiff.js';
import { DiffText } from './DiffText.jsx';

const TABS = [['commentary', 'Commentary'], ['compare', 'Compare'], ['original', 'Original'], ['refs', 'Cross-refs'], ['people', 'People & places']];

function OriginalTab({ words }) {
  if (!words) return <p className="text-sm text-[var(--r-sub)]">No original-language data for this verse.</p>;
  return (
    <div className="flex flex-wrap gap-2">
      {words.map((w, i) => {
        const isHebrew = w.s?.startsWith('H');
        const canSpeak = isHebrew || w.s?.startsWith('G');
        return (
          <div key={i} className="rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] p-2 text-center" style={{ minWidth: '4.5rem', maxWidth: '9rem' }}>
            <div className={`text-lg leading-tight ${isHebrew ? 'font-serif' : ''}`} dir={isHebrew ? 'rtl' : 'ltr'}>{w.o}</div>
            <div className="mt-0.5 text-xs italic text-[var(--r-sub)]">{w.t}</div>
            <div className="mt-1 text-xs font-medium">{w.g}</div>
            {w.p && <div className="mt-0.5 text-[10px] leading-tight text-[var(--r-sub)]">{w.p}</div>}
            {w.s && <div className="mt-0.5 text-[10px] text-[var(--r-sub)]">{w.s}</div>}
            {canSpeak && (
              <button type="button" onClick={() => speakOriginalWord(w.o, w.s)}
                className="mt-1.5 rounded-lg bg-[var(--r-bar)] px-2 py-0.5 text-[11px] hover:bg-black/5"
                title={`Pronounce in ${isHebrew ? 'Hebrew' : 'Greek'}`}>Speak</button>
            )}
          </div>
        );
      })}
    </div>
  );
}

function RefsTab({ refs, loading, onJump }) {
  if (loading && !refs) return <p className="text-sm text-[var(--r-sub)]">Loading…</p>;
  if (!refs?.length) return <p className="text-sm text-[var(--r-sub)]">No cross-references for this verse.</p>;
  return (
    <div className="flex flex-wrap gap-1.5">
      {refs.slice(0, 20).map((ref, i) => (
        <button key={i} type="button" onClick={() => onJump(ref.book, ref.chapter, ref.verse)}
          className="rounded-full border border-[var(--r-line)] px-2.5 py-1 text-xs hover:bg-black/5">
          {formatCrossRef(ref)}
        </button>
      ))}
    </div>
  );
}

// This verse in every translation, one under the other. Each Bible loads the chapter it is in
// (BSB and NET come from the free source; the rest through the server) and shows this verse.
function CompareTab({ book, chapter, verse, current }) {
  const [rows, setRows] = useState({}); // id -> { text } | { error } | undefined while loading
  useEffect(() => {
    const controller = new AbortController();
    setRows({});
    READER_TRANSLATIONS.forEach((t) => {
      fetchChapter(t.id, book, chapter, { signal: controller.signal })
        .then(({ verses }) => {
          const text = verses.find((v) => v.number === verse)?.text;
          setRows((r) => ({ ...r, [t.id]: text ? { text } : { error: 'No verse here in this translation.' } }));
        })
        .catch((err) => { if (!controller.signal.aborted) setRows((r) => ({ ...r, [t.id]: { error: err.message || 'Unavailable.' } })); });
    });
    return () => controller.abort();
  }, [book, chapter, verse]);

  const mine = rows[current]?.text;
  return (
    <div className="space-y-3">
      {READER_TRANSLATIONS.map((t) => {
        const row = rows[t.id];
        // How this wording differs from the Bible being read, word by word
        const d = row?.text && mine && t.id !== current ? diffVerses(mine, row.text) : null;
        return (
          <div key={t.id}>
            <p className="mb-0.5 flex items-center gap-2 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">
              <span>{t.id}{t.id === current ? ' · reading' : ''}</span>
              {d && <span className="normal-case tracking-normal">{differenceLabel(d.similarity)}</span>}
            </p>
            {!row ? <p className="text-sm text-[var(--r-sub)]">Loading…</p>
              : row.error ? <p className="text-sm text-[var(--r-sub)]">{row.error}</p>
                : <p className="font-serif text-[15px] leading-relaxed"><DiffText text={row.text} ranges={d?.b} /></p>}
          </div>
        );
      })}
      <p className="border-t border-[var(--r-line)] pt-2 text-[10px] leading-snug text-[var(--r-sub)]">
        {mine ? <><span className="diff-hl">Marked words</span> aren’t in the {current} wording. </> : null}
        Copyright notices for each translation appear at the foot of the chapter when you read it.
      </p>
    </div>
  );
}

export default function VerseSheet({
  verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
  bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose,
}) {
  const [tab, setTab] = useState('commentary');
  const [copied, setCopied] = useState(false);
  useEffect(() => { if (verse && tab === 'refs') onLoadCrossRefs(); }, [verse?.number, tab]); // eslint-disable-line react-hooks/exhaustive-deps
  useEffect(() => { setCopied(false); }, [verse?.number]);
  if (!verse) return null;

  const copy = () => {
    navigator.clipboard?.writeText(`${bookName} ${chapter}:${verse.number} ${translation} — ${verse.text}`);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1500);
  };
  const actionBtn = 'rounded-lg p-1.5 hover:bg-black/5';

  return (
    <Sheet
      open modal={false} pane onClose={onClose}
      title={`${bookName} ${chapter}:${verse.number}`}
      headerRight={(
        <>
          <button type="button" onClick={onToggleBookmark} className={`${actionBtn} ${bookmarkColor ? 'text-[var(--r-accent)]' : ''}`} aria-label={bookmarkColor ? 'Remove bookmark' : 'Bookmark verse'}>
            <BookmarkIcon filled={!!bookmarkColor} />
          </button>
          {bookmarkColor && (
            <button type="button" onClick={onCycleColor} className={actionBtn} aria-label="Change bookmark colour">
              <span className="block h-4 w-4 rounded-full border border-black/10" style={{ backgroundColor: bookmarkColor }} />
            </button>
          )}
          <button type="button" onClick={copy} className={actionBtn} aria-label="Copy verse">
            {copied ? <span className="px-1 text-xs">Copied</span> : <CopyIcon />}
          </button>
        </>
      )}
    >
      <div role="tablist" aria-label="About this verse" className="mb-3 flex gap-1.5 overflow-x-auto pb-1">
        {TABS.map(([id, label]) => (
          <button key={id} type="button" role="tab" aria-selected={tab === id} onClick={() => setTab(id)}
            className={`shrink-0 rounded-full border px-3 py-1 text-xs ${tab === 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'}`}>
            {label}
          </button>
        ))}
      </div>
      {tab === 'commentary' && <CommentaryTab book={book} chapter={chapter} verse={verse.number} />}
      {tab === 'compare' && <CompareTab book={book} chapter={chapter} verse={verse.number} current={translation} />}
      {tab === 'original' && <OriginalTab words={words} />}
      {tab === 'refs' && <RefsTab refs={crossRefs} loading={crossRefsLoading} onJump={onJump} />}
      {tab === 'people' && <PeoplePlacesTab book={book} chapter={chapter} verse={verse.number} />}
    </Sheet>
  );
}