import { SearchBox } from '~/components/ui/SearchBox';
import { SimpleDateRangePicker, DateRangePicker } from '~/components/ui/DateRangePicker';

interface FilterOption {
  value: string;
  label: string;
}

interface FilterSelectProps {
  label: string;
  name: string;
  value: string;
  options: FilterOption[];
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  className?: string;
}

/**
 * 筛选下拉选择框组件
 */
const FilterSelect = ({ label, name, value, options, onChange, className = '' }: FilterSelectProps) => (
  <div className={`filter-item ${className}`}>
    <label className="filter-label">{label}</label>
    <select 
      className="form-select filter-control"
      name={name}
      value={value}
      onChange={onChange}
    >
      <option value="">全部</option>
      {options.map(option => (
        <option key={option.value} value={option.value}>{option.label}</option>
      ))}
    </select>
  </div>
);

interface FilterPanelProps {
  children: React.ReactNode;
  className?: string;
  actions?: React.ReactNode; // 按钮组，如搜索、重置按钮
  noActionDivider?: boolean; // 是否取消按钮组与内容之间的分割线
}

/**
 * 通用筛选面板组件
 * 用于包裹筛选控件
 * 
 * 使用示例:
 * ```tsx
 * <FilterPanel 
 *   className="mb-4"
 *   noActionDivider={true}
 *   actions={
 *     <>
 *       <Button type="default" icon="ri-refresh-line" onClick={handleReset}>重置</Button>
 *       <Button type="primary" icon="ri-search-line">搜索</Button>
 *     </>
 *   }
 * >
 *   <SearchFilter label="名称" placeholder="请输入名称" value={name} onSearch={handleNameSearch} instantSearch={true} />
 *   <FilterSelect label="状态" name="status" value={status} options={statusOptions} onChange={handleStatusChange} />
 * </FilterPanel>
 */
export function FilterPanel({ children, className = '', actions, noActionDivider = false }: FilterPanelProps) {
  return (
    <div className={`filter-panel ${className}`}>
      <div className="filter-list">
        {children}
        {actions && (
          <div className={`filter-actions ${noActionDivider ? 'filter-actions-no-divider' : ''}`}>
            {actions}
          </div>
        )}
      </div>
    </div>
  );
}

interface SearchFilterProps {
  label: string;
  placeholder: string;
  value: string;
  onSearch: (value: string) => void;
  buttonText?: string;
  className?: string;
  instantSearch?: boolean; // 是否启用即时搜索（输入内容时立即搜索）
}

/**
 * 搜索筛选组件
 * 
 * 使用示例:
 * ```tsx
 * // 带搜索按钮的搜索框
 * <SearchFilter 
 *   label="关键词搜索" 
 *   placeholder="请输入关键词" 
 *   value={keyword} 
 *   onSearch={handleSearch} 
 * />
 * 
 * // 即时搜索的搜索框（无按钮）
 * <SearchFilter 
 *   label="关键词搜索" 
 *   placeholder="请输入关键词" 
 *   value={keyword} 
 *   onSearch={handleSearch}
 *   instantSearch={true}
 * />
 */
export function SearchFilter({ 
  label, 
  placeholder, 
  value, 
  onSearch, 
  buttonText = "搜索", 
  className = '',
  instantSearch = false
}: SearchFilterProps) {
  return (
    <div className={`filter-item ${className}`}>
      <label className="filter-label">{label}</label>
      <SearchBox
        placeholder={placeholder}
        defaultValue={value}
        onSearch={onSearch}
        buttonText={instantSearch ? "" : buttonText}
        className={`filter-control ${instantSearch ? 'form-input-only' : ''}`}
      />
    </div>
  );
}


interface DateRangeFilterProps {
  label: string;
  startDate: string;
  endDate: string;
  onStartDateChange: (value: string) => void;
  onEndDateChange: (value: string) => void;
  className?: string;
  startLabel?: string;
  endLabel?: string;
  simple?: boolean;
}

/**
 * 日期范围筛选组件
 * 
 * 使用示例:
 * ```tsx
 * <DateRangeFilter 
 *   label="上传时间" 
 *   startDate={dateFrom} 
 *   endDate={dateTo}
 *   onStartDateChange={(value) => handleDateChange('dateFrom', value)}
 *   onEndDateChange={(value) => handleDateChange('dateTo', value)}
 * />
 * ```
 */
export function DateRangeFilter({ 
  label, 
  startDate, 
  endDate, 
  onStartDateChange, 
  onEndDateChange, 
  className = '',
  startLabel = "从",
  endLabel = "至",
  simple = false
}: DateRangeFilterProps) {
  return (
    <div className={`filter-item ${className}`}>
      <label className="filter-label">{label}</label>
      {simple ? (
        <SimpleDateRangePicker
          startDate={startDate}
          endDate={endDate}
          onStartDateChange={onStartDateChange}
          onEndDateChange={onEndDateChange}
          className="filter-control"
        />
      ) : (
        <DateRangePicker
          startDate={startDate}
          endDate={endDate}
          onStartDateChange={onStartDateChange}
          onEndDateChange={onEndDateChange}
          startLabel={startLabel}
          endLabel={endLabel}
          className="filter-control"
        />
      )}
    </div>
  );
}

// 导出筛选下拉框组件和日期范围筛选组件
export { FilterSelect }; 