// "What changed since my first draft": your Observe / Interpret / Apply notes now, with the words added or
// reworded since the copy kept when you first opened commentary. It shows whether commentary changed your thinking.
import { diffVerses } from '../../utils/textDiff.js';
import { markRanges } from '../../utils/compareTranslations.js';

const FIELDS = [['observation', 'Observe'], ['interpretation', 'Interpret'], ['application', 'Apply']];
const count = (s) => (s ?? '').trim().split(/\s+/).filter(Boolean).length;

export default function FirstDraft({ chunk }) {
  const draft = chunk.firstDraft;
  if (!draft) return null;
  const rows = FIELDS.map(([f, label]) => {
    const then = draft[f] ?? '';
    const now = chunk[f] ?? '';
    return { f, label, then, now, same: then.trim() === now.trim(), parts: markRanges(now, diffVerses(then, now).b) };
  }).filter((r) => r.then.trim() || r.now.trim());
  const changed = rows.filter((r) => !r.same).length;
  return (
    <details className="rounded-xl border border-[var(--r-line)] p-3 text-xs text-[var(--r-sub)]">
      <summary className="cursor-pointer">First draft, before commentary <span className="opacity-70">· {new Date(draft.at).toLocaleDateString()} · {changed === 0 ? 'nothing changed since' : `${changed} of ${rows.length} notes changed since`}</span></summary>
      <div className="mt-3 space-y-3">
        {rows.length === 0 && <p>You opened commentary before writing anything.</p>}
        {rows.map((r) => (
          <div key={r.f}>
            <p className="font-medium text-[var(--r-text)]">{r.label} <span className="font-normal text-[var(--r-sub)]">· {count(r.then)} words then, {count(r.now)} now</span></p>
            {r.same
              ? <p className="mt-0.5">Unchanged.</p>
              : <p className="mt-0.5 whitespace-pre-line font-serif text-[13px] leading-relaxed text-[var(--r-text)]">{r.parts.map((p, i) => (p.mark ? <mark key={i} className="rounded bg-[var(--r-hl)] px-0.5 text-inherit">{p.text}</mark> : <span key={i}>{p.text}</span>))}</p>}
            {!r.same && r.then.trim() && <details className="mt-1"><summary className="cursor-pointer">Show the first draft</summary><p className="mt-1 whitespace-pre-line font-serif text-[13px] leading-relaxed">{r.then}</p></details>}
          </div>
        ))}
        <p className="opacity-70">Highlighted words are new or reworded since the draft.</p>
      </div>
    </details>
  );
}