<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">Gönderiyi Düzenle</h1>
        <div class="bg-white shadow-md rounded-lg p-6">
            <form action="/posts/<%= post.id %>" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <!-- Kanal Seçimi -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kanal</label>
                    <% if (Array.isArray(channels) && channels.length) { %>
                      <select name="channel_id" class="select select-bordered w-full">
                        <% channels.forEach(function(c){ %>
                          <option value="<%= c.id %>" <%= String(post.channelId||'') === String(c.id) ? 'selected' : '' %>><%= c.name %> (<%= c.chat_id %>)</option>
                        <% }) %>
                      </select>
                    <% } else { %>
                      <div class="alert alert-warning">Kayıtlı kanal yok. Varsayılan .env kanal kullanılacak.</div>
                    <% } %>
                </div>
                <!-- Başlık -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Başlık (Opsiyonel)</label>
                    <input type="text" id="title" name="title"
                           value="<%= post.title || '' %>"
                           class="input input-bordered w-full">
                </div>

                <!-- Canlı Önizleme -->
                <div class="mb-6">
                  <details open class="bg-white border rounded">
                    <summary class="px-3 py-2 cursor-pointer font-semibold">Canlı Önizleme</summary>
                    <div class="p-4">
                      <div id="postPreview" class="max-w-xl border rounded p-3 bg-base-100">
                        <div id="prevImageWrap" class="mb-3 <%= post.image ? '' : 'hidden' %>"><img id="prevImage" class="max-h-56 rounded border" alt="" src="<%= post.image || '' %>" /></div>
                        <div id="prevTitle" class="font-bold mb-2"><%= post.title || '' %></div>
                        <div id="prevContent" class="whitespace-pre-wrap text-sm"><%= post.content || '' %></div>
                      </div>
                    </div>
                  </details>
                </div>

                <!-- Zamanlama -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Zamanlama</label>
                    <div class="space-y-3">
                        <div class="flex items-center gap-2">
                            <input type="radio" id="scheduleNow" name="scheduleType" value="now" class="radio radio-sm" <%= (typeof schedule !== 'undefined' && schedule.type === 'now') || typeof schedule === 'undefined' ? 'checked' : '' %>>
                            <label for="scheduleNow" class="block text-sm text-gray-700">Hemen Gönder</label>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="radio" id="scheduleOnce" name="scheduleType" value="later_once" class="radio radio-sm" <%= typeof schedule !== 'undefined' && schedule.type === 'later_once' ? 'checked' : '' %>>
                            <label for="scheduleOnce" class="block text-sm text-gray-700">Belirli Tarih/Saat</label>
                            <input type="datetime-local" id="scheduledTime" name="scheduledTime" class="input input-bordered input-sm ml-2" value="<%= typeof schedule !== 'undefined' && schedule.scheduledTime ? schedule.scheduledTime : '' %>">
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="radio" id="scheduleDaily" name="scheduleType" value="daily" class="radio radio-sm" <%= typeof schedule !== 'undefined' && schedule.type === 'daily' ? 'checked' : '' %>>
                            <label for="scheduleDaily" class="block text-sm text-gray-700">Her Gün Belirli Saatte</label>
                            <input type="time" id="dailyTime" name="dailyTime" class="input input-bordered input-sm ml-2" value="<%= typeof schedule !== 'undefined' && schedule.dailyTime ? schedule.dailyTime : '' %>">
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="radio" id="scheduleWeekly" name="scheduleType" value="weekly" class="radio radio-sm" <%= typeof schedule !== 'undefined' && schedule.type === 'weekly' ? 'checked' : '' %>>
                            <label for="scheduleWeekly" class="block text-sm text-gray-700">Haftalık</label>
                            <select id="weeklyDay" name="weeklyDay" class="select select-bordered select-sm ml-2">
                              <option value="1" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '1' ? 'selected' : '' %>>Pazartesi</option>
                              <option value="2" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '2' ? 'selected' : '' %>>Salı</option>
                              <option value="3" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '3' ? 'selected' : '' %>>Çarşamba</option>
                              <option value="4" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '4' ? 'selected' : '' %>>Perşembe</option>
                              <option value="5" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '5' ? 'selected' : '' %>>Cuma</option>
                              <option value="6" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '6' ? 'selected' : '' %>>Cumartesi</option>
                              <option value="0" <%= typeof schedule !== 'undefined' && String(schedule.weeklyDay) === '0' ? 'selected' : '' %>>Pazar</option>
                            </select>
                            <input type="time" id="weeklyTime" name="weeklyTime" class="input input-bordered input-sm ml-2" value="<%= typeof schedule !== 'undefined' && schedule.weeklyTime ? schedule.weeklyTime : '' %>">
                        </div>
                    </div>
                </div>

                <!-- İçerik -->
                <div class="mb-6">
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-1">İçerik <span class="text-red-500">*</span></label>
                    <textarea id="content" name="content" rows="6" required class="textarea textarea-bordered w-full"><%= post.content || '' %></textarea>
                    <p class="mt-1 text-sm text-gray-500">Zengin metin kullanabilirsiniz. Telegram'ın desteklediği HTML etiketleri (kalın, italik, altı çizili, üstü çizili, bağlantı, kod) gönderimde korunur.</p>
                </div>

                <!-- Mevcut Görsel -->
                <% if (post.image) { %>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mevcut Görsel</label>
                    <img src="<%= post.image %>" alt="Mevcut Görsel" class="max-h-40 rounded border shadow">
                </div>
                <% } %>

                <!-- Yeni Görsel Yükle -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Görsel Değiştir (Opsiyonel)</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed border-base-300 rounded-md">
                        <div class="space-y-1 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <div class="flex text-sm text-gray-600 justify-center gap-2">
                                <label for="image" class="btn btn-sm">
                                    <span>Bir dosya yükle</span>
                                    <input id="image" name="image" type="file" class="sr-only" accept="image/*">
                                </label>
                                <p class="pl-1">veya sürükleyip bırakın</p>
                            </div>
                            <p class="text-xs text-gray-500">PNG, JPG, JPEG, WEBP, GIF (Maks. 10MB)</p>
                        </div>
                    </div>
                    <div class="mt-3 hidden" id="imagePreviewWrap">
                        <p class="text-sm text-gray-600 mb-2">Seçilen yeni resim:</p>
                        <img id="imagePreview" alt="Önizleme" class="max-h-60 rounded shadow border" />
                    </div>
                </div>

                <!-- Butonlar -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Butonlar (Opsiyonel)</label>
                    <div id="buttons-container" class="space-y-2">
                        <!-- Satırlar buraya eklenecek -->
                    </div>
                    <div class="mt-2 space-x-2">
                        <button type="button" id="btnEditAddSameRow" class="btn btn-xs"><i class="fas fa-plus mr-1"></i>Aynı Satıra Buton Ekle</button>
                        <button type="button" id="btnEditAddRow" class="btn btn-xs"><i class="fas fa-bars mr-1"></i>Yeni Satır</button>
                    </div>
                </div>

                <!-- Kaydet/İptal -->
                <div class="flex justify-end gap-2 pt-4 border-t border-base-200">
                    <a href="/posts" class="btn">İptal</a>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function(){
    // Buton satırları
    let currentRow = -1;
    window.ensureAtLeastOneRow = function ensureAtLeastOneRow() {
        if (currentRow === -1) window.newRow();
    }
    window.newRow = function newRow() {
        const container = document.getElementById('buttons-container');
        if (!container) return;
        currentRow++;
        const row = document.createElement('div');
        row.className = 'flex items-center flex-wrap gap-2';
        row.dataset.rowIndex = String(currentRow);
        row.innerHTML = `<div class="text-xs text-gray-500 w-full">Satır #${currentRow + 1}</div>`;
        container.appendChild(row);
    }
    window.addButtonToCurrentRow = function addButtonToCurrentRow() {
        window.ensureAtLeastOneRow();
        const container = document.getElementById('buttons-container');
        const row = container && container.querySelector(`div[data-row-index="${currentRow}"]`);
        if (!row) return;
        const el = document.createElement('div');
        el.className = 'flex items-center';
        el.innerHTML = `
            <input type="hidden" name="buttonRow[]" value="${currentRow}">
            <input type="text" name="buttonText[]" placeholder="Buton Metni" 
                   class="w-40 px-3 py-1.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
            <input type="url" name="buttonUrl[]" placeholder="https://..." 
                   class="w-60 ml-2 px-3 py-1.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
            <button type="button" class="ml-2 text-red-500 hover:text-red-700 js-remove-button">
                <i class="fas fa-times"></i>
            </button>`;
        row.appendChild(el);
    }

    // Mevcut butonları yükle
    ;(function initButtonsFromPost() {
        const buttons = JSON.parse('<%- JSON.stringify(post.buttons || []) %>');
        if (!buttons || !buttons.length) {
            window.ensureAtLeastOneRow();
            return;
        }
        buttons.forEach((rowButtons, rowIndex) => {
            newRow();
            const container = document.getElementById('buttons-container');
            const row = container.querySelector(`div[data-row-index="${rowIndex}"]`);
            rowButtons.forEach(btn => {
                const el = document.createElement('div');
                el.className = 'flex items-center';
                el.innerHTML = `
                    <input type="hidden" name="buttonRow[]" value="${rowIndex}">
                    <input type="text" name="buttonText[]" placeholder="Buton Metni" value="${btn.text || ''}" 
                           class="w-40 px-3 py-1.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    <input type="url" name="buttonUrl[]" placeholder="https://..." value="${btn.url || ''}" 
                           class="w-60 ml-2 px-3 py-1.5 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    <button type="button" class="ml-2 text-red-500 hover:text-red-700 js-remove-button">
                        <i class="fas fa-times"></i>
                    </button>`;
                row.appendChild(el);
            });
            currentRow = rowIndex;
        });
    })();

    // Güvenilir event binding (inline fallback’la birlikte)
    (function(){
        const addBtn = document.getElementById('btnEditAddSameRow');
        const addRowBtn = document.getElementById('btnEditAddRow');
        if (addBtn) addBtn.addEventListener('click', function(e){ e.preventDefault(); window.addButtonToCurrentRow(); });
        if (addRowBtn) addRowBtn.addEventListener('click', function(e){ e.preventDefault(); window.newRow(); });
        // Delegated binding: sadece dinamik buton silme
        document.addEventListener('click', function(e){
            const removeBtn = e.target.closest('.js-remove-button');
            if (removeBtn) { e.preventDefault(); const parent = removeBtn.parentElement; if (parent) parent.remove(); }
        });
    })();

    // Zamanlama
    ;(function initSchedule() {
        const pref = JSON.parse('<%- JSON.stringify(schedule || { type: "now", scheduledTime: "", dailyTime: "" }) %>');
        const scheduleNow = document.getElementById('scheduleNow');
        const scheduleOnce = document.getElementById('scheduleOnce');
        const scheduleDaily = document.getElementById('scheduleDaily');
        const scheduleWeekly = document.getElementById('scheduleWeekly');
        const scheduledTime = document.getElementById('scheduledTime');
        const dailyTime = document.getElementById('dailyTime');
        const weeklyDay = document.getElementById('weeklyDay');
        const weeklyTime = document.getElementById('weeklyTime');
        // set values
        if (pref.scheduledTime) {
            // convert ISO to local datetime-local value
            const d = new Date(pref.scheduledTime);
            const iso = new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0,16);
            scheduledTime.value = iso;
        }
        if (typeof pref.dailyTime !== 'undefined' && pref.dailyTime !== null) dailyTime.value = pref.dailyTime;
        if (typeof pref.weeklyDay !== 'undefined' && pref.weeklyDay !== null && weeklyDay) weeklyDay.value = String(pref.weeklyDay);
        if (typeof pref.weeklyTime !== 'undefined' && pref.weeklyTime !== null && weeklyTime) weeklyTime.value = pref.weeklyTime;
        // select type
        if (pref.type === 'later_once') scheduleOnce.checked = true;
        else if (pref.type === 'daily') scheduleDaily.checked = true;
        else if (pref.type === 'weekly') scheduleWeekly.checked = true;
        else scheduleNow.checked = true;
        function refresh() {
            scheduledTime.disabled = !scheduleOnce.checked;
            dailyTime.disabled = !scheduleDaily.checked;
            const w = scheduleWeekly && scheduleWeekly.checked;
            if (weeklyDay) weeklyDay.disabled = !w;
            if (weeklyTime) weeklyTime.disabled = !w;
        }
        [scheduleNow, scheduleOnce, scheduleDaily, scheduleWeekly].forEach(r => r && r.addEventListener('change', refresh));
        refresh();
    })();

    // Resim önizleme
    (function(){
      const imgInput = document.getElementById('image');
      const wrap = document.getElementById('imagePreviewWrap');
      const img = document.getElementById('imagePreview');
      const prevTitle = document.getElementById('prevTitle');
      const prevContent = document.getElementById('prevContent');
      const titleEl = document.getElementById('title');
      const contentEl = document.getElementById('content');
      function render(){
        if (prevTitle && titleEl) prevTitle.textContent = titleEl.value || '';
        if (prevContent && contentEl) prevContent.innerHTML = contentEl.value || '';
      }
      titleEl && titleEl.addEventListener('input', render);
      contentEl && contentEl.addEventListener('input', render);
      imgInput && imgInput.addEventListener('change', function() {
        const file = this.files && this.files[0];
        const prevImageWrap = document.getElementById('prevImageWrap');
        const prevImage = document.getElementById('prevImage');
        if (file) {
            const reader = new FileReader();
            reader.onload = function(ev) {
                img.src = ev.target.result;
                wrap.classList.remove('hidden');
                if (prevImage && prevImageWrap) { prevImage.src = ev.target.result; prevImageWrap.classList.remove('hidden'); }
            };
            reader.readAsDataURL(file);
        } else {
            wrap.classList.add('hidden');
            img.src = '';
        }
      });
      render();
    })();
    });
</script>

<!-- CKEditor (free CDN) -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></script>
<script>
  (function(){
    const el = document.getElementById('content');
    if (!el) return;
    ClassicEditor.create(el, {
      toolbar: ['bold','italic','underline','strikethrough','link','code','undo','redo'],
      link: { decorators: { addTargetToExternalLinks: true } }
    }).then(editor => {
      window.__contentEditor = editor;
      const update = () => { el.value = editor.getData(); el.dispatchEvent(new Event('input')); };
      editor.model.document.on('change:data', update);
      update();
    }).catch(()=>{});
  })();
</script>
