// Right panel (outline + annotation summary) and the text-selection popover.
const { useState: useStateP } = React;
const Ip = window.Icons;

function RightPanel({ tab, setTab, outline, jumpTo, annotations, hlColors, jumpToAnno,
  editComment, deleteAnno, note }) {
  const hl = annotations.highlights || [];
  const st = annotations.stickies || [];
  const cm = annotations.comments || [];
  const total = hl.length + st.length + cm.length;
  const colorOf = (id) => (id && id[0] === "#" ? { solid: id } : (hlColors.find((c) => c.id === id) || hlColors[0]));

  return (
    <aside className="rightpanel">
      <div className="rp-tabs">
        <button className={tab === "outline" ? "on" : ""} onClick={() => setTab("outline")}>
          <Ip.outline size={16} /> İçindekiler
        </button>
        <button className={tab === "notes" ? "on" : ""} onClick={() => setTab("notes")}>
          <Ip.notes size={16} /> Notlar {total > 0 && <span className="rp-badge">{total}</span>}
        </button>
      </div>

      {tab === "outline" && (
        <div className="rp-body">
          {outline.length === 0 && <div className="rp-empty">Başlık bulunamadı.</div>}
          <ul className="outline">
            {outline.map((o) => (
              <li key={o.id} className={"ol-l" + o.level}>
                <button onClick={() => jumpTo(o.id)}>{o.text}</button>
              </li>
            ))}
          </ul>
        </div>
      )}

      {tab === "notes" && (
        <div className="rp-body">
          {total === 0 && (
            <div className="rp-empty">
              Henüz işaret yok.<br />
              <span className="rp-empty-sub">Metni seçip vurgula, yapışkan not veya kenar yorumu ekle.</span>
            </div>
          )}

          {hl.length > 0 && <div className="rp-group-label">Vurgular</div>}
          {hl.map((h) => (
            <div key={h.id} className="anno-item" onClick={() => jumpToAnno(h.id)}>
              <span className="anno-bar" style={{ background: colorOf(h.color).solid }} />
              <div className="anno-body">
                <div className="anno-quote">{h.quote}</div>
              </div>
              <button className="anno-del" onClick={(e) => { e.stopPropagation(); deleteAnno("highlights", h.id); }}>
                <Ip.close size={13} />
              </button>
            </div>
          ))}

          {st.length > 0 && <div className="rp-group-label">Yapışkan notlar</div>}
          {st.map((s) => (
            <div key={s.id} className="anno-item" onClick={() => jumpToAnno(s.id)}>
              <span className="anno-bar" style={{ background: colorOf(s.color).solid }} />
              <div className="anno-body">
                <div className="anno-quote">“{s.quote}”</div>
                <div className="anno-text">{s.text || "(boş not)"}</div>
              </div>
              <button className="anno-del" onClick={(e) => { e.stopPropagation(); deleteAnno("stickies", s.id); }}>
                <Ip.close size={13} />
              </button>
            </div>
          ))}

          {cm.length > 0 && <div className="rp-group-label">Kenar yorumları</div>}
          {cm.map((c) => (
            <div key={c.id} className="anno-item" onClick={() => jumpToAnno(c.id)}>
              <span className="anno-bar comment" />
              <div className="anno-body">
                <div className="anno-quote">“{c.quote}”</div>
                <div className="anno-text">{c.text || "(boş)"}</div>
              </div>
              <button className="anno-del" onClick={(e) => { e.stopPropagation(); deleteAnno("comments", c.id); }}>
                <Ip.close size={13} />
              </button>
            </div>
          ))}
        </div>
      )}
    </aside>
  );
}

// Floating popover shown when text is selected in read mode.
function SelectionPopover({ x, y, onHighlight, onSticky, onComment, hlColors, onClose }) {
  return (
    <div className="sel-pop" style={{ left: x, top: y }} onMouseDown={(e) => e.preventDefault()}>
      <div className="sel-pop-colors">
        {hlColors.map((c) => (
          <button key={c.id} className="swatch sm" style={{ "--sw": c.solid }} title={c.label}
            onClick={() => onHighlight(c.id)} />
        ))}
      </div>
      <div className="sel-pop-divider" />
      <button className="sel-pop-btn" title="Yapışkan not" onClick={onSticky}><Ip.note size={17} /></button>
      <button className="sel-pop-btn" title="Kenar yorumu" onClick={onComment}><Ip.comment size={17} /></button>
    </div>
  );
}

Object.assign(window, { RightPanel, SelectionPopover });