@extends('layouts.app')
@section('title', $doc->title . ' — ' . $project->name . ' Wiki')

@push('styles')
<link rel="stylesheet" href="/vendor/easymde/easymde.min.css">
<style>
#wikiPage { display:flex; flex-direction:column; overflow:hidden; }
.wiki-header {
  display:flex; align-items:center; gap:10px; padding:8px 16px;
  border-bottom:1px solid var(--bs-border-color); background:var(--bs-body-bg);
  flex-shrink:0; flex-wrap:wrap;
}
.wiki-title { font-size:1rem; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#saveStatus { font-size:.8rem; }
/* EasyMDE overrides */
.EasyMDEContainer { display:flex; flex-direction:column; flex:1; overflow:hidden; }
.EasyMDEContainer .editor-toolbar { border-radius:0; background:var(--bs-tertiary-bg); border-left:none; border-right:none; flex-shrink:0; }
.EasyMDEContainer .CodeMirror { flex:1; font-family:'Courier New',monospace; font-size:.95rem; line-height:1.75; border:none; border-radius:0; }
.EasyMDEContainer .CodeMirror-scroll { height:100%; }
.EasyMDEContainer .editor-statusbar { flex-shrink:0; font-size:.75rem; border-top:1px solid var(--bs-border-color); padding:4px 10px; }
/* Read-only markdown body */
.md-body { padding:32px 48px; overflow-y:auto; font-size:1rem; line-height:1.8; }
.md-body h1,.md-body h2,.md-body h3 { font-weight:600; margin:1.4em 0 .5em; }
.md-body h1 { font-size:1.75rem; border-bottom:2px solid var(--bs-border-color); padding-bottom:.3em; }
.md-body h2 { font-size:1.4rem; border-bottom:1px solid var(--bs-border-color); padding-bottom:.2em; }
.md-body h3 { font-size:1.15rem; }
.md-body code { background:var(--bs-tertiary-bg); border-radius:4px; padding:.15em .4em; font-size:.88em; }
.md-body pre { background:var(--bs-tertiary-bg); border-radius:8px; padding:14px 18px; overflow-x:auto; }
.md-body pre code { background:none; padding:0; }
.md-body blockquote { border-left:4px solid #1a73e8; margin:.8em 0; padding:.5em 1em; color:var(--bs-secondary-color); background:rgba(26,115,232,.05); border-radius:0 6px 6px 0; }
.md-body table { border-collapse:collapse; width:100%; margin:1em 0; }
.md-body table th,.md-body table td { border:1px solid var(--bs-border-color); padding:.5em .75em; }
.md-body table th { background:var(--bs-tertiary-bg); font-weight:600; }
.md-body img { max-width:100%; border-radius:6px; }
.md-body a { color:#1a73e8; }
.md-body hr { border-color:var(--bs-border-color); }
</style>
@endpush

@section('content')
@php
  $canEdit   = auth()->user()->can('contributeDoc', $project);
  $backUrl   = route("{$routePrefix}.index", $project);
  $updateUrl = route("{$routePrefix}.update", [$project, $doc]);
@endphp

<div id="wikiPage">
  <div class="wiki-header" id="wikiHeader">
    <a href="{{ $backUrl }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left"></i>
    </a>
    <i class="bi bi-journal-text" style="color:#f9ab00;font-size:1.1rem;flex-shrink:0;"></i>
    <span class="wiki-title">{{ $doc->title }}</span>
    @if($canEdit)
      <span id="saveStatus" class="text-secondary"></span>
      <button class="btn btn-sm btn-primary" id="saveBtn" onclick="saveMd()">
        <i class="bi bi-floppy me-1"></i>儲存
      </button>
    @endif
    @if($logs->isNotEmpty())
    <div class="dropdown">
      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
        <i class="bi bi-clock-history"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow" style="min-width:260px;font-size:.82rem;">
        <li><h6 class="dropdown-header">版本歷史</h6></li>
        @foreach($logs as $log)
        <li>
          <a class="dropdown-item py-1" href="#"
             onclick="event.preventDefault();loadVersion('{{ route("{$routePrefix}.showLog", [$project, $doc, $log->id]) }}')">
            <div class="d-flex justify-content-between">
              <span>{{ $log->user?->name ?? '—' }}</span>
              <small class="text-muted">{{ $log->created_at->format('m/d H:i') }}</small>
            </div>
          </a>
        </li>
        @endforeach
      </ul>
    </div>
    @endif
  </div>
  <div id="wikiBody" style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
    @if($canEdit)
      <textarea id="mdEditor"></textarea>
    @else
      <div class="md-body" id="mdPreview"></div>
    @endif
  </div>
</div>
@endsection

@push('scripts')
<script src="/vendor/easymde/marked.min.js"></script>
<script src="/vendor/easymde/turndown.min.js"></script>
<script src="/vendor/easymde/easymde.min.js"></script>
<script>
var UPDATE_URL = '{{ $updateUrl }}';
var CSRF       = '{{ csrf_token() }}';
var RAW        = @json($doc->content ?? '');
var DOC_TITLE  = @json($doc->title);
var _saveTimer, _dirty = false, _easyMDE;

// ── Strip container padding & size #wikiPage to fill viewport ──
(function() {
  var cont = document.querySelector('.container-fluid');
  var body = document.body;
  if (cont) { cont.style.paddingTop = '0'; cont.style.paddingBottom = '0'; cont.style.paddingLeft = '0'; cont.style.paddingRight = '0'; }
  if (body) body.style.paddingBottom = '0';
  function resize() {
    var page = document.getElementById('wikiPage');
    if (!page) return;
    var rect = page.getBoundingClientRect();
    page.style.height = (window.innerHeight - rect.top) + 'px';
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', resize);
  } else {
    resize();
  }
  window.addEventListener('resize', resize);
})();

function looksLikeHtml(s) {
  return s && /<[a-zA-Z][^>]*>/.test(String(s).trim());
}
function htmlToMd(html) {
  var td = new TurndownService({ headingStyle:'atx', codeBlockStyle:'fenced', bulletListMarker:'-' });
  td.addRule('strikethrough', { filter:['del','s'], replacement:function(c){ return '~~'+c+'~~'; } });
  return td.turndown(html);
}
function setSaveStatus(msg, color) {
  var el = document.getElementById('saveStatus');
  if (el) { el.textContent = msg; el.style.color = color || ''; }
}

@if($canEdit)
document.addEventListener('DOMContentLoaded', function() {
  var initialContent = RAW ? String(RAW) : '';
  var didConvert = false;
  if (looksLikeHtml(initialContent)) {
    initialContent = htmlToMd(initialContent);
    didConvert = true;
  }

  _easyMDE = new EasyMDE({
    element: document.getElementById('mdEditor'),
    initialValue: initialContent,
    spellChecker: false,
    autofocus: false,
    indentWithTabs: false,
    tabSize: 2,
    previewRender: function(md) { return marked.parse(md); },
    toolbar: [
      { name:'bold',           action:EasyMDE.toggleBold,           className:'bi bi-type-bold',              title:'粗體 (Ctrl+B)' },
      { name:'italic',         action:EasyMDE.toggleItalic,         className:'bi bi-type-italic',            title:'斜體 (Ctrl+I)' },
      { name:'strikethrough',  action:EasyMDE.toggleStrikethrough,  className:'bi bi-type-strikethrough',     title:'刪除線' },
      { name:'heading',        action:EasyMDE.toggleHeadingSmaller, className:'bi bi-type-h1',                title:'標題' },
      '|',
      { name:'quote',          action:EasyMDE.toggleBlockquote,     className:'bi bi-chat-square-quote',      title:'引用' },
      { name:'unordered-list', action:EasyMDE.toggleUnorderedList,  className:'bi bi-list-ul',                title:'無序清單' },
      { name:'ordered-list',   action:EasyMDE.toggleOrderedList,    className:'bi bi-list-ol',                title:'有序清單' },
      '|',
      { name:'link',           action:EasyMDE.drawLink,             className:'bi bi-link-45deg',             title:'插入連結' },
      { name:'image',          action:EasyMDE.drawImage,            className:'bi bi-image',                  title:'插入圖片' },
      { name:'table',          action:EasyMDE.drawTable,            className:'bi bi-table',                  title:'插入表格' },
      { name:'code',           action:EasyMDE.toggleCodeBlock,      className:'bi bi-code-slash',             title:'程式碼區塊' },
      '|',
      { name:'preview',        action:EasyMDE.togglePreview,        className:'bi bi-eye no-disable',         title:'預覽' },
      { name:'side-by-side',   action:EasyMDE.toggleSideBySide,     className:'bi bi-layout-split no-disable',title:'左右分割' },
      { name:'fullscreen',     action:EasyMDE.toggleFullScreen,     className:'bi bi-fullscreen no-disable',  title:'全螢幕' },
      '|',
      { name:'undo',           action:function(e){ e.codemirror.undo(); },   className:'bi bi-arrow-counterclockwise', title:'復原' },
      { name:'redo',           action:function(e){ e.codemirror.redo(); },   className:'bi bi-arrow-clockwise',        title:'重做' },
    ],
  });

  _easyMDE.codemirror.on('change', function() {
    _dirty = true;
    setSaveStatus('未儲存', '#f9ab00');
    clearTimeout(_saveTimer);
    _saveTimer = setTimeout(autoSave, 8000);
  });

  if (didConvert) {
    setTimeout(function() {
      setSaveStatus('偵測到舊版 HTML，正在轉換…', '#1a73e8');
      saveMd(true);
    }, 600);
  }
});

function autoSave() { if (_dirty) saveMd(true); }

function saveMd(isAuto) {
  if (!_easyMDE) return;
  var md  = _easyMDE.value();
  var btn = document.getElementById('saveBtn');
  if (btn) btn.disabled = true;
  setSaveStatus(isAuto ? '自動儲存中…' : '儲存中…', '#1a73e8');
  fetch(UPDATE_URL, {
    method: 'PUT',
    headers: { 'Content-Type':'application/json', 'Accept':'application/json', 'X-CSRF-TOKEN':CSRF },
    body: JSON.stringify({ title: DOC_TITLE, content: md })
  })
  .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(function() {
    _dirty = false;
    setSaveStatus('已儲存 ' + new Date().toLocaleTimeString('zh-TW',{hour:'2-digit',minute:'2-digit'}), '#0f9d58');
    if (btn) btn.disabled = false;
  })
  .catch(function(e) {
    setSaveStatus('儲存失敗 (' + e.message + ')', '#d93025');
    if (btn) btn.disabled = false;
  });
}

function loadVersion(url) {
  fetch(url, { headers: { 'Accept':'application/json' } })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      var c = d.content_after ?? d.content ?? '';
      if (looksLikeHtml(c)) c = htmlToMd(c);
      _easyMDE.value(c);
      setSaveStatus('已載入歷史版本（未儲存）', '#f9ab00');
      _dirty = true;
    });
}

window.addEventListener('beforeunload', function(e) {
  if (_dirty) { e.preventDefault(); e.returnValue = ''; }
});

@else
document.addEventListener('DOMContentLoaded', function() {
  var el = document.getElementById('mdPreview');
  if (!el) return;
  var c = RAW ? String(RAW) : '';
  el.innerHTML = looksLikeHtml(c) ? c : marked.parse(c);
});
@endif
</script>
@endpush