import React from 'react';

interface SingleYearPickerPanelProps {
  value: string;
  years: string[];
  onChange: (year: string) => void;
  onComplete?: () => void;
}

export function SingleYearPickerPanel({
  value,
  years,
  onChange,
  onComplete,
}: SingleYearPickerPanelProps) {
  const currentYear = String(new Date().getFullYear());

  const pickYear = (year: string) => {
    onChange(year);
    onComplete?.();
  };

  return (
    <div className="vm-single-year-picker">
      <p className="vm-single-year-picker-title">选择出厂年份</p>
      <div className="vm-single-year-picker-grid" role="listbox" aria-label="出厂年份列表">
        {years.map((year) => {
          const selected = year === value;
          const isCurrent = year === currentYear;
          return (
            <button
              key={year}
              type="button"
              role="option"
              aria-selected={selected}
              className={[
                'vm-single-year-picker-option',
                selected ? 'is-selected' : '',
                isCurrent ? 'is-current' : '',
              ].filter(Boolean).join(' ')}
              onClick={() => pickYear(year)}
            >
              {year}
              {isCurrent ? <span className="vm-single-year-picker-badge">今年</span> : null}
            </button>
          );
        })}
      </div>
      <div className="vm-single-year-picker-footer">
        <button
          type="button"
          className="vm-detail-inline-picker-quick"
          onClick={() => pickYear(currentYear)}
        >
          今年
        </button>
      </div>
    </div>
  );
}
