@extends('layouts.app')
@section('title', $doc->title . ' - 圖像編輯')

@push('styles')
<style>
.iee-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.5rem .75rem; background:#fff; border:1px solid #e2e8f0; border-radius:12px 12px 0 0; }
.iee-title { border:1px solid transparent; border-radius:6px; padding:.2rem .45rem; font-weight:700; font-size:1rem; min-width:120px; max-width:360px; background:transparent; }
.iee-title:hover { border-color:#e2e8f0; }
.iee-title:focus { border-color:#93c5fd; outline:none; background:#fff; }
.iee-kind { font-size:.7rem; font-weight:700; border-radius:999px; padding:2px 8px; }
.iee-kind.vector { background:#ede9fe; color:#6d28d9; }
.iee-kind.raster { background:#dbeafe; color:#1d4ed8; }
.iee-status { font-size:.78rem; color:#64748b; }
.iee-status.dirty { color:#b45309; font-weight:600; }
.iee-frame-wrap { position:relative; border:1px solid #e2e8f0; border-top:none; border-radius:0 0 12px 12px; overflow:hidden; background:#6b7280; }
.iee-frame { display:block; width:100%; border:0; }
.iee-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; background:rgba(255,255,255,.92); z-index:2; font-size:.9rem; color:#475569; }
.iee-export { display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:1060; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.15); padding:.5rem; min-width:230px; }
.iee-export.show { display:block; }
.iee-export button, .iee-export a { display:block; width:100%; text-align:left; border:0; background:none; padding:.35rem .6rem; border-radius:6px; font-size:.85rem; color:#1e293b; text-decoration:none; }
.iee-export button:hover, .iee-export a:hover { background:#f1f5f9; }
.iee-export .sep { border-top:1px solid #f1f5f9; margin:.3rem 0; }
.iee-export .hint { font-size:.7rem; color:#94a3b8; padding:0 .6rem; }
@media (prefers-color-scheme: dark) {
  .iee-bar, .iee-export { background:#1e2330; border-color:#2e3340; }
  .iee-title { color:#e2e8f0; }
  .iee-title:focus { background:#252b3b; }
  .iee-export button, .iee-export a { color:#e2e8f0; }
  .iee-export button:hover, .iee-export a:hover { background:#252b3b; }
}
</style>
@endpush

@section('content')
@php
  $editorUrl = $doc->kind === 'vector' ? '/vendor/svgedit/embed.html' : '/vendor/minipaint/embed.html?lang=zh';
@endphp
<div class="px-2" id="iee"
     data-kind="{{ $doc->kind }}"
     data-source-type="{{ $doc->source_type }}"
     data-source-url="{{ $doc->source_path ? route('image-editor.source', $doc) : '' }}"
     data-save-url="{{ route('image-editor.save', $doc) }}"
     data-update-url="{{ route('image-editor.update', $doc) }}"
     data-width="{{ $doc->width ?? 800 }}"
     data-height="{{ $doc->height ?? 600 }}"
     data-background="{{ $doc->meta['background'] ?? 'white' }}"
     data-project-id="{{ $doc->project_id ?? '' }}"
     data-has-preview="{{ $doc->preview_path ? '1' : '' }}">

  <div class="iee-bar">
    <a href="{{ route('image-editor.index') }}" class="btn btn-sm btn-outline-secondary" title="回到檔案列表"><i class="bi bi-arrow-left"></i></a>
    <span class="iee-kind {{ $doc->kind }}">{{ $doc->kindLabel() }}</span>
    <input type="text" class="iee-title" id="ieeTitle" value="{{ $doc->title }}" maxlength="120" title="點一下可改名稱">
    <span class="iee-status" id="ieeStatus">載入中…</span>
    @if (!empty($doc->meta['converted_from']))
      <span class="badge bg-light text-secondary border" title="AI／PDF 已轉成 SVG 編輯，儲存後為 SVG 格式">由 {{ strtoupper($doc->meta['converted_from']) }} 轉入</span>
    @endif

    <div class="ms-auto d-flex align-items-center gap-2">
      <button type="button" class="btn btn-sm btn-success" id="ieeSave" disabled><i class="bi bi-check-lg me-1"></i>儲存 <span class="opacity-75 small">Ctrl+S</span></button>
      <div class="position-relative">
        <button type="button" class="btn btn-sm btn-outline-primary" id="ieeExportBtn" disabled><i class="bi bi-box-arrow-up-right me-1"></i>匯出</button>
        <div class="iee-export" id="ieeExport">
          <div class="hint mb-1">以目前畫面內容匯出（不需先儲存）</div>
          <button type="button" data-export="png"><i class="bi bi-filetype-png me-2"></i>PNG（透明背景）</button>
          @if ($doc->kind === 'vector')
            <button type="button" data-export="png2x"><i class="bi bi-filetype-png me-2"></i>PNG 2 倍解析度</button>
          @endif
          <button type="button" data-export="jpg"><i class="bi bi-filetype-jpg me-2"></i>JPG（白色背景）</button>
          <button type="button" data-export="webp"><i class="bi bi-image me-2"></i>WebP</button>
          @if ($doc->kind === 'vector')
            <button type="button" data-export="svg"><i class="bi bi-filetype-svg me-2"></i>SVG 向量檔</button>
          @else
            <button type="button" data-export="json"><i class="bi bi-layers me-2"></i>圖層檔 JSON（可再匯入）</button>
          @endif
          @if (!empty($doc->meta['original_path']))
            <div class="sep"></div>
            <a href="{{ route('image-editor.download', ['document' => $doc, 'file' => 'original']) }}"><i class="bi bi-file-earmark-arrow-down me-2"></i>下載上傳的原圖</a>
          @endif
        </div>
      </div>
    </div>
  </div>

  <div class="iee-frame-wrap">
    <div class="iee-loading" id="ieeLoading">
      <div class="spinner-border text-primary" role="status"></div>
      <div id="ieeLoadingText">正在開啟編輯器…</div>
    </div>
    <iframe class="iee-frame" id="ieeFrame" src="{{ $editorUrl }}" title="圖像編輯器"></iframe>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  const root = document.getElementById('iee');
  const cfg = { ...root.dataset };
  const CSRF = document.querySelector('meta[name="csrf-token"]').content;
  const frame = document.getElementById('ieeFrame');
  const statusEl = document.getElementById('ieeStatus');
  const saveBtn = document.getElementById('ieeSave');
  const exportBtn = document.getElementById('ieeExportBtn');
  const exportMenu = document.getElementById('ieeExport');
  const loading = document.getElementById('ieeLoading');
  let dirty = false, saving = false, ready = false;

  // ───── 版面：iframe 填滿到畫面底部 ─────
  function fit() {
    const footer = document.querySelector('footer.fixed-bottom');
    const bottom = footer ? footer.offsetHeight : 0;
    const top = frame.getBoundingClientRect().top + window.scrollY;
    frame.style.height = Math.max(480, window.innerHeight - top - bottom - 12) + 'px';
  }
  window.addEventListener('resize', fit);
  fit();

  function setStatus(text, isDirty) { statusEl.textContent = text; statusEl.classList.toggle('dirty', !!isDirty); }
  function markDirty() { if (!dirty && ready) { dirty = true; setStatus('● 尚未儲存', true); } }
  window.addEventListener('beforeunload', e => { if (dirty) { e.preventDefault(); e.returnValue = ''; } });

  function waitFor(fn, timeout = 30000) {
    return new Promise((resolve, reject) => {
      const t0 = Date.now();
      (function poll() {
        let v; try { v = fn(); } catch (e) {}
        if (v) return resolve(v);
        if (Date.now() - t0 > timeout) return reject(new Error('編輯器載入逾時，請重新整理頁面'));
        setTimeout(poll, 150);
      })();
    });
  }
  async function fetchSource(as) {
    const r = await fetch(cfg.sourceUrl, { credentials: 'same-origin', cache: 'no-store' });
    if (!r.ok) throw new Error('讀取檔案失敗（' + r.status + '）');
    return as === 'json' ? r.json() : as === 'blob' ? r.blob() : r.text();
  }
  const blobToDataUrl = b => new Promise((res, rej) => { const fr = new FileReader(); fr.onload = () => res(fr.result); fr.onerror = rej; fr.readAsDataURL(b); });
  const canvasToBlob = (c, type, q) => new Promise(res => c.toBlob(res, type, q));

  // 依最長邊縮小（縮圖用）
  function downscale(src, max) {
    const s = Math.min(1, max / Math.max(src.width, src.height));
    if (s >= 1) return src;
    const c = document.createElement('canvas');
    c.width = Math.max(1, Math.round(src.width * s)); c.height = Math.max(1, Math.round(src.height * s));
    c.getContext('2d').drawImage(src, 0, 0, c.width, c.height);
    return c;
  }
  function flatten(src, bg) {
    const c = document.createElement('canvas');
    c.width = src.width; c.height = src.height;
    const ctx = c.getContext('2d');
    if (bg) { ctx.fillStyle = bg; ctx.fillRect(0, 0, c.width, c.height); }
    ctx.drawImage(src, 0, 0);
    return c;
  }

  // ───── 向量：SVG-Edit ─────
  const vector = {
    ed: null,
    async init() {
      const win = frame.contentWindow;
      this.ed = await waitFor(() => win.svgEditor?.svgCanvas && win.svgEditor);
      const svg = await fetchSource('text');
      await this.ed.loadFromString(svg, { noAlert: true });
      this.ed.zoomChanged(win, 'canvas');
      // 包住編輯器原本的 changed 事件，用來判斷有沒有修改
      const c = this.ed.svgCanvas;
      const prev = c.bind('changed', null);
      c.bind('changed', function () { markDirty(); return prev ? prev.apply(this, arguments) : undefined; });
    },
    getSource() { return this.ed.svgCanvas.getSvgString(); },
    // SVG 轉成點陣 canvas（匯出與縮圖共用）
    async render(scale = 1) {
      const svg = this.getSource();
      const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
      try {
        const img = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = () => rej(new Error('SVG 轉圖失敗')); i.src = url; });
        const res = this.ed.svgCanvas.getResolution();
        const c = document.createElement('canvas');
        c.width = Math.max(1, Math.round(res.w * scale)); c.height = Math.max(1, Math.round(res.h * scale));
        c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
        return c;
      } finally { URL.revokeObjectURL(url); }
    },
    size() { const r = this.ed.svgCanvas.getResolution(); return [Math.round(r.w), Math.round(r.h)]; },
    sourceBlob() { return new Blob([this.getSource()], { type: 'image/svg+xml' }); },
  };

  // ───── 點陣：miniPaint ─────
  const raster = {
    win: null, historyMark: null,
    // miniPaint 圖層 JSON 樣板（與 FileSave.export_as_json 相同格式）
    docJson(w, h, layer, data) {
      return {
        info: { width: w, height: h, about: '', date: new Date().toISOString().slice(0, 10), version: '4.14.3', layer_active: 1, guides: [] },
        user_fonts: {},
        layers: [Object.assign({
          id: 1, parent_id: 0, name: '背景', type: null, link: null, x: 0, y: 0,
          width: null, width_original: null, height: null, height_original: null,
          visible: true, is_vector: false, hide_selection_if_active: false, opacity: 100, order: 1,
          composition: 'source-over', rotate: 0, data: null, params: {}, status: null, color: '#000000', filters: [], render_function: null,
        }, layer)],
        data: data ? [{ id: 1, data }] : [],
      };
    },
    async init() {
      const win = this.win = frame.contentWindow;
      await waitFor(() => win.FileOpen && win.FileSave && win.Layers && win.State && win.AppConfig?.layers);
      const w = +cfg.width, h = +cfg.height;
      let json;
      if (cfg.sourceType === 'minipaint') {
        json = await fetchSource('json');
      } else if (cfg.sourceType === 'image') {
        const dataUrl = await blobToDataUrl(await fetchSource('blob'));
        const img = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = () => rej(new Error('圖片讀取失敗')); i.src = dataUrl; });
        json = this.docJson(img.naturalWidth, img.naturalHeight,
          { type: 'image', width: img.naturalWidth, height: img.naturalHeight, width_original: img.naturalWidth, height_original: img.naturalHeight }, dataUrl);
      } else {
        // 空白畫布：白底就放一張白色圖層，透明就是空圖層
        if (cfg.background === 'white') {
          const c = document.createElement('canvas'); c.width = w; c.height = h;
          const ctx = c.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, w, h);
          json = this.docJson(w, h, { type: 'image', width: w, height: h, width_original: w, height_original: h }, c.toDataURL('image/png'));
        } else {
          json = this.docJson(w, h, {});
        }
      }
      await win.FileOpen.load_json(json);
      // 用 undo 歷史判斷有沒有修改
      await new Promise(r => setTimeout(r, 300));
      this.historyMark = this.historyKey();
      setInterval(() => { if (ready && !saving && this.historyKey() !== this.historyMark) markDirty(); }, 700);
    },
    historyKey() { const s = this.win.State; return s.action_history.length + ':' + s.action_history_index + ':' + (s.action_history[s.action_history_index - 1]?.action_id ?? ''); },
    async render() {
      const L = this.win.Layers, dim = L.get_dimensions();
      const c = document.createElement('canvas'); c.width = dim.width; c.height = dim.height;
      L.convert_layers_to_canvas(c.getContext('2d'));
      return c;
    },
    size() { const d = this.win.Layers.get_dimensions(); return [d.width, d.height]; },
    sourceBlob() { return new Blob([this.win.FileSave.export_as_json()], { type: 'application/json' }); },
  };

  const ed = cfg.kind === 'vector' ? vector : raster;

  // ───── 儲存 ─────
  async function save() {
    if (!ready || saving) return;
    saving = true; saveBtn.disabled = true;
    setStatus('儲存中…', false);
    try {
      const fd = new FormData();
      const src = ed.sourceBlob();
      fd.append('source', src, 'source');
      try {
        const thumb = downscale(await ed.render(), 640);
        const blob = await canvasToBlob(thumb, 'image/png');
        if (blob) fd.append('preview', blob, 'preview.png');
      } catch (e) { console.warn('縮圖產生失敗', e); }
      const [w, h] = ed.size();
      fd.append('width', w); fd.append('height', h);
      const r = await fetch(cfg.saveUrl, { method: 'POST', body: fd, headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }, credentials: 'same-origin' });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) throw new Error(j.message || (j.errors ? Object.values(j.errors).flat().join('、') : '儲存失敗（' + r.status + '）'));
      dirty = false;
      if (ed === raster) raster.historyMark = raster.historyKey();
      cfg.sourceType = cfg.kind === 'vector' ? 'svg' : 'minipaint';
      setStatus('已儲存 ' + j.saved_at + '（' + j.size + '）', false);
    } catch (e) {
      setStatus('儲存失敗', true);
      alert(e.message);
    } finally {
      saving = false; saveBtn.disabled = false;
    }
  }
  saveBtn.addEventListener('click', save);
  function onKey(e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') { e.preventDefault(); e.stopPropagation(); save(); }
  }
  document.addEventListener('keydown', onKey);

  // ───── 匯出（前端產生，不經伺服器） ─────
  function downloadBlob(blob, name) {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob); a.download = name;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(a.href), 2000);
  }
  const baseName = () => (document.getElementById('ieeTitle').value.trim() || 'image').replace(/[\\/:*?"<>|]+/g, '_');
  exportBtn.addEventListener('click', e => { e.stopPropagation(); exportMenu.classList.toggle('show'); });
  document.addEventListener('click', e => { if (!exportMenu.contains(e.target)) exportMenu.classList.remove('show'); });
  exportMenu.querySelectorAll('[data-export]').forEach(b => b.addEventListener('click', async () => {
    exportMenu.classList.remove('show');
    const t = b.dataset.export;
    try {
      if (t === 'svg' || t === 'json') return downloadBlob(ed.sourceBlob(), baseName() + '.' + t);
      const c = await ed.render(t === 'png2x' ? 2 : 1);
      if (t === 'png' || t === 'png2x') return downloadBlob(await canvasToBlob(c, 'image/png'), baseName() + (t === 'png2x' ? '@2x' : '') + '.png');
      if (t === 'jpg') return downloadBlob(await canvasToBlob(flatten(c, '#ffffff'), 'image/jpeg', 0.92), baseName() + '.jpg');
      if (t === 'webp') return downloadBlob(await canvasToBlob(c, 'image/webp', 0.92), baseName() + '.webp');
    } catch (err) { alert('匯出失敗：' + err.message); }
  }));

  // ───── 改名稱 ─────
  const titleEl = document.getElementById('ieeTitle');
  let lastTitle = titleEl.value;
  async function rename() {
    const v = titleEl.value.trim();
    if (!v) { titleEl.value = lastTitle; return; }
    if (v === lastTitle) return;
    const r = await fetch(cfg.updateUrl, { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
      body: JSON.stringify({ title: v, project_id: cfg.projectId || null }) });
    const j = await r.json().catch(() => ({}));
    if (r.ok && j.ok) { lastTitle = titleEl.value = j.title; document.title = j.title + ' - 圖像編輯'; }
    else { alert(j.message || '改名失敗'); titleEl.value = lastTitle; }
  }
  titleEl.addEventListener('change', rename);
  titleEl.addEventListener('keydown', e => { if (e.key === 'Enter') titleEl.blur(); if (e.key === 'Escape') { titleEl.value = lastTitle; titleEl.blur(); } });

  // ───── 啟動 ─────
  frame.addEventListener('load', async () => {
    try {
      frame.contentDocument.addEventListener('keydown', onKey, true);   // iframe 裡按 Ctrl+S 也能存
      document.getElementById('ieeLoadingText').textContent = '正在載入檔案…';
      await ed.init();
      ready = true;
      saveBtn.disabled = false; exportBtn.disabled = false;
      setStatus(cfg.sourceType === 'blank' ? '新檔案，尚未儲存' : '已開啟', false);
      if (cfg.sourceType === 'blank') { dirty = true; setStatus('● 新檔案，尚未儲存', true); }
      // 剛上傳的向量檔還沒有縮圖：開啟後自動存一次（內容不變，只是補縮圖）
      if (cfg.kind === 'vector' && !cfg.hasPreview) { cfg.hasPreview = '1'; save(); }
    } catch (e) {
      console.error(e);
      setStatus('載入失敗', true);
      document.getElementById('ieeLoadingText').textContent = '載入失敗：' + e.message;
      loading.querySelector('.spinner-border')?.remove();
      return;
    }
    loading.remove();
  });
})();
</script>
@endpush