/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useRef } from 'react';
import { Button, Tag, Skeleton } from '@douyinfe/semi-ui';
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';

/**
 * 横向筛选项行，通过左右箭头翻页
 * @param {string} title 标题
 * @param {Array<{value:any,label:string,icon?:React.ReactNode,tagCount?:number}>} items 选项列表
 * @param {*} activeValue 当前选中值
 * @param {(value:any)=>void} onChange 选择回调
 * @param {boolean} loading 加载中
 * @param {Function} t i18n
 */
const HorizontalFilterRow = ({
  title,
  items = [],
  activeValue,
  onChange,
  loading = false,
  t = (v) => v,
}) => {
  const scrollRef = useRef(null);
  const showSkeleton = useMinimumLoadingTime(loading);

  const handleScroll = (dir) => {
    const el = scrollRef.current;
    if (!el) return;
    const step = el.clientWidth * 0.8;
    el.scrollBy({
      left: dir === 'left' ? -step : step,
      behavior: 'smooth',
    });
  };

  if (showSkeleton) {
    return (
      <div className='mb-6'>
        <Skeleton.Title active style={{ width: 60, marginBottom: 8 }} />
        <div className='flex gap-2'>
          {[1, 2, 3, 4, 5].map((i) => (
            <Skeleton.Button
              key={i}
              active
              style={{ width: 80, height: 32 }}
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className='mb-6 last:mb-0'>
      <div className='text-sm font-medium text-semi-color-text-1 mb-3'>
        {title}
      </div>
      <div className='flex items-center gap-2'>
        <Button
          type='tertiary'
          theme='borderless'
          icon={<IconChevronLeft />}
          onClick={() => handleScroll('left')}
          className='flex-shrink-0'
          aria-label={t('向左')}
        />
        <div
          ref={scrollRef}
          className='flex-1 min-w-0 flex gap-2 overflow-x-auto overflow-y-hidden scroll-smooth scrollbar-hide'
          style={{
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
            WebkitOverflowScrolling: 'touch',
          }}
        >
          {items.map((item) => {
            const isDisabled =
              item.disabled ||
              (typeof item.tagCount === 'number' && item.tagCount === 0);
            const isActive = activeValue === item.value;

            return (
              <Button
                key={item.value}
                onClick={() => !isDisabled && onChange(item.value)}
                theme={isActive ? 'solid' : 'borderless'}
                type={isActive ? 'primary' : 'tertiary'}
                disabled={isDisabled}
                className='flex-shrink-0 !rounded-full'
              >
                <span className='flex items-center gap-2'>
                  {item.icon}
                  <span>{item.label}</span>
                  {item.tagCount !== undefined && (
                    <Tag
                      color={isActive ? 'white' : 'grey'}
                      shape='circle'
                      size='small'
                    >
                      {item.tagCount}
                    </Tag>
                  )}
                </span>
              </Button>
            );
          })}
        </div>
        <Button
          type='tertiary'
          theme='borderless'
          icon={<IconChevronRight />}
          onClick={() => handleScroll('right')}
          className='flex-shrink-0'
          aria-label={t('向右')}
        />
      </div>
    </div>
  );
};

export default HorizontalFilterRow;
