{% extends "layouts/main.html" %}
{% block title %}{% if post %}{{ t(key="board.edit_title", default="글 수정") }}{% else %}{{ t(key="board.new_title", default="새 글 작성") }}{% endif %} — FuzionX{% endblock %}
{% block flash_messages %}{% endblock %}
{% block content %}
<div class="container">
  <div class="glass-card">
    <h1 class="page-title">{% if post %}{{ t(key="board.edit_title", default="글 수정") }}{% else %}{{ t(key="board.new_title", default="새 글 작성") }}{% endif %}</h1>

    <form class="form" action="{% if post %}/board/{{ post.id }}{% else %}/board{% endif %}" method="POST" enctype="multipart/form-data" onsubmit="return handleUpload(event)">
      <div class="form-group">
        <label for="title">{{ t(key="label.title", default="제목") }}</label>
        <input type="text" id="title" name="title" value="{% if post %}{{ post.title }}{% endif %}" required>
      </div>

      <div class="form-group">
        <label for="content">{{ t(key="label.content", default="내용") }}</label>
        {# ── 마크다운 에디터 툴바 (프레임워크 기능 시연) ── #}
        <div class="editor-toolbar" id="editorToolbar">
          <button type="button" onclick="editorCmd('bold')" title="Bold"><b>B</b></button>
          <button type="button" onclick="editorCmd('italic')" title="Italic"><i>I</i></button>
          <button type="button" onclick="editorCmd('underline')" title="Underline"><u>U</u></button>
          <div class="separator"></div>
          <button type="button" onclick="editorInsert('# ')" title="H1">H1</button>
          <button type="button" onclick="editorInsert('## ')" title="H2">H2</button>
          <div class="separator"></div>
          <button type="button" onclick="editorInsert('- ')" title="List">⊙</button>
          <button type="button" onclick="editorInsert('> ')" title="Quote">❝</button>
          <button type="button" onclick="editorInsert('```\n\n```')" title="Code">⟨/⟩</button>
          <div class="separator"></div>
          <button type="button" onclick="editorInsert('[링크](url)')" title="Link">🔗</button>
        </div>
        <textarea id="content" name="content" rows="14" class="has-toolbar" required>{% if post %}{{ post.content }}{% endif %}</textarea>
      </div>

      {# ── 기존 첨부파일 목록 (수정 모드, 썸네일 + 개별 삭제) ── #}
      {% if post and files and files | length > 0 %}
      <div class="form-group">
        <label>{{ t(key="board.attached_files", default="기존 첨부파일") }}</label>
        <div class="existing-files-grid">
          {% for file in files %}
          <div class="existing-file-card">
            <div class="existing-file-thumb">
              {% if file.thumbUrl %}
              <img src="{{ file.thumbUrl }}" alt="{{ file.original_name }}" loading="lazy">
              {% elif file.isImage %}
              <img src="{{ file.url }}" alt="{{ file.original_name }}" loading="lazy">
              {% elif file.isVideo %}
              <div class="thumb-placeholder">🎬</div>
              {% else %}
              <div class="thumb-placeholder">📄</div>
              {% endif %}
            </div>
            <div class="existing-file-info">
              <span class="file-name" title="{{ file.original_name }}">{{ file.original_name }}</span>
              <button type="button" class="file-remove" title="삭제"
                onclick="if(confirm('삭제?')){var f=document.createElement('form');f.method='POST';f.action='/board/attachment/{{ file.id }}/delete';document.body.appendChild(f);f.submit();}">✕</button>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {# ── 새 파일 업로드 (드래그&드롭 + 클릭) ── #}
      <div class="form-group">
        <label>{{ t(key="label.attachments", default="첨부파일") }}</label>
        <div class="file-upload-area" id="dropZone" onclick="document.getElementById('fileInput').click()">
          <div class="upload-icon">📎</div>
          <div class="upload-text">{{ t(key="board.drop_files", default="클릭 또는 파일을 여기에 드래그") }}</div>
          <div class="upload-hint">{{ t(key="board.file_hint", default="이미지, 비디오, 문서 파일") }}</div>
        </div>
        <input type="file" id="fileInput" name="files" multiple style="display:none"
               accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip">
        <div class="file-list" id="fileList"></div>
      </div>

      {# ── 업로드 진행률 ── #}
      <div class="upload-progress" id="uploadProgress" style="display:none;margin:1rem 0">
        <div class="progress-bar-track" style="background:rgba(255,255,255,0.15);border-radius:8px;height:14px;overflow:hidden">
          <div class="progress-bar-fill" id="progressFill" style="height:100%;width:0;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:8px;transition:width 0.3s ease"></div>
        </div>
        <div class="progress-info" style="display:flex;justify-content:space-between;margin-top:6px;font-size:0.85rem;color:#aaa">
          <span id="progressText">0%</span>
          <span id="progressSize"></span>
          <span id="progressSpeed"></span>
        </div>
      </div>

      {% if flash.error %}
      <div class="alert alert-error">{{ flash.error }}</div>
      {% endif %}
      {% if flash.success %}
      <div class="alert alert-success">{{ flash.success }}</div>
      {% endif %}

      <div class="form-actions">
        <button type="submit" class="btn btn-primary" id="submitBtn">{% if post %}{{ t(key="btn.edit", default="수정") }}{% else %}{{ t(key="btn.create", default="작성") }}{% endif %}</button>
        <a href="/board" class="btn btn-outline">{{ t(key="btn.cancel", default="취소") }}</a>
      </div>
    </form>
  </div>
</div>

<script>
/** 에디터 텍스트 감싸기 (Bold/Italic/Underline) */
function editorCmd(type) {
  var ta = document.getElementById('content');
  var start = ta.selectionStart, end = ta.selectionEnd;
  var sel = ta.value.substring(start, end);
  var wrap = { bold: ['**','**'], italic: ['_','_'], underline: ['__','__'] };
  var w = wrap[type] || ['',''];
  ta.setRangeText(w[0] + sel + w[1], start, end, 'end');
  ta.focus();
}

/** 에디터 텍스트 삽입 */
function editorInsert(text) {
  var ta = document.getElementById('content');
  ta.setRangeText(text, ta.selectionStart, ta.selectionStart, 'end');
  ta.focus();
}

/** 파일 업로드 — 드래그&드롭 + 미리보기 */
(function() {
  var drop = document.getElementById('dropZone');
  var input = document.getElementById('fileInput');
  var list = document.getElementById('fileList');

  function formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
    return (bytes / 1073741824).toFixed(2) + ' GB';
  }

  function renderFiles() {
    list.innerHTML = '';
    if (!input.files.length) return;
    for (var i = 0; i < input.files.length; i++) {
      var f = input.files[i];
      var div = document.createElement('div');
      div.className = 'file-item';

      var preview = '';
      if (f.type.startsWith('image/')) {
        var url = URL.createObjectURL(f);
        preview = '<img src="' + url + '" class="file-preview">';
      } else if (f.type.startsWith('video/')) {
        preview = '<span class="file-preview-icon">🎬</span>';
      } else {
        preview = '<span class="file-preview-icon">📄</span>';
      }

      div.innerHTML = preview + '<span class="file-name">' + f.name + '</span><span class="file-size">' + formatSize(f.size) + '</span>';
      list.appendChild(div);
    }
  }

  input.addEventListener('change', renderFiles);

  ['dragenter','dragover'].forEach(function(e) {
    drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.add('dragover'); });
  });
  ['dragleave','drop'].forEach(function(e) {
    drop.addEventListener(e, function(ev) { ev.preventDefault(); drop.classList.remove('dragover'); });
  });
  drop.addEventListener('drop', function(ev) {
    input.files = ev.dataTransfer.files;
    renderFiles();
  });
})();

/** i18n 텍스트 */
var _uploadLabels = {
  speed: '{{ t(key="board.upload_speed", default="속도") }}',
  complete: '{{ t(key="board.upload_complete", default="업로드 완료!") }}',
  error: '{{ t(key="board.upload_error", default="오류 발생") }}',
  networkError: '{{ t(key="board.upload_network_error", default="네트워크 오류") }}',
  uploading: '{{ t(key="board.uploading", default="업로드 중...") }}',
  thumbnailExtracting: '{{ t(key="board.thumbnail_extracting", default="🔄 썸네일 추출중...") }}'
};

/** 파일 크기 포맷 (진행률용) */
function _fmtSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
  return (bytes / 1073741824).toFixed(2) + ' GB';
}

