import React from 'react';
import { useTranslation } from 'react-i18next';
import type { DateFilterField } from '../utils/listFilterUtils';

interface ListFilterSortControlsProps {
  sortBy: string;
  dateFilterBy: DateFilterField;
  dateStart: string;
  dateEnd: string;
  onSortByChange: (value: string) => void;
  onDateFilterByChange: (value: DateFilterField) => void;
  onDateStartChange: (value: string) => void;
  onDateEndChange: (value: string) => void;
  /** Show asset_name sort options (Asset list only) */
  includeAssetNameSort?: boolean;
}

/** Inline sort + date filter fields — place inside the same filter grid as other filters */
const ListFilterSortControls: React.FC<ListFilterSortControlsProps> = ({
  sortBy,
  dateFilterBy,
  dateStart,
  dateEnd,
  onSortByChange,
  onDateFilterByChange,
  onDateStartChange,
  onDateEndChange,
  includeAssetNameSort = false,
}) => {
  const { t } = useTranslation();

  const fieldClass =
    'w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white';

  return (
    <>
      <div className="relative">
        <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
          {t('filters.sortBy', { defaultValue: 'Sort By' })}
        </label>
        <select value={sortBy} onChange={(e) => onSortByChange(e.target.value)} className={fieldClass}>
          <option value="creation desc">{t('filters.sortCreationNewest', { defaultValue: 'Created (Newest)' })}</option>
          <option value="creation asc">{t('filters.sortCreationOldest', { defaultValue: 'Created (Oldest)' })}</option>
          <option value="modified desc">{t('filters.sortModifiedNewest', { defaultValue: 'Modified (Newest)' })}</option>
          <option value="modified asc">{t('filters.sortModifiedOldest', { defaultValue: 'Modified (Oldest)' })}</option>
          {includeAssetNameSort && (
            <>
              <option value="asset_name asc">{t('filters.sortAssetNameAsc', { defaultValue: 'Asset Name (A-Z)' })}</option>
              <option value="asset_name desc">{t('filters.sortAssetNameDesc', { defaultValue: 'Asset Name (Z-A)' })}</option>
            </>
          )}
          <option value="name asc">{t('filters.sortNameAsc', { defaultValue: 'Name (A-Z)' })}</option>
          <option value="name desc">{t('filters.sortNameDesc', { defaultValue: 'Name (Z-A)' })}</option>
        </select>
      </div>

      <div className="relative">
        <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
          {t('filters.filterBy', { defaultValue: 'Filter By' })}
        </label>
        <select
          value={dateFilterBy}
          onChange={(e) => onDateFilterByChange(e.target.value as DateFilterField)}
          className={fieldClass}
        >
          <option value="">{t('filters.filterBy', { defaultValue: 'Filter By' })}</option>
          <option value="creation">{t('filters.createdDate', { defaultValue: 'Created Date' })}</option>
          <option value="modified">{t('filters.latestModifiedDate', { defaultValue: 'Latest Modified Date' })}</option>
        </select>
      </div>

      {dateFilterBy && (
        <>
          <div className="relative">
            <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
              {t('filters.startDate', { defaultValue: 'Start Date' })}
            </label>
            <input
              type="date"
              value={dateStart}
              onChange={(e) => {
                const v = e.target.value;
                onDateStartChange(v);
                if (dateEnd && v > dateEnd) onDateEndChange(v);
              }}
              className={fieldClass}
            />
          </div>
          <div className="relative">
            <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
              {t('filters.endDate', { defaultValue: 'End Date' })}
            </label>
            <input
              type="date"
              value={dateEnd}
              onChange={(e) => onDateEndChange(e.target.value)}
              min={dateStart || undefined}
              className={fieldClass}
            />
          </div>
        </>
      )}
    </>
  );
};

export default ListFilterSortControls;
