{% extends 'base.html' %}
{% block title %}Yeni Program Oluştur · Odak Planım{% endblock %}
{% block head %}
{{ super() }}
<style>
  .builder-scroll { scrollbar-color: #94a3b8 transparent; }
  .schedule-row { min-width: max-content; }
  .slot-card { width: 19rem; min-height: 13rem; }
  .plus-card { width: 4rem; min-height: 13rem; }
  .task-menu { max-height: 17rem; overflow-y: auto; }
</style>
{% endblock %}
{% block content %}
<section class="mb-8">
  <a href="{{ url_for('schedules') }}" class="text-sm font-bold text-teal"><i class="fa-solid fa-arrow-left mr-2"></i> Programlarıma dön</a>
  <p class="mt-5 text-sm font-bold uppercase tracking-[.18em] text-teal">Program stüdyosu</p>
  <h1 class="display-font mt-2 text-4xl font-bold">Manuel program oluştur.</h1>
  <p class="mt-3 max-w-3xl text-sm leading-6 text-slate-500">Tarihlerini seç, her gün için saat dilimleri ekle ve açık işlerini çakışmayan sayfa aralıklarıyla yerleştir.</p>
</section>

{% if not builder_mode %}
<section class="mx-auto max-w-3xl rounded-2xl border border-white bg-white/85 p-6 shadow-card sm:p-8">
  <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-teal-100 text-xl text-teal"><i class="fa-regular fa-calendar-days"></i></div>
  <h2 class="mt-5 text-xl font-bold">Önce tarih aralığını belirle</h2>
  <p class="mt-2 text-sm leading-6 text-slate-500">Aralıktaki veya daha önce kontrol edilmesi gereken açık ödevlerini bir sonraki adımda hatırlatacağız.</p>
  <form method="post" class="mt-7 grid gap-5 sm:grid-cols-2">
    <input type="hidden" name="intent" value="configure">
    <label class="block text-sm font-bold">Başlangıç tarihi<input type="date" name="start_date" value="{{ today_iso }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500"></label>
    <label class="block text-sm font-bold">Bitiş tarihi<input type="date" name="end_date" value="{{ today_iso }}" required class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-normal outline-none focus:border-teal-500"></label>
    <div class="sm:col-span-2"><button class="inline-flex items-center gap-2 rounded-xl bg-ink px-5 py-3 text-sm font-bold text-white shadow-soft transition hover:bg-navy"><i class="fa-solid fa-arrow-right"></i> Oluşturmaya Başla</button></div>
  </form>
</section>
{% else %}
<section class="mb-6 grid gap-5 xl:grid-cols-[1fr_.78fr]">
  <form method="post" class="rounded-2xl border border-white bg-white/85 p-5 shadow-card">
    <input type="hidden" name="intent" value="configure">
    <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
      <div><h2 class="font-bold">Çalışma tarih aralığı</h2><p class="mt-1 text-xs leading-5 text-slate-500">Tarihleri değiştirdiğinizde mevcut taslak yeniden başlatılır.</p></div>
      <div class="grid gap-3 sm:grid-cols-2">
        <label class="text-xs font-bold text-slate-600">Başlangıç<input type="date" name="start_date" value="{{ start_date.isoformat() }}" required class="mt-1 block w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-normal outline-none focus:border-teal-500"></label>
        <label class="text-xs font-bold text-slate-600">Bitiş<input type="date" name="end_date" value="{{ end_date.isoformat() }}" required class="mt-1 block w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-normal outline-none focus:border-teal-500"></label>
      </div>
      <button class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50">Aralığı güncelle</button>
    </div>
  </form>
  {% if due_assignments %}
  <aside class="rounded-2xl border border-amber-200 bg-amber-50/80 p-5 shadow-card"><div class="flex gap-3"><span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600"><i class="fa-solid fa-triangle-exclamation"></i></span><div><h2 class="font-bold text-amber-900">Kontrol edilecek ödevler var</h2><p class="mt-1 text-xs leading-5 text-amber-800">Dikkat: Seçtiğiniz tarih aralığında kontrol edilecek ödevleriniz var, bunları programa eklemeyi unutmayın!</p></div></div><ul class="mt-4 space-y-2">{% for task in due_assignments %}<li class="rounded-lg border border-amber-100 bg-white/75 px-3 py-2 text-xs text-amber-900"><strong>{{ task.book.name }}</strong> · {{ task.start_page }}–{{ task.end_page }}. sayfa <span class="float-right font-bold">Kontrol: {{ task.control_date.strftime('%d.%m.%Y') }}</span></li>{% endfor %}</ul></aside>
  {% else %}
  <aside class="rounded-2xl border border-teal-100 bg-teal-50/80 p-5 shadow-card"><div class="flex gap-3"><span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-teal-100 text-teal"><i class="fa-solid fa-circle-check"></i></span><div><h2 class="font-bold text-teal-900">Tarih uyarısı yok</h2><p class="mt-1 text-xs leading-5 text-teal-800">Bu aralıkta kontrol tarihi olan açık ödev bulunmuyor.</p></div></div></aside>
  {% endif %}
</section>

<section class="rounded-2xl border border-white bg-white/90 shadow-card">
  <div class="flex flex-col justify-between gap-4 border-b border-slate-100 px-5 py-5 sm:px-6 lg:flex-row lg:items-center"><div><h2 class="font-bold">Günlük çalışma akışı</h2><p class="mt-1 text-xs text-slate-500">Bir saat dilimine birden çok görev veya ödev ekleyebilirsiniz.</p></div><div class="flex flex-wrap gap-2"><span id="planned-count" class="rounded-full bg-slate-100 px-3 py-2 text-xs font-bold text-slate-600">0 planlanan iş</span><button type="button" id="save-program" class="rounded-xl bg-teal px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-teal-600/15 transition hover:bg-teal-700"><i class="fa-solid fa-floppy-disk mr-2"></i> Programı Kaydet</button></div></div>
  <div id="builder-error" class="hidden mx-5 mt-5 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700 sm:mx-6"></div>
  <div class="builder-scroll overflow-x-auto p-5 sm:p-6"><div id="builder-grid" class="space-y-4"></div></div>
</section>
<form id="save-form" method="post" class="hidden"><input type="hidden" name="intent" value="save"><input id="schedule-json" type="hidden" name="schedule_json"></form>
{% endif %}
{% endblock %}
{% block scripts %}
{% if builder_mode %}
<script>
const taskCatalog = {{ builder_tasks|tojson }};
let scheduleState = {{ builder_state|tojson }};
const weekdays = ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'];
const grid = document.getElementById('builder-grid');
const errorBox = document.getElementById('builder-error');
const plannedCount = document.getElementById('planned-count');

function taskById(id) { return taskCatalog.find(function(task) { return String(task.id) === String(id); }); }
function addClass(element, classes) { element.className = classes; return element; }
function showError(message) { errorBox.textContent = message; errorBox.classList.remove('hidden'); errorBox.scrollIntoView({behavior: 'smooth', block: 'nearest'}); }
function clearError() { errorBox.textContent = ''; errorBox.classList.add('hidden'); }
function dayName(iso) { const value = new Date(iso + 'T12:00:00'); return [weekdays[value.getDay()], value.toLocaleDateString('tr-TR', {day: 'numeric', month: 'long'})]; }
function newContent(task) { return {task_id: task.id, book_id: task.book_id, book_name: task.book_name, task_type: task.task_type, description: task.description || '', page_start: null, page_end: null}; }
function newSlot(source) {
  source = source || {};
  return {time_start: source.time_start || '09:00', time_end: source.time_end || '10:00', contents: []};
}
function timeInMinutes(value) {
  const parts = String(value || '').split(':');
  const hours = Number(parts[0]), minutes = Number(parts[1]);
  return Number.isInteger(hours) && Number.isInteger(minutes) && hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60 ? hours * 60 + minutes : null;
}
function minutesAsTime(value) { return String(Math.floor(value / 60)).padStart(2, '0') + ':' + String(value % 60).padStart(2, '0'); }
function nextSlot(previous) {
  const previousEnd = previous ? timeInMinutes(previous.time_end) : null;
  if (previousEnd === null) return newSlot();
  if (previousEnd <= 22 * 60 + 59) return newSlot({time_start: previous.time_end, time_end: minutesAsTime(previousEnd + 60)});
  return newSlot({time_start: '23:00', time_end: '23:59'});
}
function hasPageRange(content) { return content && content.page_start !== null && content.page_start !== undefined && content.page_end !== null && content.page_end !== undefined && Number.isInteger(Number(content.page_start)) && Number.isInteger(Number(content.page_end)); }
function usedIntervals(taskId, ignoredDay, ignoredSlot, ignoredContent) {
  const intervals = [];
  scheduleState.days.forEach(function(day, dayIndex) {
    day.slots.forEach(function(slot, slotIndex) {
      (slot.contents || []).forEach(function(content, contentIndex) {
        if (String(content.task_id) === String(taskId) && !(dayIndex === ignoredDay && slotIndex === ignoredSlot && contentIndex === ignoredContent) && hasPageRange(content)) intervals.push([Number(content.page_start), Number(content.page_end)]);
      });
    });
  });
  return intervals.sort(function(a, b) { return a[0] - b[0]; });
}
function freeIntervals(task, dayIndex, slotIndex, contentIndex) {
  let cursor = task.start_page;
  const free = [];
  usedIntervals(task.id, dayIndex, slotIndex, contentIndex).forEach(function(interval) {
    const start = interval[0], end = interval[1];
    if (end < cursor || start > task.end_page) return;
    if (start > cursor) free.push([cursor, Math.min(task.end_page, start - 1)]);
    cursor = Math.max(cursor, end + 1);
  });
  if (cursor <= task.end_page) free.push([cursor, task.end_page]);
  return free;
}
function freeText(intervals) { return intervals.length ? 'Kalan: ' + intervals.map(function(range) { return range[0] + '-' + range[1]; }).join(' ve ') : 'Kalan sayfa yok'; }
function addContent(dayIndex, slotIndex, task) { scheduleState.days[dayIndex].slots[slotIndex].contents.push(newContent(task)); clearError(); render(); }
function removeContent(dayIndex, slotIndex, contentIndex) { scheduleState.days[dayIndex].slots[slotIndex].contents.splice(contentIndex, 1); clearError(); render(); }
function pagesValid(dayIndex, slotIndex, contentIndex, notify) {
  const content = scheduleState.days[dayIndex].slots[slotIndex].contents[contentIndex];
  if (content.page_start === null && content.page_end === null) return true;
  const task = taskById(content.task_id), start = Number(content.page_start), end = Number(content.page_end);
  const valid = task && Number.isInteger(start) && Number.isInteger(end) && start <= end && freeIntervals(task, dayIndex, slotIndex, contentIndex).some(function(range) { return start >= range[0] && end <= range[1]; });
  if (!valid && notify && task) showError(task.book_name + ' için sayfa aralığı tek bir uygun aralığın içinde olmalıdır. ' + freeText(freeIntervals(task, dayIndex, slotIndex, contentIndex)) + '.');
  return valid;
}
function makeButton(label, classes) { const button = document.createElement('button'); button.type = 'button'; button.textContent = label; button.className = classes; return button; }
function makePicker(dayIndex, slotIndex) {
  const wrapper = addClass(document.createElement('div'), 'relative');
  const toggle = makeButton('＋ İçerik Ekle', 'flex w-full items-center justify-between rounded-lg border border-teal-100 bg-teal-50 px-3 py-2.5 text-left text-xs font-bold text-teal-800 transition hover:bg-teal-100');
  const menu = addClass(document.createElement('div'), 'task-menu absolute left-0 right-0 z-20 mt-2 hidden rounded-xl border border-slate-200 bg-white p-2 shadow-soft');
  const availableTasks = taskCatalog.map(function(task) { return {task: task, ranges: freeIntervals(task, dayIndex, slotIndex, null)}; }).filter(function(item) { return item.ranges.length; });
  const title = addClass(document.createElement('p'), 'px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-400');
  title.textContent = availableTasks.length ? 'Kalan sayfaları olan açık işler' : 'Planlanacak sayfası kalan açık iş yok'; menu.append(title);
  availableTasks.forEach(function(item) {
    const task = item.task;
    const option = makeButton('', 'w-full rounded-lg px-2 py-2 text-left transition hover:bg-slate-50');
    const name = addClass(document.createElement('span'), 'block text-xs font-bold text-slate-700'); name.textContent = task.book_name;
    const info = addClass(document.createElement('span'), 'mt-0.5 block text-[11px] text-slate-500');
    info.textContent = task.task_type + ' · ' + freeText(item.ranges) + (task.task_type === 'Ödev' && task.control_date ? ' · Kontrol: ' + new Date(task.control_date + 'T12:00:00').toLocaleDateString('tr-TR') : '');
    option.append(name, info); option.addEventListener('click', function() { addContent(dayIndex, slotIndex, task); }); menu.append(option);
  });
  toggle.addEventListener('click', function(event) { event.stopPropagation(); document.querySelectorAll('.task-menu').forEach(function(item) { if (item !== menu) item.classList.add('hidden'); }); menu.classList.toggle('hidden'); });
  wrapper.append(toggle, menu); return wrapper;
}
function makePages(task, content, dayIndex, slotIndex, contentIndex) {
  const container = addClass(document.createElement('div'), 'mt-3 grid grid-cols-2 gap-2');
  [['page_start', 'Başlangıç'], ['page_end', 'Bitiş']].forEach(function(config) {
    const label = addClass(document.createElement('label'), 'block text-[10px] font-bold text-slate-500'); label.textContent = config[1];
    const input = document.createElement('input'); input.type = 'number'; input.min = task.start_page; input.max = task.end_page; input.placeholder = config[0] === 'page_start' ? task.start_page : task.end_page; input.value = content[config[0]] === null ? '' : content[config[0]]; input.className = 'mt-1 block w-full rounded-md border border-slate-200 bg-slate-50 px-2 py-1.5 text-xs font-bold text-slate-700 outline-none focus:border-teal-500';
    input.addEventListener('input', function() { content[config[0]] = input.value === '' ? null : Number(input.value); if (pagesValid(dayIndex, slotIndex, contentIndex, false)) clearError(); });
    input.addEventListener('change', function() { if (pagesValid(dayIndex, slotIndex, contentIndex, true)) render(); else input.focus(); });
    label.append(input); container.append(label);
  });
  return container;
}
function makeContent(dayIndex, slotIndex, contentIndex) {
  const content = scheduleState.days[dayIndex].slots[slotIndex].contents[contentIndex];
  const task = taskById(content.task_id);
  if (!task) { removeContent(dayIndex, slotIndex, contentIndex); return document.createElement('div'); }
  const detail = addClass(document.createElement('div'), 'rounded-lg border border-white bg-white p-3');
  const top = addClass(document.createElement('div'), 'flex items-start justify-between gap-2');
  const copy = document.createElement('div');
  const name = addClass(document.createElement('p'), 'truncate text-xs font-bold text-slate-800'); name.textContent = task.book_name;
  const type = addClass(document.createElement('p'), 'mt-1 text-[10px] font-bold ' + (task.task_type === 'Ödev' ? 'text-rose-600' : 'text-teal')); type.textContent = task.task_type; copy.append(name, type);
  const remove = makeButton('Kaldır', 'shrink-0 text-[10px] font-bold text-slate-400 hover:text-rose-600'); remove.addEventListener('click', function() { removeContent(dayIndex, slotIndex, contentIndex); }); top.append(copy, remove); detail.append(top);
  if (task.description) { const note = addClass(document.createElement('p'), 'mt-2 text-[11px] leading-4 text-slate-500'); note.textContent = task.description; detail.append(note); }
  const ranges = freeIntervals(task, dayIndex, slotIndex, contentIndex);
  const available = addClass(document.createElement('p'), 'mt-2 rounded-md px-2 py-1 text-[10px] font-bold ' + (ranges.length ? 'bg-sky-50 text-sky-700' : 'bg-rose-50 text-rose-600')); available.textContent = freeText(ranges); detail.append(available, makePages(task, content, dayIndex, slotIndex, contentIndex));
  return detail;
}
function makeSlot(dayIndex, slotIndex) {
  const slot = scheduleState.days[dayIndex].slots[slotIndex];
  const card = addClass(document.createElement('article'), 'slot-card rounded-xl border border-slate-200 bg-slate-50 p-3 shadow-sm');
  const header = addClass(document.createElement('div'), 'flex items-center gap-2');
  ['time_start', 'time_end'].forEach(function(field, index) {
    if (index) { const dash = addClass(document.createElement('span'), 'text-xs text-slate-400'); dash.textContent = '—'; header.append(dash); }
    const input = document.createElement('input'); input.type = 'time'; input.value = slot[field]; input.className = 'w-[6.7rem] rounded-lg border border-slate-200 bg-white px-2 py-2 text-xs font-bold text-slate-700 outline-none focus:border-teal-500';
    input.addEventListener('change', function() { slot[field] = input.value; if (!slot.time_start || !slot.time_end || slot.time_start >= slot.time_end) { showError('Bir saat diliminin bitişi başlangıcından sonra olmalıdır.'); input.focus(); } else clearError(); });
    header.append(input);
  });
  const remove = makeButton('×', 'ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-500');
  remove.title = 'Saat dilimini sil'; remove.addEventListener('click', function() { scheduleState.days[dayIndex].slots.splice(slotIndex, 1); clearError(); render(); }); header.append(remove); card.append(header);
  const contentArea = addClass(document.createElement('div'), 'mt-3 space-y-2');
  (slot.contents || []).forEach(function(content, contentIndex) { contentArea.append(makeContent(dayIndex, slotIndex, contentIndex)); });
  contentArea.append(makePicker(dayIndex, slotIndex));
  card.append(contentArea); return card;
}
function makeDay(day, dayIndex) {
  const names = dayName(day.date);
  const row = addClass(document.createElement('section'), 'schedule-row grid grid-cols-[11rem_auto] rounded-xl border border-slate-100 bg-white');
  const dateColumn = addClass(document.createElement('div'), 'flex flex-col justify-between border-r border-slate-100 bg-slate-50/80 p-4');
  const dayText = addClass(document.createElement('p'), 'text-xs font-bold text-teal'); dayText.textContent = names[0];
  const dateText = addClass(document.createElement('h3'), 'mt-1 text-sm font-bold text-slate-700'); dateText.textContent = names[1]; dateColumn.append(dayText, dateText);
  const copy = makeButton('⧉ Satırı Çoğalt', 'mt-6 rounded-lg border border-slate-200 bg-white px-2 py-2 text-[10px] font-bold text-slate-600 transition hover:border-teal-200 hover:text-teal disabled:cursor-not-allowed disabled:opacity-45');
  if (dayIndex === scheduleState.days.length - 1) { copy.disabled = true; copy.title = 'Son günün altında kopyalanacak bir satır yok.'; }
  else copy.addEventListener('click', function() { scheduleState.days[dayIndex + 1].slots = day.slots.map(function(slot) { return newSlot(slot); }); clearError(); render(); });
  dateColumn.append(copy);
  const slots = addClass(document.createElement('div'), 'flex gap-3 p-3');
  day.slots.forEach(function(slot, slotIndex) { slots.append(makeSlot(dayIndex, slotIndex)); });
  const plus = makeButton('+', 'plus-card flex items-center justify-center rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/70 text-lg text-slate-400 transition hover:border-teal-300 hover:bg-teal-50 hover:text-teal');
  plus.title = 'Yeni saat dilimi ekle'; plus.addEventListener('click', function() { day.slots.push(nextSlot(day.slots[day.slots.length - 1])); clearError(); render(); }); slots.append(plus);
  row.append(dateColumn, slots); return row;
}
function render() {
  grid.replaceChildren(); scheduleState.days.forEach(function(day, index) { grid.append(makeDay(day, index)); });
  const count = scheduleState.days.reduce(function(total, day) { return total + day.slots.reduce(function(slotTotal, slot) { return slotTotal + (slot.contents || []).length; }, 0); }, 0);
  plannedCount.textContent = count + ' planlanan iş';
}
function formValid() {
  let valid = true;
  scheduleState.days.forEach(function(day, dayIndex) { day.slots.forEach(function(slot, slotIndex) {
    if (!slot.time_start || !slot.time_end || slot.time_start >= slot.time_end) { showError('Tüm saat hücrelerinde bitiş saati başlangıçtan sonra olmalıdır.'); valid = false; }
    (slot.contents || []).forEach(function(content, contentIndex) {
      if (!hasPageRange(content)) { showError(content.book_name + ' için başlangıç ve bitiş sayfalarını girin.'); valid = false; }
      else if (!pagesValid(dayIndex, slotIndex, contentIndex, false)) { showError(content.book_name + ' için geçerli, çakışmayan bir sayfa aralığı girin.'); valid = false; }
    });
  }); });
  return valid;
}
document.addEventListener('click', function() { document.querySelectorAll('.task-menu').forEach(function(menu) { menu.classList.add('hidden'); }); });
document.getElementById('save-program').addEventListener('click', function() { clearError(); if (!formValid()) return; document.getElementById('schedule-json').value = JSON.stringify(scheduleState); document.getElementById('save-form').submit(); });
render();
</script>
{% endif %}
{% endblock %}