/**
 * R2 Storage Manager v2.3 — Text Editor + Create File
 * Owner: @kopikapal1
 */

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const path = url.pathname;

    // Route: Public Folder (NO AUTH)
    if (path.startsWith('/pub/')) {
      return handlePublicFolder(request, env, path);
    }

    // Route: Shared/Public Links (NO AUTH)
    if (path.startsWith('/s/')) {
      return handleSharedLink(request, env, path);
    }

    // Route: API Endpoints
    if (path.startsWith('/api/')) {
      return handleApiRequest(request, env, path);
    }

    // Route: Authentication Pages
    if (path === '/login') {
      if (request.method === 'POST') return handleLogin(request, env);
      return new Response(renderLoginHTML(), { headers: { 'Content-Type': 'text/html' } });
    }
    if (path === '/logout') {
      return new Response(null, {
        status: 302,
        headers: { 'Location': '/login', 'Set-Cookie': 'auth_token=; Max-Age=0; Path=/' }
      });
    }

    // Route: Main Application (Protected)
    const authCheck = await verifySession(request, env);
    if (!authCheck.valid) {
      return new Response(null, { status: 302, headers: { 'Location': '/login' } });
    }

    if (path === '/' || path === '/app') {
      return new Response(renderAppHTML(), { headers: { 'Content-Type': 'text/html' } });
    }

    return new Response('Not Found', { status: 404 });
  }
};

