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>}
      {isMobile && (
        <div className="flex items-center gap-2">
          <Filter className="w-4 h-4 text-indigo-500 shrink-0" />
          <span className="text-sm font-semibold text-slate-800">数据范围</span>
        </div>
      )}
      <p className={isMobile ? 'text-xs text-slate-500 leading-relaxed' : 'text-[10px] text-[#888] leading-relaxed'}>
        序号指数据行顺序（从 1 开始），应用数据后生效。
      </p>
      <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>
      )}
      <p className={isMobile ? 'text-xs text-slate-500' : 'text-[10px] text-[#777]'}>
        将选 {rangeStats.selectedCount} 枚
        {rangeStats.selectedCount < rows.length && ` / 共 ${rows.length} 行`}
        {isMobile && rangeStats.selectedCount > 0 && (
          <span>
            {' '}
            · 约 {rangeStats.totalPages} 页 PDF
          </span>
        )}
      </p>
    </div>
  );
};