import React, { useState, useEffect } from 'react';
import './AnchorNav.css';

/**
 * Kole UI AnchorNav（React）
 * 对齐 组件7.txt AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动
 *
 * props:
 *  - items  : [{ key, label, children? }]（key 对应页面元素 id）
 *  - fixed
 *  - offset : 滚动偏移（避开吸顶高度）
 */
export default function AnchorNav({ items = [], fixed = false, offset = 24 }) {
  const allKeys = [];
  (function collect(list) { list.forEach(i => { allKeys.push(i.key); if (i.children) collect(i.children); }); })(items);
  const [active, setActive] = useState(items[0] ? items[0].key : '');

  const go = (key) => {
    const el = document.getElementById(key);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' });
  };
  useEffect(() => {
    const onScroll = () => {
      const pos = window.scrollY + 80;
      let cur = allKeys[0];
      for (const k of allKeys) {
        const el = document.getElementById(k);
        if (el && el.offsetTop <= pos) cur = k;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`kole-anchor${fixed ? ' fixed' : ''}`}>
      {items.map(it => (
        <div key={it.key}>
          <button className={`kole-anchor-item${active === it.key ? ' is-active' : ''}`} onClick={() => go(it.key)}>{it.label}</button>
          {it.children && (
            <div className="kole-anchor-sub">
              {it.children.map(c => (
                <button key={c.key} className={`kole-anchor-item${active === c.key ? ' is-active' : ''}`} onClick={() => go(c.key)}>{c.label}</button>
              ))}
            </div>
          )}
        </div>
      ))}
    </nav>
  );
}

/*
用法示例：
import AnchorNav from './AnchorNav';
const items = [{ key: 'intro', label: '简介' }, { key: 'guide', label: '指南', children: [{ key: 'layout', label: '布局' }] }];
<AnchorNav items={items} fixed />
*/