const { renderFragment } = require('../../../view');

const DAY_OPTIONS = [
  { value: 0, label: 'Sun' },
  { value: 1, label: 'Mon' },
  { value: 2, label: 'Tue' },
  { value: 3, label: 'Wed' },
  { value: 4, label: 'Thu' },
  { value: 5, label: 'Fri' },
  { value: 6, label: 'Sat' }
];

const DEFAULT_START_TIME = '00:00';
const DEFAULT_END_TIME = '23:59';

function formatDateTimeInput(value) {
  if (!value) {
    return '';
  }
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '';
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day}T${hours}:${minutes}`;
}

function formatTimeInput(value) {
  if (!value) {
    return '';
  }
  return String(value).slice(0, 5);
}

module.exports = function renderPlaylistSlideConfigPage(playlist, playlistSlide, message, rowKey, currentUser) {
  const slide = playlistSlide || {
    id: 0,
    schedule_mode: 'always',
    schedule_days: [],
    schedule_start_datetime: null,
    schedule_end_datetime: null,
    schedule_start_time: null,
    schedule_end_time: null
  };
  const scheduleMode = String(slide.schedule_mode || 'always');
  const selectedDays = new Set(Array.isArray(slide.schedule_days) ? slide.schedule_days.map(Number) : []);
  const startTimeValue = formatTimeInput(slide.schedule_start_time) || (scheduleMode === 'times' ? DEFAULT_START_TIME : '');
  const endTimeValue = formatTimeInput(slide.schedule_end_time) || (scheduleMode === 'times' ? DEFAULT_END_TIME : '');

  return renderFragment('playlists/slide-config', {
    title: 'Slide schedule',
    framePopupCard: true,
    hideFrameHeader: true,
    hideThemeToggle: true,
    frameBodyClass: 'admin-shell-body--frame-plain',
    message: message,
    currentUser: currentUser || null,
    playlist: playlist,
    playlistSlide: slide,
    scheduleMode: scheduleMode,
    isAlwaysMode: scheduleMode === 'always',
    isDatesMode: scheduleMode === 'dates',
    isTimesMode: scheduleMode === 'times',
    rowKey: String(rowKey || ''),
    startDateTimeValue: formatDateTimeInput(slide.schedule_start_datetime),
    endDateTimeValue: formatDateTimeInput(slide.schedule_end_datetime),
    startTimeValue: startTimeValue,
    endTimeValue: endTimeValue,
    dayOptions: DAY_OPTIONS.map((day) => ({
      ...day,
      checked: selectedDays.has(day.value)
    })),
    scripts: ['js/lib/modal.js', 'js/playlists/playlist-schedule.js']
  });
};