import React, { useRef, useState } from 'react';
import './PullRefresh.css';

/* 下拉刷新（移动端）— 规格 §4；Pointer Events 手势，阈值默认 60px，
   松手达阈值进入 refreshing；横向分量更大时放弃本次下拉。 */
export default function PullRefresh({
  threshold = 60,
  refreshing = false,
  done = false,
  onRefresh,
  fallbackLabel = '刷新列表',
  children,
}) {
  const [offset, setOffset] = useState(0);
  const [drag, setDrag] = useState('');
  const start = useRef({ y: 0, x: 0 });
  const dy = useRef(0);
  const active = useRef(false);

  const stateText = refreshing
    ? '正在刷新…'
    : done
      ? '刷新完成'
      : drag === 'ready'
        ? '松开立即刷新'
        : '下拉即可刷新';

  const cls =
    'kole-m-pullrefresh' +
    (refreshing ? ' is-refreshing' : done ? ' is-done' : drag ? ' is-' + drag : '');

  function onPointerDown(e) {
    if (refreshing) return;
    active.current = true;
    start.current = { y: e.clientY, x: e.clientX };
    dy.current = 0;
  }

  function onPointerMove(e) {
    if (!active.current) return;
    dy.current = e.clientY - start.current.y;
    if (Math.abs(e.clientX - start.current.x) > Math.abs(dy.current)) {
      active.current = false;
      return;
    }
    if (dy.current <= 0) {
      setOffset(0);
      setDrag('');
      return;
    }
    setOffset(dy.current);
    setDrag(dy.current >= threshold ? 'ready' : 'pulling');
  }

  function release() {
    if (!active.current) return;
    active.current = false;
    if (dy.current >= threshold) {
      setOffset(threshold);
      setDrag('');
      if (onRefresh) onRefresh();
    } else {
      setOffset(0);
      setDrag('');
    }
  }

  return (
    <div
      className={cls}
      style={{ '--kole-m-pullrefresh-offset': offset + 'px' }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={release}
      onPointerCancel={release}
    >
      <div className="kole-m-pullrefresh__indicator" role="status" aria-live="polite">
        <span className="kole-m-pullrefresh__spinner" aria-hidden="true" />
        <span className="kole-m-pullrefresh__text">{stateText}</span>
      </div>
      <div className="kole-m-pullrefresh__content">
        {children}
        <button
          className="kole-m-pullrefresh__fallback"
          type="button"
          onClick={() => onRefresh && onRefresh()}
        >
          {fallbackLabel}
        </button>
      </div>
    </div>
  );
}