import { useTranslation } from 'react-i18next';

interface ScheduleState {
  scheduleType: string;
  hour: number;
  minute: number;
  dayOfWeek: number;
  dayOfMonth: number;
  cronExpression: string;
  scheduledAt: string;
}

interface ScheduleFieldsProps {
  schedule: ScheduleState;
  onChange: (updater: (prev: ScheduleState) => ScheduleState) => void;
}

export function ScheduleFields({ schedule, onChange }: ScheduleFieldsProps) {
  const { t } = useTranslation('create');
  const weekdays = t('schedule.weekdays', { returnObjects: true }) as string[];
  return (
    <div className="pl-4 border-l-2 border-blue-200 space-y-2 mt-2">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        <div>
          <label className="block text-xs text-slate-600 mb-1">{t('schedule.type')}</label>
          <select
            value={schedule.scheduleType}
            onChange={e => onChange(p => ({ ...p, scheduleType: e.target.value }))}
            className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
          >
            <option value="daily">{t('schedule.daily')}</option>
            <option value="weekly">{t('schedule.weekly')}</option>
            <option value="monthly">{t('schedule.monthly')}</option>
            <option value="cron">{t('schedule.cron')}</option>
            <option value="once">{t('schedule.once')}</option>
          </select>
        </div>
        {schedule.scheduleType !== 'cron' && schedule.scheduleType !== 'once' && (
          <div>
            <label className="block text-xs text-slate-600 mb-1">{t('schedule.time')}</label>
            <div className="flex items-center gap-1">
              <input
                type="number"
                min={0}
                max={23}
                value={schedule.hour}
                onChange={e => onChange(p => ({ ...p, hour: Number(e.target.value) }))}
                className="w-14 px-1 py-1.5 border border-slate-200 rounded-lg text-xs text-center"
              />
              <span>:</span>
              <input
                type="number"
                min={0}
                max={59}
                value={schedule.minute}
                onChange={e => onChange(p => ({ ...p, minute: Number(e.target.value) }))}
                className="w-14 px-1 py-1.5 border border-slate-200 rounded-lg text-xs text-center"
              />
            </div>
          </div>
        )}
      </div>
      {schedule.scheduleType === 'weekly' && (
        <div>
          <label className="block text-xs text-slate-600 mb-1">{t('schedule.dayOfWeek')}</label>
          <select
            value={schedule.dayOfWeek}
            onChange={e => onChange(p => ({ ...p, dayOfWeek: Number(e.target.value) }))}
            className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
          >
            {weekdays.map((d, i) => (
              <option key={i} value={i}>{d}</option>
            ))}
          </select>
        </div>
      )}
      {schedule.scheduleType === 'monthly' && (
        <div>
          <label className="block text-xs text-slate-600 mb-1">{t('schedule.dayOfMonth')}</label>
          <input
            type="number"
            min={1}
            max={31}
            value={schedule.dayOfMonth}
            onChange={e => onChange(p => ({ ...p, dayOfMonth: Number(e.target.value) }))}
            className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
          />
        </div>
      )}
      {schedule.scheduleType === 'cron' && (
        <div>
          <label className="block text-xs text-slate-600 mb-1">{t('schedule.cron')}</label>
          <input
            value={schedule.cronExpression}
            onChange={e => onChange(p => ({ ...p, cronExpression: e.target.value }))}
            className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-xs font-mono"
            placeholder="0 9 * * MON"
          />
        </div>
      )}
      {schedule.scheduleType === 'once' && (
        <div>
          <label className="block text-xs text-slate-600 mb-1">{t('schedule.runAt')}</label>
          <input
            type="datetime-local"
            value={schedule.scheduledAt}
            onChange={e => onChange(p => ({ ...p, scheduledAt: e.target.value }))}
            className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
          />
        </div>
      )}
    </div>
  );
}
