// Compare translations: pick a second Bible to read beside the one you're reading, and whether the
// words that differ are highlighted. The chapter shows how different the two are.
import Sheet from './Sheet.jsx';
import { READER_TRANSLATIONS } from '../../utils/bibleText.js';

export default function CompareSheet({ open, onClose, translation, parallel, onParallel, showDiff, onShowDiff }) {
  const chip = (active) => `rounded-full border px-3 py-1.5 text-sm font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
  const options = READER_TRANSLATIONS.filter((t) => t.id !== translation);
  return (
    <Sheet open={open} onClose={onClose} title="Compare translations">
      <p className="mb-3 text-sm text-[var(--r-sub)]">
        Read another Bible beside the {translation}. You’ll see how different its wording is for the whole chapter and for each verse.
      </p>
      <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Compare {translation} with</span>
      <div role="group" aria-label="Translation to compare with" className="mb-4 flex flex-wrap gap-1.5">
        {options.map((t) => (
          <button key={t.id} type="button" title={t.name} aria-pressed={parallel === t.id} onClick={() => { onParallel(parallel === t.id ? '' : t.id); if (parallel !== t.id) onClose(); }} className={chip(parallel === t.id)}>{t.id}</button>
        ))}
        <button type="button" aria-pressed={!parallel} onClick={() => onParallel('')} className={chip(!parallel)}>Off</button>
      </div>
      {parallel && (
        <>
          <span className="mb-1.5 block text-xs text-[var(--r-sub)]">Highlight the words that differ</span>
          <div role="group" aria-label="Highlight differences" className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
            {[[true, 'Show'], [false, 'Hide']].map(([id, text]) => (
              <button key={String(id)} type="button" aria-pressed={showDiff === id} onClick={() => onShowDiff(id)}
                className={`flex-1 px-3 py-2 text-sm ${showDiff === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>{text}</button>
            ))}
          </div>
        </>
      )}
      <p className="mt-4 text-[11px] text-[var(--r-sub)]">The wording is compared word by word, ignoring capitals and punctuation. It shows how the wording differs, not which translation is more accurate. Tap any verse and open Compare to see all six translations of it.</p>
    </Sheet>
  );
}