editor.html

---
title: "المحرر"
layout: default
sitemap: false
---

<style>
/* Override site max-width for full-width editor */
body { max-width: 100% !important; }
main#main-content { padding: 0 !important; animation: none !important; }

.editor-container {
  display: flex;
  /* --header-h is set by site.js; fall back to 4rem on first paint */
  height: calc(100dvh - var(--header-h, 4rem));
  overflow: hidden;
}

/* Sidebar (drafts list) */
.editor-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-inline-end: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.18s ease;
}
.editor-sidebar.collapsed { width: 0; border-inline-end: none; }
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75em;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.sidebar-header button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 1.05em;
  line-height: 1;
}
.sidebar-header button:hover { background: var(--border-subtle); color: var(--text-primary); }
.drafts-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.draft-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85em;
  transition: background 0.15s, color 0.15s;
}
.draft-item:hover { background: rgba(127, 127, 127, 0.08); color: var(--text-primary); }
.draft-item.active { background: var(--tag-bg); color: var(--text-primary); }
.draft-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-delete {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  visibility: hidden;
  font-size: 1em;
  line-height: 1;
}
.draft-item:hover .draft-delete { visibility: visible; }
.draft-delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.draft-empty { padding: 12px; color: var(--text-tertiary); font-size: 0.8em; text-align: center; }

.editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Toolbar */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  user-select: none;
  overflow-x: auto;
}
.toolbar-group {
  display: flex;
  gap: 2px;
  padding-inline-end: 8px;
  border-inline-end: 1px solid var(--border-subtle);
}
.toolbar-group:last-child {
  border-inline-end: none;
  margin-inline-start: auto;
}
.editor-toolbar button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1;
  min-width: 32px;
  white-space: nowrap;
}
.editor-toolbar button:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}
.editor-toolbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.editor-toolbar button:active {
  background: var(--border-default);
}
.editor-toolbar button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile tab toggle */
.mobile-tabs {
  display: none;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-tabs button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mobile-tabs button.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Split panes */
.editor-panes {
  display: flex;
  flex: 1;
  min-height: 0;
}
.editor-input-pane,
.editor-preview-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 16px;
  background: var(--bg-surface-hover);
  font-size: 0.75em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  user-select: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pane-header input.draft-name {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95em;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  outline: none;
  min-width: 0;
  flex: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.pane-header input.draft-name:focus {
  background: rgba(127, 127, 127, 0.08);
}
.autosave-indicator {
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.3s, color 0.2s;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
.autosave-indicator.visible { opacity: 1; }
.autosave-indicator.error { color: #ef4444; opacity: 1 !important; font-weight: 600; }

/* Textarea */
#md-input {
  flex: 1;
  background: var(--bg-base);
  color: var(--text-primary);
  border: none;
  resize: none;
  padding: 20px;
  font-family: "Cairo", ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.95em;
  line-height: 1.8;
  direction: rtl;
  outline: none;
  tab-size: 2;
}
#md-input::placeholder { color: var(--text-tertiary); }
#md-input.drag-over {
  background: var(--tag-bg);
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}

/* Resize handle */
.editor-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: var(--border-subtle);
  transition: background 0.2s;
  flex-shrink: 0;
}
.editor-resize-handle:hover,
.editor-resize-handle.dragging {
  background: var(--accent);
}

/* Preview */
.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  direction: rtl;
  line-height: 1.7;
  background: var(--bg-base);
  border-inline-start: 1px solid var(--border-subtle);
}
.preview-content h1 { font-size: 1.8em; font-weight: 700; margin: 0.8em 0 0.4em; color: var(--text-primary); }
.preview-content h2 { font-size: 1.4em; font-weight: 700; margin: 0.8em 0 0.4em; color: var(--text-primary); }
.preview-content h3 { font-size: 1.15em; font-weight: 600; margin: 0.6em 0 0.3em; color: var(--text-primary); }
.preview-content p { margin: 0.6em 0; color: var(--text-primary); }
.preview-content a { color: var(--accent); text-decoration: none; }
.preview-content a:hover { text-decoration: underline; }
.preview-content code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "Courier New", monospace;
}
.preview-content pre {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin: 1em 0;
  direction: ltr;
  text-align: left;
}
.preview-content pre code { background: none; padding: 0; }
.preview-content blockquote {
  border-inline-start: 3px solid var(--accent);
  padding: 0.5em 1em;
  margin: 1em 0;
  background: var(--tag-bg);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}
.preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.preview-content th, .preview-content td {
  border: 1px solid var(--border-default);
  padding: 8px 12px;
  text-align: right;
}
.preview-content th {
  background: var(--bg-surface);
  font-weight: 600;
}
.preview-content img { max-width: 100%; border-radius: 8px; }
.preview-content hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 1.5em 0;
}
.preview-content ul, .preview-content ol {
  padding-inline-start: 1.5em;
  margin: 0.5em 0;
}
.preview-content li { margin: 0.3em 0; }

/* Empty state */
.preview-empty {
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 30vh;
  font-size: 0.9em;
}

/* Toast */
.editor-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  font-size: 0.85em;
  font-family: inherit;
  z-index: 300;
  transition: transform 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.editor-toast.visible { transform: translateX(-50%) translateY(0); }
.editor-toast.error { border-color: rgba(239,68,68,0.4); }
.editor-toast.success { border-color: rgba(34,197,94,0.4); }

/* Publish button */
.editor-toolbar .btn-publish {
  background: var(--accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  gap: 6px;
}
.editor-toolbar .btn-publish:hover { background: var(--accent-hover); }
.editor-toolbar #btn-export-post:hover { background: #16a34a; }
.editor-toolbar .btn-settings { color: var(--text-tertiary); }
.editor-toolbar .btn-settings:hover { color: var(--text-secondary); }

/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  direction: rtl;
}
.modal h3 {
  margin: 0 0 20px;
  font-size: 1.1em;
  color: var(--text-primary);
}
.modal label {
  display: block;
  font-size: 0.8em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.modal input, .modal textarea {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9em;
  margin-bottom: 16px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.modal input:focus, .modal textarea:focus { border-color: var(--accent); }
.modal textarea { resize: vertical; min-height: 60px; }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 8px;
}
.modal-actions button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--bg-surface-hover); }

