// Center content pane: article view + edit mode + floating selection toolbar
function Article({
  entry, chapter, isEditing, onToggleEdit, onContentChange,
  onSelectionQuote, saveState,
  onAskAIAboutSelection,
}) {
  const bodyRef = React.useRef(null);
  const [scrolled, setScrolled] = React.useState(false);
  const [floatTB, setFloatTB] = React.useState(null); // {x, y, text}
  const [aiFlashKey, setAiFlashKey] = React.useState(0);

  // Sync innerHTML when entry or editing changes
  React.useEffect(() => {
    if (!bodyRef.current) return;
    // Only write if different (so edit mode doesn't clobber user input)
    if (bodyRef.current.innerHTML !== entry.content) {
      bodyRef.current.innerHTML = entry.content;
    }
  }, [entry.id, entry.content, isEditing]);

  // AI apply-flash: listen for global events
  React.useEffect(() => {
    const h = () => {
      setAiFlashKey(k => k + 1);
      const el = bodyRef.current;
      if (el) {
        el.classList.remove('ai-applied');
        // force reflow
        void el.offsetWidth;
        el.classList.add('ai-applied');
      }
    };
    window.addEventListener('ai-applied', h);
    return () => window.removeEventListener('ai-applied', h);
  }, []);

  // Selection-toolbar handling (only when not editing)
  React.useEffect(() => {
    if (isEditing) { setFloatTB(null); return; }
    const onSel = () => {
      const sel = window.getSelection();
      if (!sel || sel.isCollapsed || sel.rangeCount === 0) { setFloatTB(null); return; }
      const range = sel.getRangeAt(0);
      // Make sure selection is inside article body
      const body = bodyRef.current;
      if (!body || !body.contains(range.commonAncestorContainer)) { setFloatTB(null); return; }
      const text = sel.toString().trim();
      if (!text || text.length < 2) { setFloatTB(null); return; }
      const rect = range.getBoundingClientRect();
      setFloatTB({
        x: rect.left + rect.width / 2,
        y: rect.top,
        text,
      });
      // notify parent: user has a selection -> input quote chip
      onSelectionQuote(text);
    };
    const onDown = (e) => {
      // close toolbar if click outside article body
      if (!bodyRef.current?.contains(e.target) && !e.target.closest('.float-toolbar')) {
        setFloatTB(null);
      }
    };
    document.addEventListener('selectionchange', onSel);
    document.addEventListener('mousedown', onDown);
    return () => {
      document.removeEventListener('selectionchange', onSel);
      document.removeEventListener('mousedown', onDown);
    };
  }, [isEditing, onSelectionQuote]);

  const onScroll = (e) => setScrolled(e.target.scrollTop > 6);

  const handleInput = () => {
    if (!bodyRef.current) return;
    onContentChange(bodyRef.current.innerHTML);
  };

  const format = (cmd, val = null) => {
    document.execCommand(cmd, false, val);
    handleInput();
    bodyRef.current?.focus();
  };

  return (
    <section className="content">
      <div className={'content-top' + (scrolled ? ' scrolled' : '')}>
        <div className="breadcrumb">
          <Icon.Book />
          <span>{chapter.emoji} {chapter.title}</span>
          <span className="sep">›</span>
          <span className="current">{entry.title}</span>
          <SaveIndicator state={saveState} />
        </div>
        {isEditing ? (
          <button className="top-btn primary" onClick={onToggleEdit}>
            <Icon.Check /> 完成
          </button>
        ) : (
          <button className="top-btn" onClick={onToggleEdit}>
            <Icon.Pencil /> 编辑
          </button>
        )}
      </div>

      <div className="content-scroll" onScroll={onScroll}>
        <article className="article">
          <div className="article-meta">
            <span className="meta-chip">
              <span className="meta-dot"></span>
              {entry.titleEn}
            </span>
            <span className="meta-chip">
              <Icon.Clock size={11} /> 更新于 {entry.updatedAt}
            </span>
          </div>

          {isEditing && (
            <div className="edit-toolbar">
              <button className="tb-btn" title="标题 1" onClick={() => format('formatBlock', 'H1')}><Icon.H1 /></button>
              <button className="tb-btn" title="标题 2" onClick={() => format('formatBlock', 'H2')}><Icon.H2 /></button>
              <button className="tb-btn" title="正文" onClick={() => format('formatBlock', 'P')}>P</button>
              <div className="tb-sep"></div>
              <button className="tb-btn" title="加粗" onClick={() => format('bold')}><Icon.Bold /></button>
              <button className="tb-btn" title="斜体" onClick={() => format('italic')}><Icon.Italic /></button>
              <div className="tb-sep"></div>
              <button className="tb-btn" title="列表" onClick={() => format('insertUnorderedList')}><Icon.List /></button>
              <button className="tb-btn" title="引述" onClick={() => format('formatBlock', 'BLOCKQUOTE')}><Icon.Quote2 /></button>
            </div>
          )}

          <div
            ref={bodyRef}
            className={'article-body' + (isEditing ? ' editing' : '')}
            contentEditable={isEditing}
            suppressContentEditableWarning
            onInput={handleInput}
          />
        </article>
      </div>

      {floatTB && !isEditing && (
        <div className="float-toolbar" style={{ left: floatTB.x, top: floatTB.y }}>
          <button className="ft-btn accent" onClick={() => { onAskAIAboutSelection(floatTB.text, 'ask'); setFloatTB(null); }}>
            <Icon.Sparkle size={12} /> 问 AI
          </button>
          <div className="ft-sep"></div>
          <button className="ft-btn" onClick={() => { onAskAIAboutSelection(floatTB.text, 'polish'); setFloatTB(null); }}>润色</button>
          <button className="ft-btn" onClick={() => { onAskAIAboutSelection(floatTB.text, 'simplify'); setFloatTB(null); }}>更简单</button>
        </div>
      )}
    </section>
  );
}

function SaveIndicator({ state }) {
  if (state === 'idle') return null;
  return (
    <span className={'save-indicator' + (state === 'saving' ? ' saving' : '')}>
      <span className="dot"></span>
      {state === 'saving' ? '保存中…' : '已保存'}
    </span>
  );
}

window.Article = Article;