import { useEffect, useState } from 'react';
import { getLocaleFromPathname } from '@/i18n/utils';

// 全站「返回顶部」浮动按钮：滚动超过阈值后淡入，点击平滑回到页首。
// 固定在右下角、小巴适（Mascot）正上方，避免与可拖动的陪伴角色重叠。
export default function BackToTop() {
  const locale = getLocaleFromPathname();
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 480);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const label = locale === 'en' ? 'Back to top' : locale === 'hk' ? '返回頂部' : '返回顶部';

  return (
    <button
      type="button"
      className={`back-to-top${show ? ' is-visible' : ''}`}
      aria-label={label}
      title={label}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none">
        <path
          d="M12 5 L5 13 M12 5 L19 13 M12 5 V20"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </button>
  );
}