// One place to pick translation, book and chapter (replaces three dropdowns).
import { useState } from 'react';
import Sheet from './Sheet.jsx';
import { bookOptions, CHAPTER_COUNTS } from '../../utils/bibleUtils.jsx';
import { READER_TRANSLATIONS } from '../../utils/bibleText.js';
import { SaveBookOffline } from '../OfflineSave.jsx';

const NT_START = bookOptions.findIndex((b) => b.abbrev === 'MAT');
const chip = 'rounded-lg border px-2 py-2 text-center text-sm transition';

export default function NavigatorSheet({ open, onClose, bookAbbrev, chapter, translation, onTranslation, translationNote, onGo, offline }) {
  const [pickedBook, setPickedBook] = useState(null); // book abbrev whose chapters are showing
  const close = () => { setPickedBook(null); onClose(); };
  const book = pickedBook ? bookOptions.find((b) => b.abbrev === pickedBook) : null;

  const bookButton = (b) => (
    <button key={b.abbrev} type="button" onClick={() => setPickedBook(b.abbrev)}
      className={`${chip} truncate ${b.abbrev === bookAbbrev ? 'border-[var(--r-accent)] text-[var(--r-accent)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
      {b.name}
    </button>
  );

  return (
    <Sheet open={open} onClose={close} label="Go to" title={book ? (
      <button type="button" onClick={() => setPickedBook(null)} className="text-[var(--r-sub)] hover:text-[var(--r-text)]">‹ All books · <span className="text-[var(--r-text)]">{book.name}</span></button>
    ) : 'Go to'}>
      {!book && (
        <>
          <div className="mb-3 flex flex-wrap gap-1.5">
            {READER_TRANSLATIONS.map((t) => (
              <button key={t.id} type="button" onClick={() => onTranslation(t.id)} title={t.name}
                className={`rounded-full border px-3 py-1 text-xs font-medium ${t.id === translation ? '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.id}
              </button>
            ))}
          </div>
          {translationNote && <p className="-mt-1 mb-3 text-[11px] text-[var(--r-sub)]">{translationNote}</p>}
          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">Old Testament</p>
          <div className="mb-4 grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(0, NT_START).map(bookButton)}</div>
          <p className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">New Testament</p>
          <div className="grid grid-cols-3 gap-1.5 sm:grid-cols-4">{bookOptions.slice(NT_START).map(bookButton)}</div>
        </>
      )}
      {book && (
        <>
        <div className="grid grid-cols-6 gap-1.5 sm:grid-cols-8">
          {Array.from({ length: CHAPTER_COUNTS[book.abbrev] ?? 1 }, (_, i) => i + 1).map((n) => (
            <button key={n} type="button" onClick={() => { onGo(book.abbrev, n); close(); }}
              className={`${chip} ${book.abbrev === bookAbbrev && n === chapter ? 'border-[var(--r-accent)] bg-[var(--r-accent)] text-[var(--r-on)]' : 'border-[var(--r-line)] hover:bg-black/5'}`}>
              {n}
            </button>
          ))}
        </div>
        {offline && <SaveBookOffline offline={offline} translation={translation} book={book.abbrev} name={book.name} />}
        </>
      )}
    </Sheet>
  );
}