import { Select } from './ui'
import {
  HOUR_OPTIONS,
  INTERVAL_HOUR_OPTIONS,
  MINUTE_OPTIONS,
  WEEKDAY_OPTIONS,
  type ScheduleFrequency,
  type ScheduleRepeatMode,
} from '../lib/scheduleCron'

const REPEAT_OPTIONS: Array<{ value: ScheduleRepeatMode; label: string }> = [
  { value: 'daily', label: '每天' },
  { value: 'weekly', label: '每週' },
  { value: 'interval', label: '固定間隔' },
]

type Props = {
  value: ScheduleFrequency
  onChange: (next: ScheduleFrequency) => void
  compact?: boolean
}

function timeSelectClass(compact?: boolean) {
  return compact ? 'px-2 py-1.5 text-sm' : ''
}

export function ScheduleFrequencyPicker({ value, onChange, compact = false }: Props) {
  const update = (patch: Partial<ScheduleFrequency>) => onChange({ ...value, ...patch })

  return (
    <div className={compact ? 'flex flex-wrap items-center gap-2' : 'space-y-3'}>
      <label className={compact ? 'flex items-center gap-2 text-sm text-ink' : 'block text-base'}>
        {!compact ? <span className="mb-2 block font-bold text-ink">重複</span> : null}
        <Select
          value={value.mode}
          onChange={(e) => update({ mode: e.target.value as ScheduleRepeatMode })}
          className={timeSelectClass(compact)}
        >
          {REPEAT_OPTIONS.map((item) => (
            <option key={item.value} value={item.value}>
              {item.label}
            </option>
          ))}
        </Select>
      </label>

      {value.mode === 'weekly' ? (
        <label className={compact ? 'flex items-center gap-2 text-sm text-ink' : 'block text-base'}>
          {!compact ? <span className="mb-2 block font-bold text-ink">星期</span> : null}
          <Select
            value={String(value.weekday)}
            onChange={(e) => update({ weekday: Number.parseInt(e.target.value, 10) })}
            className={timeSelectClass(compact)}
          >
            {WEEKDAY_OPTIONS.map((item) => (
              <option key={item.value} value={item.value}>
                {item.label}
              </option>
            ))}
          </Select>
        </label>
      ) : null}

      {value.mode === 'interval' ? (
        <label className={compact ? 'flex items-center gap-2 text-sm text-ink' : 'block text-base'}>
          {!compact ? <span className="mb-2 block font-bold text-ink">間隔</span> : null}
          <Select
            value={String(value.intervalHours)}
            onChange={(e) => update({ intervalHours: Number.parseInt(e.target.value, 10) })}
            className={timeSelectClass(compact)}
          >
            {INTERVAL_HOUR_OPTIONS.map((hours) => (
              <option key={hours} value={hours}>
                每 {hours} 小時
              </option>
            ))}
          </Select>
        </label>
      ) : (
        <div className={compact ? 'flex items-center gap-2 text-sm text-ink' : 'block text-base'}>
          {!compact ? <span className="mb-2 block font-bold text-ink">時間（台北）</span> : null}
          <div className="flex items-center gap-2">
            <Select
              value={String(value.hour)}
              onChange={(e) => update({ hour: Number.parseInt(e.target.value, 10) })}
              className={timeSelectClass(compact)}
              aria-label="小時"
            >
              {HOUR_OPTIONS.map((hour) => (
                <option key={hour} value={hour}>
                  {String(hour).padStart(2, '0')}
                </option>
              ))}
            </Select>
            <span className="text-muted">:</span>
            <Select
              value={String(value.minute)}
              onChange={(e) => update({ minute: Number.parseInt(e.target.value, 10) })}
              className={timeSelectClass(compact)}
              aria-label="分鐘"
            >
              {MINUTE_OPTIONS.map((minute) => (
                <option key={minute} value={minute}>
                  {String(minute).padStart(2, '0')}
                </option>
              ))}
            </Select>
          </div>
        </div>
      )}
    </div>
  )
}