// ============================================
// 🔥 PUBLIC FOLDER HANDLER (NO AUTH)
// ============================================
async function handlePublicFolder(request, env, path) {
  const pathParts = path.replace('/pub/', '').split('/');
  const token = pathParts[0];
  const subPath = '/' + pathParts.slice(1).join('/');
  
  if (!token) {
    return new Response(renderShareErrorHTML('Link tidak valid.'), { 
      headers: { 'Content-Type': 'text/html' } 
    });
  }
  
  const shareObj = await env.MAIN_BUCKET.get(`__shares__/${token}`);
  if (!shareObj) {
    return new Response(renderShareErrorHTML('Link tidak valid atau sudah kadaluarsa.'), { 
      headers: { 'Content-Type': 'text/html' } 
    });
  }

  try {
    const shareText = await shareObj.text();
    const share = JSON.parse(shareText);
    
    if (share.expiresAt && Date.now() > share.expiresAt) {
      return new Response(renderShareErrorHTML('Link sudah kadaluarsa.'), { 
        headers: { 'Content-Type': 'text/html' } 
      });
    }

    share.views = (share.views || 0) + 1;
    await env.MAIN_BUCKET.put(`__shares__/${token}`, JSON.stringify(share));

    const folderPrefix = share.key.endsWith('/') ? share.key : share.key + '/';
    const fullPath = subPath === '/' ? folderPrefix : folderPrefix + subPath.replace(/^\//, '');
    
    const lastPart = pathParts[pathParts.length - 1];
    const isFile = lastPart && lastPart.includes('.');
    
    if (isFile) {
      const fileKey = folderPrefix + pathParts.slice(1).join('/');
      const object = await env.MAIN_BUCKET.get(fileKey);
      
      if (object) {
        const headers = new Headers();
        object.writeHttpMetadata(headers);
        const filename = fileKey.split('/').pop();
        const ext = filename.split('.').pop().toLowerCase();
        
        if (['mp4', 'webm', 'mp3', 'wav', 'ogg', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf'].includes(ext)) {
          headers.set('Content-Disposition', `inline; filename="${filename}"`);
        } else {
          headers.set('Content-Disposition', `attachment; filename="${filename}"`);
        }
        
        let options = {};
        const rangeHeader = request.headers.get('Range');
        if (rangeHeader) {
          const match = rangeHeader.match(/bytes=(\d+)-(\d*)/);
          if (match) {
            options.range = { offset: parseInt(match[1]), length: match[2] ? parseInt(match[2]) - parseInt(match[1]) + 1 : undefined };
          }
        }
        
        const streamObj = await env.MAIN_BUCKET.get(fileKey, options);
        if (streamObj.range) {
          headers.set('Content-Range', `bytes ${streamObj.range.offset}-${streamObj.range.offset + streamObj.range.length - 1}/${object.size}`);
          return new Response(streamObj.body, { status: 206, headers });
        }
        return new Response(streamObj.body, { headers });
      }
    }

    const list = await env.MAIN_BUCKET.list({ prefix: fullPath, delimiter: '/' });
    
    const files = list.objects
      .filter(obj => !obj.key.startsWith('__shares__/'))
      .map(obj => {
        let name = obj.key.substring(fullPath.length);
        if (name.startsWith('/')) name = name.substring(1);
        return { key: obj.key, name: name, size: obj.size, uploaded: obj.uploaded, type: 'file' };
      })
      .filter(f => f.name && !f.name.includes('/') && f.name !== '.keep');

    const folders = (list.delimitedPrefixes || [])
      .filter(p => !p.startsWith('__shares__/'))
      .map(p => {
        let name = p.substring(fullPath.length);
        if (name.endsWith('/')) name = name.slice(0, -1);
        if (name.startsWith('/')) name = name.substring(1);
        return { key: p, name: name, type: 'folder' };
      })
      .filter(f => f.name && f.name !== '.keep');

    const folderName = share.folderName || share.key.split('/').filter(Boolean).pop() || 'Shared Folder';
    
    return new Response(renderPublicFolderHTML(token, folderName, subPath, files, folders, share), { 
      headers: { 'Content-Type': 'text/html' } 
    });

  } catch (err) {
    return new Response(renderShareErrorHTML('Gagal memproses link: ' + err.message), { 
      headers: { 'Content-Type': 'text/html' } 
    });
  }
}

// ============================================
// SHARED LINK HANDLER (NO AUTH)
// ============================================
async function handleSharedLink(request, env, path) {
  const token = path.replace('/s/', '').split('/')[0];
  
  const shareObj = await env.MAIN_BUCKET.get(`__shares__/${token}`);
  if (!shareObj) {
    return new Response(renderShareErrorHTML('Link tidak valid atau sudah kadaluarsa.'), { 
      headers: { 'Content-Type': 'text/html' } 
    });
  }

  try {
    const shareText = await shareObj.text();
    const share = JSON.parse(shareText);
    
    if (share.expiresAt && Date.now() > share.expiresAt) {
      return new Response(renderShareErrorHTML('Link sudah kadaluarsa.'), { 
        headers: { 'Content-Type': 'text/html' } 
      });
    }

    if (share.type === 'folder') {
      return new Response(null, {
        status: 302,
        headers: { 'Location': '/pub/' + token + '/' }
      });
    }

    share.views = (share.views || 0) + 1;
    await env.MAIN_BUCKET.put(`__shares__/${token}`, JSON.stringify(share));

    const object = await env.MAIN_BUCKET.get(share.key);
    if (!object) {
      return new Response(renderShareErrorHTML('File tidak ditemukan.'), { 
        headers: { 'Content-Type': 'text/html' } 
      });
    }

    if (request.method === 'GET') {
      return new Response(renderSharePageHTML(share, object), { 
        headers: { 'Content-Type': 'text/html' } 
      });
    }

    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('etag', object.httpEtag);
    
    const filename = share.key.split('/').pop();
    const ext = filename.split('.').pop().toLowerCase();
    
    if (['mp4', 'webm', 'mp3', 'wav', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf'].includes(ext)) {
      headers.set('Content-Disposition', `inline; filename="${filename}"`);
    } else {
      headers.set('Content-Disposition', `attachment; filename="${filename}"`);
    }

    let options = {};
    const rangeHeader = request.headers.get('Range');
    if (rangeHeader) {
      const match = rangeHeader.match(/bytes=(\d+)-(\d*)/);
      if (match) {
        options.range = { offset: parseInt(match[1]), length: match[2] ? parseInt(match[2]) - parseInt(match[1]) + 1 : undefined };
      }
    }

    const streamObject = await env.MAIN_BUCKET.get(share.key, options);
    
    if (streamObject.range) {
      headers.set('Content-Range', `bytes ${streamObject.range.offset}-${streamObject.range.offset + streamObject.range.length - 1}/${object.size}`);
      return new Response(streamObject.body, { status: 206, headers });
    }

    return new Response(streamObject.body, { headers });
  } catch (err) {
    return new Response(renderShareErrorHTML('Gagal memproses link.'), { 
      headers: { 'Content-Type': 'text/html' } 
    });
  }
}

// ============================================
// API HANDLERS
// ============================================
async function handleApiRequest(req, env, path) {
  const auth = await verifySession(req, env);
  if (!auth.valid) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 });

  const method = req.method;
  const url = new URL(req.url);

  try {
    switch (true) {
      case path === '/api/files' && method === 'GET':
        return await apiListFiles(req, env);
      case path === '/api/upload' && method === 'POST':
        return await apiUploadFile(req, env);
      case path === '/api/save-file' && method === 'POST':
        return await apiSaveTextFile(req, env);
      case path === '/api/read-file' && method === 'GET':
        return await apiReadTextFile(req, env, url);
      case path === '/api/delete' && method === 'DELETE':
        return await apiDeleteFile(req, env);
      case path === '/api/stats' && method === 'GET':
        return await apiGetStats(env);
      case path === '/api/download' && method === 'GET':
        return await apiDownloadFile(req, env, url);
      case path === '/api/stream' && method === 'GET':
        return await apiStreamFile(req, env, url);
      case path === '/api/share/create' && method === 'POST':
        return await apiCreateShareLink(req, env);
      case path === '/api/share/list' && method === 'GET':
        return await apiListShareLinks(env);
      case path === '/api/share/delete' && method === 'DELETE':
        return await apiDeleteShareLink(req, env);
      default:
        return new Response(JSON.stringify({ error: 'Endpoint not found' }), { status: 404 });
    }
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}

async function apiListFiles(req, env) {
  const url = new URL(req.url);
  const prefix = url.searchParams.get('prefix') || '';
  const list = await env.MAIN_BUCKET.list({ prefix, delimiter: '/' });
  
  const files = list.objects
    .filter(obj => !obj.key.startsWith('__shares__/'))
    .map(obj => ({ key: obj.key, size: obj.size, uploaded: obj.uploaded, type: 'file' }));

  const folders = (list.delimitedPrefixes || [])
    .filter(p => !p.startsWith('__shares__/'))
    .map(p => ({ key: p, type: 'folder' }));

  return new Response(JSON.stringify({ data: [...folders, ...files] }), { 
    headers: { 'Content-Type': 'application/json' } 
  });
}

async function apiUploadFile(req, env) {
  const formData = await req.formData();
  const file = formData.get('file');
  let path = formData.get('path') || '';
  if (!file) return new Response(JSON.stringify({ error: 'No file' }), { status: 400 });
  if (path && !path.endsWith('/')) path += '/';
  const key = path ? `${path}${file.name}` : file.name;
  await env.MAIN_BUCKET.put(key, file.stream(), { httpMetadata: { contentType: file.type || 'application/octet-stream' } });
  return new Response(JSON.stringify({ success: true, key }));
}

// 🔥 SAVE TEXT FILE (CREATE/EDIT)
async function apiSaveTextFile(req, env) {
  const body = await req.json();
  const { path = '', filename, content, contentType = 'text/plain' } = body;
  
  if (!filename) return new Response(JSON.stringify({ error: 'Filename required' }), { status: 400 });
  
  let fullPath = path || '';
  if (fullPath && !fullPath.endsWith('/')) fullPath += '/';
  const key = fullPath + filename;
  
  const blob = new Blob([content || ''], { type: contentType });
  await env.MAIN_BUCKET.put(key, blob.stream(), { httpMetadata: { contentType } });
  
  return new Response(JSON.stringify({ success: true, key }));
}

// 🔥 READ TEXT FILE
async function apiReadTextFile(req, env, url) {
  const key = url.searchParams.get('key');
  if (!key) return new Response(JSON.stringify({ error: 'No key' }), { status: 400 });
  
  const object = await env.MAIN_BUCKET.get(key);
  if (!object) return new Response(JSON.stringify({ error: 'Not found' }), { status: 404 });
  
  const text = await object.text();
  return new Response(JSON.stringify({ 
    success: true, 
    key, 
    content: text,
    contentType: object.httpMetadata?.contentType || 'text/plain',
    size: object.size
  }), { headers: { 'Content-Type': 'application/json' } });
}

async function apiDeleteFile(req, env) {
  const body = await req.json();
  if (!body.key) return new Response(JSON.stringify({ error: 'No key' }), { status: 400 });
  if (body.key.endsWith('/')) {
    const list = await env.MAIN_BUCKET.list({ prefix: body.key });
    for (const obj of list.objects) await env.MAIN_BUCKET.delete(obj.key);
  } else {
    await env.MAIN_BUCKET.delete(body.key);
  }
  const shares = await listAllShares(env);
  for (const share of shares) {
    if (share.key === body.key || share.key.startsWith(body.key)) {
      await env.MAIN_BUCKET.delete(`__shares__/${share.token}`);
    }
  }
  return new Response(JSON.stringify({ success: true }));
}

async function apiDownloadFile(req, env, url) {
  const key = url.searchParams.get('key');
  if (!key || key.endsWith('/')) return new Response('Invalid key', { status: 400 });
  const object = await env.MAIN_BUCKET.get(key);
  if (!object) return new Response('Not found', { status: 404 });
  const headers = new Headers();
  object.writeHttpMetadata(headers);
  headers.set('etag', object.httpEtag);
  headers.set('Content-Disposition', `attachment; filename="${key.split('/').pop()}"`);
  return new Response(object.body, { headers });
}

async function apiStreamFile(req, env, url) {
  const key = url.searchParams.get('key');
  if (!key) return new Response('Missing key', { status: 400 });
  let options = {};
  const rangeHeader = req.headers.get('Range');
  if (rangeHeader) {
    const match = rangeHeader.match(/bytes=(\d+)-(\d*)/);
    if (match) options.range = { offset: parseInt(match[1]), length: match[2] ? parseInt(match[2]) - parseInt(match[1]) + 1 : undefined };
  }
  const object = await env.MAIN_BUCKET.get(key, options);
  if (!object) return new Response('Not found', { status: 404 });
  const headers = new Headers();
  object.writeHttpMetadata(headers);
  headers.set('etag', object.httpEtag);
  headers.set('Accept-Ranges', 'bytes');
  if (object.range) {
    headers.set('Content-Range', `bytes ${object.range.offset}-${object.range.offset + object.range.length - 1}/${object.size}`);
    return new Response(object.body, { status: 206, headers });
  }
  return new Response(object.body, { headers });
}

async function apiGetStats(env) {
  const list = await env.MAIN_BUCKET.list();
  let totalSize = 0, totalFiles = 0;
  list.objects.forEach(obj => { if (!obj.key.startsWith('__shares__/')) { totalSize += obj.size; totalFiles++; } });
  const shares = await listAllShares(env);
  return new Response(JSON.stringify({ totalFiles, totalSize, totalShares: shares.length, folderShares: shares.filter(s => s.type === 'folder').length, fileShares: shares.filter(s => s.type === 'file').length }), { headers: { 'Content-Type': 'application/json' } });
}

async function generateToken() {
  const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let token = '';
  const bytes = crypto.getRandomValues(new Uint8Array(12));
  for (let i = 0; i < 12; i++) token += chars[bytes[i] % chars.length];
  return token;
}

async function apiCreateShareLink(req, env) {
  const body = await req.json();
  const { key, expiresInHours = 0, type = 'file' } = body;
  if (!key) return new Response(JSON.stringify({ error: 'No key' }), { status: 400 });
  const token = await generateToken();
  const now = Date.now();
  const shareData = { token, key, type, filename: key.split('/').filter(Boolean).pop() || key, folderName: type === 'folder' ? (key.split('/').filter(Boolean).pop() || 'Root') : null, size: 0, contentType: 'application/octet-stream', createdAt: now, expiresAt: expiresInHours > 0 ? now + (expiresInHours * 3600000) : null, views: 0 };
  if (type === 'file') {
    const object = await env.MAIN_BUCKET.get(key);
    if (!object) return new Response(JSON.stringify({ error: 'File not found' }), { status: 404 });
    shareData.size = object.size;
    shareData.contentType = object.httpMetadata?.contentType || 'application/octet-stream';
  }
  await env.MAIN_BUCKET.put(`__shares__/${token}`, JSON.stringify(shareData));
  const basePath = type === 'folder' ? '/pub/' : '/s/';
  const shareUrl = basePath + token + (type === 'folder' ? '/' : '');
  return new Response(JSON.stringify({ success: true, shareUrl, token, type, expiresAt: shareData.expiresAt ? new Date(shareData.expiresAt).toISOString() : null }), { headers: { 'Content-Type': 'application/json' } });
}

async function listAllShares(env) {
  const list = await env.MAIN_BUCKET.list({ prefix: '__shares__/' });
  const shares = [];
  for (const obj of list.objects) {
    try { const data = await env.MAIN_BUCKET.get(obj.key); if (data) shares.push(JSON.parse(await data.text())); } catch (e) {}
  }
  return shares.sort((a, b) => b.createdAt - a.createdAt);
}

async function apiListShareLinks(env) {
  const shares = await listAllShares(env);
  const result = shares.map(s => ({ token: s.token, key: s.key, type: s.type || 'file', filename: s.filename, folderName: s.folderName, size: s.size, views: s.views || 0, createdAt: new Date(s.createdAt).toISOString(), expiresAt: s.expiresAt ? new Date(s.expiresAt).toISOString() : null, expired: s.expiresAt ? Date.now() > s.expiresAt : false, shareUrl: (s.type === 'folder' ? '/pub/' : '/s/') + s.token + (s.type === 'folder' ? '/' : '') }));
  return new Response(JSON.stringify({ data: result }), { headers: { 'Content-Type': 'application/json' } });
}

async function apiDeleteShareLink(req, env) {
  const body = await req.json();
  if (!body.token) return new Response(JSON.stringify({ error: 'No token' }), { status: 400 });
  await env.MAIN_BUCKET.delete(`__shares__/${body.token}`);
  return new Response(JSON.stringify({ success: true }));
}

async function handleLogin(req, env) {
  const formData = await req.formData();
  const user = formData.get('username'), pass = formData.get('password');
  if (user === env.ADMIN_USER && pass === env.ADMIN_PASS) {
    const token = btoa(JSON.stringify({ user, exp: Date.now() + 86400000 })) + ".sig";
    return new Response(null, { status: 302, headers: { 'Location': '/', 'Set-Cookie': `auth_token=${token}; HttpOnly; Secure; Path=/; SameSite=Strict` } });
  }
  return new Response(renderLoginHTML('Invalid credentials'), { status: 401, headers: { 'Content-Type': 'text/html' } });
}

async function verifySession(req, env) {
  const cookie = req.headers.get('Cookie');
  return { valid: !!(cookie && cookie.includes('auth_token=')) };
}

function formatSizeBytes(bytes) {
  if (!bytes || bytes === 0) return '0 B';
  const k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function getFileEmoji(ext) {
  const map = { mp4:'🎬',webm:'🎬',mkv:'🎬',mp3:'🎵',wav:'🎵',ogg:'🎵',flac:'🎵',jpg:'🖼',jpeg:'🖼',png:'🖼',gif:'🖼',webp:'🖼',svg:'🖼',pdf:'📄',zip:'📦',rar:'📦',txt:'📝',json:'📝',md:'📝',js:'💻',html:'💻',css:'💻',py:'💻',php:'💻' };
  return map[ext] || '📄';
}

// ============================================
// HTML RENDERERS
// ============================================
function renderLoginHTML(error = '') {
  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>R2 Manager - Login</title><style>body{background:#121212;color:#fff;font-family:system-ui;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.login-box{background:#1e1e1e;padding:2rem;border-radius:8px;width:100%;max-width:320px;box-shadow:0 4px 6px rgba(0,0,0,0.3)}input{width:100%;padding:10px;margin-bottom:1rem;background:#2d2d2d;border:1px solid #444;color:#fff;border-radius:4px;box-sizing:border-box}button{width:100%;padding:10px;background:#007bff;border:none;color:#fff;font-weight:bold;cursor:pointer;border-radius:4px}button:hover{background:#0056b3}.error{color:#ff4444;margin-bottom:1rem;font-size:.9em;text-align:center}</style></head><body><div class="login-box"><h2 style="text-align:center;margin-top:0">R2 Manager Login</h2>${error?'<div class="error">'+error+'</div>':''}<form method="POST" action="/login"><input type="text" name="username" placeholder="Username" required><input type="password" name="password" placeholder="Password" required><button type="submit">Login</button></form></div></body></html>`;
}

function renderShareErrorHTML(message) {
  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Error</title><style>body{background:#121212;color:#fff;font-family:system-ui;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.error-box{background:#1e1e1e;padding:3rem;border-radius:8px;text-align:center;max-width:400px}.error-box h2{color:#ff4444}.error-box p{color:#aaa;margin:10px 0 20px}</style></head><body><div class="error-box"><h2>⚠️ Link Error</h2><p>${message}</p><p style="font-size:.8em;color:#666">R2 Storage Manager · @kopikapal1</p></div></body></html>`;
}

function renderSharePageHTML(share, object) {
  const filename = share.filename || share.key.split('/').pop();
  const sizeStr = formatSizeBytes(share.size);
  const ext = filename.split('.').pop()?.toLowerCase() || '';
  const isMedia = ['mp4','webm','mp3','wav','ogg','jpg','jpeg','png','gif','webp','svg','pdf'].includes(ext);
  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${filename}</title><style>body{background:#121212;color:#fff;font-family:system-ui;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px}.share-card{background:#1e1e1e;border-radius:12px;padding:2rem;max-width:600px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.5)}.file-icon{font-size:4em;margin-bottom:10px}.filename{font-size:1.3em;font-weight:bold;margin:10px 0;word-break:break-all}.file-info{color:#aaa;font-size:.9em;margin:15px 0}.btn{display:inline-block;padding:12px 30px;border-radius:6px;text-decoration:none;font-weight:bold;margin:5px;transition:.2s;cursor:pointer;border:none;font-size:1em}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.preview-box{margin:20px 0;background:#000;border-radius:8px;overflow:hidden;max-height:400px}.preview-box video,.preview-box audio,.preview-box img{max-width:100%;max-height:400px}.footer{margin-top:20px;color:#666;font-size:.75em}</style></head><body><div class="share-card"><div class="file-icon">${getFileEmoji(ext)}</div><div class="filename">${filename}</div><div class="file-info">📦 ${sizeStr} | 📅 ${new Date(share.createdAt).toLocaleDateString('id-ID')}${share.expiresAt?' | ⏰ Exp: '+new Date(share.expiresAt).toLocaleString('id-ID'):''}</div>${isMedia?`<div class="preview-box">${['mp4','webm'].includes(ext)?'<video controls><source src="/s/'+share.token+'" type="video/'+ext+'"></video>':''}${['mp3','wav','ogg'].includes(ext)?'<audio controls><source src="/s/'+share.token+'"></audio>':''}${['jpg','jpeg','png','gif','webp','svg'].includes(ext)?'<img src="/s/'+share.token+'" alt="'+filename+'">':''}${ext==='pdf'?'<iframe src="/s/'+share.token+'" width="100%" height="400px"></iframe>':''}</div>`:''}<div><a href="/s/${share.token}" download="${filename}" class="btn btn-primary">📥 Download</a></div><div class="footer">R2 Storage Manager · @kopikapal1${share.views?' · 👁 '+share.views+' views':''}</div></div></body></html>`;
}

function renderPublicFolderHTML(token, folderName, currentPath, files, folders, share) {
  const sortedItems = [
    ...folders.map(f => ({ ...f, icon: '📁' })),
    ...files.map(f => ({ ...f, icon: getFileEmoji(f.name.split('.').pop()?.toLowerCase() || '') }))
  ];
  const parentPath = currentPath === '/' ? '/' : currentPath.split('/').slice(0, -2).join('/') + '/';
  const hasParent = currentPath !== '/';
  const breadcrumbParts = currentPath.split('/').filter(Boolean);
  
  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${folderName} - Public Folder</title>
<style>body{background:#121212;color:#fff;font-family:system-ui;margin:0;padding:20px}.container{max-width:900px;margin:0 auto}.header{background:#1e1e1e;border-radius:12px;padding:20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.header h2{margin:0;color:#ff0}.header .info{color:#aaa;font-size:.85em}.breadcrumb{margin:10px 0;color:#aaa;font-size:.9em}.breadcrumb a{color:#007bff;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.file-list{background:#1e1e1e;border-radius:12px;overflow:hidden}.file-item{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid #222;text-decoration:none;color:#fff;transition:.2s}.file-item:hover{background:#2a2a2a}.file-item:last-child{border-bottom:none}.file-icon{font-size:1.5em;margin-right:12px;width:30px;text-align:center}.file-name{flex:1;font-size:.95em}.file-size{color:#aaa;font-size:.85em;margin-left:15px}.file-date{color:#666;font-size:.8em;margin-left:15px}.empty{padding:40px;text-align:center;color:#666}.footer{text-align:center;color:#666;font-size:.75em;margin-top:20px}@media(max-width:600px){.file-date{display:none}}</style></head>
<body><div class="container">
<div class="header"><div><h2>📁 ${folderName}</h2><div class="info">Public Folder · ${share.views||0} views</div></div><div class="info">${files.length} files · ${folders.length} folders</div></div>
<div class="breadcrumb">📂 <a href="/pub/${token}/">/</a>${breadcrumbParts.map((p,i)=>' / <a href="/pub/'+token+'/'+breadcrumbParts.slice(0,i+1).join('/')+'/">'+p+'</a>').join('')}</div>
<div class="file-list">
${hasParent?`<a href="/pub/${token}${parentPath}" class="file-item"><span class="file-icon">⬆</span><span class="file-name">..</span></a>`:''}
${sortedItems.map(item=>{
  const itemPath = '/pub/' + token + (currentPath === '/' ? '/' : currentPath) + item.name + (item.type==='folder'?'/':'');
  return '<a href="'+itemPath+'" class="file-item"><span class="file-icon">'+item.icon+'</span><span class="file-name">'+item.name+'</span>'+(item.type==='file'?'<span class="file-size">'+formatSizeBytes(item.size||0)+'</span>':'')+'<span class="file-date">'+(item.uploaded?new Date(item.uploaded).toLocaleDateString('id-ID'):'')+'</span></a>';
}).join('')}
${sortedItems.length===0&&!hasParent?'<div class="empty">Folder is empty</div>':''}
</div>
<div class="footer">R2 Storage Manager · @kopikapal1</div>
</div></body></html>`;
}

function renderAppHTML() {
  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>R2 Manager v2.3</title>
<style>:root{--bg:#121212;--panel-bg:#1e1e1e;--text:#e0e0e0;--border:#333;--hover:#2a2a2a;--accent:#007bff;--editor-bg:#0a0a0a}body{margin:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}header{padding:10px 20px;background:#000;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.header-title{display:flex;align-items:center;gap:10px;font-weight:bold;font-size:1.1em}.stats{font-size:.85em;color:#aaa;text-align:center}.tab-nav{display:flex;gap:0}.tab-btn{padding:10px 20px;background:#252525;border:1px solid var(--border);border-bottom:none;color:#aaa;cursor:pointer;font-weight:bold;border-radius:6px 6px 0 0;margin-right:2px}.tab-btn.active{background:var(--panel-bg);color:var(--accent);border-bottom:2px solid var(--accent)}.tab-content{display:none;flex:1;overflow:hidden}.tab-content.active{display:flex;flex-direction:column}.main-container{display:flex;flex:1;overflow:hidden;width:100%;max-width:1200px;margin:0 auto}.pane{flex:1;display:flex;flex-direction:column;background:var(--panel-bg);overflow:hidden}.pane-header{padding:15px;background:#252525;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}.path-input{flex:1;background:#111;border:1px solid #444;color:#fff;padding:8px 12px;border-radius:4px;font-size:14px}.toolbar{padding:10px 15px;background:#1a1a1a;display:flex;gap:8px;border-bottom:1px solid var(--border);flex-wrap:wrap}.btn{background:#333;color:#fff;border:1px solid #555;padding:8px 12px;cursor:pointer;border-radius:4px;font-size:.9em;transition:.2s;white-space:nowrap;font-weight:bold}.btn:hover{background:#444}.btn.primary{background:var(--accent);border-color:var(--accent)}.btn.primary:hover{background:#0056b3}.btn.danger{background:#8b0000;border-color:red}.btn.success{background:#006400;border-color:#0f0}.btn.info{background:#8e44ad;border-color:#9b59b6}.btn.warn{background:#d4a017;border-color:#fc0;color:#000}.btn.purple{background:#7c3aed;border-color:#8b5cf6}.btn.green{background:#059669;border-color:#10b981}.btn.orange{background:#ea580c;border-color:#f97316}.file-list{flex:1;overflow-y:auto;padding:0;margin:0;list-style:none}.file-item{display:flex;padding:12px 15px;border-bottom:1px solid #222;cursor:pointer;user-select:none;align-items:center}.file-item:hover{background:var(--hover)}.file-item.selected{background:rgba(0,123,255,.2);border-left:4px solid var(--accent)}.file-name{flex:1;display:flex;align-items:center;gap:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.file-size{width:90px;text-align:right;font-size:.85em;color:#aaa}.file-date{width:100px;text-align:right;font-size:.85em;color:#aaa}.icon{width:20px;height:20px;display:inline-block;background:#555;border-radius:3px}.icon.folder{background:#f39c12;clip-path:polygon(0 0,40% 0,50% 20%,100% 20%,100% 100%,0 100%)}.icon.file{background:#3498db}.icon.video{background:#e74c3c}.icon.audio{background:#9b59b6}.icon.image{background:#2ecc71}#loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:#fff;font-weight:bold}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}@keyframes spin{to{transform:rotate(360deg)}}#preview-modal,#share-modal,#editor-modal{position:fixed;top:5%;left:5%;right:5%;bottom:5%;background:#1a1a1a;border:1px solid var(--border);border-radius:8px;z-index:2000;display:none;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.9)}.modal-header{padding:12px 15px;background:#000;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333;border-radius:8px 8px 0 0}#preview-content,#share-content{flex:1;overflow:auto;padding:20px;background:#0f0f0f}#preview-content video,#preview-content audio{max-width:100%;max-height:100%}#preview-content img{max-width:100%;max-height:100%;object-fit:contain}#preview-content textarea{width:100%;height:100%;background:#1e1e1e;color:#0fc;border:none;resize:none;font-family:'Courier New',monospace;padding:15px;box-sizing:border-box;outline:none}.share-link-box{background:#000;border:1px solid #0f0;padding:15px;border-radius:6px;margin:15px 0;word-break:break-all;font-family:monospace;color:#0f0;font-size:14px}.share-table{width:100%;border-collapse:collapse}.share-table th{background:#252525;padding:10px;text-align:left;font-size:.85em}.share-table td{padding:10px;border-bottom:1px solid #222;font-size:.9em}.copy-btn{cursor:pointer;color:var(--accent);text-decoration:underline}.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7em;font-weight:bold}.badge-folder{background:#f39c12;color:#000}.badge-file{background:#3498db;color:#fff}

/* 🔥 EDITOR STYLES */
.editor-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.editor-toolbar{display:flex;gap:6px;padding:10px;background:#111;border-bottom:1px solid #333;flex-wrap:wrap;align-items:center}.editor-filename{flex:1;min-width:150px;background:#000;border:1px solid #444;color:#0f0;padding:8px 12px;border-radius:4px;font-family:'Courier New',monospace;font-size:13px}.editor-filename:focus{outline:none;border-color:var(--accent)}.editor-textarea{flex:1;background:var(--editor-bg);color:#0f0;border:none;resize:none;padding:15px;font-family:'Courier New',monospace;font-size:14px;line-height:1.5;outline:none;tab-size:2}.editor-textarea:focus{background:#050505}.editor-status{display:flex;justify-content:space-between;padding:8px 15px;background:#111;border-top:1px solid #333;font-size:.75em;color:#aaa}.editor-select{background:#000;border:1px solid #444;color:#0f0;padding:8px 12px;border-radius:4px;font-family:'Courier New',monospace;font-size:12px;cursor:pointer}@media(max-width:768px){header{flex-direction:column;text-align:center}.file-date{display:none}#preview-modal,#share-modal,#editor-modal{top:0;left:0;right:0;bottom:0;border-radius:0;border:none}}</style></head>
<body>
<header><div class="header-title">💀 R2 Manager <span style="color:#f0f">⚡ v2.3</span></div><div class="stats" id="global-stats">Loading...</div><div><a href="/logout" style="color:#fff;text-decoration:none" class="btn danger">Logout</a></div></header>
<div class="tab-nav"><button class="tab-btn active" onclick="switchTab('files')">📁 Files</button><button class="tab-btn" onclick="switchTab('shares')">🔗 Shared Links</button></div>
<div class="tab-content active" id="tab-files"><div class="main-container"><div class="pane">
<div class="pane-header"><button class="btn" onclick="goUp()">⬆ Up</button><input type="text" class="path-input" id="current-path" value="/" readonly></div>
<div class="toolbar"><button class="btn primary" onclick="triggerUpload()">Upload</button><button class="btn green" onclick="createNewFile()">📝 New File</button><button class="btn orange" onclick="editSelectedFile()">✏️ Edit</button><button class="btn" onclick="createFolder()">New Folder</button><button class="btn info" onclick="previewSelected()">Preview</button><button class="btn success" onclick="downloadSelected()">Download</button><button class="btn warn" onclick="shareFile()">🔗 Share File</button><button class="btn purple" onclick="shareFolder()">📁 Share Folder</button><button class="btn danger" onclick="deleteSelected()">Delete</button></div>
<input type="file" id="file-upload" style="display:none" multiple onchange="handleUpload(event)">
<ul class="file-list" id="file-list"></ul>
</div></div></div>
<div class="tab-content" id="tab-shares"><div class="main-container"><div class="pane">
<div class="toolbar"><button class="btn primary" onclick="loadShares()">🔄 Refresh</button><button class="btn danger" onclick="deleteAllShares()">🗑 Delete All</button></div>
<div id="shares-list" style="flex:1;overflow:auto;padding:15px"></div>
</div></div></div>
<div id="loading-overlay"><div class="spinner"></div><div id="loading-text">Processing...</div></div>
<div id="preview-modal"><div class="modal-header"><span id="preview-title"></span><button class="btn danger" onclick="closePreview()">X</button></div><div id="preview-content"></div></div>
<div id="share-modal"><div class="modal-header"><span id="share-modal-title">🔗 Share</span><button class="btn danger" onclick="closeShareModal()">X</button></div><div id="share-content"></div></div>

<!-- 🔥 TEXT EDITOR MODAL -->
<div id="editor-modal">
<div class="modal-header"><span id="editor-title">📝 Text Editor</span><button class="btn danger" onclick="closeEditor()">X</button></div>
<div class="editor-container">
<div class="editor-toolbar">
<input type="text" class="editor-filename" id="editor-filename" placeholder="filename.txt" value="">
<select class="editor-select" id="editor-type" onchange="updateEditorMode()">
<option value="text/plain">.txt (Plain Text)</option>
<option value="text/html">.html</option>
<option value="text/css">.css</option>
<option value="application/javascript">.js</option>
<option value="application/json">.json</option>
<option value="text/markdown">.md (Markdown)</option>
<option value="application/xml">.xml</option>
<option value="text/csv">.csv</option>
<option value="text/x-python">.py</option>
<option value="text/x-php">.php</option>
</select>
<button class="btn success" onclick="saveEditorFile()">💾 Save</button>
<button class="btn primary" onclick="saveEditorFile(true)" style="font-size:.8em">💾 Save & Close</button>
</div>
<textarea class="editor-textarea" id="editor-textarea" placeholder="Tulis disini..." spellcheck="false"></textarea>
<div class="editor-status"><span id="editor-path">Path: /</span><span id="editor-size">Size: 0 B</span></div>
</div>
</div>

<script>
var state = { path: '', files: [], selected: new Set() };
var editorState = { key: '', isNew: true };

function formatSize(bytes) { if (!bytes || bytes === 0) return '0 B'; var k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB']; var i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }
function showLoading(show, text) { document.getElementById('loading-text').innerText = text || 'Processing...'; document.getElementById('loading-overlay').style.display = show ? 'flex' : 'none'; }
function getFileIconClass(filename) { var ext = filename.split('.').pop().toLowerCase(); if (['mp4','mkv','webm','avi','mov'].indexOf(ext) >= 0) return 'icon video'; if (['mp3','wav','ogg','flac'].indexOf(ext) >= 0) return 'icon audio'; if (['jpg','jpeg','png','gif','webp','svg'].indexOf(ext) >= 0) return 'icon image'; return 'icon file'; }

async function loadStats() {
    try { var res = await fetch('/api/stats'); var data = await res.json();
        var html = 'Files: <b>' + data.totalFiles + '</b> | Size: <b>' + formatSize(data.totalSize) + '</b>';
        if (data.totalShares) { html += ' | 🔗 Shares: <b>' + data.totalShares + '</b>'; if (data.folderShares) html += ' (📁' + data.folderShares + ' folders)'; }
        document.getElementById('global-stats').innerHTML = html;
    } catch (e) {}
}

async function loadDirectory(path) {
    showLoading(true);
    try { var res = await fetch('/api/files?prefix=' + encodeURIComponent(path || '')); var data = await res.json();
        var processed = data.data.map(function(item) { var name = item.key; if (path) name = name.substring(path.length); if (name.endsWith('/')) name = name.slice(0, -1); return { key: item.key, name: name, size: item.size, uploaded: item.uploaded, type: item.type }; }).filter(function(item) { return item.name.length > 0 && item.name.indexOf('/') < 0; });
        state.path = path || ''; state.files = processed; state.selected.clear(); renderList();
        document.getElementById('current-path').value = state.path ? '/' + state.path : '/';
    } catch (e) { alert('Error: ' + e.message); }
    showLoading(false);
}

function renderList() {
    var ul = document.getElementById('file-list'); ul.innerHTML = '';
    var sorted = state.files.slice().sort(function(a, b) { if (a.type !== b.type) return a.type === 'folder' ? -1 : 1; return a.name.localeCompare(b.name); });
    if (sorted.length === 0) { ul.innerHTML = '<li style="padding:20px;text-align:center;color:#666">Folder is empty</li>'; return; }
    sorted.forEach(function(file) {
        if (file.name === '.keep') return;
        var li = document.createElement('li'); li.className = 'file-item';
        if (state.selected.has(file.key)) li.classList.add('selected');
        var iconClass = file.type === 'folder' ? 'icon folder' : getFileIconClass(file.name);
        var sizeStr = file.type === 'file' ? formatSize(file.size) : '';
        var dateStr = ''; if (file.uploaded) { var d = new Date(file.uploaded); dateStr = (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear(); }
        li.innerHTML = '<div class="file-name" title="'+file.name+'"><span class="'+iconClass+'"></span> '+file.name+'</div><div class="file-size">'+sizeStr+'</div><div class="file-date">'+dateStr+'</div>';
        li.onclick = function(e) {
            if (e.ctrlKey || e.metaKey) { if (state.selected.has(file.key)) { state.selected.delete(file.key); li.classList.remove('selected'); } else { state.selected.add(file.key); li.classList.add('selected'); } }
            else { if (file.type === 'folder') { loadDirectory(file.key); } else { state.selected.clear(); state.selected.add(file.key); renderList(); } }
        };
        li.ondblclick = function() { if (file.type === 'folder') loadDirectory(file.key); else editFile(file.key); };
        ul.appendChild(li);
    });
}

function goUp() { if (!state.path) return; var parts = state.path.split('/'); parts.pop(); parts.pop(); loadDirectory(parts.length > 0 ? parts.join('/') + '/' : ''); }
function triggerUpload() { document.getElementById('file-upload').click(); }

async function handleUpload(event) {
    var files = event.target.files; if (!files.length) return;
    showLoading(true, 'Uploading '+files.length+' file(s)...');
    for (var i = 0; i < files.length; i++) { var fd = new FormData(); fd.append('file', files[i]); fd.append('path', state.path || ''); try { await fetch('/api/upload', { method: 'POST', body: fd }); } catch (e) {} }
    event.target.value = ''; await loadDirectory(state.path); loadStats();
}

// 🔥 CREATE NEW FILE
function createNewFile() {
    editorState = { key: '', isNew: true };
    document.getElementById('editor-title').innerText = '📝 Create New File';
    document.getElementById('editor-filename').value = '';
    document.getElementById('editor-textarea').value = '';
    document.getElementById('editor-type').value = 'text/plain';
    document.getElementById('editor-path').innerText = 'Path: /' + (state.path || '');
    document.getElementById('editor-size').innerText = 'Size: 0 B';
    document.getElementById('editor-modal').style.display = 'flex';
    document.getElementById('editor-filename').focus();
    updateEditorMode();
}

// 🔥 EDIT EXISTING FILE
async function editSelectedFile() {
    var sel = Array.from(state.selected);
    if (sel.length === 0) return alert('Select a text file first!');
    if (sel[0].endsWith('/')) return alert('Cannot edit folders!');
    editFile(sel[0]);
}

async function editFile(key) {
    var ext = key.split('.').pop().toLowerCase();
    var editable = ['txt','json','md','js','html','css','csv','py','php','xml','yml','yaml','ini','conf','sh','bat','log','env'];
    if (editable.indexOf(ext) < 0) {
        // Try to open anyway
        if (!confirm('File .'+ext+' mungkin bukan text. Tetap edit?')) return openPreview(key);
    }
    
    showLoading(true, 'Loading file...');
    try {
        var res = await fetch('/api/read-file?key=' + encodeURIComponent(key));
        var data = await res.json();
        if (data.success) {
            editorState = { key: key, isNew: false };
            document.getElementById('editor-title').innerText = '✏️ Edit: ' + key.split('/').pop();
            document.getElementById('editor-filename').value = key.split('/').pop();
            document.getElementById('editor-textarea').value = data.content || '';
            document.getElementById('editor-path').innerText = 'Path: /' + key;
            document.getElementById('editor-size').innerText = 'Size: ' + formatSize(data.size);
            
            // Set content type
            var ct = data.contentType || 'text/plain';
            var select = document.getElementById('editor-type');
            for (var i = 0; i < select.options.length; i++) {
                if (select.options[i].value === ct) { select.value = ct; break; }
            }
            
            document.getElementById('editor-modal').style.display = 'flex';
            updateEditorMode();
        } else { alert('Failed to read file'); }
    } catch (e) { alert('Error: ' + e.message); }
    showLoading(false);
}

// 🔥 SAVE EDITOR FILE
async function saveEditorFile(closeAfter) {
    var filename = document.getElementById('editor-filename').value.trim();
    if (!filename) return alert('Masukkan nama file!');
    
    var content = document.getElementById('editor-textarea').value;
    var contentType = document.getElementById('editor-type').value;
    
    // Auto-fix extension based on content type
    var typeMap = {
        'text/html': 'html', 'text/css': 'css', 'application/javascript': 'js',
        'application/json': 'json', 'text/markdown': 'md', 'application/xml': 'xml',
        'text/csv': 'csv', 'text/x-python': 'py', 'text/x-php': 'php'
    };
    var expectedExt = typeMap[contentType];
    if (expectedExt && !filename.endsWith('.' + expectedExt)) {
        if (confirm('Tambahkan .' + expectedExt + ' ke nama file?')) {
            filename += '.' + expectedExt;
            document.getElementById('editor-filename').value = filename;
        }
    }
    
    showLoading(true, 'Saving...');
    try {
        var res = await fetch('/api/save-file', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ path: state.path || '', filename: filename, content: content, contentType: contentType })
        });
        var data = await res.json();
        if (data.success) {
            document.getElementById('editor-path').innerText = 'Path: /' + data.key;
            document.getElementById('editor-size').innerText = 'Size: ' + formatSize(content.length);
            editorState.key = data.key;
            editorState.isNew = false;
            await loadDirectory(state.path);
            loadStats();
            if (closeAfter) closeEditor();
        } else { alert('Failed: ' + (data.error || 'Unknown')); }
    } catch (e) { alert('Error: ' + e.message); }
    showLoading(false);
}

function updateEditorMode() {
    var type = document.getElementById('editor-type').value;
    var textarea = document.getElementById('editor-textarea');
    // Keep simple - just change placeholder
    textarea.placeholder = 'Tulis ' + type.split('/')[1] + ' disini...';
}

function closeEditor() {
    document.getElementById('editor-modal').style.display = 'none';
}

async function downloadSelected() { var sel = Array.from(state.selected); if (!sel.length) return alert('Select files!'); for (var i = 0; i < sel.length; i++) { if (!sel[i].endsWith('/')) window.open('/api/download?key='+encodeURIComponent(sel[i]), '_blank'); } }
async function deleteSelected() {
    var sel = Array.from(state.selected); if (!sel.length) return alert('Select files/folders!'); if (!confirm('Delete '+sel.length+' items?')) return;
    showLoading(true, 'Deleting...');
    for (var i = 0; i < sel.length; i++) { try { await fetch('/api/delete', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: sel[i] }) }); } catch (e) {} }
    await loadDirectory(state.path); loadStats();
}
async function createFolder() { var name = prompt('Folder name:'); if (!name) return; showLoading(true); var fd = new FormData(); fd.append('file', new File([''], '.keep', { type: 'text/plain' })); fd.append('path', (state.path||'') + name); try { await fetch('/api/upload', { method: 'POST', body: fd }); await loadDirectory(state.path); } catch (e) { alert('Failed'); } showLoading(false); }
async function shareFile() { var sel = Array.from(state.selected); if (!sel.length) return alert('Select a file!'); if (sel[0].endsWith('/')) return alert('Use 📁 Share Folder for folders!'); createShareLink(sel[0], 'file'); }
async function shareFolder() { var sel = Array.from(state.selected); if (sel.length && sel[0].endsWith('/')) { createShareLink(sel[0], 'folder'); } else if (state.path) { createShareLink(state.path, 'folder'); } else { if (confirm('Share ROOT folder?')) { createShareLink('', 'folder'); } } }
async function createShareLink(key, type) {
    var modal = document.getElementById('share-modal'); var content = document.getElementById('share-content');
    var name = key.split('/').filter(Boolean).pop() || 'Root';
    document.getElementById('share-modal-title').innerText = type === 'folder' ? '📁 Share Folder: ' + name : '🔗 Share File: ' + name;
    modal.style.display = 'flex'; content.innerHTML = '<div class="spinner"></div><p style="text-align:center;color:#aaa">Creating share link...</p>';
    try {
        var res = await fetch('/api/share/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: key, type: type, expiresInHours: 0 }) });
        var data = await res.json();
        if (data.success) {
            var fullUrl = window.location.origin + data.shareUrl;
            content.innerHTML = '<h3>✅ ' + (type === 'folder' ? 'Folder' : 'File') + ' Shared!</h3><p style="color:#aaa">' + name + '</p><div class="share-link-box" id="share-url">' + fullUrl + '</div>' + (type === 'folder' ? '<p style="color:#ff0;font-size:.85em">📁 Folder publik!</p>' : '') + '<button class="btn primary" onclick="copyShareLink()">📋 Copy Link</button> <button class="btn success" onclick="window.open(\\'' + fullUrl + '\\',\\'_blank\\')">🔗 Open</button> <button class="btn danger" onclick="closeShareModal()">Close</button>';
        } else { content.innerHTML = '<p style="color:red">Failed: ' + (data.error || 'Unknown') + '</p>'; }
    } catch (e) { content.innerHTML = '<p style="color:red">Error</p>'; }
}
function previewSelected() { var sel = Array.from(state.selected); if (!sel.length) return alert('Select a file!'); if (sel[0].endsWith('/')) return alert('Cannot preview folder.'); openPreview(sel[0]); }
async function openPreview(key) {
    var ext = key.split('.').pop().toLowerCase(); var url = '/api/stream?key=' + encodeURIComponent(key);
    var modal = document.getElementById('preview-modal'); var content = document.getElementById('preview-content');
    document.getElementById('preview-title').innerText = key; content.innerHTML = '<div class="spinner"></div>'; modal.style.display = 'flex';
    if (['mp4','webm','ogg','mov'].indexOf(ext) >= 0) { content.innerHTML = '<video controls autoplay><source src="'+url+'" type="video/'+ext+'"></video>'; }
    else if (['mp3','wav','ogg','m4a'].indexOf(ext) >= 0) { content.innerHTML = '<audio controls autoplay><source src="'+url+'"></audio>'; }
    else if (['jpg','jpeg','png','gif','webp','svg'].indexOf(ext) >= 0) { content.innerHTML = '<img src="'+url+'" alt="preview">'; }
    else if (['txt','json','md','js','html','css','csv','py','php','xml'].indexOf(ext) >= 0) { try { var r = await fetch(url); content.innerHTML = '<textarea readonly spellcheck="false">'+(await r.text())+'</textarea>'; } catch(e) {} }
    else { content.innerHTML = '<div style="text-align:center;color:#ccc"><div style="font-size:3em">📄</div><p>No preview</p><a href="/api/download?key='+encodeURIComponent(key)+'" target="_blank" class="btn primary" style="text-decoration:none">Download</a></div>'; }
}
function closePreview() { document.getElementById('preview-modal').style.display = 'none'; document.getElementById('preview-content').innerHTML = ''; }
function closeShareModal() { document.getElementById('share-modal').style.display = 'none'; }
function copyShareLink() { var el = document.getElementById('share-url'); if (el) { navigator.clipboard.writeText(el.innerText).then(function() { alert('✅ Link copied!'); }); } }
function switchTab(tab) { document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); }); document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); }); document.getElementById('tab-'+tab).classList.add('active'); event.target.classList.add('active'); if (tab === 'shares') loadShares(); }
async function loadShares() {
    var container = document.getElementById('shares-list'); container.innerHTML = '<div class="spinner"></div>';
    try { var res = await fetch('/api/share/list'); var data = await res.json();
        if (!data.data || !data.data.length) { container.innerHTML = '<p style="text-align:center;color:#666;padding:40px">No shared links yet.</p>'; return; }
        var html = '<table class="share-table"><thead><tr><th>Type</th><th>Name</th><th>Size</th><th>Views</th><th>Created</th><th>Actions</th></tr></thead><tbody>';
        data.data.forEach(function(s) {
            var fullUrl = window.location.origin + s.shareUrl;
            var typeBadge = s.type === 'folder' ? '<span class="badge badge-folder">📁 Folder</span>' : '<span class="badge badge-file">📄 File</span>';
            html += '<tr><td>'+typeBadge+'</td><td><b>'+s.filename+'</b></td><td>'+formatSize(s.size)+'</td><td>'+(s.views||0)+'</td><td>'+new Date(s.createdAt).toLocaleDateString('id-ID')+'</td><td><span class="copy-btn" onclick="navigator.clipboard.writeText(\\''+fullUrl+'\\').then(function(){alert(\\'Copied!\\')})">📋 Copy</span> <span class="copy-btn" style="color:#f44" onclick="deleteShare(\\''+s.token+'\\')">🗑</span></td></tr>';
        });
        html += '</tbody></table>'; container.innerHTML = html;
    } catch (e) { container.innerHTML = '<p style="color:red">Error</p>'; }
}
async function deleteShare(token) { if (!confirm('Delete?')) return; await fetch('/api/share/delete', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: token }) }); loadShares(); loadStats(); }
async function deleteAllShares() { if (!confirm('Delete ALL?')) return; var res = await fetch('/api/share/list'); var data = await res.json(); if (data.data) { for (var i = 0; i < data.data.length; i++) { await fetch('/api/share/delete', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: data.data[i].token }) }); } } loadShares(); loadStats(); }
loadStats(); loadDirectory('');
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closePreview(); closeShareModal(); closeEditor(); } if (e.ctrlKey && e.key === 's') { e.preventDefault(); if (document.getElementById('editor-modal').style.display === 'flex') saveEditorFile(); } });
</script></body></html>`;
}