/* ============================================================
   雲端設計上傳檢視 — 預覽／下載／Registry ID
   ============================================================ */

const UPLOAD_TYPE_LABELS = {
  upload_model: '模型檔',
  upload_texture: '貼圖',
  upload_pack: '資源包／壓縮檔',
  upload_audio: '音效',
  upload_other: '其他檔案',
};

function formatBytes(n) {
  const v = Number(n) || 0;
  if (v < 1024) return `${v} B`;
  if (v < 1024 * 1024) return `${(v / 1024).toFixed(1)} KB`;
  return `${(v / (1024 * 1024)).toFixed(2)} MB`;
}

function DesignAssetView({ project, touchMode }) {
  const upload = AppState.upload || {};
  const [previewUrl, setPreviewUrl] = React.useState(null);
  const [textPreview, setTextPreview] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const isImage = String(upload.mime || '').startsWith('image/');
  const isTextish =
    upload.ext === 'bbmodel' ||
    upload.ext === 'json' ||
    String(upload.mime || '').includes('json') ||
    String(upload.mime || '').startsWith('text/');

  React.useEffect(() => {
    let revoked = null;
    let cancelled = false;
    setPreviewUrl(null);
    setTextPreview(null);
    if (!project?.id) return undefined;

    (async () => {
      try {
        const res = await fetch('/api/design/' + encodeURIComponent(project.id) + '/file', {
          credentials: 'same-origin',
        });
        if (!res.ok || cancelled) return;
        const blob = await res.blob();
        if (cancelled) return;
        if (isImage) {
          const url = URL.createObjectURL(blob);
          revoked = url;
          setPreviewUrl(url);
        } else if (isTextish && blob.size < 400 * 1024) {
          const text = await blob.text();
          if (!cancelled) setTextPreview(text.slice(0, 12000));
        }
      } catch {
        /* ignore preview errors */
      }
    })();

    return () => {
      cancelled = true;
      if (revoked) URL.revokeObjectURL(revoked);
    };
  }, [project?.id, isImage, isTextish]);

  const download = async () => {
    if (!project?.id) return;
    setBusy(true);
    try {
      const res = await fetch('/api/design/' + encodeURIComponent(project.id) + '/file', {
        credentials: 'same-origin',
      });
      if (!res.ok) throw new Error('下載失敗');
      const blob = await res.blob();
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = upload.filename || (project.name + '.' + (upload.ext || 'bin'));
      a.click();
      setTimeout(() => URL.revokeObjectURL(a.href), 2000);
      showToast('已下載', 'success');
    } catch (err) {
      showToast(err.message || '下載失敗', 'error');
    } finally {
      setBusy(false);
    }
  };

  const copyRegistry = async () => {
    const id = upload.registryId || ('cloud.design.' + project.id);
    try {
      await navigator.clipboard.writeText(id);
      showToast('已複製 Registry ID', 'success');
    } catch {
      showToast(id, 'info');
    }
  };

  return React.createElement('div', { className: 'design-asset-view' + (touchMode ? ' touch-mode' : '') },
    React.createElement('div', { className: 'design-asset-view__panel' },
      React.createElement('h2', { className: 'design-asset-view__title' }, project?.name || '雲端設計'),
      React.createElement('p', { className: 'design-asset-view__meta' },
        `${UPLOAD_TYPE_LABELS[project?.type] || project?.type || '上傳'} · ${upload.filename || '—'} · ${formatBytes(upload.size)}`,
      ),
      React.createElement('div', { className: 'design-asset-view__row' },
        React.createElement('span', { className: 'design-asset-view__label' }, 'Registry ID'),
        React.createElement('code', { className: 'design-asset-view__code' },
          upload.registryId || ('cloud.design.' + (project?.id || '')),
        ),
        React.createElement('button', { className: 'btn btn--secondary', onClick: copyRegistry }, '複製'),
      ),
      React.createElement('div', { className: 'design-asset-view__row' },
        React.createElement('span', { className: 'design-asset-view__label' }, '建議目錄'),
        React.createElement('span', null, upload.suggestedBucket || 'other'),
      ),
      React.createElement('div', { className: 'design-asset-view__actions' },
        React.createElement('button', {
          className: 'btn btn--primary',
          disabled: busy,
          onClick: download,
        }, busy ? '下載中…' : '下載原始檔'),
        React.createElement('button', {
          className: 'btn btn--secondary',
          onClick: () => window.exportToCloudLibrary && window.exportToCloudLibrary(),
        }, '保持在雲端檔案庫'),
      ),
      isImage && previewUrl && React.createElement('div', { className: 'design-asset-view__preview' },
        React.createElement('img', { src: previewUrl, alt: upload.filename || project?.name || '' }),
      ),
      textPreview && React.createElement('pre', { className: 'design-asset-view__text' }, textPreview),
      !isImage && !textPreview && React.createElement('p', { className: 'design-asset-view__hint' },
        '此類型不支援內嵌預覽，請下載後在本機開啟。',
      ),
    ),
  );
}