// A reading list for the whole study: the books, commentaries and articles you plan to consult, with a note on
// each and a tick when done. It belongs to the study, not one chunk.
import { makeId } from '../../utils/bibleUtils.jsx';

export default function ReadingListTab({ project, updateProject }) {
  const items = project?.readingList ?? [];
  const set = (next) => updateProject((current) => ({ ...current, readingList: next(current.readingList ?? []) }));
  const add = (title) => { const t = title.trim(); if (t) set((list) => [...list, { id: makeId(), title: t, note: '', done: false }]); };
  const patch = (id, change) => set((list) => list.map((i) => (i.id === id ? { ...i, ...change } : i)));
  const open = items.filter((i) => !i.done).length;
  return (
    <div className="space-y-3 text-sm">
      <p className="text-xs text-[var(--r-sub)]">Books and articles to consult for this study{items.length ? ` · ${open} to read, ${items.length - open} done` : ''}. Read the passage and write your own notes first; this list is for afterwards.</p>
      <ul className="space-y-2">
        {items.map((i) => (
          <li key={i.id} className="rounded-xl border border-[var(--r-line)] p-2.5">
            <div className="flex items-center gap-2">
              <input type="checkbox" aria-label={`Read: ${i.title}`} checked={!!i.done} onChange={() => patch(i.id, { done: !i.done })} className="accent-[var(--r-accent)]" />
              <span className={`min-w-0 flex-1 ${i.done ? 'text-[var(--r-sub)] line-through' : 'font-medium'}`}>{i.title}</span>
              <button type="button" aria-label={`Remove ${i.title}`} onClick={() => set((list) => list.filter((x) => x.id !== i.id))} className="text-xs text-[var(--r-sub)] hover:text-[var(--r-danger,#b42318)]">×</button>
            </div>
            <input aria-label={`Note on ${i.title}`} value={i.note ?? ''} onChange={(e) => patch(i.id, { note: e.target.value })} placeholder="Where in it, or what to look for"
              className="mt-1.5 w-full rounded-lg border border-transparent bg-transparent px-2 py-1 text-xs text-[var(--r-text)] placeholder:text-[var(--r-sub)] placeholder:opacity-60 hover:border-[var(--r-line)] focus:border-[var(--r-line)] focus:bg-[var(--r-bg)] focus:outline-none" />
          </li>
        ))}
      </ul>
      <input aria-label="Add to the reading list" placeholder="Add a book or article, then Enter"
        onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); add(e.target.value); e.target.value = ''; } }}
        className="w-full rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)] focus:outline-none" />
    </div>
  );
}