/** XHR 업로드 — 진행률 + 파일 크기 + 속도 + 자동 리다이렉트 */
function handleUpload(e) {
  var fileInput = document.getElementById('fileInput');
  if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
    return true; // 파일 없으면 기본 폼 제출
  }

  e.preventDefault();
  var form = e.target;
  var btn = document.getElementById('submitBtn');
  var progress = document.getElementById('uploadProgress');
  var fill = document.getElementById('progressFill');
  var pText = document.getElementById('progressText');
  var pSize = document.getElementById('progressSize');
  var pSpeed = document.getElementById('progressSpeed');

  btn.disabled = true;
  btn.textContent = _uploadLabels.uploading;
  progress.style.display = 'block';

  var formData = new FormData(form);
  var xhr = new XMLHttpRequest();
  var startTime = Date.now();

  xhr.upload.onprogress = function(ev) {
    if (!ev.lengthComputable) return;
    var pct = Math.round((ev.loaded / ev.total) * 100);
    fill.style.width = pct + '%';
    pText.textContent = pct + '%';

    // 파일 크기 표시 (loaded / total)
    pSize.textContent = _fmtSize(ev.loaded) + ' / ' + _fmtSize(ev.total);

    var elapsed = (Date.now() - startTime) / 1000;
    if (elapsed > 0.5) {
      var bps = ev.loaded / elapsed;
      var speedVal;
      if (bps > 1048576) {
        speedVal = (bps / 1048576).toFixed(1) + ' MB/s';
      } else {
        speedVal = (bps / 1024).toFixed(0) + ' KB/s';
      }
      pSpeed.textContent = _uploadLabels.speed + ': ' + speedVal;
    }
  };

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      fill.style.width = '100%';
      pText.textContent = _uploadLabels.complete;
      pSpeed.textContent = '';
      btn.textContent = _uploadLabels.thumbnailExtracting;
      setTimeout(function() {
        window.location.href = xhr.responseURL || '/board';
      }, 1500);
    } else {
      btn.disabled = false;
      btn.textContent = '재시도';
      pText.textContent = _uploadLabels.error;
      fill.style.background = '#e74c3c';
    }
  };

  xhr.onerror = function() {
    btn.disabled = false;
    btn.textContent = '재시도';
    pText.textContent = _uploadLabels.networkError;
    fill.style.background = '#e74c3c';
  };

  xhr.open('POST', form.action);
  xhr.send(formData);
  return false;
}
</script>
{% endblock %}