// Picker for "suggest words from this passage": checkbox list of candidate words.
import DOMPurify from 'dompurify';
import Sheet from '../reader/Sheet.jsx';
import { buildGreekDefinitionHtml } from '../../utils/wordStudy.js';

export default function SuggestWordsSheet({ wordStudy }) {
  const { suggestModal, setSuggestModal, suggestSelection, setSuggestSelection, confirmSuggestWords } = wordStudy;
  if (!suggestModal) return null;
  const close = () => { setSuggestModal(null); setSuggestSelection(new Set()); };
  const n = suggestSelection.size;
  return (
    <Sheet open onClose={close} title={`Select ${suggestModal.language === 'hebrew' ? 'Hebrew' : 'Greek'} words to add`}>
      <p className="mb-2 text-xs text-[var(--r-sub)]">{suggestModal.helperText || "Content words are pre-checked. Uncheck any you don't need."}</p>
      <div className="mb-2 flex items-center gap-3 text-xs">
        <button type="button" onClick={() => setSuggestSelection(new Set(suggestModal.words.map((w) => w.strongKey)))} className="text-[var(--r-accent)] hover:underline">Select all</button>
        <button type="button" onClick={() => setSuggestSelection(new Set())} className="text-[var(--r-accent)] hover:underline">Select none</button>
        <span className="ml-auto text-[var(--r-sub)]">{n} selected</span>
      </div>
      <ul className="max-h-[40vh] divide-y divide-[var(--r-line)] overflow-y-auto rounded-xl border border-[var(--r-line)] px-3">
        {suggestModal.words.map((w) => (
          <li key={w.strongKey}>
            <label className="flex cursor-pointer items-center gap-3 py-2.5">
              <input type="checkbox" checked={suggestSelection.has(w.strongKey)} className="h-4 w-4 shrink-0 accent-[var(--r-accent)]"
                onChange={(e) => setSuggestSelection((prev) => { const next = new Set(prev); if (e.target.checked) next.add(w.strongKey); else next.delete(w.strongKey); return next; })} />
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-baseline gap-2">
                  <span className="text-sm font-medium">{w.def || w.strongKey}</span>
                  <span className="text-sm text-[var(--r-sub)]">{w.lexeme}</span>
                  {w.translit && <span className="text-xs italic text-[var(--r-sub)]">{w.translit}</span>}
                  <span className="font-mono text-[10px] text-[var(--r-sub)]">{w.strongKey}</span>
                </div>
                {w.entry && (w.entry.strongs_def || w.entry.kjv_def || w.entry.derivation) && (
                  <details className="mt-1">
                    <summary className="cursor-pointer text-xs text-[var(--r-accent)]" onClick={(e) => e.stopPropagation()}>Definition</summary>
                    <div className="mt-1 text-xs leading-5" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(buildGreekDefinitionHtml(w.strongKey, w.entry)) }} />
                  </details>
                )}
              </div>
            </label>
          </li>
        ))}
      </ul>
      <div className="mt-3 flex gap-2">
        <button type="button" onClick={close} className="flex-1 rounded-xl border border-[var(--r-line)] py-2 text-sm hover:bg-black/5">Cancel</button>
        <button type="button" onClick={confirmSuggestWords} disabled={n === 0}
          className="flex-1 rounded-xl bg-[var(--r-accent)] py-2 text-sm font-medium text-[var(--r-on)] disabled:opacity-40">Add {n > 0 ? `${n} word${n > 1 ? 's' : ''}` : 'words'}</button>
      </div>
    </Sheet>
  );
}