{% extends "layout.html" %}
{% block title %}Schedules - MailCadence Admin{% endblock %}
{% block content %}
<!-- Page Header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-2 border-b border-slate-800">
  <div>
    <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-2">
      <i data-lucide="calendar-clock" class="w-6 h-6 text-indigo-400"></i>
      Work Schedules
    </h1>
    <p class="text-xs text-slate-400 mt-1">Manage dispatch time windows, concurrency limits, rate limiting, and system timezones.</p>
  </div>

  <!-- Global Timezone Selector Command Bar -->
  <div>
    <form action="/schedules/timezone" method="POST" class="flex items-center gap-2 bg-slate-900 border border-slate-800 rounded-xl p-2 px-3 shadow-sm">
      <div class="flex items-center gap-2 text-slate-400 text-xs">
        <i data-lucide="globe" class="w-4 h-4 text-indigo-400"></i>
        <span class="font-medium">Timezone:</span>
      </div>
      <input type="text" id="timezone" name="timezone" value="{{ work_schedules.timezone }}" required
             class="bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500 w-28">
      <button type="submit" class="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold px-3 py-1 rounded-lg transition-colors border border-slate-700">
        Update
      </button>
    </form>
  </div>
</div>

{% if message %}
<div class="alert-success flex items-center gap-2">
  <i data-lucide="check-circle" class="w-4 h-4 shrink-0"></i>
  <span>{{ message }}</span>
</div>
{% endif %}

<div class="alert-error flex items-center gap-2 {% if not error %}hidden{% endif %}" id="schedule-error">
  <i data-lucide="alert-circle" class="w-4 h-4 shrink-0"></i>
  <span>{{ error }}</span>
</div>

<div id="messages"></div>

<!-- Create / Update Schedule Form Card -->
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
  <details class="group">
    <summary class="flex items-center justify-between p-4 cursor-pointer select-none bg-slate-900/80 hover:bg-slate-800/50 transition-colors">
      <div class="flex items-center gap-2">
        <i data-lucide="plus-circle" class="w-4 h-4 text-indigo-400"></i>
        <span class="text-sm font-semibold text-white">Create / Update Schedule</span>
      </div>
      <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-open:rotate-180 transition-transform"></i>
    </summary>

    <div class="p-6 border-t border-slate-800 bg-slate-950/40">
      <form action="/schedules" method="POST" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="id" class="block text-xs font-medium text-slate-300 mb-1">Schedule ID *</label>
            <input type="text" id="id" name="id" required placeholder="e.g. business_hours"
                   class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono">
          </div>
          <div>
            <label for="description" class="block text-xs font-medium text-slate-300 mb-1">Description</label>
            <input type="text" id="description" name="description" placeholder="Standard business hour dispatch window"
                   class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
          </div>
        </div>

        <div>
          <label for="allowed_hours_json" class="block text-xs font-medium text-slate-300 mb-1">Allowed Hours (JSON HourWindows list) *</label>
          <textarea id="allowed_hours_json" name="allowed_hours_json" required rows="3"
                    class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono">[{"start": "08:00", "end": "18:00", "days_of_week": "*", "max_concurrency": 2, "rate_limit_per_min": 60}]</textarea>
        </div>

        <div class="pt-2">
          <button type="submit" class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-xs font-semibold px-4 py-2 rounded-lg transition-colors shadow-sm">
            <i data-lucide="save" class="w-4 h-4"></i>
            <span>Save Schedule</span>
          </button>
        </div>
      </form>
    </div>
  </details>
</div>

<!-- Existing Schedules Table Card -->
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
  <div class="p-4 border-b border-slate-800/80 flex items-center justify-between bg-slate-900/80">
    <div class="flex items-center gap-2">
      <i data-lucide="clock" class="w-4 h-4 text-indigo-400"></i>
      <h2 class="text-sm font-semibold text-white">Configured Schedules</h2>
    </div>
  </div>

  {% if work_schedules.schedules %}
  <div class="overflow-x-auto">
    <table class="w-full text-left text-xs divide-y divide-slate-800/70">
      <thead class="bg-slate-950/60 text-slate-400 font-mono uppercase tracking-wider sticky top-0">
        <tr>
          <th class="py-3 px-4">ID</th>
          <th class="py-3 px-4">Description</th>
          <th class="py-3 px-4">Allowed Hours / Dispatch Windows</th>
          <th class="py-3 px-4 text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-800/50 text-slate-300">
        {% for sched in work_schedules.schedules %}
        <tr id="schedule-row-{{ sched.id }}" class="hover:bg-slate-800/40 transition-colors">
          <td class="py-3 px-4 font-mono font-medium text-white">{{ sched.id }}</td>
          <td class="py-3 px-4 text-slate-300">{{ sched.description or '-' }}</td>
          <td class="py-3 px-4 font-mono">
            <div class="flex flex-wrap gap-2">
              {% for hw in sched.allowed_hours %}
                <div class="inline-flex items-center gap-1.5 bg-slate-950 border border-slate-800 rounded-md px-2.5 py-1 text-xs text-slate-300">
                  <i data-lucide="timer" class="w-3.5 h-3.5 text-indigo-400"></i>
                  <span>[{{ hw.start }} &rarr; {{ hw.end }} | {{ hw.days_of_week }}]</span>
                  <span class="text-slate-500 border-l border-slate-800 pl-1.5">Max: {{ hw.max_concurrency }}</span>
                  <span class="text-slate-500">Rate: {{ hw.rate_limit_per_min }}/m</span>
                </div>
              {% endfor %}
            </div>
          </td>
          <td class="py-3 px-4 text-right whitespace-nowrap">
            <button hx-delete="/schedules/{{ sched.id }}"
                    hx-target="#schedule-row-{{ sched.id }}"
                    hx-swap="outerHTML"
                    class="inline-flex items-center gap-1 bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 px-2 py-1 rounded text-xs transition-colors">
              <i data-lucide="trash-2" class="w-3 h-3"></i>
              <span>Delete</span>
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="p-12 text-center text-slate-500 flex flex-col items-center justify-center gap-2">
    <i data-lucide="calendar" class="w-8 h-8 text-slate-600"></i>
    <p class="text-sm font-medium">No schedules configured.</p>
    <p class="text-xs">Create a new schedule window above.</p>
  </div>
  {% endif %}
</div>
{% endblock %}