1/* Chart Skill — Export Utilities v3 (project-based)
2 * Strategy: ECharts native getDataURL() + Canvas merge
3 *
4 * Functions exposed:
5 *   downloadPNG()       — merge all charts into one PNG and download
6 *   copyToClipboard()   — copy merged PNG to clipboard (fallback: download)
7 *   saveToProject()     — POST PNG to /save-chart and save into current project dir
8 */
9 
10/* ── Toast notification ─────────────────────────────────── */
11function showToast(msg, type = 'info') {
12  let t = document.getElementById('toast');
13  if (!t) {
14    t = document.createElement('div');
15    t.id = 'toast';
16    t.style.cssText = `
17      position:fixed;bottom:24px;right:24px;z-index:9999;
18      background:#1e2130;border:1px solid #2d3148;color:#e1e4ea;
19      padding:10px 18px;border-radius:8px;font-size:0.85rem;
20      opacity:0;transition:opacity 0.25s;pointer-events:none;
21      box-shadow:0 4px 20px rgba(0,0,0,0.4);
22    `;
23    document.body.appendChild(t);
24  }
25  t.style.borderColor = type === 'success' ? '#34d399' : type === 'error' ? '#ef4444' : '#2d3148';
26  t.style.color = type === 'success' ? '#34d399' : type === 'error' ? '#ef4444' : '#e1e4ea';
27  t.textContent = msg;
28  t.style.opacity = '1';
29  clearTimeout(t._hideTimer);
30  t._hideTimer = setTimeout(() => { t.style.opacity = '0'; }, 2500);
31}
32 
33/* ── Preview-safe API URL helpers ─────────────────────────── */
34function getPreviewBasePath() {
35  const m = window.location.pathname.match(/^(\/preview\/[^/]+\/)/);
36  return m ? m[1] : '/';
37}
38 
39function apiUrl(endpoint) {
40  const base = getPreviewBasePath();
41  const ep = String(endpoint || '').replace(/^\/+/, '');
42  return `${base}${ep}`;
43}
44 
45/* ── Resolve current project from pathname ───────────────── */
46function getCurrentProjectPath() {
47  // expected path: /preview/<id>/<project>/index.html
48  // or /<project>/index.html
49  let path = window.location.pathname;
50  path = path.replace(/^\/preview\/[^/]+\//, '/');
51  path = path.replace(/^\//, '');
52 
53  // remove filename
54  const parts = path.split('/').filter(Boolean);
55  if (!parts.length) return '';
56  if (parts[parts.length - 1].includes('.')) parts.pop();
57  return parts.join('/');
58}
59 
60/* ── Collect all ECharts instances from page ─────────────── */
61function getAllChartInstances() {
62  if (window.CHART_INSTANCES && window.CHART_INSTANCES.length > 0) {
63    return window.CHART_INSTANCES.filter(i => i && !i.isDisposed());
64  }
65  if (!window.echarts) return [];
66  const containers = document.querySelectorAll('[_echarts_instance_]');
67  const instances = [];
68  containers.forEach(c => {
69    const inst = echarts.getInstanceByDom(c);
70    if (inst && !inst.isDisposed()) instances.push(inst);
71  });
72  return instances;
73}
74 
75/* ── Merge multiple chart canvases into one PNG DataURL ───── */
76async function mergeChartsToDataURL() {
77  const instances = getAllChartInstances();
78  if (instances.length === 0) throw new Error('No ECharts instances found');
79 
80  instances.forEach(inst => { try { inst.resize(); } catch(e) {} });
81  await new Promise(r => setTimeout(r, 150));
82 
83  const images = instances.map(inst => ({
84    dataUrl: inst.getDataURL({
85      type: 'png',
86      pixelRatio: 2,
87      backgroundColor: '#1a1d27',
88      excludeComponents: []
89    }),
90    width: inst.getWidth(),
91    height: inst.getHeight()
92  }));
93 
94  // Always compose onto a new canvas so output consistently includes title
95  // (even when there's only one chart).
96  const layout = window.CHART_LAYOUT || 'vertical';
97  const PR = 2;
98  const PAD = 24 * PR;
99 
100  let canvasW, canvasH;
101  const cols = layout === 'grid' ? Math.min(2, images.length) : 1;
102  const rows = Math.ceil(images.length / cols);
103 
104  // Reserve explicit title area so both button-save and one-click screenshot are equivalent
105  const title = document.querySelector('h1')?.textContent || document.title || 'Chart';
106  const subtitle = document.querySelector('.subtitle')?.textContent || '';
107  const titleHeight = PAD * 2.2;
108 
109  if (layout === 'grid') {
110    canvasW = (images[0].width * PR * cols) + PAD * (cols + 1);
111    canvasH = titleHeight + (images[0].height * PR * rows) + PAD * (rows + 1);
112  } else {
113    canvasW = Math.max(...images.map(i => i.width)) * PR + PAD * 2;
114    canvasH = titleHeight + images.reduce((s, i) => s + i.height * PR, 0) + PAD * (images.length + 1);
115  }
116 
117  const canvas = document.createElement('canvas');
118  canvas.width = canvasW;
119  canvas.height = canvasH;
120  const ctx = canvas.getContext('2d');
121  ctx.fillStyle = '#0f1117';
122  ctx.fillRect(0, 0, canvasW, canvasH);
123 
124  ctx.fillStyle = '#f0f2f5';
125  ctx.font = `bold ${28}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
126  ctx.fillText(title, PAD, PAD * 1.1);
127  if (subtitle) {
128    ctx.fillStyle = '#9aa0b4';
129    ctx.font = `normal ${16 * PR / 2}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
130    ctx.fillText(subtitle, PAD, PAD * 1.7);
131  }
132 
133  const loadImg = (dataUrl) => new Promise((resolve, reject) => {
134    const img = new Image();
135    img.onload = () => resolve(img);
136    img.onerror = reject;
137    img.src = dataUrl;
138  });
139 
140  const imgs = await Promise.all(images.map(i => loadImg(i.dataUrl)));
141 
142  for (let idx = 0; idx < imgs.length; idx++) {
143    const img = imgs[idx];
144    const w = images[idx].width * PR;
145    const h = images[idx].height * PR;
146    let x, y;
147 
148    if (layout === 'grid') {
149      const col = idx % cols;
150      const row = Math.floor(idx / cols);
151      x = PAD + col * (w + PAD);
152      y = titleHeight + PAD + row * (h + PAD);
153    } else {
154      x = PAD;
155      y = titleHeight + images.slice(0, idx).reduce((s, i) => s + i.height * PR + PAD, 0);
156    }
157    ctx.drawImage(img, x, y, w, h);
158  }
159 
160  return canvas.toDataURL('image/png');
161}
162 
163/* ── Unified export helpers (single pipeline) ───────────── */
164async function exportMergedPNG() {
165  const dataUrl = await mergeChartsToDataURL();
166  const blob = await (await fetch(dataUrl)).blob();
167  return { dataUrl, blob };
168}
169 
170async function blobToDataURL(blob) {
171  return await new Promise((resolve, reject) => {
172    const reader = new FileReader();
173    reader.onload = () => resolve(reader.result);
174    reader.onerror = reject;
175    reader.readAsDataURL(blob);
176  });
177}
178 
179/* ── Download PNG ───────────────────────────────────────── */
180async function downloadPNG(btn) {
181  btn = btn || event?.currentTarget;
182  const orig = btn?.textContent;
183  if (btn) { btn.textContent = '⏳...'; btn.disabled = true; }
184  try {
185    const { blob } = await exportMergedPNG();
186    const filename = (document.title || 'chart').replace(/[^a-zA-Z0-9\u4e00-\u9fff-_]/g, '_') + '_' +
187                     new Date().toISOString().slice(0,10) + '.png';
188 
189    const url = URL.createObjectURL(blob);
190    const a = document.createElement('a');
191    a.href = url;
192    a.download = filename;
193    a.rel = 'noopener';
194    document.body.appendChild(a);
195    a.click();
196    document.body.removeChild(a);
197 
198    if (window.self !== window.top) {
199      window.open(url, '_blank', 'noopener');
200    }
201 
202    setTimeout(() => URL.revokeObjectURL(url), 2000);
203 
204    if (btn) { btn.textContent = '✅'; btn.style.borderColor = '#34d399'; btn.style.color = '#34d399'; }
205    showToast('PNG ready (download/new tab)', 'success');
206    setTimeout(() => {
207      if (btn) { btn.textContent = orig; btn.disabled = false; btn.style.borderColor = ''; btn.style.color = ''; }
208    }, 2000);
209  } catch(e) {
210    console.error('[chart] download failed:', e);
211    if (btn) { btn.textContent = '❌'; btn.disabled = false; }
212    showToast('Export failed: ' + e.message, 'error');
213    setTimeout(() => { if (btn) { btn.textContent = orig; } }, 2000);
214  }
215}
216 
217/* ── Copy to Clipboard (same output as save/download) ───── */
218async function copyToClipboard(btn) {
219  btn = btn || event?.currentTarget;
220  const orig = btn?.textContent;
221  if (btn) { btn.textContent = '⏳...'; btn.disabled = true; }
222  try {
223    const { blob } = await exportMergedPNG();
224 
225    if (navigator.clipboard && typeof ClipboardItem !== 'undefined') {
226      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
227      if (btn) { btn.textContent = '✅'; btn.style.borderColor = '#34d399'; btn.style.color = '#34d399'; }
228      showToast('Image copied to clipboard ✓', 'success');
229    } else {
230      // Fallback still uses the exact same merged PNG bytes
231      const url = URL.createObjectURL(blob);
232      window.open(url, '_blank', 'noopener');
233      setTimeout(() => URL.revokeObjectURL(url), 3000);
234      showToast('Clipboard N/A — opened same exported image in new tab', 'info');
235    }
236  } catch(e) {
237    console.warn('[chart] clipboard failed, fallback to download:', e.message);
238    try {
239      const { blob } = await exportMergedPNG();
240      const filename = (document.title || 'chart').replace(/[^a-zA-Z0-9\u4e00-\u9fff-_]/g, '_') + '_'+
241                       new Date().toISOString().slice(0,10) + '.png';
242      const url = URL.createObjectURL(blob);
243      const a = document.createElement('a');
244      a.href = url; a.download = filename;
245      document.body.appendChild(a); a.click(); document.body.removeChild(a);
246      setTimeout(() => URL.revokeObjectURL(url), 2000);
247      showToast('Clipboard N/A — downloaded same exported image', 'info');
248    } catch(e2) {
249      showToast('Export failed: ' + e2.message, 'error');
250    }
251  } finally {
252    setTimeout(() => {
253      if (btn) { btn.textContent = orig; btn.disabled = false; btn.style.borderColor = ''; btn.style.color = ''; }
254    }, 2000);
255  }
256}
257 
258/* ── Save to Project ────────────────────────────────────── */
259async function saveToProject(btn) {
260  btn = btn || event?.currentTarget;
261  const orig = btn?.textContent;
262  if (btn) { btn.textContent = '⏳ Saving...'; btn.disabled = true; }
263  try {
264    const project = getCurrentProjectPath();
265    if (!project) throw new Error('Cannot detect project folder from URL');
266 
267    const { blob } = await exportMergedPNG();
268    const dataUrl = await blobToDataURL(blob);
269    const filename = 'screenshot.png';
270 
271    const resp = await fetch(apiUrl('save-chart'), {
272      method: 'POST',
273      headers: { 'Content-Type': 'application/json' },
274      body: JSON.stringify({ dataUrl, filename, project })
275    });
276 
277    if (!resp.ok) throw new Error(`Server returned ${resp.status}`);
278    const result = await resp.json();
279 
280    if (btn) { btn.textContent = '✅ Saved!'; btn.style.borderColor = '#34d399'; btn.style.color = '#34d399'; }
281    showToast(`Saved: ${result.url}`, 'success');
282  } catch(e) {
283    console.warn('[chart] saveToProject failed:', e.message);
284    showToast('Save API not available — downloading PNG...', 'info');
285    await downloadPNG(null);
286    if (btn) { btn.textContent = '📥 Downloaded'; }
287  } finally {
288    setTimeout(() => {
289      if (btn) { btn.textContent = orig; btn.disabled = false; btn.style.borderColor = ''; btn.style.color = ''; }
290    }, 3000);
291  }
292}
293 
294/* ── Backward-compat aliases ────────────────────────────── */
295window.saveToWorkspace = saveToProject;
296window.savePage = function(btn) {
297  showToast('savePage removed in project-based mode', 'info');
298};
299 
300/* ── Auto-resize all ECharts on window resize ───────────── */
301window.addEventListener('resize', () => {
302  if (!window.echarts) return;
303  getAllChartInstances().forEach(inst => {
304    try { inst.resize(); } catch(e) {}
305  });
306});
307