{% extends "base.html" %}
{% from '_upsell.html' import max_badge %}
{% block title %}{{ _("Team Schedules") }}{% endblock %}
{% block content %}
<div class="p-3 sm:p-6 max-w-3xl">

  <div class="flex items-center justify-between mb-6 gap-4 flex-wrap">
    <div>
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">schedule</span>
        {{ _("Team Schedules") }}
        {% if locked %}{{ max_badge() }}{% endif %}
      </h2>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
        {{ _("Set each team member's working hours so out-of-hours messages trigger the auto-response.") }}
      </p>
    </div>
    <a href="{{ url_for('settings') }}#settings-autoresponse"
       class="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors shrink-0">
      <span class="material-symbols-outlined text-base">arrow_back</span>
      {{ _("Back to Settings") }}
    </a>
  </div>

  {% if locked %}
  {# ── Upsell / locked state ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center">
    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-500/20 mb-4">
      <span class="material-symbols-outlined text-purple-600 dark:text-purple-400 text-2xl">lock</span>
    </div>
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ _("Team Schedules requires the MAX plan") }}</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-5 max-w-sm mx-auto">
      {% trans %}Define per-member working hours so auto-responses only fire outside your team's actual coverage. Available on MAX.{% endtrans %}
    </p>
    <button type="button" onclick='showUpgradeModal("max", {{ _("Team Schedules")|tojson }})'
            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-purple-600 hover:bg-purple-700 rounded-xl transition-colors">
      <span class="material-symbols-outlined text-base">upgrade</span>
      {{ _("Upgrade to MAX") }}
    </button>
  </div>

  {% else %}

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
      <div class="mb-4 px-4 py-3 rounded-lg text-sm font-medium
        {% if category == 'success' %}bg-green-50 dark:bg-green-500/10 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-500/30
        {% else %}bg-red-50 dark:bg-red-500/10 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-500/30{% endif %}">
        {{ message }}
      </div>
    {% endfor %}
  {% endwith %}

  <div id="schedules-save-banner" class="hidden mb-4 px-4 py-3 rounded-lg text-sm font-medium bg-green-50 dark:bg-green-500/10 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-500/30">
    {{ _("Schedules saved.") }}
  </div>
  <div id="schedules-error-banner" class="hidden mb-4 px-4 py-3 rounded-lg text-sm font-medium bg-red-50 dark:bg-red-500/10 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-500/30"></div>

  {# ── Timezone selector ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 mb-5">
    <div class="flex flex-wrap items-center gap-3">
      <label for="sch-timezone" class="text-sm font-medium text-gray-700 dark:text-gray-300 shrink-0">{{ _("Organisation timezone") }}</label>
      <select id="sch-timezone" name="timezone"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none max-w-xs">
        {# Common zones first, then a curated list #}
        {% set common_zones = [
          ('Europe/Madrid','Europe/Madrid'),('Europe/London','Europe/London'),('Europe/Paris','Europe/Paris'),
          ('Europe/Berlin','Europe/Berlin'),('Europe/Rome','Europe/Rome'),('Europe/Amsterdam','Europe/Amsterdam'),
          ('Europe/Warsaw','Europe/Warsaw'),('Europe/Lisbon','Europe/Lisbon'),('Europe/Moscow','Europe/Moscow'),
          ('America/New_York','America/New_York'),('America/Chicago','America/Chicago'),
          ('America/Denver','America/Denver'),('America/Los_Angeles','America/Los_Angeles'),
          ('America/Sao_Paulo','America/Sao_Paulo'),('America/Mexico_City','America/Mexico_City'),
          ('America/Buenos_Aires','America/Argentina/Buenos_Aires'),
        ] %}
        {% set other_zones = [
          ('Africa/Johannesburg','Africa/Johannesburg'),('Africa/Cairo','Africa/Cairo'),
          ('Africa/Lagos','Africa/Lagos'),('Africa/Nairobi','Africa/Nairobi'),
          ('America/Bogota','America/Bogota'),('America/Lima','America/Lima'),
          ('America/Santiago','America/Santiago'),('America/Toronto','America/Toronto'),
          ('America/Vancouver','America/Vancouver'),
          ('Asia/Bangkok','Asia/Bangkok'),('Asia/Colombo','Asia/Colombo'),
          ('Asia/Dubai','Asia/Dubai'),('Asia/Hong_Kong','Asia/Hong_Kong'),
          ('Asia/Jakarta','Asia/Jakarta'),('Asia/Karachi','Asia/Karachi'),
          ('Asia/Kolkata','Asia/Kolkata'),('Asia/Seoul','Asia/Seoul'),
          ('Asia/Shanghai','Asia/Shanghai'),('Asia/Singapore','Asia/Singapore'),
          ('Asia/Taipei','Asia/Taipei'),('Asia/Tokyo','Asia/Tokyo'),
          ('Asia/Tehran','Asia/Tehran'),('Asia/Riyadh','Asia/Riyadh'),
          ('Atlantic/Azores','Atlantic/Azores'),
          ('Australia/Melbourne','Australia/Melbourne'),('Australia/Perth','Australia/Perth'),
          ('Australia/Sydney','Australia/Sydney'),
          ('Europe/Athens','Europe/Athens'),('Europe/Brussels','Europe/Brussels'),
          ('Europe/Bucharest','Europe/Bucharest'),('Europe/Budapest','Europe/Budapest'),
          ('Europe/Copenhagen','Europe/Copenhagen'),('Europe/Dublin','Europe/Dublin'),
          ('Europe/Helsinki','Europe/Helsinki'),('Europe/Istanbul','Europe/Istanbul'),
          ('Europe/Kiev','Europe/Kiev'),('Europe/Oslo','Europe/Oslo'),
          ('Europe/Prague','Europe/Prague'),('Europe/Sofia','Europe/Sofia'),
          ('Europe/Stockholm','Europe/Stockholm'),('Europe/Vienna','Europe/Vienna'),
          ('Europe/Zurich','Europe/Zurich'),
          ('Pacific/Auckland','Pacific/Auckland'),('Pacific/Honolulu','Pacific/Honolulu'),
          ('UTC','UTC'),
        ] %}
        <optgroup label="{{ _('Common') }}">
          {% for label, value in common_zones %}
          <option value="{{ value }}" {% if org_timezone == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </optgroup>
        <optgroup label="{{ _('Other') }}">
          {% for label, value in other_zones %}
          <option value="{{ value }}" {% if org_timezone == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </optgroup>
      </select>
      <p class="text-xs text-gray-400 dark:text-gray-500">{{ _("Schedules use this timezone.") }}</p>
    </div>
  </div>

  {% if not members %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-3 block">group</span>
    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ _("No team members yet") }}</p>
  </div>
  {% else %}

  {# ── Per-member schedule cards ── #}
  {% for m in members %}
  {% set is_first = loop.first %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 mb-4" id="member-card-{{ m.id }}">
    {# Card header #}
    <div class="flex flex-wrap items-center gap-2 mb-4">
      <div class="flex-1 min-w-0">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ m.name }}</p>
        <p class="text-xs text-gray-400 dark:text-gray-500">{{ m.email }}</p>
      </div>
      {# Presets + copy-from-first #}
      <div class="flex flex-wrap gap-1.5 shrink-0">
        <button type="button"
                onclick="schPreset({{ m.id }}, 'weekdays')"
                class="px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
          {{ _("Mon–Fri 9–18") }}
        </button>
        <button type="button"
                onclick="schPreset({{ m.id }}, 'everyday')"
                class="px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
          {{ _("Every day 9–18") }}
        </button>
        {% if not is_first %}
        <button type="button"
                onclick="schCopyFromFirst({{ m.id }}, {{ members[0].id }})"
                class="px-2.5 py-1 text-xs font-medium text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-900/30 hover:bg-brand-100 dark:hover:bg-brand-900/50 border border-brand-200 dark:border-brand-700 rounded-lg transition-colors">
          {{ _("Copy from %(name)s", name=members[0].name) }}
        </button>
        {% endif %}
      </div>
    </div>

    {# 7-day rows #}
    <div class="space-y-2" id="member-days-{{ m.id }}">
      {% for weekday in range(7) %}
      {% set key = m.id ~ '_' ~ weekday %}
      {% set wins = schedules_by_cell.get(key, []) %}
      {% set win = wins[0] if wins else none %}
      {% set has_win = win is not none %}
      {% set has_multiple = wins|length > 1 %}
      <div class="flex flex-wrap items-center gap-2 py-2 border-b border-gray-100 dark:border-gray-700/60 last:border-0"
           id="day-row-{{ m.id }}-{{ weekday }}">
        {# Toggle checkbox #}
        <label class="relative inline-flex items-center cursor-pointer shrink-0">
          <input type="checkbox"
                 id="day-chk-{{ m.id }}-{{ weekday }}"
                 class="sr-only peer day-toggle"
                 data-user="{{ m.id }}" data-weekday="{{ weekday }}"
                 {% if has_win %}checked{% endif %}
                 onchange="schToggleDay(this)">
          <div class="w-8 h-4 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-brand-300
                      rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white
                      after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white
                      after:border-gray-300 dark:after:border-gray-600 after:border after:rounded-full after:h-3 after:w-3
                      after:transition-all peer-checked:bg-brand-600"></div>
        </label>
        {# Day name #}
        <span class="text-xs font-semibold text-gray-600 dark:text-gray-300 w-20 shrink-0">{{ weekday_names[weekday] }}</span>
        {# Time inputs — hidden when unchecked #}
        <div class="flex items-center gap-1.5 {% if not has_win %}hidden{% endif %} day-times"
             id="day-times-{{ m.id }}-{{ weekday }}">
          <input type="time"
                 id="day-start-{{ m.id }}-{{ weekday }}"
                 class="day-start border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none"
                 data-user="{{ m.id }}" data-weekday="{{ weekday }}"
                 value="{{ win.start if win else '09:00' }}">
          <span class="text-xs text-gray-400 dark:text-gray-500">–</span>
          <input type="time"
                 id="day-end-{{ m.id }}-{{ weekday }}"
                 class="day-end border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none"
                 data-user="{{ m.id }}" data-weekday="{{ weekday }}"
                 value="{{ win.end if win else '18:00' }}">
          {% if weekday == 0 %}
          {# Monday: copy-to-weekdays helper #}
          <button type="button"
                  onclick="schCopyMonToWeekdays({{ m.id }})"
                  class="ml-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 border border-gray-200 dark:border-gray-600 rounded transition-colors"
                  title="{{ _('Copy Monday hours to Tue–Fri') }}">
            {{ _("Copy to weekdays") }}
          </button>
          {% endif %}
        </div>
        {% if has_win and not has_multiple %}
        {% elif has_win and has_multiple %}
        {% set win_count = wins|length %}
        <span class="text-xs text-amber-600 dark:text-amber-400 ml-1" title="{{ _('Only the first window is shown; the rest will be replaced on save.') }}">
          {% trans win_count=win_count %}({{ win_count }} windows — showing first only){% endtrans %}
        </span>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}

  <button type="button" id="save-schedules-btn" onclick="saveSchedules()"
          class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
    <span class="material-symbols-outlined text-base">save</span>
    {{ _("Save Schedules") }}
  </button>

  {% endif %}
  {% endif %}
</div>

<script>
var T_SAVING_DOTS = {{ _("Saving…") | tojson }};
var T_SAVE_SCHEDULES = {{ _("Save Schedules") | tojson }};
var T_FAILED_SAVE_SCHEDULES = {{ _("Failed to save schedules.") | tojson }};
var T_NETWORK_ERROR_SCHEDULES = {{ _("Network error while saving schedules.") | tojson }};

function getCsrf() {
  var meta = document.querySelector('meta[name="csrf-token"]');
  return meta ? meta.getAttribute('content') : '';
}

/* ── Day toggle ── */
function schToggleDay(chk) {
  var userId = chk.getAttribute('data-user');
  var weekday = chk.getAttribute('data-weekday');
  var timesDiv = document.getElementById('day-times-' + userId + '-' + weekday);
  if (chk.checked) {
    timesDiv.classList.remove('hidden');
  } else {
    timesDiv.classList.add('hidden');
  }
}

/* ── Collect schedules ── */
function collectSchedules() {
  var schedules = [];
  document.querySelectorAll('.day-toggle').forEach(function (chk) {
    if (!chk.checked) return;
    var userId = parseInt(chk.getAttribute('data-user'), 10);
    var weekday = parseInt(chk.getAttribute('data-weekday'), 10);
    var startEl = document.getElementById('day-start-' + userId + '-' + weekday);
    var endEl = document.getElementById('day-end-' + userId + '-' + weekday);
    if (!startEl || !endEl) return;
    var start = startEl.value;
    var end = endEl.value;
    if (start && end) {
      schedules.push({ user_id: userId, weekday: weekday, start: start, end: end });
    }
  });
  return schedules;
}

/* ── Save ── */
function saveSchedules() {
  var btn = document.getElementById('save-schedules-btn');
  var saveBanner = document.getElementById('schedules-save-banner');
  var errBanner = document.getElementById('schedules-error-banner');
  saveBanner.classList.add('hidden');
  errBanner.classList.add('hidden');
  btn.disabled = true;
  btn.textContent = T_SAVING_DOTS;

  var timezone = document.getElementById('sch-timezone').value;
  var payload = { timezone: timezone, schedules: collectSchedules() };

  fetch('{{ url_for("settings_schedules_save") }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': getCsrf(),
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify(payload)
  })
  .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
  .then(function (result) {
    btn.disabled = false;
    btn.innerHTML = '<span class="material-symbols-outlined text-base">save</span> ' + T_SAVE_SCHEDULES;
    if (result.ok && result.data.success) {
      saveBanner.classList.remove('hidden');
      setTimeout(function () { saveBanner.classList.add('hidden'); }, 3000);
    } else {
      errBanner.textContent = (result.data && result.data.message) || T_FAILED_SAVE_SCHEDULES;
      errBanner.classList.remove('hidden');
    }
  })
  .catch(function () {
    btn.disabled = false;
    btn.innerHTML = '<span class="material-symbols-outlined text-base">save</span> ' + T_SAVE_SCHEDULES;
    errBanner.textContent = T_NETWORK_ERROR_SCHEDULES;
    errBanner.classList.remove('hidden');
  });
}

/* ── Presets ── */
function schPreset(userId, mode) {
  for (var wd = 0; wd < 7; wd++) {
    var chk = document.getElementById('day-chk-' + userId + '-' + wd);
    var timesDiv = document.getElementById('day-times-' + userId + '-' + wd);
    var startEl = document.getElementById('day-start-' + userId + '-' + wd);
    var endEl = document.getElementById('day-end-' + userId + '-' + wd);
    if (!chk) continue;
    var isWeekday = wd >= 0 && wd <= 4;  // Mon(0)–Fri(4)
    var include = (mode === 'everyday') || (mode === 'weekdays' && isWeekday);
    chk.checked = include;
    if (include) {
      timesDiv.classList.remove('hidden');
      if (startEl) startEl.value = '09:00';
      if (endEl) endEl.value = '18:00';
    } else {
      timesDiv.classList.add('hidden');
    }
  }
}

/* ── Copy Mon → Tue–Fri ── */
function schCopyMonToWeekdays(userId) {
  var monStart = document.getElementById('day-start-' + userId + '-0');
  var monEnd   = document.getElementById('day-end-'   + userId + '-0');
  if (!monStart || !monEnd) return;
  var s = monStart.value;
  var e = monEnd.value;
  for (var wd = 1; wd <= 4; wd++) {
    var chk = document.getElementById('day-chk-' + userId + '-' + wd);
    var timesDiv = document.getElementById('day-times-' + userId + '-' + wd);
    var startEl = document.getElementById('day-start-' + userId + '-' + wd);
    var endEl   = document.getElementById('day-end-'   + userId + '-' + wd);
    if (!chk) continue;
    chk.checked = true;
    timesDiv.classList.remove('hidden');
    if (startEl) startEl.value = s;
    if (endEl)   endEl.value   = e;
  }
}

/* ── Copy from first member ── */
function schCopyFromFirst(targetUserId, sourceUserId) {
  for (var wd = 0; wd < 7; wd++) {
    var srcChk   = document.getElementById('day-chk-'   + sourceUserId + '-' + wd);
    var srcStart = document.getElementById('day-start-' + sourceUserId + '-' + wd);
    var srcEnd   = document.getElementById('day-end-'   + sourceUserId + '-' + wd);
    var dstChk   = document.getElementById('day-chk-'   + targetUserId + '-' + wd);
    var dstTimes = document.getElementById('day-times-' + targetUserId + '-' + wd);
    var dstStart = document.getElementById('day-start-' + targetUserId + '-' + wd);
    var dstEnd   = document.getElementById('day-end-'   + targetUserId + '-' + wd);
    if (!srcChk || !dstChk) continue;
    dstChk.checked = srcChk.checked;
    if (srcChk.checked) {
      dstTimes.classList.remove('hidden');
      if (dstStart && srcStart) dstStart.value = srcStart.value;
      if (dstEnd   && srcEnd)   dstEnd.value   = srcEnd.value;
    } else {
      dstTimes.classList.add('hidden');
    }
  }
}

/* ── Auto-detect browser timezone if org is UTC ── */
(function () {
  var sel = document.getElementById('sch-timezone');
  if (!sel) return;
  if (sel.value !== 'UTC') return;
  try {
    var browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
    if (!browserTz) return;
    for (var i = 0; i < sel.options.length; i++) {
      if (sel.options[i].value === browserTz) {
        sel.value = browserTz;
        // Mark dirty so it gets saved
        sel.dataset.autoDetected = '1';
        break;
      }
    }
  } catch (e) {}
})();
</script>
{% endblock %}