// src/views/Community/components/DynamicNewsCard/PageNavigationButton.js
// 翻页导航按钮组件

import React from 'react';
import { IconButton, useColorModeValue } from '@chakra-ui/react';
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';

/**
 * 翻页导航按钮组件
 * @param {Object} props
 * @param {'prev'|'next'} props.direction - 按钮方向（prev=上一页，next=下一页）
 * @param {number} props.currentPage - 当前页码
 * @param {number} props.totalPages - 总页数
 * @param {Function} props.onPageChange - 翻页回调
 * @param {string} props.mode - 显示模式（只在carousel/grid模式下显示）
 */
const PageNavigationButton = ({
  direction,
  currentPage,
  totalPages,
  onPageChange,
  mode
}) => {
  // 主题适配
  const arrowBtnBg = useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)');
  const arrowBtnHoverBg = useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)');

  // 根据方向计算配置
  const isPrev = direction === 'prev';
  const isNext = direction === 'next';

  const Icon = isPrev ? ChevronLeftIcon : ChevronRightIcon;
  const position = isPrev ? 'left' : 'right';
  const label = isPrev ? '上一页' : '下一页';
  const targetPage = isPrev ? currentPage - 1 : currentPage + 1;
  const shouldShow = isPrev
    ? currentPage > 1
    : currentPage < totalPages;
  const isDisabled = isNext ? currentPage >= totalPages : false;

  // 判断是否显示（只在单排/双排模式显示）
  const shouldRender = shouldShow && (mode === 'carousel' || mode === 'grid');

  if (!shouldRender) return null;

  const handleClick = () => {
    console.log(
      `%c🔵 [翻页] 点击${label}: 当前页${currentPage} → 目标页${targetPage} (共${totalPages}页)`,
      'color: #3B82F6; font-weight: bold;'
    );
    onPageChange(targetPage);
  };

  return (
    <IconButton
      icon={<Icon boxSize={6} color="blue.500" />}
      position="absolute"
      {...{ [position]: 0 }}
      top="50%"
      transform="translateY(-50%)"
      zIndex={2}
      onClick={handleClick}
      variant="ghost"
      size="md"
      w="40px"
      h="40px"
      minW="40px"
      borderRadius="full"
      bg={arrowBtnBg}
      boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)"
      _hover={{
        bg: arrowBtnHoverBg,
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
        transform: 'translateY(-50%) scale(1.05)'
      }}
      isDisabled={isDisabled}
      aria-label={label}
      title={label}
    />
  );
};

export default PageNavigationButton;