/* Token status */
.token-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-base);
}
.token-status.connected { color: #22c55e; }
.token-status.disconnected { color: #ef4444; }
.token-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.token-remove {
  margin-inline-start: auto;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.9em;
  padding: 2px 8px;
}
.token-remove:hover { text-decoration: underline; }
.token-help {
  font-size: 0.75em;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  line-height: 1.6;
}
.token-help a { color: var(--accent); text-decoration: none; }
.token-help a:hover { text-decoration: underline; }
.token-help p { margin: 4px 0; }
.token-help ul { margin: 4px 0; padding-inline-start: 1.2em; }
.token-help li { margin: 2px 0; }

/* Mobile */
@media (max-width: 768px) {
  .editor-sidebar { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: 50; box-shadow: -4px 0 12px rgba(0,0,0,0.4); }
  .editor-sidebar.collapsed { display: none; }
  .mobile-tabs { display: flex; }
  .editor-resize-handle { display: none; }
  .editor-panes { flex-direction: column; }
  .editor-input-pane.hidden,
  .editor-preview-pane.hidden { display: none; }
  .preview-content { border-inline-start: none; border-top: 1px solid var(--border-subtle); }
  .toolbar-group:last-child { margin-inline-start: 0; }
}

/* Open-published-post picker */
#open-post-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.open-post-item { text-align: start; background: var(--bg-base); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 0.85em; transition: background 0.15s, border-color 0.15s; }
.open-post-item:hover { background: var(--bg-surface-hover); border-color: var(--border-default); }
.draft-item.draft-linked .draft-title::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #0ea5e9; margin-inline-end: 6px; vertical-align: middle; }
</style>

<div class="editor-container">
  <!-- Sidebar: drafts — collapsed by default on mobile via JS -->
  <aside class="editor-sidebar" id="editor-sidebar" aria-label="المسودات">
    <div class="sidebar-header">
      <span>المسودات</span>
      <button type="button" id="btn-new-draft" title="مسودة جديدة" aria-label="مسودة جديدة">+</button>
    </div>
    <div class="drafts-list" id="drafts-list"></div>
  </aside>

  <div class="editor-main">
    <!-- Toolbar -->
    <div class="editor-toolbar" role="toolbar" aria-label="أدوات التحرير">
      <div class="toolbar-group">
        <button type="button" data-action="toggle-sidebar" title="المسودات" aria-label="المسودات"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
      </div>
      <div class="toolbar-group">
        <button type="button" data-action="h1" title="عنوان 1">H1</button>
        <button type="button" data-action="h2" title="عنوان 2">H2</button>
        <button type="button" data-action="h3" title="عنوان 3">H3</button>
      </div>
      <div class="toolbar-group">
        <button type="button" data-action="bold" title="عريض (Ctrl+B)" aria-label="عريض"><svg viewBox="0 0 24 24"><path d="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z"/></svg></button>
        <button type="button" data-action="italic" title="مائل (Ctrl+I)" aria-label="مائل"><svg viewBox="0 0 24 24"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
        <button type="button" data-action="strike" title="شطب" aria-label="شطب"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><path d="M17.3 4.9c-.5-.4-1.3-.9-2.7-.9-2.5 0-3.8 1.7-3.8 3 0 2.1 1.6 2.8 3.5 3.5"/><path d="M8.3 15.1c0 2 1.5 3.9 4.1 3.9 1.3 0 2.5-.5 3.2-1.3"/></svg></button>
        <button type="button" data-action="code" title="كود (Ctrl+E)" aria-label="كود"><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></button>
      </div>
      <div class="toolbar-group">
        <button type="button" data-action="link" title="رابط (Ctrl+K)" aria-label="رابط"><svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7.1-7.1l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7.1 7.1l1.7-1.7"/></svg></button>
        <button type="button" data-action="image" title="صورة (أو اسحب وأفلت)" aria-label="صورة"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
      </div>
      <div class="toolbar-group">
        <button type="button" data-action="ul" title="قائمة" aria-label="قائمة"><svg viewBox="0 0 24 24"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg></button>
        <button type="button" data-action="ol" title="قائمة مرقمة" aria-label="قائمة مرقمة"><svg viewBox="0 0 24 24"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="1" y="8" font-size="8" fill="currentColor" stroke="none">1</text><text x="1" y="14" font-size="8" fill="currentColor" stroke="none">2</text><text x="1" y="20" font-size="8" fill="currentColor" stroke="none">3</text></svg></button>
        <button type="button" data-action="quote" title="اقتباس" aria-label="اقتباس"><svg viewBox="0 0 24 24"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2H5c-1.25 0-2 .76-2 2v6c0 1.25.76 2 2 2h2c.85 0 1.14.27 1.14 1C8 17 5 19 3 21z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.76-2.02-2-2h-3c-1.25 0-2 .76-2 2v6c0 1.25.76 2 2 2h2c.85 0 1.14.27 1.14 1C20 17 17 19 15 21z"/></svg></button>
        <button type="button" data-action="table" title="جدول" aria-label="جدول"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg></button>
        <button type="button" data-action="hr" title="فاصل" aria-label="فاصل">—</button>
      </div>
      <div class="toolbar-group">
        <button type="button" data-action="open-post" title="فتح مقالة منشورة للتعديل" aria-label="فتح مقالة منشورة"><svg viewBox="0 0 24 24"><path d="M3 7a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><polyline points="9 13 12 16 15 13"/><line x1="12" y1="10" x2="12" y2="16"/></svg></button>
        <button type="button" data-action="import" title="استيراد ملف" aria-label="استيراد"><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
        <button type="button" data-action="export-md" title="تصدير Markdown (Ctrl+S)" aria-label="تصدير"><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></button>
        <button type="button" data-action="copy-md" title="نسخ Markdown" aria-label="نسخ Markdown">MD</button>
        <button type="button" data-action="copy-html" title="نسخ HTML" aria-label="نسخ HTML">HTML</button>
        <button type="button" data-action="settings" class="btn-settings" title="إعدادات" aria-label="إعدادات"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
        <button type="button" data-action="export-post" id="btn-export-post" class="btn-publish" title="تصدير كمقالة جاهزة" style="background:#22c55e;"><svg viewBox="0 0 24 24" width="14" height="14"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> تصدير مقالة</button>
        <button type="button" data-action="publish" id="btn-publish-action" class="btn-publish" title="نشر المقالة" style="display:none;"><svg viewBox="0 0 24 24" width="14" height="14"><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg> نشر</button>
        <button type="button" data-action="update-post" id="btn-update-post" class="btn-publish" title="تحديث المقالة المنشورة" style="display:none;background:#0ea5e9;">تحديث المقالة</button>
      </div>
    </div>

    <!-- Mobile tabs -->
    <div class="mobile-tabs" role="tablist">
      <button type="button" id="tab-editor" class="active" role="tab" aria-selected="true" data-tab="editor">المحرر</button>
      <button type="button" id="tab-preview" role="tab" aria-selected="false" data-tab="preview">المعاينة</button>
    </div>

    <!-- Split Panes -->
    <div class="editor-panes">
      <div class="editor-input-pane" id="input-pane">
        <div class="pane-header">
          <input type="text" class="draft-name" id="draft-name" placeholder="اسم المسودة" aria-label="اسم المسودة">
          <span class="autosave-indicator" id="autosave-indicator" aria-live="polite">تم الحفظ</span>
        </div>
        <textarea id="md-input" dir="rtl" spellcheck="true" placeholder="ابدأ الكتابة هنا... (يمكن سحب وإفلات الصور للرفع التلقائي)" aria-label="محرر Markdown"></textarea>
      </div>

      <div class="editor-resize-handle" id="resize-handle" role="separator" aria-orientation="vertical" aria-label="تغيير حجم اللوح"></div>

      <div class="editor-preview-pane" id="preview-pane">
        <div class="pane-header"><span>PREVIEW</span></div>
        <div id="md-preview" class="preview-content" dir="rtl" aria-live="polite">
          <div class="preview-empty">المعاينة ستظهر هنا</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Hidden file inputs -->
<input type="file" id="file-import" accept=".md,.txt,.markdown" hidden>
<input type="file" id="file-image" accept="image/*" hidden>

<!-- Publish Modal -->
<div class="modal-overlay" id="publish-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-label="نشر مقالة جديدة">
    <h3>نشر مقالة جديدة</h3>
    <div id="publish-token-warning" style="display:none;padding:12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;margin-bottom:16px;font-size:0.8em;color:#ef4444;">
      يجب إعداد GitHub Token أولاً من الإعدادات
    </div>
    <label for="publish-title">عنوان المقالة *</label>
    <input type="text" id="publish-title" placeholder="مثال: كيفية إعداد سيرفر خاص">
    <label for="publish-desc">الوصف</label>
    <textarea id="publish-desc" placeholder="وصف مختصر للمقالة (اختياري)"></textarea>
    <label for="publish-excerpt">الملخص (يظهر في الصفحة الرئيسية)</label>
    <textarea id="publish-excerpt" placeholder="اختياري — يُستخدم أول جزء من المقالة إذا تُرك فارغاً"></textarea>
    <label for="publish-tags">الوسوم (مفصولة بفاصلة)</label>
    <input type="text" id="publish-tags" placeholder="مثال: تقنية, لينكس, سيرفر">
    <label for="publish-slug">اسم الملف (slug) — بالإنجليزية موصى به</label>
    <input type="text" id="publish-slug" placeholder="my-post-slug (اختياري — يُولَّد من العنوان)">
    <div class="modal-actions">
      <button type="button" class="btn-primary" id="publish-btn" data-modal-action="publish">نشر الآن</button>
      <button type="button" class="btn-secondary" data-modal-action="close" data-modal-target="publish-modal">إلغاء</button>
    </div>
  </div>
</div>

<!-- Settings Modal -->
<div class="modal-overlay" id="settings-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-label="إعدادات المحرر">
    <h3>إعدادات المحرر</h3>
    <div id="token-status-display"></div>
    <label for="settings-token">GitHub Personal Access Token</label>
    <input type="password" id="settings-token" placeholder="ghp_xxxxxxxxxxxx" autocomplete="off">
    <div class="token-help">
      <p>أنشئ توكن محدود الصلاحية من
      <a href="https://github.com/settings/personal-access-tokens/new" target="_blank" rel="noopener noreferrer">GitHub Settings → Fine-grained Tokens</a></p>
      <p>الإعدادات المطلوبة:</p>
      <ul>
        <li><strong>Repository access</strong> → Only select repositories → <strong>roko-tech.github.io</strong></li>
        <li><strong>Permissions</strong> → Contents → <strong>Read and write</strong></li>
        <li>حدد مدة انتهاء قصيرة (30-90 يوم)</li>
      </ul>
      <p>التوكن يُحفظ في المتصفح (sessionStorage) ولا يُرسل لأي طرف آخر.</p>
    </div>
    <div class="modal-actions">
      <button type="button" class="btn-primary" data-modal-action="save-settings">حفظ</button>
      <button type="button" class="btn-secondary" data-modal-action="close" data-modal-target="settings-modal">إغلاق</button>
    </div>
  </div>
</div>

<!-- Generic Prompt Modal (for link / image) -->
<div class="modal-overlay" id="prompt-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="prompt-title">
    <h3 id="prompt-title">إدخال</h3>
    <div id="prompt-fields"></div>
    <div class="modal-actions">
      <button type="button" class="btn-primary" id="prompt-ok">موافق</button>
      <button type="button" class="btn-secondary" id="prompt-cancel">إلغاء</button>
    </div>
  </div>
</div>

<!-- Publish Preview Modal — full-width preview of the rendered post before committing -->
<div class="modal-overlay" id="publish-preview-modal">
  <div class="modal" style="max-width: 720px; width: 92%;" role="dialog" aria-modal="true" aria-labelledby="publish-preview-title">
    <h3 id="publish-preview-title">معاينة المقالة قبل النشر</h3>
    <div id="publish-preview-meta" style="font-size:0.8em;color:var(--text-secondary);margin-bottom:12px;"></div>
    <div id="publish-preview-body" class="preview-content" dir="rtl" style="border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5);max-height:60vh;overflow-y:auto;margin-bottom:16px;"></div>
    <div class="modal-actions">
      <button type="button" class="btn-primary" data-modal-action="publish-confirm">متابعة النشر</button>
      <button type="button" class="btn-secondary" data-modal-action="close" data-modal-target="publish-preview-modal">رجوع للتحرير</button>
    </div>
  </div>
</div>

<!-- Confirm Modal -->
<div class="modal-overlay" id="confirm-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
    <h3 id="confirm-title">تأكيد</h3>
    <p id="confirm-message" style="color:var(--text-secondary);margin:0 0 20px;line-height:1.6;"></p>
    <div class="modal-actions">
      <button type="button" class="btn-primary" id="confirm-ok">موافق</button>
      <button type="button" class="btn-secondary" id="confirm-cancel">إلغاء</button>
    </div>
  </div>
</div>

<!-- Open Published Post Modal -->
<div class="modal-overlay" id="open-post-modal">
  <div class="modal" role="dialog" aria-modal="true" aria-label="فتح مقالة منشورة">
    <h3>فتح مقالة منشورة للتعديل</h3>
    <div id="open-post-list">جارٍ التحميل...</div>
    <div class="modal-actions">
      <button type="button" class="btn-secondary" data-modal-action="close" data-modal-target="open-post-modal">إغلاق</button>
    </div>
  </div>
</div>

<!-- Toast -->
<div class="editor-toast" id="editor-toast" role="status" aria-live="polite"></div>

<!-- Markdown parser + sanitizer + syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.7/purify.min.js" integrity="sha512-78KH17QLT5e55GJqP76vutp1D2iAoy06WcYBXB6iBCsmO6wWzx0Qdg8EDpm8mKXv68BcvHOyeeP4wxAL0twJGQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/16.3.0/lib/marked.umd.min.js" integrity="sha512-V6rGY7jjOEUc7q5Ews8mMlretz1Vn2wLdMW/qgABLWunzsLfluM0FwHuGjGQ1lc8jO5vGpGIGFE+rTzB+63HdA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" integrity="sha384-wFjoQjtV1y5jVHbt0p35Ui8aV8GVpEZkyF99OXWqP/eNJDU93D3Ugxkoyh6Y2I4A" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha384-06z5D//U/xpvxZHuUz92xBvq3DqBBFi7Up53HRrbV7Jlv7Yvh/MZ7oenfUe9iCEt" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha384-Uq05+JLko69eOiPr39ta9bh7kld5PKZoU+fF7g0EXTAriEollhZ+DrN8Q/Oi8J2Q" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.2.1/turndown.min.js" integrity="sha384-HJ5HEeMp8mUyP3rNRTMurw70EDxoPixtQ78PiXe3MMuk18YCV6VKnDTFhQnt8nMw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
(function() {
  'use strict';

  // Constants declared first — avoid hoisting-based ordering bugs
  var REPO = 'roko-tech/roko-tech.github.io';
  var TOKEN_KEY = 'roko-editor-gh-token';
  var DRAFTS_KEY = 'roko-editor-drafts';
  var CURRENT_KEY = 'roko-editor-current';
  var RESIZE_KEY = 'roko-editor-ratio';
  var LEGACY_KEY = 'roko-editor-content';
  var MAX_IMAGE_BYTES = 5 * 1024 * 1024;

  // DOM refs
  var input = document.getElementById('md-input');
  var preview = document.getElementById('md-preview');
  var saveIndicator = document.getElementById('autosave-indicator');
  var fileInput = document.getElementById('file-import');
  var imageInput = document.getElementById('file-image');
  var toast = document.getElementById('editor-toast');
  var handle = document.getElementById('resize-handle');
  var inputPane = document.getElementById('input-pane');
  var previewPane = document.getElementById('preview-pane');
  var sidebar = document.getElementById('editor-sidebar');
  var draftsList = document.getElementById('drafts-list');
  var draftNameInput = document.getElementById('draft-name');

  var debounceTimer, saveTimer;
  var currentDraftId = null;
  var savedSelection = { start: 0, end: 0 };

  // === Markdown config ===
  if (typeof marked !== 'undefined') {
    marked.setOptions({ gfm: true, breaks: true });
  }

  // === Preview (sanitized + syntax-highlighted) ===
  function renderPreview() {
    if (typeof marked === 'undefined') {
      preview.innerHTML = '<div class="preview-empty">تعذر تحميل محرك المعاينة</div>';
      return;
    }
    var val = input.value.trim();
    if (!val) {
      preview.innerHTML = '<div class="preview-empty">المعاينة ستظهر هنا</div>';
      return;
    }
    var raw = marked.parse(val);
    preview.innerHTML = (typeof DOMPurify !== 'undefined')
      ? DOMPurify.sanitize(raw, { ADD_ATTR: ['target', 'rel'] })
      : raw;
    if (typeof Prism !== 'undefined') {
      preview.querySelectorAll('pre code').forEach(function (el) { Prism.highlightElement(el); });
    }
  }

  input.addEventListener('input', function () {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function () {
      renderPreview();
      scheduleAutoSave();
    }, 150);
  });

  // Always keep the selection up to date — avoids losing it when a modal takes focus
  ['keyup', 'mouseup', 'click', 'select'].forEach(function (ev) {
    input.addEventListener(ev, function () {
      savedSelection = { start: input.selectionStart, end: input.selectionEnd };
    });
  });

  // === Drafts model ===
  function loadDrafts() {
    try {
      var json = localStorage.getItem(DRAFTS_KEY);
      return json ? JSON.parse(json) : {};
    } catch (e) { return {}; }
  }
  function saveDrafts(drafts) {
    try { localStorage.setItem(DRAFTS_KEY, JSON.stringify(drafts)); } catch (e) {}
  }
  function uid() {
    return 'd-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
  }
  function migrateLegacy() {
    var legacy = localStorage.getItem(LEGACY_KEY);
    // Always drop the legacy key — stale copies from before multi-draft
    // support shouldn't persist even if drafts already exist.
    localStorage.removeItem(LEGACY_KEY);
    if (!legacy) return;
    var drafts = loadDrafts();
    if (!Object.keys(drafts).length) {
      var id = uid();
      drafts[id] = { name: 'مسودة سابقة', content: legacy, updatedAt: Date.now() };
      saveDrafts(drafts);
      localStorage.setItem(CURRENT_KEY, id);
    }
  }
  function renderDrafts() {
    var drafts = loadDrafts();
    var ids = Object.keys(drafts).sort(function (a, b) { return (drafts[b].updatedAt || 0) - (drafts[a].updatedAt || 0); });
    if (ids.length === 0) {
      draftsList.innerHTML = '<div class="draft-empty">لا توجد مسودات</div>';
      return;
    }
    draftsList.innerHTML = '';
    ids.forEach(function (id) {
      var d = drafts[id];
      var item = document.createElement('div');
      item.className = 'draft-item' + (id === currentDraftId ? ' active' : '');
      item.dataset.id = id;
      item.setAttribute('role', 'button');
      item.setAttribute('tabindex', '0');

      if (d.repo) { item.classList.add('draft-linked'); item.title = 'مقالة منشورة: ' + d.repo.path; }

      var title = document.createElement('span');
      title.className = 'draft-title';
      title.textContent = d.name || 'بدون اسم';
      item.appendChild(title);

      var del = document.createElement('button');
      del.type = 'button';
      del.className = 'draft-delete';
      del.textContent = '×';
      del.setAttribute('aria-label', 'حذف المسودة');
      del.addEventListener('click', function (e) {
        e.stopPropagation();
        confirmDialog('حذف مسودة "' + (d.name || 'بدون اسم') + '"؟', function () {
          var drafts = loadDrafts();
          delete drafts[id];
          saveDrafts(drafts);
          if (id === currentDraftId) {
            var remaining = Object.keys(drafts);
            if (remaining.length > 0) switchDraft(remaining[0]);
            else newDraft();
          } else {
            renderDrafts();
          }
        });
      });
      item.appendChild(del);

      var open = function () { switchDraft(id); };
      item.addEventListener('click', open);
      item.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
      });
      draftsList.appendChild(item);
    });
  }
  function switchDraft(id) {
    flushSave();
    clearTimeout(saveTimer);
    var drafts = loadDrafts();
    if (!drafts[id]) return;
    currentDraftId = id;
    localStorage.setItem(CURRENT_KEY, id);
    input.value = drafts[id].content || '';
    draftNameInput.value = drafts[id].name || '';
    renderPreview();
    renderDrafts();
    updatePublishVisibility();
    input.focus();
  }
  function newDraft() {
    flushSave();
    clearTimeout(saveTimer);
    var id = uid();
    var drafts = loadDrafts();
    drafts[id] = { name: 'مسودة جديدة', content: '', updatedAt: Date.now() };
    saveDrafts(drafts);
    currentDraftId = id;
    localStorage.setItem(CURRENT_KEY, id);
    input.value = '';
    draftNameInput.value = drafts[id].name;
    renderPreview();
    renderDrafts();
    updatePublishVisibility();
    input.focus();
  }
  function deleteCurrentDraftSilent() {
    if (!currentDraftId) return;
    var drafts = loadDrafts();
    delete drafts[currentDraftId];
    saveDrafts(drafts);
    currentDraftId = null;
    localStorage.removeItem(CURRENT_KEY);
  }

  draftNameInput.addEventListener('input', function () {
    if (!currentDraftId) return;
    var drafts = loadDrafts();
    if (!drafts[currentDraftId]) return;
    drafts[currentDraftId].name = draftNameInput.value.trim() || 'بدون اسم';
    drafts[currentDraftId].updatedAt = Date.now();
    saveDrafts(drafts);
    clearTimeout(saveTimer);
    saveTimer = setTimeout(renderDrafts, 500);
  });

  document.getElementById('btn-new-draft').addEventListener('click', newDraft);

  // === Auto-save ===
  function scheduleAutoSave() {
    clearTimeout(saveTimer);
    saveTimer = setTimeout(flushSave, 1000);
  }
  function flushSave() {
    if (!currentDraftId) return;
    try {
      var drafts = loadDrafts();
      if (!drafts[currentDraftId]) return;
      drafts[currentDraftId].content = input.value;
      drafts[currentDraftId].updatedAt = Date.now();
      saveDrafts(drafts);
      // Recovered from a previous failure — show success and drop the error state
      saveIndicator.classList.remove('error');
      saveIndicator.textContent = 'تم الحفظ';
      saveIndicator.classList.add('visible');
      setTimeout(function () { saveIndicator.classList.remove('visible'); }, 2000);
    } catch (e) {
      // Likely QuotaExceededError or similar — surface permanently until next success
      saveIndicator.classList.add('error', 'visible');
      saveIndicator.textContent = 'تعذر الحفظ — المساحة ممتلئة';
      showToast('تعذر الحفظ: ' + (e.message || 'المساحة ممتلئة. احذف مسودات قديمة.'), 'error');
    }
  }
  function loadInitial() {
    migrateLegacy();
    var drafts = loadDrafts();
    var ids = Object.keys(drafts);
    if (ids.length === 0) { newDraft(); return; }
    var saved = localStorage.getItem(CURRENT_KEY);
    var id = (saved && drafts[saved]) ? saved : ids[0];
    switchDraft(id);
  }

  window.addEventListener('beforeunload', flushSave);

  // === Toast ===
  function showToast(msg, type) {
    toast.textContent = msg;
    toast.className = 'editor-toast visible' + (type ? ' ' + type : '');
    setTimeout(function () { toast.className = 'editor-toast'; }, 3000);
  }

  // === Modals (with focus trap) ===
  var activeModal = null;
  var previouslyFocused = null;

  function focusables(el) {
    return Array.prototype.slice.call(el.querySelectorAll(
      'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
    ));
  }
  function trapFocus(e) {
    if (!activeModal || e.key !== 'Tab') return;
    var f = focusables(activeModal.querySelector('.modal'));
    if (!f.length) return;
    var first = f[0], last = f[f.length - 1];
    if (e.shiftKey && document.activeElement === first) { last.focus(); e.preventDefault(); }
    else if (!e.shiftKey && document.activeElement === last) { first.focus(); e.preventDefault(); }
  }

  window.openModal = function (id) {
    var el = document.getElementById(id);
    previouslyFocused = document.activeElement;
    el.classList.add('active');
    activeModal = el;
    setTimeout(function () {
      var f = focusables(el.querySelector('.modal'));
      if (f.length) f[0].focus();
    }, 10);
    document.addEventListener('keydown', trapFocus);
  };
  window.closeModal = function (id) {
    document.getElementById(id).classList.remove('active');
    if (activeModal && activeModal.id === id) activeModal = null;
    document.removeEventListener('keydown', trapFocus);
    if (previouslyFocused && previouslyFocused.focus) previouslyFocused.focus();
    // Restore saved selection when we came back from a modal
    if (document.activeElement === input || !previouslyFocused) {
      try {
        input.selectionStart = savedSelection.start;
        input.selectionEnd = savedSelection.end;
      } catch (e) {}
    }
  };

  document.querySelectorAll('.modal-overlay').forEach(function (overlay) {
    overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(overlay.id); });
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && activeModal) closeModal(activeModal.id);
  });

  // Generic prompt dialog — fields: [{id, label, placeholder, multiline, value, type}]
  function promptDialog(title, fields, callback) {
    document.getElementById('prompt-title').textContent = title;
    var container = document.getElementById('prompt-fields');
    container.innerHTML = '';
    fields.forEach(function (f) {
      var label = document.createElement('label');
      label.htmlFor = 'p-' + f.id;
      label.textContent = f.label;
      container.appendChild(label);
      var inp = f.multiline ? document.createElement('textarea') : document.createElement('input');
      if (!f.multiline) inp.type = f.type || 'text';
      inp.id = 'p-' + f.id;
      inp.placeholder = f.placeholder || '';
      inp.value = f.value || '';
      container.appendChild(inp);
    });
    var ok = document.getElementById('prompt-ok');
    var cancel = document.getElementById('prompt-cancel');
    var finish = function (result) {
      ok.onclick = null;
      cancel.onclick = null;
      closeModal('prompt-modal');
      callback(result);
    };
    ok.onclick = function () {
      var values = {};
      fields.forEach(function (f) { values[f.id] = document.getElementById('p-' + f.id).value; });
      finish(values);
    };
    cancel.onclick = function () { finish(null); };
    openModal('prompt-modal');
  }

  function confirmDialog(message, onOk, onCancel) {
    document.getElementById('confirm-message').textContent = message;
    var ok = document.getElementById('confirm-ok');
    var cancel = document.getElementById('confirm-cancel');
    var finish = function (result) {
      ok.onclick = null;
      cancel.onclick = null;
      closeModal('confirm-modal');
      if (result && onOk) onOk();
      else if (!result && onCancel) onCancel();
    };
    ok.onclick = function () { finish(true); };
    cancel.onclick = function () { finish(false); };
    openModal('confirm-modal');
  }

  // === Toolbar helpers ===
  function wrapSelection(before, after) {
    var start = input.selectionStart, end = input.selectionEnd;
    var text = input.value;
    var selected = text.substring(start, end) || 'نص';
    input.value = text.substring(0, start) + before + selected + after + text.substring(end);
    input.selectionStart = start + before.length;
    input.selectionEnd = start + before.length + selected.length;
    input.focus();
  }

  function prefixLine(prefix) {
    var start = input.selectionStart;
    var text = input.value;
    var lineStart = text.lastIndexOf('\n', start - 1) + 1;
    var lineEnd = text.indexOf('\n', start);
    if (lineEnd === -1) lineEnd = text.length;
    var line = text.substring(lineStart, lineEnd);
    if (line.startsWith(prefix)) {
      input.value = text.substring(0, lineStart) + line.substring(prefix.length) + text.substring(lineEnd);
    } else {
      var cleaned = line.replace(/^#{1,6}\s/, '');
      input.value = text.substring(0, lineStart) + prefix + cleaned + text.substring(lineEnd);
    }
    input.focus();
  }

  function prefixLines(prefix) {
    var start = input.selectionStart, end = input.selectionEnd;
    var text = input.value;
    var lineStart = text.lastIndexOf('\n', start - 1) + 1;
    var lineEnd = text.indexOf('\n', end - 1);
    if (lineEnd === -1) lineEnd = text.length;
    var block = text.substring(lineStart, lineEnd);
    var lines = block.split('\n');

    var olRe = /^\d+\.\s/;
    var plainRe = new RegExp('^' + prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
    var testRe = prefix === '1. ' ? olRe : plainRe;
    var nonEmpty = lines.filter(function (l) { return l.trim() !== ''; });
    var allHave = nonEmpty.length > 0 && nonEmpty.every(function (l) { return testRe.test(l); });

    var result;
    if (allHave) {
      result = lines.map(function (line) {
        if (prefix === '1. ') return line.replace(olRe, '');
        return testRe.test(line) ? line.substring(prefix.length) : line;
      }).join('\n');
    } else {
      var n = 1;
      result = lines.map(function (line) {
        if (line.trim() === '') return line;
        if (prefix === '1. ') {
          if (olRe.test(line)) return line;
          return (n++) + '. ' + line;
        }
        if (testRe.test(line)) return line;
        return prefix + line;
      }).join('\n');
    }
    input.value = text.substring(0, lineStart) + result + text.substring(lineEnd);
    input.focus();
  }

  function insertAtCursor(str) {
    var start = input.selectionStart;
    var text = input.value;
    input.value = text.substring(0, start) + str + text.substring(start);
    input.selectionStart = input.selectionEnd = start + str.length;
    input.focus();
  }

  function replaceSavedSelection(str) {
    var s = savedSelection.start, e = savedSelection.end;
    input.value = input.value.substring(0, s) + str + input.value.substring(e);
    input.selectionStart = input.selectionEnd = s + str.length;
    savedSelection = { start: s + str.length, end: s + str.length };
    input.focus();
  }

  // === URL validation ===
  function isValidUrl(str) {
    try {
      var u = new URL(str, window.location.origin);
      return u.protocol === 'https:' || u.protocol === 'http:';
    } catch (e) { return false; }
  }

  // === Actions ===
  function handleAction(action) {
    switch (action) {
      case 'toggle-sidebar': sidebar.classList.toggle('collapsed'); return;
      case 'h1': prefixLine('# '); break;
      case 'h2': prefixLine('## '); break;
      case 'h3': prefixLine('### '); break;
      case 'bold': wrapSelection('**', '**'); break;
      case 'italic': wrapSelection('*', '*'); break;
      case 'strike': wrapSelection('~~', '~~'); break;
      case 'code': wrapSelection('`', '`'); break;
      case 'link': {
        var sel = input.value.substring(savedSelection.start, savedSelection.end);
        promptDialog('إدراج رابط', [
          { id: 'text', label: 'نص الرابط', placeholder: 'رابط', value: sel },
          { id: 'url', label: 'الرابط', placeholder: 'https://example.com' }
        ], function (v) {
          if (!v || !v.url) return;
          if (!isValidUrl(v.url)) { showToast('رابط غير صالح', 'error'); return; }
          replaceSavedSelection('[' + (v.text || 'رابط') + '](' + v.url + ')');
          renderPreview();
          scheduleAutoSave();
        });
        return;
      }
      case 'image': {
        promptDialog('إدراج صورة', [
          { id: 'alt', label: 'الوصف (alt)', placeholder: 'وصف مختصر' },
          { id: 'url', label: 'الرابط (أو اترك فارغاً لاختيار ملف)', placeholder: 'https://...' }
        ], function (v) {
          if (!v) return;
          if (!v.url) {
            imageInput.dataset.alt = v.alt || 'صورة';
            imageInput.click();
            return;
          }
          if (!isValidUrl(v.url)) { showToast('رابط غير صالح', 'error'); return; }
          replaceSavedSelection('![' + (v.alt || 'صورة') + '](' + v.url + ')');
          renderPreview();
          scheduleAutoSave();
        });
        return;
      }
      case 'ul': prefixLines('- '); break;
      case 'ol': prefixLines('1. '); break;
      case 'quote': prefixLines('> '); break;
      case 'table':
        insertAtCursor('\n| العمود 1 | العمود 2 | العمود 3 |\n| --- | --- | --- |\n| خلية | خلية | خلية |\n');
        break;
      case 'hr': insertAtCursor('\n---\n'); break;
      case 'import':
        if (input.value.trim()) {
          confirmDialog('سيستبدل الملف المستورد محتوى المحرر الحالي. متابعة؟', function () { fileInput.click(); });
        } else {
          fileInput.click();
        }
        return;
      case 'export-md': exportMarkdown(); return;
      case 'publish': openPublishModal(); return;
      case 'open-post': openPostPicker(); return;
      case 'update-post': updatePost(); return;
      case 'settings': openModal('settings-modal'); updateTokenStatus(); return;
      case 'copy-md':
        navigator.clipboard.writeText(input.value).then(
          function () { showToast('تم نسخ Markdown', 'success'); },
          function () { showToast('تعذر النسخ', 'error'); }
        );
        return;
      case 'copy-html':
        if (typeof marked !== 'undefined') {
          var html = marked.parse(input.value);
          if (typeof DOMPurify !== 'undefined') html = DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] });
          navigator.clipboard.writeText(html).then(
            function () { showToast('تم نسخ HTML', 'success'); },
            function () { showToast('تعذر النسخ', 'error'); }
          );
        }
        return;
      case 'export-post': exportAsPost(); return;
    }
    renderPreview();
    scheduleAutoSave();
  }

  document.querySelector('.editor-toolbar').addEventListener('click', function (e) {
    var btn = e.target.closest('button[data-action]');
    if (btn) handleAction(btn.dataset.action);
  });

  // === Keyboard shortcuts ===
  input.addEventListener('keydown', function (e) {
    var ctrl = e.ctrlKey || e.metaKey;
    var key = e.key.toLowerCase();
    if (ctrl && key === 'b') { e.preventDefault(); handleAction('bold'); }
    else if (ctrl && key === 'i') { e.preventDefault(); handleAction('italic'); }
    else if (ctrl && key === 'k') { e.preventDefault(); handleAction('link'); }
    else if (ctrl && key === 'e') { e.preventDefault(); handleAction('code'); }
    else if (ctrl && key === 's') { e.preventDefault(); handleAction('export-md'); }
    else if (ctrl && e.shiftKey && key === 'x') { e.preventDefault(); handleAction('strike'); }
    else if (e.key === 'Tab' && !e.shiftKey) {
      // Multi-line selection → indent each line (never toggle; Shift+Tab dedents).
      // Otherwise insert 2 spaces.
      var s = input.selectionStart, en = input.selectionEnd;
      if (en > s && input.value.substring(s, en).indexOf('\n') !== -1) {
        e.preventDefault();
        var text = input.value;
        var lineStart = text.lastIndexOf('\n', s - 1) + 1;
        var lineEnd = text.indexOf('\n', en - 1);
        if (lineEnd === -1) lineEnd = text.length;
        var block = text.substring(lineStart, lineEnd);
        var indented = block.split('\n').map(function (l) { return l === '' ? l : '  ' + l; }).join('\n');
        input.value = text.substring(0, lineStart) + indented + text.substring(lineEnd);
        renderPreview();
        scheduleAutoSave();
      } else {
        e.preventDefault();
        insertAtCursor('  ');
        renderPreview();
        scheduleAutoSave();
      }
    }
    else if (e.key === 'Tab' && e.shiftKey) {
      // Shift+Tab → dedent up to 2 leading spaces on each selected line
      var s2 = input.selectionStart, en2 = input.selectionEnd;
      if (en2 > s2 && input.value.substring(s2, en2).indexOf('\n') !== -1) {
        e.preventDefault();
        var text = input.value;
        var lineStart = text.lastIndexOf('\n', s2 - 1) + 1;
        var lineEnd = text.indexOf('\n', en2 - 1);
        if (lineEnd === -1) lineEnd = text.length;
        var block = text.substring(lineStart, lineEnd);
        var dedented = block.split('\n').map(function (l) { return l.replace(/^ {1,2}/, ''); }).join('\n');
        input.value = text.substring(0, lineStart) + dedented + text.substring(lineEnd);
        renderPreview();
        scheduleAutoSave();
      }
    }
  });

  // === File import ===
  fileInput.addEventListener('change', function (e) {
    var file = e.target.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function (ev) {
      input.value = ev.target.result;
      renderPreview();
      flushSave();
      showToast('تم استيراد: ' + file.name, 'success');
    };
    reader.readAsText(file);
    e.target.value = '';
  });

  // === Image handling ===
  imageInput.addEventListener('change', function (e) {
    var file = e.target.files[0];
    var alt = imageInput.dataset.alt || 'صورة';
    if (file) handleImageFile(file, alt);
    e.target.value = '';
    delete imageInput.dataset.alt;
  });

  function handleImageFile(file, alt) {
    if (!file.type.startsWith('image/')) { showToast('الملف ليس صورة', 'error'); return; }
    if (file.size > MAX_IMAGE_BYTES) { showToast('الصورة كبيرة جداً (حد أقصى 5MB)', 'error'); return; }
    var token = sessionStorage.getItem(TOKEN_KEY);
    if (!token) {
      showToast('يتطلب رفع الصور GitHub Token — استخدم الإعدادات', 'error');
      openModal('settings-modal');
      updateTokenStatus();
      return;
    }
    uploadImageToGitHub(file, alt, token);
  }

  function bytesToBase64(bytes) {
    var bin = '';
    var chunk = 0x8000;
    for (var i = 0; i < bytes.length; i += chunk) {
      bin += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));
    }
    return btoa(bin);
  }

  // Retry-with-exponential-backoff for transient network + rate-limit failures.
  // Retries 5xx and 429. 4xx (except 429) fail fast since they're permanent.
  function fetchRetry(url, opts, attempts) {
    attempts = attempts == null ? 3 : attempts;
    return fetch(url, opts).then(function (res) {
      var retry = res.status === 429 || (res.status >= 500 && res.status < 600);
      if (retry && attempts > 1) {
        var delay = 500 * Math.pow(2, 3 - attempts); // 500, 1000, 2000 ms
        return new Promise(function (r) { setTimeout(r, delay); }).then(function () {
          return fetchRetry(url, opts, attempts - 1);
        });
      }
      return res;
    }).catch(function (err) {
      if (attempts > 1) {
        var delay = 500 * Math.pow(2, 3 - attempts);
        return new Promise(function (r) { setTimeout(r, delay); }).then(function () {
          return fetchRetry(url, opts, attempts - 1);
        });
      }
      throw err;
    });
  }

  // Single-file upload (toolbar image picker) — delegates to the shared
  // promise-based uploader below and adds progress/success toasts.
  function uploadImageToGitHub(file, alt, token) {
    showToast('جارٍ رفع الصورة...');
    uploadImageToGitHubAsync(file, alt, token).then(function () {
      showToast('تم رفع الصورة إلى GitHub', 'success');
    }, function (err) {
      showToast('خطأ: ' + err.message, 'error');
    });
  }

  // === Drag & drop images ===
  ['dragenter', 'dragover'].forEach(function (ev) {
    input.addEventListener(ev, function (e) {
      if (!e.dataTransfer) return;
      var types = e.dataTransfer.types;
      if (types && Array.prototype.indexOf.call(types, 'Files') !== -1) {
        e.preventDefault();
        input.classList.add('drag-over');
      }
    });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    input.addEventListener(ev, function () { input.classList.remove('drag-over'); });
  });
  input.addEventListener('drop', function (e) {
    if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) return;
    var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (f) { return f.type.startsWith('image/'); });
    if (!files.length) return;
    e.preventDefault();
    // Anchor insertion at the caret where the drop happened
    savedSelection = { start: input.selectionStart, end: input.selectionEnd };

    var token = sessionStorage.getItem(TOKEN_KEY);
    if (!token) {
      showToast('يتطلب رفع الصور GitHub Token — استخدم الإعدادات', 'error');
      openModal('settings-modal');
      updateTokenStatus();
      return;
    }
    // Sequential upload so we don't race the markdown insertions
    var idx = 0;
    function next() {
      if (idx >= files.length) {
        if (files.length > 1) showToast('تم رفع ' + files.length + ' صور', 'success');
        return;
      }
      var f = files[idx++];
      if (f.size > MAX_IMAGE_BYTES) {
        showToast(f.name + ': كبير جداً، تم التخطي', 'error');
        next();
        return;
      }
      uploadImageToGitHubAsync(f, 'صورة', token).then(next, function (err) {
        showToast('خطأ في ' + f.name + ': ' + err.message, 'error');
        next();
      });
    }
    next();
  });

  // Promise-based upload used by the multi-drop loop
  function uploadImageToGitHubAsync(file, alt, token) {
    return new Promise(function (resolve, reject) {
      var reader = new FileReader();
      reader.onload = function (ev) {
        var b64 = bytesToBase64(new Uint8Array(ev.target.result));
        var now = new Date();
        var dateStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
        var ext = (file.name.match(/\.[^.]+$/) || [''])[0].toLowerCase() || '.png';
        var base = file.name.replace(/\.[^.]+$/, '').replace(/[^a-zA-Z0-9-]/g, '-').replace(/-+/g, '-').slice(0, 40) || 'image';
        var path = 'assets/uploads/' + dateStr + '-' + base + '-' + Math.random().toString(36).slice(2, 7) + ext;

        fetchRetry('https://api.github.com/repos/' + REPO + '/contents/' + encodeURIComponent(path), {
          method: 'PUT',
          headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json',
            'Accept': 'application/vnd.github+json',
            'X-GitHub-Api-Version': '2022-11-28'
          },
          body: JSON.stringify({ message: 'رفع صورة: ' + path, content: b64 })
        }).then(function (res) {
          if (!res.ok) return res.json().then(function (err) { throw new Error(err.message || 'فشل رفع الصورة'); });
          return res.json();
        }).then(function () {
          replaceSavedSelection('![' + alt + '](/' + path + ')\n');
          renderPreview();
          scheduleAutoSave();
          resolve();
        }).catch(reject);
      };
      reader.onerror = function () { reject(new Error('تعذّر قراءة الملف')); };
      reader.readAsArrayBuffer(file);
    });
  }

  // === Export ===
  function exportMarkdown() {
    var blob = new Blob([input.value], { type: 'text/markdown;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    var fname = (draftNameInput.value || 'document').replace(/[^\u0600-\u06FFa-zA-Z0-9-]/g, '-').replace(/-+/g, '-') || 'document';
    a.download = fname + '.md';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast('تم تصدير الملف', 'success');
  }

  function exportAsPost() {
    var content = input.value.trim();
    if (!content) { showToast('المقالة فارغة', 'error'); return; }
    promptDialog('تصدير كمقالة Jekyll', [
      { id: 'title', label: 'العنوان *', placeholder: 'مثال: كيفية إعداد سيرفر خاص' },
      { id: 'desc', label: 'الوصف', placeholder: 'اختياري', multiline: true },
      { id: 'excerpt', label: 'الملخص', placeholder: 'اختياري', multiline: true },
      { id: 'tags', label: 'الوسوم (مفصولة بفاصلة)', placeholder: 'تقنية, لينكس' },
      { id: 'slug', label: 'slug بالإنجليزية (اختياري)', placeholder: 'my-post' }
    ], function (v) {
      if (!v || !(v.title || '').trim()) return;
      var title = v.title.trim();
      var fm = buildFrontMatter({ title: title, description: (v.desc || '').trim(), excerpt: (v.excerpt || '').trim(), tags: parseTags(v.tags) });
      var now = new Date();
      var dateStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
      var slug = (v.slug.trim() || slugify(title)) || 'post';
      var filename = dateStr + '-' + slug + '.md';
      var blob = new Blob([fm + content], { type: 'text/markdown;charset=utf-8' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      showToast('تم تصدير المقالة: ' + filename, 'success');
    });
  }

  function parseTags(s) { return (s || '').split(',').map(function (t) { return t.trim(); }).filter(Boolean); }

  // Escape a value for a YAML double-quoted scalar: backslash FIRST, then
  // quote; collapse newlines to spaces so front-matter values stay one line.
  // Without backslash escaping, a Windows path (e.g. C:\Users) in the title
  // produces invalid YAML and breaks the Jekyll build for the whole site.
  function yamlStr(s) {
    return String(s).replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/[\r\n]+/g, ' ');
  }

  function buildFrontMatter(meta) {
    var fm = '---\n';
    fm += 'title: "' + yamlStr(meta.title) + '"\n';
    fm += 'layout: post\n';
    if (meta.description) fm += 'description: "' + yamlStr(meta.description) + '"\n';
    if (meta.excerpt) fm += 'excerpt: "' + yamlStr(meta.excerpt) + '"\n';
    if (meta.tags && meta.tags.length) fm += 'tags: [' + meta.tags.map(function (t) { return '"' + yamlStr(t) + '"'; }).join(', ') + ']\n';
    if (meta.permalink) fm += 'permalink: "' + yamlStr(meta.permalink) + '"\n';
    fm += '---\n\n';
    return fm;
  }

  // === Toggle publish/export button based on token ===
  function updatePublishVisibility() {
    var token = sessionStorage.getItem(TOKEN_KEY);
    var publishBtn = document.getElementById('btn-publish-action');
    var exportBtn = document.getElementById('btn-export-post');
    var updateBtn = document.getElementById('btn-update-post');
    var drafts = loadDrafts();
    var linked = currentDraftId && drafts[currentDraftId] && drafts[currentDraftId].repo;
    if (linked) {
      // Editing an existing post → only the "update in place" action applies
      updateBtn.style.display = '';
      publishBtn.style.display = 'none';
      exportBtn.style.display = 'none';
    } else {
      updateBtn.style.display = 'none';
      if (token) {
        publishBtn.style.display = '';
        exportBtn.style.display = 'none';
      } else {
        publishBtn.style.display = 'none';
        exportBtn.style.display = '';
      }
    }
  }

  // === Edit existing posts: open from repo → edit body → update in place ===
  // The post's front matter is preserved verbatim (no YAML round-trip, so no
  // field loss); only the body is editable here. last_modified_at is re-stamped
  // by the last-modified GitHub Action on the resulting push.
  function ghHeaders(token) {
    return {
      'Authorization': 'Bearer ' + token,
      'Accept': 'application/vnd.github+json',
      'X-GitHub-Api-Version': '2022-11-28'
    };
  }
  function base64ToUtf8(b64) {
    var bin = atob((b64 || '').replace(/\s/g, ''));
    var bytes = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
    return new TextDecoder().decode(bytes);
  }
  function splitFrontMatter(text) {
    var m = /^(---\r?\n[\s\S]*?\r?\n---\r?\n)([\s\S]*)$/.exec(text);
    if (!m) return { frontMatter: '', body: text };
    return { frontMatter: m[1], body: m[2].replace(/^\r?\n+/, '') };
  }
  function openPostPicker() {
    var token = sessionStorage.getItem(TOKEN_KEY);
    if (!token) {
      showToast('يتطلب فتح المقالات GitHub Token — استخدم الإعدادات', 'error');
      openModal('settings-modal'); updateTokenStatus(); return;
    }
    var listEl = document.getElementById('open-post-list');
    listEl.textContent = 'جارٍ التحميل...';
    openModal('open-post-modal');
    fetchRetry('https://api.github.com/repos/' + REPO + '/contents/_posts', { headers: ghHeaders(token) })
      .then(function (res) {
        if (!res.ok) throw new Error('تعذّر قراءة قائمة المقالات (' + res.status + ')');
        return res.json();
      })
      .then(function (list) {
        renderPostList((list || []).filter(function (f) { return /\.md$/.test(f.name); }), token);
      })
      .catch(function (err) { listEl.textContent = 'خطأ: ' + err.message; });
  }
  function renderPostList(files, token) {
    var listEl = document.getElementById('open-post-list');
    listEl.innerHTML = '';
    if (!files.length) { listEl.textContent = 'لا توجد مقالات منشورة'; return; }
    // Filenames begin with YYYY-MM-DD — reverse sort shows newest first
    files.sort(function (a, b) { return a.name < b.name ? 1 : -1; });
    files.forEach(function (f) {
      var item = document.createElement('button');
      item.type = 'button';
      item.className = 'open-post-item';
      item.textContent = f.name.replace(/\.md$/, '');
      item.addEventListener('click', function () { openPostForEdit(f, token); });
      listEl.appendChild(item);
    });
  }
  function openPostForEdit(file, token) {
    showToast('جارٍ فتح المقالة...');
    fetchRetry('https://api.github.com/repos/' + REPO + '/contents/' + encodeURIComponent(file.path), { headers: ghHeaders(token) })
      .then(function (res) {
        if (!res.ok) throw new Error('تعذّر فتح المقالة (' + res.status + ')');
        return res.json();
      })
      .then(function (info) {
        var parts = splitFrontMatter(base64ToUtf8(info.content || ''));
        var titleMatch = /^title:\s*["']?(.*?)["']?\s*$/m.exec(parts.frontMatter);
        var title = (titleMatch && titleMatch[1]) || file.name.replace(/\.md$/, '');
        var drafts = loadDrafts();
        // Already open? Just switch to that draft instead of duplicating it.
        for (var k in drafts) {
          if (drafts[k].repo && drafts[k].repo.path === file.path) {
            closeModal('open-post-modal'); switchDraft(k);
            showToast('المقالة مفتوحة بالفعل', 'success'); return;
          }
        }
        var id = uid();
        drafts[id] = { name: title, content: parts.body, updatedAt: Date.now(), repo: { path: file.path, frontMatter: parts.frontMatter } };
        saveDrafts(drafts);
        closeModal('open-post-modal');
        switchDraft(id);
        showToast('تم فتح: ' + title, 'success');
      })
      .catch(function (err) { showToast('خطأ: ' + err.message, 'error'); });
  }
  function updatePost() {
    var token = sessionStorage.getItem(TOKEN_KEY);
    if (!token) { showToast('يجب إعداد GitHub Token أولاً', 'error'); openModal('settings-modal'); updateTokenStatus(); return; }
    var drafts = loadDrafts();
    var d = currentDraftId ? drafts[currentDraftId] : null;
    if (!d || !d.repo) { showToast('هذه المسودة غير مرتبطة بمقالة منشورة', 'error'); return; }
    if (!input.value.trim()) { showToast('المقالة فارغة', 'error'); return; }
    flushSave(); // persist the local body before pushing
    var path = d.repo.path;
    var body = input.value.replace(/^\r?\n+/, '');
    var newContent = d.repo.frontMatter ? d.repo.frontMatter + '\n' + body : body;
    var apiUrl = 'https://api.github.com/repos/' + REPO + '/contents/' + encodeURIComponent(path);
    var headers = ghHeaders(token);
    var btn = document.getElementById('btn-update-post');
    btn.disabled = true; btn.textContent = 'جارٍ الحفظ...';
    // GET the current sha first — the last-modified Action re-stamps the file
    // after each push, so a cached sha would 409 on the next save.
    fetchRetry(apiUrl, { headers: headers })
      .then(function (res) {
        if (!res.ok) throw new Error('تعذّر إيجاد المقالة (' + res.status + ')');
        return res.json();
      })
      .then(function (info) {
        return fetchRetry(apiUrl, {
          method: 'PUT',
          headers: Object.assign({ 'Content-Type': 'application/json' }, headers),
          body: JSON.stringify({ message: 'تحديث مقالة: ' + path, content: utf8ToBase64(newContent), sha: info.sha })
        });
      })
      .then(function (res) {
        if (!res.ok) return res.json().then(function (e) { throw new Error(e.message || 'فشل التحديث'); });
        return res.json();
      })
      .then(function () {
        btn.disabled = false; btn.textContent = 'تحديث المقالة';
        showToast('تم تحديث المقالة بنجاح', 'success');
      })
      .catch(function (err) {
        btn.disabled = false; btn.textContent = 'تحديث المقالة';
        showToast('خطأ: ' + err.message, 'error');
      });
  }

  // === Resize handle (with persistence) ===
  var savedRatio = parseFloat(localStorage.getItem(RESIZE_KEY));
  if (!isNaN(savedRatio) && savedRatio >= 20 && savedRatio <= 80 && window.innerWidth > 768) {
    inputPane.style.flex = 'none';
    inputPane.style.width = savedRatio + '%';
    previewPane.style.flex = 'none';
    previewPane.style.width = (100 - savedRatio) + '%';
  }
  var dragging = false;
  handle.addEventListener('mousedown', function (e) {
    dragging = true;
    handle.classList.add('dragging');
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
    e.preventDefault();
  });
  document.addEventListener('mousemove', function (e) {
    if (!dragging) return;
    var rect = document.querySelector('.editor-panes').getBoundingClientRect();
    var offset = rect.right - e.clientX;
    var percent = Math.max(20, Math.min(80, (offset / rect.width) * 100));
    inputPane.style.flex = 'none';
    inputPane.style.width = percent + '%';
    previewPane.style.flex = 'none';
    previewPane.style.width = (100 - percent) + '%';
  });
  document.addEventListener('mouseup', function () {
    if (!dragging) return;
    dragging = false;
    handle.classList.remove('dragging');
    document.body.style.cursor = '';
    document.body.style.userSelect = '';
    var w = parseFloat(inputPane.style.width);
    if (!isNaN(w)) localStorage.setItem(RESIZE_KEY, w.toFixed(1));
  });

  // === Settings ===
  window.updateTokenStatus = function () {
    var token = sessionStorage.getItem(TOKEN_KEY);
    var container = document.getElementById('token-status-display');
    var tokenInputEl = document.getElementById('settings-token');
    container.innerHTML = '';
    var div = document.createElement('div');
    var dot = document.createElement('span'); dot.className = 'token-dot';
    div.appendChild(dot);
    if (token) {
      div.className = 'token-status connected';
      div.appendChild(document.createTextNode('متصل — التوكن محفوظ'));
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'token-remove';
      btn.textContent = 'حذف';
      btn.addEventListener('click', removeToken);
      div.appendChild(btn);
      tokenInputEl.value = '';
      tokenInputEl.placeholder = 'التوكن محفوظ — أدخل توكن جديد للاستبدال';
    } else {
      div.className = 'token-status disconnected';
      div.appendChild(document.createTextNode('غير متصل — أدخل GitHub Token للنشر'));
      tokenInputEl.placeholder = 'ghp_xxxxxxxxxxxx';
    }
    container.appendChild(div);
  };

  function removeToken() {
    sessionStorage.removeItem(TOKEN_KEY);
    updateTokenStatus();
    updatePublishVisibility();
    showToast('تم حذف التوكن', 'success');
  }

  function saveSettings() {
    var tokenInput = document.getElementById('settings-token');
    var token = tokenInput.value.trim();
    if (token) {
      sessionStorage.setItem(TOKEN_KEY, token);
      tokenInput.value = '';
      showToast('تم حفظ التوكن', 'success');
    }
    updateTokenStatus();
    updatePublishVisibility();
    closeModal('settings-modal');
  }

  // === Publish ===
  function slugify(text) {
    return text
      .replace(/[\u064B-\u065F\u0670\u06D6-\u06ED]/g, '') // Arabic diacritics
      .replace(/[^\u0600-\u06FFa-zA-Z0-9\s-]/g, '')        // Arabic block + ASCII
      .trim()
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '')
      .substring(0, 80);
  }

  function utf8ToBase64(str) { return bytesToBase64(new TextEncoder().encode(str)); }

  window.openPublishModal = function () {
    var token = sessionStorage.getItem(TOKEN_KEY);
    var warning = document.getElementById('publish-token-warning');
    var btn = document.getElementById('publish-btn');
    if (!token) { warning.style.display = 'block'; btn.disabled = true; }
    else { warning.style.display = 'none'; btn.disabled = false; }
    if (draftNameInput.value && !document.getElementById('publish-title').value) {
      document.getElementById('publish-title').value = draftNameInput.value;
    }
    openModal('publish-modal');
  };

  function publishPost() {
    var token = sessionStorage.getItem(TOKEN_KEY);
    if (!token) { showToast('يجب إعداد GitHub Token أولاً', 'error'); return; }
    var title = document.getElementById('publish-title').value.trim();
    if (!title) { showToast('العنوان مطلوب', 'error'); return; }
    var content = input.value;
    if (!content.trim()) { showToast('المقالة فارغة', 'error'); return; }

    var desc = document.getElementById('publish-desc').value.trim();
    var excerpt = document.getElementById('publish-excerpt').value.trim();
    var tags = parseTags(document.getElementById('publish-tags').value);
    var customSlug = document.getElementById('publish-slug').value.trim();

    // Show preview first. Actual commit happens in confirmPublish() after
    // the user clicks "متابعة النشر" in the preview modal.
    var previewBody = document.getElementById('publish-preview-body');
    var previewMeta = document.getElementById('publish-preview-meta');
    var rendered = marked.parse(content);
    if (typeof DOMPurify !== 'undefined') rendered = DOMPurify.sanitize(rendered, { ADD_ATTR: ['target', 'rel'] });
    previewBody.innerHTML = '<h1 style="font-size:1.8em;margin:0 0 0.6em;">' + (title.replace(/</g, '&lt;')) + '</h1>' + rendered;
    if (typeof Prism !== 'undefined') previewBody.querySelectorAll('pre code').forEach(function (el) { Prism.highlightElement(el); });
    var metaParts = [];
    if (desc) metaParts.push('الوصف: ' + desc);
    if (tags.length) metaParts.push('الوسوم: ' + tags.join('، '));
    if (customSlug) metaParts.push('slug: ' + customSlug);
    if (excerpt) metaParts.push('الملخص: ' + excerpt);
    previewMeta.textContent = metaParts.join(' • ') || 'بدون وصف/وسوم';
    closeModal('publish-modal');
    openModal('publish-preview-modal');

    // Stash the resolved metadata on the window so confirmPublish can pick it up
    window.__pendingPublish = { title: title, desc: desc, excerpt: excerpt, tags: tags, customSlug: customSlug, content: content, token: token };
  }

  // Best-effort: create a /tag/<tag>/ stub for any tag that lacks one, so the
  // post's tag links don't 404. Fire-and-forget — failures never block publish.
  function ensureTagStubs(tags, token) {
    if (!tags || !tags.length) return;
    var headers = {
      'Authorization': 'Bearer ' + token,
      'Accept': 'application/vnd.github+json',
      'X-GitHub-Api-Version': '2022-11-28'
    };
    tags.forEach(function (tag) {
      var path = 'tag/' + tag + '.md';
      var apiUrl = 'https://api.github.com/repos/' + REPO + '/contents/' + encodeURIComponent(path);
      fetch(apiUrl, { headers: headers }).then(function (res) {
        if (res.status !== 404) return; // already exists (or unknown) — leave it
        var stub = '---\n'
          + 'layout: tagpage\n'
          + 'title: "' + yamlStr(tag) + '"\n'
          + 'tag: "' + yamlStr(tag) + '"\n'
          + 'permalink: "/tag/' + yamlStr(tag) + '/"\n'
          + 'description: "' + yamlStr('مقالات مصنّفة تحت وسم ' + tag) + '"\n'
          + '---\n';
        return fetch(apiUrl, {
          method: 'PUT',
          headers: Object.assign({ 'Content-Type': 'application/json' }, headers),
          body: JSON.stringify({ message: 'إنشاء صفحة وسم: ' + tag, content: utf8ToBase64(stub) })
        });
      }).catch(function () {});
    });
  }

  function confirmPublish() {
    var p = window.__pendingPublish;
    if (!p) { showToast('لا توجد مقالة معلّقة للنشر', 'error'); return; }
    window.__pendingPublish = null;
    closeModal('publish-preview-modal');
    openModal('publish-modal');

    var title = p.title, desc = p.desc, excerpt = p.excerpt, tags = p.tags, customSlug = p.customSlug, content = p.content, token = p.token;
    var btn = document.getElementById('publish-btn');
    btn.disabled = true;
    btn.textContent = 'جارٍ النشر...';

    var now = new Date();
    var dateStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
    var baseSlug = customSlug || slugify(title) || 'post';

    var apiHeaders = {
      'Authorization': 'Bearer ' + token,
      'Accept': 'application/vnd.github+json',
      'X-GitHub-Api-Version': '2022-11-28'
    };

    // List existing posts once so we can detect slug collisions across ALL
    // dates: two posts sharing a slug on different days would otherwise build
    // to the same permalink (/slug/) and silently clobber each other.
    function findSlugAndCreate() {
      fetchRetry('https://api.github.com/repos/' + REPO + '/contents/_posts', { headers: apiHeaders })
        .then(function (res) {
          if (!res.ok && res.status !== 404) throw new Error('تعذّر قراءة قائمة المقالات (' + res.status + ')');
          return res.status === 404 ? [] : res.json();
        })
        .then(function (list) {
          var taken = {};
          (list || []).forEach(function (f) {
            var m = /^\d{4}-\d{2}-\d{2}-(.+)\.md$/.exec(f.name);
            if (m) taken[m[1]] = true;
          });
          var slug = baseSlug, n = 2;
          while (taken[slug]) { slug = baseSlug + '-' + n; n++; }
          return create('_posts/' + dateStr + '-' + slug + '.md', slug);
        })
        .catch(onError);
    }
    function create(filename, finalSlug) {
      // Pin the URL to the chosen slug so Arabic titles don't produce weird URLs
      var permalink = '/' + finalSlug + '/';
      var fullContent = buildFrontMatter({ title: title, description: desc, excerpt: excerpt, tags: tags, permalink: permalink }) + content;
      var contentB64 = utf8ToBase64(fullContent);
      fetchRetry('https://api.github.com/repos/' + REPO + '/contents/' + encodeURIComponent(filename), {
        method: 'PUT',
        headers: Object.assign({ 'Content-Type': 'application/json' }, apiHeaders),
        body: JSON.stringify({ message: 'نشر مقالة: ' + title, content: contentB64 })
      })
      .then(function (res) {
        if (!res.ok) return res.json().then(function (err) { throw new Error(err.message || 'فشل النشر'); });
        return res.json();
      })
      .then(function () {
        btn.disabled = false;
        btn.textContent = 'نشر الآن';
        closeModal('publish-modal');
        showToast('تم النشر بنجاح! سيظهر المقال خلال دقائق', 'success');
        ['publish-title', 'publish-desc', 'publish-excerpt', 'publish-tags', 'publish-slug'].forEach(function (id) {
          var el = document.getElementById(id); if (el) el.value = '';
        });
        ensureTagStubs(tags, token);
        deleteCurrentDraftSilent();
        input.value = '';
        renderPreview();
        renderDrafts();
        newDraft();
      })
      .catch(onError);
    }
    function onError(err) {
      btn.disabled = false;
      btn.textContent = 'نشر الآن';
      showToast('خطأ: ' + err.message, 'error');
    }

    findSlugAndCreate();
  }

  // === Mobile tabs ===
  window.switchTab = function (tab) {
    var te = document.getElementById('tab-editor');
    var tp = document.getElementById('tab-preview');
    te.classList.toggle('active', tab === 'editor');
    tp.classList.toggle('active', tab === 'preview');
    te.setAttribute('aria-selected', tab === 'editor' ? 'true' : 'false');
    tp.setAttribute('aria-selected', tab === 'preview' ? 'true' : 'false');
    inputPane.classList.toggle('hidden', tab !== 'editor');
    previewPane.classList.toggle('hidden', tab !== 'preview');
    if (tab === 'preview') renderPreview();
  };

  // === Event delegation for modal/tab buttons ===
  document.addEventListener('click', function (e) {
    var tab = e.target.closest('[data-tab]');
    if (tab) { switchTab(tab.dataset.tab); return; }
    var action = e.target.closest('[data-modal-action]');
    if (!action) return;
    switch (action.dataset.modalAction) {
      case 'publish': publishPost(); break;
      case 'publish-confirm': confirmPublish(); break;
      case 'save-settings': saveSettings(); break;
      case 'remove-token': removeToken(); break;
      case 'close': closeModal(action.dataset.modalTarget); break;
    }
  });

  // === Clipboard paste: images upload, rich HTML → Markdown via Turndown ===
  input.addEventListener('paste', function (e) {
    if (!e.clipboardData) return;

    // 1) Image clipboard items take priority (screenshots from Snipping Tool, browser copy-image)
    var imgItems = e.clipboardData.items
      ? Array.prototype.filter.call(e.clipboardData.items, function (it) { return it.kind === 'file' && it.type.startsWith('image/'); })
      : [];
    if (imgItems.length) {
      e.preventDefault();
      savedSelection = { start: input.selectionStart, end: input.selectionEnd };
      var token = sessionStorage.getItem(TOKEN_KEY);
      if (!token) {
        showToast('يتطلب لصق الصور GitHub Token — استخدم الإعدادات', 'error');
        openModal('settings-modal');
        updateTokenStatus();
        return;
      }
      imgItems.forEach(function (it) {
        var file = it.getAsFile();
        if (file) uploadImageToGitHubAsync(file, 'صورة', token).catch(function (err) {
          showToast('خطأ في لصق الصورة: ' + err.message, 'error');
        });
      });
      return;
    }

    // 2) Rich HTML (from docs, websites, Notion) → convert to Markdown with Turndown
    var html = e.clipboardData.getData('text/html');
    if (html && html.trim() && typeof TurndownService !== 'undefined') {
      // Sanitize first so the converter doesn't ingest <script> etc.
      var safeHtml = (typeof DOMPurify !== 'undefined') ? DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] }) : html;
      try {
        var td = new TurndownService({
          headingStyle: 'atx',
          codeBlockStyle: 'fenced',
          bulletListMarker: '-',
          emDelimiter: '*'
        });
        // Preserve line breaks and keep images as Markdown
        td.addRule('strikethrough', { filter: ['del', 's', 'strike'], replacement: function (c) { return '~~' + c + '~~'; } });
        var md = td.turndown(safeHtml).trim();
        if (md) {
          e.preventDefault();
          insertAtCursor(md);
          renderPreview();
          scheduleAutoSave();
          showToast('تم لصق المحتوى كـ Markdown', 'success');
          return;
        }
      } catch (err) { /* fall through to default paste of text/plain */ }
    }
    // 3) Default browser paste handles text/plain fine
  });

  // === Scroll-sync: editor textarea ↔ preview pane (proportional) ===
  // When the user scrolls one pane, the other follows at the same percent
  // position. A reentrancy flag cleared on the next frame prevents the
  // feedback loop that would otherwise fire when we programmatically
  // assign scrollTop on the opposite pane.
  var _syncingScroll = false;
  function _makeScrollSync(src, dst) {
    return function () {
      if (_syncingScroll) return;
      // Skip when either pane is hidden (mobile tab mode uses display:none)
      if (src.offsetParent === null || dst.offsetParent === null) return;
      var srcMax = src.scrollHeight - src.clientHeight;
      var dstMax = dst.scrollHeight - dst.clientHeight;
      if (srcMax <= 0 || dstMax <= 0) return;
      _syncingScroll = true;
      dst.scrollTop = (src.scrollTop / srcMax) * dstMax;
      requestAnimationFrame(function () { _syncingScroll = false; });
    };
  }
  input.addEventListener('scroll', _makeScrollSync(input, preview), { passive: true });
  preview.addEventListener('scroll', _makeScrollSync(preview, input), { passive: true });

  // === Init ===
  // Add aria-hidden to decorative toolbar SVGs so labeled buttons don't double-announce
  document.querySelectorAll('.editor-toolbar button svg, .mobile-tabs button svg, #btn-new-draft svg').forEach(function (s) { s.setAttribute('aria-hidden', 'true'); });
  // Sidebar collapses on mobile, expands on desktop — sync on resize/rotate too
  var mqMobile = window.matchMedia('(max-width: 768px)');
  function syncSidebar() {
    if (mqMobile.matches) sidebar.classList.add('collapsed');
    else sidebar.classList.remove('collapsed');
  }
  syncSidebar();
  if (mqMobile.addEventListener) mqMobile.addEventListener('change', syncSidebar);
  loadInitial();
  updatePublishVisibility();
})();
</script>