import React from 'react';
import { Filter } from 'lucide-react';
import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
import { buildPrintablePages } from '../utils';
import { PageInput } from './PreviewGrid';

interface DataRangeFieldsProps {
  variant?: 'ps' | 'mobile';
  exportRange: ExportRangeConfig;
  onChangeExportRange: (range: ExportRangeConfig) => void;
  rows: RecordRow[];
  paper: PaperConfig;
  template: LabelTemplate;
  disabled?: boolean;
}

export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
  variant = 'ps',
  exportRange,
  onChangeExportRange,
  rows,
  paper,
  template,
  disabled = false,
}) => {
  const isMobile = variant === 'mobile';
  const rangeStats = buildPrintablePages(rows, paper, template, exportRange);

  const patchRange = (patch: Partial<ExportRangeConfig>) => {
    onChangeExportRange({ ...exportRange, ...patch });
  };

  return (
    <div className={isMobile ? 'space-y-4' : 'space-y-2'}>
      {!isMobile && <div className="ps-section-title">数据范围</div>}
      <div>
        {isMobile && <label className="mobile-field-label">范围</label>}
        {!isMobile && <label className="ps-field-label">范围</label>}
        <select
          value={exportRange.mode}
          disabled={disabled}
          onChange={(e) => patchRange({ mode: e.target.value as ExportRangeConfig['mode'] })}
          className={isMobile ? 'mobile-field' : 'ps-field text-[11px]'}
        >
          <option value="all">全部标签</option>
          <option value="odd">仅限奇数序号的标签</option>
          <option value="even">仅限偶数序号的标签</option>
          <option value="custom">自定义序号</option>
        </select>
      </div>
      {exportRange.mode === 'custom' && (
        <div>
          {isMobile ? (
            <label className="mobile-field-label">自定义序号</label>
          ) : (
            <label className="ps-field-label">自定义序号</label>
          )}
          <PageInput
            type="text"
            value={exportRange.custom ?? ''}
            disabled={disabled}
            onCommit={(val) => patchRange({ custom: val })}
            placeholder="如 1,3,5-10"
            inputClassName={isMobile ? 'mobile-field font-mono' : 'ps-field font-mono text-[11px]'}
          />
        </div>
      )}
    </div>
  );
};
