/* =========================================================
   三藏閣 — 우측 도구 패널 (설정 · 북마크 · 메모 · 검색)
   ========================================================= */

const { Icon: PIcon } = window;

window.ReaderTools = ({
  passage,
  panel, onPanelChange,
  settings, onSettings,
  bookmarks, onJumpBookmark, onRemoveBookmark,
  highlights, onJumpHighlight,
  searchResults, searchQuery, onSearch, onJumpSearch,
  onTTS, ttsActive, onAddBookmark, onCite,
  sbCollapsed, onToggleSidebar,
  onOpenEncy, onOpenDict,
}) => {

  const setS = (k, v) => onSettings({ ...settings, [k]: v });
  const layerToggles = [
    { key: 'showSource', label: '원문' },
    { key: 'showReading', label: '독음' },
    { key: 'showTranslation', label: '번역' },
  ];
  const toggleLayer = (key) => {
    const next = { ...settings, [key]: !settings[key] };
    const count = [
      next.showSource !== false,
      next.showReading !== false,
      next.showTranslation !== false,
    ].filter(Boolean).length;
    if (count === 0) return;
    onSettings(next);
  };

  return (
    <aside className="r-rail">
      <div className="r-rail__icons">
        <button
          className="icon-btn"
          title={sbCollapsed ? '목차 보이기' : '목차 숨기기'}
          onClick={onToggleSidebar}
        ><PIcon name={sbCollapsed ? 'panel-right' : 'menu'} /></button>
        <div className="r-rail__divider" aria-hidden="true"/>
        <button
          className={'icon-btn' + (panel === 'settings' ? ' icon-btn--active' : '')}
          title="글자 · 보기 (Aa)"
          onClick={() => onPanelChange(panel === 'settings' ? null : 'settings')}
        ><PIcon name="aA" /></button>
        <button
          className={'icon-btn' + (panel === 'bookmarks' ? ' icon-btn--active' : '')}
          title="북마크"
          onClick={() => onPanelChange(panel === 'bookmarks' ? null : 'bookmarks')}
        ><PIcon name="bookmark" /></button>
        <button
          className={'icon-btn' + (panel === 'highlights' ? ' icon-btn--active' : '')}
          title="하이라이트 · 메모"
          onClick={() => onPanelChange(panel === 'highlights' ? null : 'highlights')}
        ><PIcon name="highlight" /></button>
        <button
          className={'icon-btn' + (panel === 'connect' ? ' icon-btn--active' : '')}
          title="연결 · 관련 항목"
          onClick={() => onPanelChange(panel === 'connect' ? null : 'connect')}
        ><PIcon name="connect" /></button>
        <button
          className={'icon-btn' + (panel === 'search' ? ' icon-btn--active' : '')}
          title="전문 검색"
          onClick={() => onPanelChange(panel === 'search' ? null : 'search')}
        ><PIcon name="search" /></button>

        {/* 페이지 액션: 음성 독송 · 북마크 추가 · 인용 링크 */}
        <div className="r-rail__divider" aria-hidden="true"/>
        <button
          className={'icon-btn' + (ttsActive ? ' icon-btn--active' : '')}
          title="음성 독송"
          onClick={onTTS}
        ><PIcon name="speaker" /></button>
        <button className="icon-btn" title="이 자리 북마크" onClick={onAddBookmark}>
          <PIcon name="plus" />
        </button>
        <button className="icon-btn" title="인용 링크 복사" onClick={onCite}>
          <PIcon name="link" />
        </button>
      </div>

      {panel && (
        <div className="r-rail__panel">
          <div className="r-rail__panel-head">
            <span className="r-rail__panel-title">
              {panel === 'settings' && 'READING · 보기 설정'}
              {panel === 'bookmarks' && 'BOOKMARKS · 북마크'}
              {panel === 'highlights' && 'HIGHLIGHTS · 메모'}
              {panel === 'connect' && 'CONNECT · 연결'}
              {panel === 'search' && 'SEARCH · 검색'}
            </span>
            <button className="icon-btn" onClick={() => onPanelChange(null)}>
              <PIcon name="close" size={18}/>
            </button>
          </div>

          <div className="r-rail__panel-body">

            {/* ============ 설정 ============ */}
            {panel === 'settings' && (
              <div className="r-settings">
                <div className="r-settings__group">
                  <div className="r-settings__label">
                    <span>본문 표시</span>
                  </div>
                  <div className="r-settings__checks">
                    {layerToggles.map(item => {
                      const active = settings[item.key] !== false;
                      return (
                        <button
                          key={item.key}
                          className={'r-check' + (active ? ' is-active' : '')}
                          aria-pressed={active}
                          onClick={() => toggleLayer(item.key)}
                        >
                          <span className="r-check__box" aria-hidden="true" />
                          <span>{item.label}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div className="r-settings__group">
                  <div className="r-settings__label">
                    <span>본문 활자</span>
                  </div>
                  <div className="r-seg" style={{ '--n': 2 }}>
                    <button
                      className={'r-seg__btn r-seg__btn-sans' + (settings.font === 'sans' ? ' is-active' : '')}
                      onClick={() => setS('font', 'sans')}
                    >Pretendard · 산세리프</button>
                    <button
                      className={'r-seg__btn r-seg__btn-serif' + (settings.font === 'serif' ? ' is-active' : '')}
                      onClick={() => setS('font', 'serif')}
                    >본명조 · 명조</button>
                  </div>
                </div>

                <div className="r-settings__group">
                  <div className="r-settings__label">
                    <span>글자 크기</span>
                    <span className="val">{settings.size}px</span>
                  </div>
                  <input className="r-slider" type="range" min="10" max="36" step="0.5"
                    value={settings.size}
                    onChange={(e) => setS('size', +e.target.value)} />
                </div>

                <div className="r-settings__group">
                  <div className="r-settings__label">
                    <span>줄 간격</span>
                    <span className="val">{settings.lh.toFixed(2)}</span>
                  </div>
                  <input className="r-slider" type="range" min="1.5" max="3" step="0.05"
                    value={settings.lh}
                    onChange={(e) => setS('lh', +e.target.value)} />
                </div>

                <div className="r-settings__group">
                  <div className="r-settings__label"><span>단 너비</span></div>
                  <div className="r-seg" style={{ '--n': 3 }}>
                    {['narrow','normal','wide'].map(w => (
                      <button key={w}
                        className={'r-seg__btn' + (settings.width === w ? ' is-active' : '')}
                        onClick={() => setS('width', w)}
                      >{w === 'narrow' ? '좁게' : w === 'normal' ? '보통' : '넓게'}</button>
                    ))}
                  </div>
                </div>

                <div style={{height:1, background:'var(--rule-soft)', margin:'8px 0'}} />

                <div className="r-toggle">
                  <div>
                    <div className="r-toggle__label">각주 표시</div>
                    <span className="r-toggle__sub">번호와 풀이를 본문 끝에 노출</span>
                  </div>
                  <button
                    className={'r-switch' + (settings.showFootnotes ? ' is-on' : '')}
                    onClick={() => setS('showFootnotes', !settings.showFootnotes)}
                  />
                </div>
              </div>
            )}

            {/* ============ 북마크 ============ */}
            {panel === 'bookmarks' && (
              <div className="r-list">
                {bookmarks.length === 0 ? (
                  <div className="r-list__empty">
                    <div className="r-list__empty-icon"><PIcon name="bookmark" size={32}/></div>
                    아직 북마크가 없습니다.<br/>
                    <span style={{fontSize:11, color:'var(--ink-dim)'}}>본문 단락의 ❑ 표지를 눌러 위치를 저장하세요.</span>
                  </div>
                ) : bookmarks.map((b, i) => (
                  <button key={i} className="r-item" onClick={() => onJumpBookmark(b)}>
                    <span className="r-item__loc">{b.loc}</span>
                    <span className="r-item__excerpt">{b.excerpt}</span>
                    <span className="r-item__time">{b.time}</span>
                  </button>
                ))}
              </div>
            )}

            {/* ============ 하이라이트 ============ */}
            {panel === 'highlights' && (
              <div className="r-list">
                {highlights.length === 0 ? (
                  <div className="r-list__empty">
                    <div className="r-list__empty-icon"><PIcon name="highlight" size={32}/></div>
                    드래그로 본문을 선택하면 색상을 골라 표시할 수 있습니다.
                  </div>
                ) : highlights.map((h, i) => (
                  <button key={i} className="r-item" onClick={() => onJumpHighlight(h)}
                    style={{ borderLeft: `3px solid var(--hl-${h.color})` }}>
                    <span className="r-item__loc">{h.loc}</span>
                    <span className="r-item__excerpt">{h.text}</span>
                    {h.note && <span className="r-item__time">메모 · {h.note}</span>}
                  </button>
                ))}
              </div>
            )}

            {/* ============ 연결 ============ */}
            {panel === 'connect' && (
              <window.ConnectPanel passage={passage} onOpenEncy={onOpenEncy} onOpenDict={onOpenDict}/>
            )}

            {/* ============ 검색 ============ */}
            {panel === 'search' && (
              <div>
                <input
                  className="r-search-input"
                  placeholder="단어 또는 구절을 입력…"
                  value={searchQuery}
                  onChange={(e) => onSearch(e.target.value)}
                  autoFocus
                />
                <div style={{marginTop:12}}>
                  {searchQuery && searchResults.length === 0 && (
                    <div style={{fontSize:13,color:'var(--ink-mute)',padding:'12px 0'}}>
                      일치하는 결과가 없습니다.
                    </div>
                  )}
                  {searchResults.map((r, i) => (
                    <div key={i} className="r-search-result" onClick={() => onJumpSearch(r)}>
                      <div className="r-search-result__loc">{r.loc}</div>
                      <div className="r-search-result__text"
                        dangerouslySetInnerHTML={{ __html: r.snippet }} />
                    </div>
                  ))}
                </div>
              </div>
            )}

          </div>
        </div>
      )}
    </aside>
  );
};