export default {
    async fetch(request, env) {
      try {
        const url = new URL(request.url);
        const path = url.pathname;
  
        // Handle preflight requests
        if (request.method === 'OPTIONS') {
          return new Response(null, {
            headers: {
              'Access-Control-Allow-Origin': '*',
              'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
              'Access-Control-Allow-Headers': 'Content-Type, Authorization',
            }
          });
        }
  
        // Redirect repo/*.git ke repo/* (tanpa .git) untuk public view
        if (path.match(/^\/repo\/[^\/]+\.git$/) && !path.includes('/info/refs') && !path.includes('/git-upload-pack')) {
          const repoId = path.split('/')[2].replace('.git', '');
          return new Response('', {
            status: 301,
            headers: { 'Location': `/repo/${repoId}` }
          });
        }
  
        // Simple routing
        if (path === '/login' || path === '/api/auth/login') {
          return handleLogin(request, env);
        }
  
        if (path === '/api/auth/logout') {
          return handleLogout(request, env);
        }
  
        // Upload file handler
        if (path === '/api/upload' && request.method === 'POST') {
          return handleFileUpload(request, env);
        }
  
        // Import from URL handler - DIPINDAHKAN ke API handler
        if (path === '/api/import-from-url' && request.method === 'POST') {
          const authResult = await authenticate(request, env);
          if (!authResult.authenticated) {
            return jsonResponse({ error: 'Unauthorized' }, 401);
          }
          return handleImportFromURL(request, env, authResult.user);
        }
  
        // Public routes
        if (path.startsWith('/repo/') && !path.includes('/info/refs') && !path.includes('/git-upload-pack')) {
          return handlePublicRepo(request, env, path);
        }
  
        if (path.startsWith('/raw/')) {
          return handleRawFile(request, env, path);
        }
  
        if (path.startsWith('/download/')) {
          return handleDownloadRepo(request, env, path);
        }
  
        // Git protocol
        if (path.includes('/info/refs') || path.includes('/git-upload-pack')) {
          return handleGitProtocol(request, env, path);
        }
  
        // API routes
        if (path.startsWith('/api/')) {
          const authResult = await authenticate(request, env);
          const method = request.method;
          
          // Only write operations need auth
          if ((method === 'POST' || method === 'PUT' || method === 'DELETE') && !authResult.authenticated) {
            return jsonResponse({ error: 'Unauthorized' }, 401);
          }
          
          return handleAPI(request, env, path, authResult.user);
        }
  
        // Homepage
        const authResult = await authenticate(request, env);
        if (path === '/' && !authResult.authenticated) {
          return servePublicHomepage(env);
        }
  
        // Dashboard for logged-in users
        return serveHTML(env, authResult.authenticated, authResult.user);
  
      } catch (error) {
        console.error('Global error:', error);
        return new Response('Internal Server Error', { 
          status: 500,
          headers: { 
            'Content-Type': 'text/plain',
            'Access-Control-Allow-Origin': '*'
          }
        });
      }
    }
  };
  
  // ============================================
  // R2 HELPER FUNCTIONS
  // ============================================
  
  // R2 Get - returns parsed JSON or null
  async function r2Get(env, key) {
    try {
      const object = await env.KODE_STORAGE.get(key);
      if (!object) return null;
      const text = await object.text();
      return text;
    } catch (error) {
      console.error('R2 Get error:', error);
      return null;
    }
  }
  
  // R2 Put - stores string data
  async function r2Put(env, key, data, options = {}) {
    try {
      await env.KODE_STORAGE.put(key, data, options);
      return true;
    } catch (error) {
      console.error('R2 Put error:', error);
      return false;
    }
  }
  
  // R2 Delete - deletes object
  async function r2Delete(env, key) {
    try {
      await env.KODE_STORAGE.delete(key);
      return true;
    } catch (error) {
      console.error('R2 Delete error:', error);
      return false;
    }
  }
  
  // R2 List - lists objects with prefix
  async function r2List(env, prefix) {
    try {
      const listed = await env.KODE_STORAGE.list({ prefix });
      return listed.objects || [];
    } catch (error) {
      console.error('R2 List error:', error);
      return [];
    }
  }
  
  // ============================================
  // END R2 HELPER FUNCTIONS
  // ============================================
  
  // Helper function untuk JSON responses dengan CORS
  function jsonResponse(data, status = 200, headers = {}) {
    const responseHeaders = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      ...headers
    };
    
    return new Response(JSON.stringify(data), {
      status,
      headers: responseHeaders
    });
  }
  
  // Authentication function
  async function authenticate(request, env) {
    try {
      const cookieHeader = request.headers.get('Cookie');
      if (cookieHeader && cookieHeader.includes('session=')) {
        const sessionMatch = cookieHeader.match(/session=([^;]+)/);
        if (sessionMatch) {
          const sessionId = sessionMatch[1];
          const sessionData = await r2Get(env, `session:${sessionId}`);
          if (sessionData) {
            const session = JSON.parse(sessionData);
            if (session.expires > Date.now()) {
              return { authenticated: true, user: session.user };
            }
          }
        }
      }
      
      return { authenticated: false, user: null };
    } catch (error) {
      console.error('Auth error:', error);
      return { authenticated: false, user: null };
    }
  }
  
  // File Upload Handler
  async function handleFileUpload(request, env) {
    try {
        const authResult = await authenticate(request, env);
        if (!authResult.authenticated) {
            return jsonResponse({ error: 'Unauthorized' }, 401);
        }
  
        const formData = await request.formData();
        const file = formData.get('file');
        const repoId = formData.get('repoId');
        
        if (!file || !repoId) {
            return jsonResponse({ error: 'File and repository ID are required' }, 400);
        }
  
        // Get repository
        const repoData = await r2Get(env, `repo:${repoId}`);
        if (!repoData) {
            return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (authResult.user.role !== 'admin' && repo.owner !== authResult.user.id) {
            return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        // Read file content
        const fileContent = await file.text();
        const fileName = file.name;
        const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
        
        // Determine language based on file extension
        const languageMap = {
            'js': 'javascript',
            'jsx': 'javascript',
            'ts': 'javascript',
            'tsx': 'javascript',
            'py': 'python',
            'html': 'html',
            'htm': 'html',
            'css': 'css',
            'java': 'java',
            'cpp': 'cpp',
            'c': 'cpp',
            'cc': 'cpp',
            'txt': 'text',
            'md': 'text',
            'json': 'javascript',
            'xml': 'text',
            'csv': 'text'
        };
  
        const language = languageMap[fileExtension] || 'text';
  
        // Create file object
        const fileId = generateId();
        const fileData = {
            id: fileId,
            name: fileName,
            content: fileContent,
            language: language,
            created: new Date().toISOString(),
            size: file.size,
            type: file.type
        };
  
        if (!repo.files) {
            repo.files = [];
        }
  
        // Check if file with same name already exists
        const existingFileIndex = repo.files.findIndex(f => f.name === fileName);
        if (existingFileIndex !== -1) {
            // Replace existing file
            repo.files[existingFileIndex] = fileData;
        } else {
            // Add new file
            repo.files.push(fileData);
        }
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse({
            success: true,
            file: fileData,
            message: existingFileIndex !== -1 ? 'File updated successfully' : 'File uploaded successfully'
        });
  
    } catch (error) {
        console.error('File upload error:', error);
        return jsonResponse({ error: 'File upload failed' }, 500);
    }
  }
  
  // Import File from URL Handler - DIPERBAIKI untuk support lebih banyak URL
  async function handleImportFromURL(request, env, user) {
    try {
        const data = await request.json();
        const { url, fileName, repoId } = data;
        
        if (!url || !repoId) {
            return jsonResponse({ error: 'URL and repository ID are required' }, 400);
        }
  
        // Validate URL
        let fileUrl;
        try {
            fileUrl = new URL(url);
        } catch (e) {
            return jsonResponse({ error: 'Invalid URL' }, 400);
        }
  
        // Get repository
        const repoData = await r2Get(env, `repo:${repoId}`);
        if (!repoData) {
            return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
            return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        // Enhanced URL handling dengan headers yang lebih baik
        const fetchOptions = {
            method: 'GET',
            headers: {
                'User-Agent': 'Mozilla/5.0 (compatible; CodeHub-Bot/1.0)',
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,text/plain;q=0.8,*/*;q=0.7',
                'Accept-Language': 'en-US,en;q=0.5',
                'Accept-Encoding': 'gzip, deflate, br',
                'Connection': 'keep-alive',
            },
            redirect: 'follow'
        };
  
        // Fetch content from URL dengan error handling yang lebih baik
        let response;
        try {
            response = await fetch(url, fetchOptions);
        } catch (fetchError) {
            console.error('Fetch error:', fetchError);
            return jsonResponse({ error: `Network error: ${fetchError.message}` }, 400);
        }
  
        if (!response.ok) {
            // Coba tanpa headers jika gagal
            try {
                response = await fetch(url);
            } catch (secondError) {
                return jsonResponse({ 
                    error: `Failed to fetch URL: ${response.status} ${response.statusText}. Also failed retry: ${secondError.message}` 
                }, 400);
            }
            
            if (!response.ok) {
                return jsonResponse({ 
                    error: `Failed to fetch URL: ${response.status} ${response.statusText}` 
                }, 400);
            }
        }
  
        const content = await response.text();
        
        // Determine file name dengan logic yang lebih baik
        let finalFileName = fileName;
        if (!finalFileName) {
            // Extract filename from URL path
            const urlPath = fileUrl.pathname;
            finalFileName = urlPath.split('/').pop() || 'imported-file';
            
            // Remove query parameters dari filename
            finalFileName = finalFileName.split('?')[0];
            finalFileName = finalFileName.split('#')[0];
            
            // Jika masih tidak ada extension, coba dari content type
            if (!finalFileName.includes('.')) {
                const contentType = response.headers.get('content-type');
                if (contentType) {
                    const extensionMap = {
                        'text/javascript': 'js',
                        'application/javascript': 'js',
                        'application/x-javascript': 'js',
                        'text/x-python': 'py',
                        'application/x-python': 'py',
                        'text/html': 'html',
                        'text/css': 'css',
                        'text/plain': 'txt',
                        'application/json': 'json',
                        'application/xml': 'xml',
                        'text/xml': 'xml'
                    };
                    
                    const ext = extensionMap[contentType] || 'txt';
                    finalFileName = `${finalFileName}.${ext}`;
                } else {
                    // Default to .txt jika tidak bisa menentukan
                    finalFileName = `${finalFileName}.txt`;
                }
            }
        }
  
        // Determine language based on file extension dengan mapping yang lebih lengkap
        const fileExtension = finalFileName.split('.').pop()?.toLowerCase() || '';
        const languageMap = {
            'js': 'javascript', 'jsx': 'javascript', 'ts': 'javascript', 'tsx': 'javascript', 'mjs': 'javascript',
            'py': 'python', 'pyw': 'python', 'pyc': 'python',
            'html': 'html', 'htm': 'html', 'xhtml': 'html',
            'css': 'css', 'scss': 'css', 'sass': 'css', 'less': 'css',
            'java': 'java', 'class': 'java', 'jar': 'java',
            'cpp': 'cpp', 'c': 'cpp', 'cc': 'cpp', 'cxx': 'cpp', 'h': 'cpp', 'hpp': 'cpp',
            'php': 'php', 'php3': 'php', 'php4': 'php', 'php5': 'php', 'phtml': 'php',
            'rb': 'ruby', 'erb': 'ruby',
            'go': 'go',
            'rs': 'rust',
            'swift': 'swift',
            'kt': 'kotlin', 'kts': 'kotlin',
            'txt': 'text', 'md': 'text', 'markdown': 'text', 'rst': 'text',
            'json': 'javascript', 'json5': 'javascript',
            'xml': 'text', 'xsl': 'text', 'xslt': 'text',
            'csv': 'text', 'tsv': 'text',
            'sql': 'sql',
            'sh': 'bash', 'bash': 'bash', 'zsh': 'bash',
            'yaml': 'yaml', 'yml': 'yaml',
            'toml': 'toml',
            'ini': 'ini', 'cfg': 'ini', 'conf': 'ini'
        };
  
        const language = languageMap[fileExtension] || 'text';
  
        // Create file object
        const fileId = generateId();
        const fileData = {
            id: fileId,
            name: finalFileName,
            content: content,
            language: language,
            created: new Date().toISOString(),
            size: content.length,
            type: 'text/plain',
            importedFrom: url
        };
  
        if (!repo.files) {
            repo.files = [];
        }
  
        // Check if file with same name already exists
        const existingFileIndex = repo.files.findIndex(f => f.name === finalFileName);
        if (existingFileIndex !== -1) {
            // Replace existing file
            repo.files[existingFileIndex] = fileData;
        } else {
            // Add new file
            repo.files.push(fileData);
        }
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse({
            success: true,
            file: fileData,
            message: existingFileIndex !== -1 ? 'File updated successfully from URL' : 'File imported successfully from URL'
        });
  
    } catch (error) {
        console.error('Import from URL error:', error);
        return jsonResponse({ error: 'Import from URL failed: ' + error.message }, 500);
    }
  }
  
  // Login handler
  async function handleLogin(request, env) {
    if (request.method === 'GET') {
      return serveLoginPage();
    }
  
    if (request.method === 'POST') {
      try {
        const credentials = await request.json();
        const { username, password } = credentials;
        
        // Simple credential check
        if (username === 'admin' && password === 'admin123') {
          const sessionId = generateId();
          const userData = {
            id: generateId(),
            username: 'admin',
            role: 'admin'
          };
          
          const sessionData = {
            user: userData,
            expires: Date.now() + (24 * 60 * 60 * 1000)
          };
  
          // R2 tidak support expirationTtl, jadi kita handle expiry manual di authenticate()
          await r2Put(env, `session:${sessionId}`, JSON.stringify(sessionData));
  
          return new Response(JSON.stringify({ 
            success: true, 
            user: userData 
          }), {
            status: 200,
            headers: {
              'Content-Type': 'application/json',
              'Access-Control-Allow-Origin': '*',
              'Set-Cookie': `session=${sessionId}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`
            }
          });
        } else {
          return jsonResponse({ error: 'Invalid credentials' }, 401);
        }
      } catch (error) {
        console.error('Login error:', error);
        return jsonResponse({ error: 'Login failed' }, 500);
      }
    }
  
    return new Response('Method not allowed', { status: 405 });
  }
  
  // Logout handler
  async function handleLogout(request, env) {
    try {
      const cookieHeader = request.headers.get('Cookie');
      if (cookieHeader && cookieHeader.includes('session=')) {
        const sessionMatch = cookieHeader.match(/session=([^;]+)/);
        if (sessionMatch) {
          await r2Delete(env, `session:${sessionMatch[1]}`);
        }
      }
      
      return new Response(JSON.stringify({ success: true }), {
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Set-Cookie': 'session=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0'
        }
      });
    } catch (error) {
      return jsonResponse({ error: 'Logout failed' }, 500);
    }
  }
  
  // Public homepage
  async function servePublicHomepage(env) {
    try {
      const repoObjects = await r2List(env, 'repo:');
      const repoList = [];
  
      for (const obj of repoObjects) {
        try {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            const repoId = obj.key.replace('repo:', '');
            repoList.push({
              id: repoId,
              name: repo.name,
              description: repo.description,
              created: repo.created,
              files: repo.files ? repo.files.length : 0
            });
          }
        } catch (e) {
          console.error('Error parsing repo data:', e);
        }
      }
  
      const html = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHub - Public Repositories</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
            background-color: #0d1117; 
            color: #c9d1d9; 
            line-height: 1.5;
            overflow-x: hidden;
        }
        .container { 
            max-width: 1280px; 
            margin: 0 auto; 
            padding: 0 16px; 
        }
        header { 
            background-color: #161b22; 
            border-bottom: 1px solid #30363d; 
            padding: 16px 0; 
        }
        .header-content { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap;
            gap: 12px;
        }
        .logo { 
            font-size: 20px; 
            font-weight: bold; 
            color: #f0f6fc; 
            text-decoration: none; 
        }
        .btn { 
            background-color: #238636; 
            color: white; 
            border: none; 
            padding: 10px 16px; 
            border-radius: 6px; 
            cursor: pointer; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center;
            gap: 6px;
            font-size: 14px; 
            transition: background-color 0.2s; 
        }
        .btn:hover { 
            background-color: #2ea043; 
        }
        .repos-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 24px; 
            flex-wrap: wrap;
            gap: 16px;
        }
        .repo-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
            gap: 20px; 
        }
        .repo-card { 
            background-color: #161b22; 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            padding: 20px; 
            cursor: pointer; 
            transition: all 0.2s; 
            word-wrap: break-word;
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .repo-card:hover { 
            border-color: #58a6ff; 
            transform: translateY(-2px); 
            text-decoration: none;
            color: inherit;
        }
        .repo-name { 
            color: #58a6ff; 
            font-weight: 600; 
            margin-bottom: 8px; 
            font-size: 18px; 
            word-break: break-word;
        }
        .repo-desc { 
            color: #8b949e; 
            font-size: 14px; 
            margin-bottom: 12px; 
            word-break: break-word;
            line-height: 1.4;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #8b949e;
        }
        .welcome-banner {
            background: #1c2128;
            border: 1px solid #30363d;
            border-radius: 12px;
            padding: 24px;
            margin: 24px 0;
            text-align: center;
        }
        .stats {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .stat-item {
            text-align: center;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #58a6ff;
        }
        .stat-label {
            font-size: 14px;
            color: #8b949e;
            margin-top: 4px;
        }
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            .repos-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .repo-grid {
                grid-template-columns: 1fr;
            }
            .stats {
                gap: 20px;
            }
        }
    </style>
  </head>
  <body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">CodeHub</div>
                <div>
                    <a href="/login" class="btn">Login</a>
                </div>
            </div>
        </div>
    </header>
  
    <main>
        <div class="container">
            <div class="welcome-banner">
                <h1 style="color: #f0f6fc; margin-bottom: 16px; font-size: 28px;">Welcome to CodeHub</h1>
                <p style="color: #8b949e; font-size: 16px; margin-bottom: 20px;">
                    Discover and explore public code repositories. All repositories are publicly accessible.
                </p>
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-number">${repoList.length}</div>
                        <div class="stat-label">Public Repositories</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">${repoList.reduce((total, repo) => total + (repo.files || 0), 0)}</div>
                        <div class="stat-label">Total Files</div>
                    </div>
                </div>
            </div>
  
            <div class="repos-header">
                <h1 style="color: #f0f6fc; font-size: 24px;">Public Repositories</h1>
            </div>
  
            <div class="repo-grid">
                ${repoList.length === 0 ? 
                  '<div class="empty-state">No public repositories yet. Be the first to create one!</div>' :
                  repoList.map(repo => `
                    <a href="/repo/${repo.id}" class="repo-card">
                        <div class="repo-name">${escapeHtml(repo.name)}</div>
                        <div class="repo-desc">${escapeHtml(repo.description || 'No description')}</div>
                        <div style="color: #8b949e; font-size: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
                            <span>Created: ${new Date(repo.created).toLocaleDateString()}</span>
                            <span>Files: ${repo.files || 0}</span>
                        </div>
                    </a>
                  `).join('')
                }
            </div>
        </div>
    </main>
  </body>
  </html>`;
  
      return new Response(html, {
        headers: { 'Content-Type': 'text/html; charset=utf-8' }
      });
    } catch (error) {
      console.error('Error loading repositories:', error);
      return new Response('Error loading repositories', { status: 500 });
    }
  }
  
  // Public repository view dengan README di bagian bawah
  async function handlePublicRepo(request, env, path) {
    try {
      const repoId = path.split('/')[2];
      const repoData = await r2Get(env, `repo:${repoId}`);
      
      if (!repoData) {
        return new Response('Repository not found', { status: 404 });
      }
  
      const repo = JSON.parse(repoData);
      const baseUrl = new URL(request.url).origin;
      const gitCloneUrl = `${baseUrl}/repo/${repoId}.git`;
      const publicRepoUrl = `${baseUrl}/repo/${repoId}`;
  
      // Get README content
      const readme = repo.readme || {
        content: '# ' + repo.name + '\n\n' + (repo.description || 'No description provided') + '\n\n## About\n\nThis repository contains code files managed by CodeHub.',
        lastUpdated: repo.created
      };
  
      const html = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${escapeHtml(repo.name)} - CodeHub</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
            background-color: #0d1117; 
            color: #c9d1d9; 
            line-height: 1.5;
            overflow-x: hidden;
        }
        .container { 
            max-width: 1280px; 
            margin: 0 auto; 
            padding: 0 16px; 
        }
        header { 
            background-color: #161b22; 
            border-bottom: 1px solid #30363d; 
            padding: 16px 0; 
        }
        .header-content { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap;
            gap: 12px;
        }
        .logo { 
            font-size: 20px; 
            font-weight: bold; 
            color: #f0f6fc; 
            text-decoration: none; 
        }
        .btn { 
            background-color: #238636; 
            color: white; 
            border: none; 
            padding: 10px 16px; 
            border-radius: 6px; 
            cursor: pointer; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center;
            gap: 6px;
            font-size: 14px; 
            transition: background-color 0.2s; 
        }
        .btn:hover { 
            background-color: #2ea043; 
        }
        .btn-secondary {
            background-color: #6e7681;
        }
        .btn-secondary:hover {
            background-color: #8b949e;
        }
        .repo-detail { 
            background-color: #161b22; 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            padding: 20px; 
            margin-top: 20px;
            word-wrap: break-word;
        }
        .repo-title { 
            color: #58a6ff; 
            font-size: 24px; 
            margin-bottom: 8px; 
            word-break: break-word;
        }
        .clone-box { 
            background: #0d1117; 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            padding: 16px; 
            margin: 16px 0; 
            display: flex; 
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .clone-input { 
            flex: 1; 
            background: transparent; 
            border: none; 
            color: #c9d1d9; 
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
            padding: 10px; 
            font-size: 14px;
            min-width: 0;
            word-break: break-all;
        }
        .copy-btn { 
            background: #6e7681; 
            color: white; 
            border: none; 
            padding: 10px 16px; 
            border-radius: 6px; 
            cursor: pointer; 
            font-size: 14px; 
            white-space: nowrap;
        }
        .copy-btn:hover {
            background: #8b949e;
        }
        .files-list { 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            margin-top: 20px; 
            overflow: hidden;
        }
        .file-item { 
            display: flex; 
            align-items: center; 
            padding: 14px 16px; 
            border-bottom: 1px solid #30363d; 
            flex-wrap: wrap;
            gap: 12px;
        }
        .file-item:hover { 
            background-color: #1c2128; 
        }
        .file-item:last-child {
            border-bottom: none;
        }
        .file-name {
            flex: 1;
            min-width: 0;
            word-break: break-word;
            font-size: 14px;
        }
        .file-language {
            color: #8b949e;
            font-size: 12px;
            background: #30363d;
            padding: 4px 10px;
            border-radius: 12px;
            white-space: nowrap;
        }
        .file-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .file-action-btn {
            background: none;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            text-decoration: none;
            transition: all 0.2s;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .file-action-btn:hover {
            background-color: #1c2128;
            border-color: #58a6ff;
        }
        .section-title {
            margin: 24px 0 16px 0;
            color: #f0f6fc;
            font-size: 18px;
        }
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #8b949e;
        }
        .download-full {
            margin: 20px 0;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }
        .download-info {
            color: #8b949e;
            font-size: 13px;
            flex: 1;
            line-height: 1.4;
        }
        
        /* README Styles - Simplified layout */
        .readme-section {
            margin: 40px 0 20px 0;
        }
        
        .readme-content {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 24px;
            margin-top: 20px;
            word-wrap: break-word;
        }
        
        .readme-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #30363d;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .readme-title {
            color: #f0f6fc;
            font-size: 20px;
            font-weight: 600;
        }
        
        .readme-meta {
            color: #8b949e;
            font-size: 14px;
        }
        
        .markdown-body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.6;
            color: #c9d1d9;
        }
        
        .markdown-body h1,
        .markdown-body h2,
        .markdown-body h3,
        .markdown-body h4 {
            color: #f0f6fc;
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: 600;
        }
        
        .markdown-body h1 {
            font-size: 2em;
            border-bottom: 1px solid #30363d;
            padding-bottom: 0.3em;
        }
        
        .markdown-body h2 {
            font-size: 1.5em;
            border-bottom: 1px solid #30363d;
            padding-bottom: 0.3em;
        }
        
        .markdown-body p {
            margin-bottom: 16px;
        }
        
        .markdown-body code {
            background-color: rgba(110, 118, 129, 0.4);
            border-radius: 6px;
            padding: 0.2em 0.4em;
            font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
            font-size: 0.85em;
        }
        
        .markdown-body pre {
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            overflow: auto;
            margin: 16px 0;
        }
        
        .markdown-body pre code {
            background: none;
            padding: 0;
        }
        
        .markdown-body ul,
        .markdown-body ol {
            padding-left: 2em;
            margin-bottom: 16px;
        }
        
        .markdown-body li {
            margin-bottom: 4px;
        }
        
        .markdown-body blockquote {
            border-left: 4px solid #30363d;
            padding-left: 16px;
            margin: 16px 0;
            color: #8b949e;
        }
        
        .markdown-body table {
            border-collapse: collapse;
            width: 100%;
            margin: 16px 0;
        }
        
        .markdown-body th,
        .markdown-body td {
            border: 1px solid #30363d;
            padding: 6px 13px;
            text-align: left;
        }
        
        .markdown-body th {
            background-color: #1c2128;
            font-weight: 600;
        }
        
        .markdown-body a {
            color: #58a6ff;
            text-decoration: none;
        }
        
        .markdown-body a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                align-items: flex-start;
            }
            .clone-box {
                flex-direction: column;
                align-items: stretch;
            }
            .file-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .file-actions {
                align-self: stretch;
                justify-content: flex-end;
            }
            .download-full {
                flex-direction: column;
            }
            .container {
                padding: 0 12px;
            }
            .readme-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        @media (max-width: 480px) {
            .repo-detail {
                padding: 16px;
            }
            .file-actions {
                flex-direction: column;
                width: 100%;
            }
            .file-action-btn {
                justify-content: center;
            }
        }
    </style>
  </head>
  <body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="/" class="logo">CodeHub</a>
                <a href="/" class="btn">← Back to Home</a>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="repo-detail">
            <h1 class="repo-title">${escapeHtml(repo.name)}</h1>
            <div style="color: #8b949e; margin-bottom: 12px; font-size: 14px;">${escapeHtml(repo.description || 'No description provided')}</div>
            <div style="color: #8b949e; font-size: 13px; margin-bottom: 20px;">
                Created: ${new Date(repo.created).toLocaleDateString()} • 
                Files: ${repo.files ? repo.files.length : 0}
            </div>
            
            <!-- Repository Info & Clone Section -->
            <div style="background: #1c2128; border: 1px solid #238636; border-radius: 8px; padding: 16px; margin: 20px 0; color: #3fb950; word-break: break-word; font-size: 14px;">
                <strong>Public URL:</strong> ${publicRepoUrl}<br>
                <strong>Git Clone URL:</strong> ${gitCloneUrl}
            </div>
            
            <div class="clone-box">
                <input type="text" value="${publicRepoUrl}" class="clone-input" id="repoUrl" readonly>
                <button class="copy-btn" onclick="copyText('repoUrl')">Copy URL</button>
            </div>
  
            <div class="clone-box">
                <input type="text" value="${gitCloneUrl}" class="clone-input" id="gitCloneUrl" readonly>
                <button class="copy-btn" onclick="copyText('gitCloneUrl')">Copy Git URL</button>
            </div>
  
            <div class="download-full">
                <button class="btn" onclick="downloadFullRepo()">
                    Download as Text Archive
                </button>
                <div class="download-info">
                    <strong>Format:</strong> Structured text file with all files<br>
                    Includes ${repo.files ? repo.files.length : 0} files in folder: ${escapeHtml(repo.name)}/
                </div>
            </div>
            
            <!-- Files Section -->
            <h3 class="section-title">Files</h3>
            <div class="files-list">
                ${repo.files && repo.files.length > 0 ? 
                  repo.files.map(file => `
                    <div class="file-item">
                        <span style="font-size: 16px;">📄</span>
                        <span class="file-name">${escapeHtml(file.name)}</span>
                        <span class="file-language">${escapeHtml(file.language)}</span>
                        <div class="file-actions">
                            <a href="${baseUrl}/raw/${file.id}" class="file-action-btn" target="_blank">
                                Raw
                            </a>
                            <button class="file-action-btn" onclick="downloadFile('${file.id}', '${escapeHtml(file.name)}')">
                                Download
                            </button>
                        </div>
                    </div>
                  `).join('') : 
                  '<div class="empty-state">No files in this repository</div>'
                }
            </div>
            
            <!-- README Section - At the bottom -->
            <div class="readme-section">
                <div class="readme-content">
                    <div class="readme-header">
                        <div class="readme-title">README.md</div>
                        <div class="readme-meta">
                            Last updated: ${new Date(readme.lastUpdated).toLocaleDateString()}
                        </div>
                    </div>
                    <div class="markdown-body">
                        ${renderMarkdown(readme.content)}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function copyText(elementId) {
            const input = document.getElementById(elementId);
            input.select();
            navigator.clipboard.writeText(input.value).then(() => {
                alert('URL copied to clipboard!');
            });
        }
        
        function downloadFile(fileId, fileName) {
            const link = document.createElement('a');
            link.href = '/raw/' + fileId;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
  
        function downloadFullRepo() {
            const link = document.createElement('a');
            link.href = '/download/${repoId}';
            link.download = '${escapeHtml(repo.name)}-archive.txt';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
  </body>
  </html>`;
  
      return new Response(html, {
        headers: { 'Content-Type': 'text/html; charset=utf-8' }
      });
    } catch (error) {
      console.error('Error loading repository:', error);
      return new Response('Error loading repository', { status: 500 });
    }
  }
  
  // Raw file handler - DIPERBAIKI untuk selalu return text/plain
  async function handleRawFile(request, env, path) {
    try {
      const fileId = path.split('/')[2];
      console.log('Looking for file with ID:', fileId);
      
      if (!fileId) {
        return new Response('File ID is required', { status: 400 });
      }
  
      const repoObjects = await r2List(env, 'repo:');
      console.log('Found repositories:', repoObjects.length);
      
      for (const obj of repoObjects) {
        try {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            if (repo.files && repo.files.length > 0) {
              console.log(`Checking repo ${obj.key} with ${repo.files.length} files`);
              const file = repo.files.find(f => f.id === fileId);
              if (file) {
                console.log('File found:', file.name);
                // SELALU return sebagai text/plain, tidak peduli bahasa pemrogramannya
                return new Response(file.content, {
                  headers: {
                    'Content-Type': 'text/plain; charset=utf-8',
                    'Content-Disposition': `inline; filename="${file.name}"`,
                    'Access-Control-Allow-Origin': '*',
                    'Cache-Control': 'public, max-age=3600'
                  }
                });
              }
            }
          }
        } catch (e) {
          console.error('Error parsing repo data:', e);
        }
      }
      
      console.log('File not found with ID:', fileId);
      return new Response('File not found', { status: 404 });
    } catch (error) {
      console.error('Error loading file:', error);
      return new Response('Error loading file', { status: 500 });
    }
  }
  
  // Download handler dengan format yang lebih baik
  async function handleDownloadRepo(request, env, path) {
    try {
      const repoId = path.split('/')[2];
      const repoData = await r2Get(env, `repo:${repoId}`);
      
      if (!repoData) {
        return new Response('Repository not found', { status: 404 });
      }
  
      const repo = JSON.parse(repoData);
      const archiveContent = createTextArchive(repo);
      
      return new Response(archiveContent, {
        headers: {
          'Content-Type': 'text/plain; charset=utf-8',
          'Content-Disposition': `attachment; filename="${repo.name}-archive.txt"`,
          'Access-Control-Allow-Origin': '*'
        }
      });
    } catch (error) {
      console.error('Error creating archive:', error);
      return new Response('Error creating archive', { status: 500 });
    }
  }
  
  function createTextArchive(repo) {
    const folderName = repo.name;
    const timestamp = new Date().toLocaleString();
    
    let archiveContent = '';
    
    archiveContent += '╔══════════════════════════════════════════════════╗\n';
    archiveContent += '║                CODE REPOSITORY ARCHIVE           ║\n';
    archiveContent += '╠══════════════════════════════════════════════════╣\n';
    archiveContent += `║ Repository: ${folderName.padEnd(36)} ║\n`;
    archiveContent += `║ Generated: ${timestamp.padEnd(37)} ║\n`;
    archiveContent += `║ Files: ${String(repo.files ? repo.files.length : 0).padEnd(40)} ║\n`;
    archiveContent += `║ Description: ${(repo.description || 'No description').substring(0, 34).padEnd(35)} ║\n`;
    archiveContent += '╚══════════════════════════════════════════════════╝\n\n';
    
    archiveContent += 'FILE SUMMARY\n';
    archiveContent += '────────────────────────────────────────────────────\n';
    
    if (repo.files && repo.files.length > 0) {
      let totalSize = 0;
      const languageCount = {};
      
      repo.files.forEach(file => {
        totalSize += file.content.length;
        languageCount[file.language] = (languageCount[file.language] || 0) + 1;
      });
      
      archiveContent += `Total files: ${repo.files.length}\n`;
      archiveContent += `Total size: ${totalSize} characters\n`;
      archiveContent += `Folder structure: ${folderName}/\n\n`;
      
      archiveContent += 'Languages:\n';
      for (const [lang, count] of Object.entries(languageCount)) {
        archiveContent += `  - ${lang}: ${count} files\n`;
      }
      archiveContent += '\n';
    } else {
      archiveContent += 'No files in this repository\n\n';
    }
    
    archiveContent += 'FILE CONTENTS\n';
    archiveContent += '════════════════════════════════════════════════════\n\n';
    
    if (repo.files && repo.files.length > 0) {
      repo.files.forEach((file, index) => {
        const fileNumber = (index + 1).toString().padStart(2, '0');
        const filePath = `${folderName}/${file.name}`;
        const fileSize = file.content.length;
        const createdDate = file.created ? new Date(file.created).toLocaleDateString() : 'Unknown';
        
        archiveContent += `┌── FILE ${fileNumber}: ${filePath}\n`;
        archiveContent += `│   Size: ${fileSize} characters\n`;
        archiveContent += `│   Language: ${file.language}\n`;
        archiveContent += `│   Created: ${createdDate}\n`;
        archiveContent += `└────────────────────────────────────────────────────\n\n`;
        
        archiveContent += file.content;
        
        if (index < repo.files.length - 1) {
          archiveContent += '\n\n' + '─'.repeat(60) + '\n\n';
        }
      });
    }
    
    archiveContent += '\n\n' + '═'.repeat(60) + '\n';
    archiveContent += `ARCHIVE COMPLETE - ${repo.files ? repo.files.length : 0} files exported\n`;
    archiveContent += `Location: ${folderName}/\n`;
    archiveContent += `Exported: ${timestamp}\n`;
    archiveContent += `Source: CodeHub Repository\n`;
    archiveContent += '═'.repeat(60) + '\n';
    
    return archiveContent;
  }
  
  // Git protocol handler
  async function handleGitProtocol(request, env, path) {
    try {
      const repoId = path.split('/')[2]?.replace('.git', '');
      if (!repoId) {
        return new Response('Repository not found', { status: 404 });
      }
  
      const repoData = await r2Get(env, `repo:${repoId}`);
      if (!repoData) {
        return new Response('Repository not found', { status: 404 });
      }
  
      return new Response('001e# service=git-upload-pack\n00000000', {
        headers: {
          'Content-Type': 'application/x-git-upload-pack-advertisement',
          'Cache-Control': 'no-cache'
        }
      });
    } catch (error) {
      return new Response('Git protocol error', { status: 500 });
    }
  }
  
  // API handler dengan semua fitur termasuk README dan edit deskripsi
  async function handleAPI(request, env, path, user) {
    const method = request.method;
  
    try {
      // Get all repositories - PUBLIC
      if (path === '/api/repos' && method === 'GET') {
        const repoObjects = await r2List(env, 'repo:');
        const repoList = [];
  
        for (const obj of repoObjects) {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            const repoId = obj.key.replace('repo:', '');
            repoList.push({
              id: repoId,
              publicUrl: `/repo/${repoId}`,
              gitUrl: `/repo/${repoId}.git`,
              ...repo
            });
          }
        }
  
        return jsonResponse(repoList);
      }
  
      // Create repository - PROTECTED
      if (path === '/api/repos' && method === 'POST') {
        const data = await request.json();
        const repoId = generateId();
        const repoData = {
          name: data.name,
          description: data.description,
          created: new Date().toISOString(),
          owner: user.id,
          files: []
        };
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repoData));
  
        return jsonResponse({
          id: repoId,
          publicUrl: `/repo/${repoId}`,
          gitUrl: `/repo/${repoId}.git`,
          ...repoData
        });
      }
  
      // Get specific repository - PUBLIC
      if (path.match(/^\/api\/repos\/[^\/]+$/) && method === 'GET') {
        const repoId = path.split('/')[3];
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        return jsonResponse({
          id: repoId,
          publicUrl: `/repo/${repoId}`,
          gitUrl: `/repo/${repoId}.git`,
          ...repo
        });
      }
  
      // Update repository (edit deskripsi) - PROTECTED
      if (path.match(/^\/api\/repos\/[^\/]+$/) && method === 'PUT') {
        const repoId = path.split('/')[3];
        const data = await request.json();
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
          return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        // Update fields yang diizinkan
        if (data.name !== undefined) repo.name = data.name;
        if (data.description !== undefined) repo.description = data.description;
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse({
          id: repoId,
          publicUrl: `/repo/${repoId}`,
          gitUrl: `/repo/${repoId}.git`,
          ...repo
        });
      }
  
      // Add file to repository - PROTECTED
      if (path.match(/^\/api\/repos\/[^\/]+\/files$/) && method === 'POST') {
        const repoId = path.split('/')[3];
        const data = await request.json();
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
          return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        const fileId = generateId();
        const fileData = {
          id: fileId,
          name: data.name,
          content: data.content,
          language: data.language || 'text',
          created: new Date().toISOString()
        };
  
        if (!repo.files) {
          repo.files = [];
        }
  
        repo.files.push(fileData);
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse(fileData);
      }
  
      // Update file - PROTECTED
      if (path.match(/^\/api\/files\/[^\/]+$/) && method === 'PUT') {
        const fileId = path.split('/')[3];
        const data = await request.json();
        const repoObjects = await r2List(env, 'repo:');
        
        for (const obj of repoObjects) {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            if (repo.files) {
              const fileIndex = repo.files.findIndex(f => f.id === fileId);
              if (fileIndex !== -1) {
                // Authorization check
                if (user.role !== 'admin' && repo.owner !== user.id) {
                  return jsonResponse({ error: 'Forbidden' }, 403);
                }
  
                repo.files[fileIndex].content = data.content;
                repo.files[fileIndex].name = data.name || repo.files[fileIndex].name;
                repo.files[fileIndex].language = data.language || repo.files[fileIndex].language;
                
                await r2Put(env, obj.key, JSON.stringify(repo));
                
                return jsonResponse(repo.files[fileIndex]);
              }
            }
          }
        }
        
        return jsonResponse({ error: 'File not found' }, 404);
      }
  
      // Delete file - PROTECTED
      if (path.match(/^\/api\/files\/[^\/]+$/) && method === 'DELETE') {
        const fileId = path.split('/')[3];
        const repoObjects = await r2List(env, 'repo:');
        
        for (const obj of repoObjects) {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            if (repo.files) {
              const fileIndex = repo.files.findIndex(f => f.id === fileId);
              if (fileIndex !== -1) {
                // Authorization check
                if (user.role !== 'admin' && repo.owner !== user.id) {
                  return jsonResponse({ error: 'Forbidden' }, 403);
                }
  
                const deletedFile = repo.files[fileIndex];
                repo.files.splice(fileIndex, 1);
                
                await r2Put(env, obj.key, JSON.stringify(repo));
                
                return jsonResponse({ 
                  success: true, 
                  message: 'File deleted successfully',
                  file: deletedFile 
                });
              }
            }
          }
        }
        
        return jsonResponse({ error: 'File not found' }, 404);
      }
  
      // Delete repository - PROTECTED
      if (path.match(/^\/api\/repos\/[^\/]+$/) && method === 'DELETE') {
        const repoId = path.split('/')[3];
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
          return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        await r2Delete(env, `repo:${repoId}`);
        return jsonResponse({ success: true });
      }
  
      // Get file content - PUBLIC
      if (path.match(/^\/api\/files\/[^\/]+$/) && method === 'GET') {
        const fileId = path.split('/')[3];
        const repoObjects = await r2List(env, 'repo:');
        
        for (const obj of repoObjects) {
          const repoData = await r2Get(env, obj.key);
          if (repoData) {
            const repo = JSON.parse(repoData);
            if (repo.files) {
              const file = repo.files.find(f => f.id === fileId);
              if (file) {
                return jsonResponse(file);
              }
            }
          }
        }
        
        return jsonResponse({ error: 'File not found' }, 404);
      }
  
      // Get README - PUBLIC
      if (path.match(/^\/api\/repos\/[^\/]+\/readme$/) && method === 'GET') {
        const repoId = path.split('/')[3];
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        const readme = repo.readme || {
          content: '# ' + repo.name + '\n\n' + (repo.description || 'No description provided') + '\n\n## About\n\nThis repository contains code files managed by CodeHub.',
          lastUpdated: repo.created
        };
  
        return jsonResponse(readme);
      }
  
      // Update README - PROTECTED
      if (path.match(/^\/api\/repos\/[^\/]+\/readme$/) && method === 'PUT') {
        const repoId = path.split('/')[3];
        const data = await request.json();
        const repoData = await r2Get(env, `repo:${repoId}`);
        
        if (!repoData) {
          return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
          return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        repo.readme = {
          content: data.content,
          lastUpdated: new Date().toISOString()
        };
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse(repo.readme);
      }
  
      // Upload multiple files - PROTECTED
      if (path === '/api/upload-multiple' && method === 'POST') {
        const formData = await request.formData();
        const repoId = formData.get('repoId');
        const files = formData.getAll('files');
  
        if (!repoId || files.length === 0) {
            return jsonResponse({ error: 'Repository ID and files are required' }, 400);
        }
  
        // Get repository
        const repoData = await r2Get(env, `repo:${repoId}`);
        if (!repoData) {
            return jsonResponse({ error: 'Repository not found' }, 404);
        }
  
        const repo = JSON.parse(repoData);
        
        // Authorization check
        if (user.role !== 'admin' && repo.owner !== user.id) {
            return jsonResponse({ error: 'Forbidden' }, 403);
        }
  
        const uploadedFiles = [];
        const errors = [];
  
        for (const file of files) {
            try {
                const fileContent = await file.text();
                const fileName = file.name;
                const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
                
                // Determine language based on file extension
                const languageMap = {
                    'js': 'javascript', 'jsx': 'javascript', 'ts': 'javascript', 'tsx': 'javascript',
                    'py': 'python', 'html': 'html', 'htm': 'html', 'css': 'css',
                    'java': 'java', 'cpp': 'cpp', 'c': 'cpp', 'cc': 'cpp',
                    'txt': 'text', 'md': 'text', 'json': 'javascript', 'xml': 'text', 'csv': 'text'
                };
  
                const language = languageMap[fileExtension] || 'text';
  
                const fileId = generateId();
                const fileData = {
                    id: fileId,
                    name: fileName,
                    content: fileContent,
                    language: language,
                    created: new Date().toISOString(),
                    size: file.size,
                    type: file.type
                };
  
                if (!repo.files) {
                    repo.files = [];
                }
  
                // Check if file with same name already exists
                const existingFileIndex = repo.files.findIndex(f => f.name === fileName);
                if (existingFileIndex !== -1) {
                    repo.files[existingFileIndex] = fileData;
                } else {
                    repo.files.push(fileData);
                }
  
                uploadedFiles.push(fileData);
            } catch (error) {
                errors.push({ name: file.name, error: error.message });
            }
        }
  
        await r2Put(env, `repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse({
            success: true,
            uploadedFiles,
            errors,
            message: `${uploadedFiles.length} files uploaded successfully${errors.length > 0 ? `, ${errors.length} failed` : ''}`
        });
      }
  
      return jsonResponse({ error: 'Not found' }, 404);
  
    } catch (error) {
      console.error('API error:', error);
      return jsonResponse({ error: 'Internal server error' }, 500);
    }
  }
  
  // Login page HTML
  function serveLoginPage() {
    const html = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - CodeHub</title>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
            background-color: #0d1117; 
            color: #c9d1d9; 
            line-height: 1.5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .login-container {
            background-color: #161b22;
            border: 1px solid #30363d;
            border-radius: 12px;
            padding: 32px;
            width: 100%;
            max-width: 400px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #f0f6fc;
            text-align: center;
            margin-bottom: 24px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #f0f6fc;
        }
        .form-control {
            width: 100%;
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 12px;
            color: #c9d1d9;
            font-size: 14px;
        }
        .form-control:focus {
            outline: none;
            border-color: #58a6ff;
        }
        .btn {
            width: 100%;
            background-color: #238636;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }
        .btn:hover {
            background-color: #2ea043;
        }
        .error {
            background-color: #f8514940;
            border: 1px solid #f85149;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 20px;
            color: #f85149;
            display: none;
        }
        .back-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #58a6ff;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
  </head>
  <body>
    <div class="login-container">
        <div class="logo">CodeHub</div>
        <div id="error" class="error"></div>
        <form onsubmit="login(event)">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" class="form-control" required autocomplete="username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control" required autocomplete="current-password">
            </div>
            <button type="submit" class="btn">Sign In</button>
        </form>
        <a href="/" class="back-link">Back to Home</a>
    </div>
    <script>
        async function login(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorDiv = document.getElementById('error');
            
            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    window.location.href = '/';
                } else {
                    errorDiv.textContent = data.error || 'Login failed';
                    errorDiv.style.display = 'block';
                }
            } catch (error) {
                errorDiv.textContent = 'Login failed. Please try again.';
                errorDiv.style.display = 'block';
            }
        }
    </script>
  </body>
  </html>`;
  
    return new Response(html, {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    });
  }
  
  // Serve main HTML untuk dashboard
  function serveHTML(env, isAuthenticated, user) {
    const html = `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHub - Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <style>
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
            background-color: #0d1117; 
            color: #c9d1d9; 
            line-height: 1.5;
            overflow-x: hidden;
        }
        .container { 
            max-width: 1280px; 
            margin: 0 auto; 
            padding: 0 16px; 
        }
        
        /* Header */
        header { 
            background-color: #161b22; 
            border-bottom: 1px solid #30363d; 
            padding: 16px 0; 
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-content { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap;
            gap: 12px;
        }
        .logo { 
            font-size: 20px; 
            font-weight: bold; 
            color: #f0f6fc; 
            text-decoration: none; 
        }
        .user-info { 
            color: #8b949e; 
            margin-right: 12px; 
            font-size: 14px;
        }
        .logout-btn { 
            background: #da3633; 
            color: white; 
            border: none; 
            padding: 8px 16px; 
            border-radius: 6px; 
            cursor: pointer; 
            white-space: nowrap;
            font-size: 14px;
        }
        .logout-btn:hover { 
            background: #f85149; 
        }
        
        /* Main Content */
        main { 
            padding: 24px 0; 
            min-height: calc(100vh - 140px); 
        }
        
        /* Repository List */
        .repos-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 24px; 
            flex-wrap: wrap;
            gap: 16px;
        }
        .btn { 
            background-color: #238636; 
            color: white; 
            border: none; 
            padding: 10px 16px; 
            border-radius: 6px; 
            cursor: pointer; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            font-size: 14px;
        }
        .btn:hover { 
            background-color: #2ea043; 
        }
        .btn-secondary {
            background-color: #6e7681;
        }
        .btn-secondary:hover {
            background-color: #8b949e;
        }
        .btn-danger { 
            background-color: #da3633; 
        }
        .btn-danger:hover { 
            background-color: #f85149; 
        }
        
        .repo-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
            gap: 16px; 
        }
        .repo-card { 
            background-color: #161b22; 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            padding: 20px; 
            cursor: pointer; 
            transition: all 0.2s; 
            word-wrap: break-word;
        }
        .repo-card:hover { 
            border-color: #58a6ff; 
            transform: translateY(-2px); 
        }
        .repo-name { 
            color: #58a6ff; 
            font-weight: 600; 
            margin-bottom: 8px; 
            font-size: 18px; 
            word-break: break-word;
        }
        .repo-desc { 
            color: #8b949e; 
            font-size: 14px; 
            margin-bottom: 12px; 
            word-break: break-word;
            line-height: 1.4;
        }
        
        /* Modal */
        .modal { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background-color: rgba(0, 0, 0, 0.8); 
            z-index: 1000; 
            padding: 20px;
            overflow-y: auto;
        }
        .modal-content { 
            background-color: #0d1117; 
            border: 1px solid #30363d; 
            border-radius: 12px; 
            padding: 24px; 
            width: 100%; 
            max-width: 500px; 
            margin: 0 auto;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        .modal-large {
            max-width: 800px;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #30363d;
        }
        .modal-title {
            color: #f0f6fc;
            font-size: 20px;
            font-weight: 600;
        }
        .close-btn {
            background: none;
            border: none;
            color: #8b949e;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        .close-btn:hover {
            background: #1c2128;
            color: #f0f6fc;
        }
        .form-group { 
            margin-bottom: 20px; 
        }
        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
            color: #f0f6fc;
        }
        .form-control { 
            width: 100%; 
            background-color: #161b22; 
            border: 1px solid #30363d; 
            border-radius: 6px; 
            padding: 10px 12px; 
            color: #c9d1d9; 
            box-sizing: border-box;
            font-size: 14px;
        }
        .form-control:focus {
            outline: none;
            border-color: #58a6ff;
        }
        textarea.form-control {
            resize: vertical;
            min-height: 120px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            line-height: 1.5;
        }
        
        /* Repository Detail - Simplified Layout */
        .repo-detail { 
            background-color: #161b22; 
            border: 1px solid #30363d; 
            border-radius: 12px; 
            padding: 24px; 
            word-wrap: break-word;
        }
        .files-list { 
            border: 1px solid #30363d; 
            border-radius: 8px; 
            margin-top: 20px; 
            overflow: hidden;
        }
        .file-item { 
            display: flex; 
            align-items: center; 
            padding: 16px; 
            border-bottom: 1px solid #30363d; 
            flex-wrap: wrap;
            gap: 12px;
        }
        .file-item:last-child {
            border-bottom: none;
        }
        .file-item:hover {
            background-color: #1c2128;
        }
        .file-name {
            flex: 1;
            min-width: 0;
            word-break: break-word;
            font-size: 14px;
        }
        .file-language {
            color: #8b949e;
            font-size: 12px;
            background: #30363d;
            padding: 4px 10px;
            border-radius: 12px;
            white-space: nowrap;
        }
        .file-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #8b949e;
        }
        .success-banner {
            background: #1c2128;
            border: 1px solid #238636;
            border-radius: 8px;
            padding: 16px;
            margin: 20px 0;
            color: #3fb950;
            word-break: break-word;
            font-size: 14px;
        }
        .clone-box {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 16px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .clone-input {
            flex: 1;
            background: transparent;
            border: none;
            color: #c9d1d9;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            padding: 10px;
            font-size: 14px;
            min-width: 0;
            word-break: break-all;
        }
        .action-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 24px;
        }
        .download-section {
            margin: 20px 0;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        /* README Styles - Simplified */
        .readme-section {
            margin: 40px 0 20px 0;
        }
        
        .readme-content {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 24px;
            margin-top: 20px;
            word-wrap: break-word;
        }
        
        .readme-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #30363d;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .readme-title {
            color: #f0f6fc;
            font-size: 20px;
            font-weight: 600;
        }
        
        .readme-meta {
            color: #8b949e;
            font-size: 14px;
        }
        
        .markdown-body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.6;
            color: #c9d1d9;
        }
        
        .markdown-body h1,
        .markdown-body h2,
        .markdown-body h3,
        .markdown-body h4 {
            color: #f0f6fc;
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: 600;
        }
        
        .markdown-body h1 {
            font-size: 2em;
            border-bottom: 1px solid #30363d;
            padding-bottom: 0.3em;
        }
        
        .markdown-body h2 {
            font-size: 1.5em;
            border-bottom: 1px solid #30363d;
            padding-bottom: 0.3em;
        }
        
        .markdown-body p {
            margin-bottom: 16px;
        }
        
        .markdown-body code {
            background-color: rgba(110, 118, 129, 0.4);
            border-radius: 6px;
            padding: 0.2em 0.4em;
            font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
            font-size: 0.85em;
        }
        
        .markdown-body pre {
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            overflow: auto;
            margin: 16px 0;
        }
        
        .markdown-body pre code {
            background: none;
            padding: 0;
        }
        
        .markdown-body ul,
        .markdown-body ol {
            padding-left: 2em;
            margin-bottom: 16px;
        }
        
        .markdown-body li {
            margin-bottom: 4px;
        }
        
        .markdown-body blockquote {
            border-left: 4px solid #30363d;
            padding-left: 16px;
            margin: 16px 0;
            color: #8b949e;
        }
        
        .markdown-body table {
            border-collapse: collapse;
            width: 100%;
            margin: 16px 0;
        }
        
        .markdown-body th,
        .markdown-body td {
            border: 1px solid #30363d;
            padding: 6px 13px;
            text-align: left;
        }
        
        .markdown-body th {
            background-color: #1c2128;
            font-weight: 600;
        }
        
        .markdown-body a {
            color: #58a6ff;
            text-decoration: none;
        }
        
        .markdown-body a:hover {
            text-decoration: underline;
        }
        
        .view-toggle {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .view-toggle-btn {
            flex: 1;
            padding: 10px;
            background: #161b22;
            border: 1px solid #30363d;
            color: #8b949e;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-toggle-btn.active {
            background: #238636;
            color: white;
            border-color: #238636;
        }
        
        .markdown-tips {
            background: #1c2128;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            margin: 16px 0;
            font-size: 13px;
            color: #8b949e;
        }
        
        .markdown-tips strong {
            color: #f0f6fc;
        }
  
        /* Upload Styles */
        .upload-area {
            border: 2px dashed #30363d;
            border-radius: 8px;
            padding: 40px 20px;
            text-align: center;
            margin: 20px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
  
        .upload-area:hover {
            border-color: #58a6ff;
            background-color: #1c2128;
        }
  
        .upload-area.dragover {
            border-color: #238636;
            background-color: #1c2128;
        }
  
        .upload-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: #8b949e;
        }
  
        .upload-text {
            color: #8b949e;
            margin-bottom: 16px;
        }
  
        .file-input {
            display: none;
        }
  
        .upload-btn {
            background: #238636;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
        }
  
        .upload-btn:hover {
            background: #2ea043;
        }
  
        .file-list {
            margin-top: 20px;
        }
  
        .file-info {
            flex: 1;
            margin-left: 12px;
        }
  
        .file-size {
            color: #8b949e;
            font-size: 12px;
        }
  
        .remove-file {
            background: none;
            border: none;
            color: #f85149;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
  
        .remove-file:hover {
            background: #da3633;
            color: white;
        }
  
        .upload-progress {
            margin-top: 16px;
        }
  
        .progress-bar {
            width: 100%;
            height: 4px;
            background: #30363d;
            border-radius: 2px;
            overflow: hidden;
        }
  
        .progress-fill {
            height: 100%;
            background: #238636;
            transition: width 0.3s ease;
        }
  
        /* Code Viewer Styles */
        .code-viewer {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 8px;
            margin: 20px 0;
            overflow: hidden;
        }
  
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #161b22;
            border-bottom: 1px solid #30363d;
        }
  
        .code-title {
            color: #f0f6fc;
            font-weight: 600;
            font-size: 14px;
        }
  
        .code-actions {
            display: flex;
            gap: 8px;
        }
  
        .code-content {
            padding: 0;
            margin: 0;
            overflow: auto;
            max-height: 600px;
        }
  
        .code-content pre {
            margin: 0;
            border-radius: 0;
            border: none;
        }
  
        .hljs {
            background: #0d1117 !important;
            padding: 16px !important;
        }
  
        /* Syntax Highlighting Overrides */
        .hljs-keyword { color: #ff7b72 !important; }
        .hljs-string { color: #a5d6ff !important; }
        .hljs-number { color: #79c0ff !important; }
        .hljs-function { color: #d2a8ff !important; }
        .hljs-comment { color: #8b949e !important; font-style: italic; }
        .hljs-attr { color: #7ee787 !important; }
        .hljs-tag { color: #7ee787 !important; }
        .hljs-name { color: #7ee787 !important; }
        .hljs-built_in { color: #ffa657 !important; }
        .hljs-params { color: #c9d1d9 !important; }
        .hljs-title { color: #d2a8ff !important; }
  
        /* Import from URL Styles */
        .url-import-form {
            background: #1c2128;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
  
        .url-examples {
            background: #1c2128;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 16px;
            margin: 16px 0;
            font-size: 13px;
            color: #8b949e;
        }
  
        .url-examples strong {
            color: #f0f6fc;
        }
  
        .example-list {
            margin-top: 8px;
            padding-left: 16px;
        }
  
        .example-list li {
            margin-bottom: 4px;
        }
  
        .import-progress {
            margin-top: 16px;
            text-align: center;
        }
  
        .spinner {
            border: 2px solid #30363d;
            border-top: 2px solid #238636;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-right: 8px;
        }
  
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            .header-content, .repos-header { flex-direction: column; align-items: flex-start; }
            .repo-grid { grid-template-columns: 1fr; }
            .clone-box, .file-item { flex-direction: column; align-items: stretch; }
            .file-actions { align-self: stretch; justify-content: space-between; }
            .action-buttons, .download-section { flex-direction: column; align-items: stretch; }
            .container { padding: 0 12px; }
            .modal { padding: 10px; }
            .readme-header { flex-direction: column; align-items: flex-start; }
        }
        @media (max-width: 480px) {
            .repo-detail { padding: 16px; }
            .file-actions { flex-direction: column; width: 100%; }
            .modal-content { padding: 20px; margin: 10px auto; }
            main { padding: 16px 0; }
        }
    </style>
  </head>
  <body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">CodeHub</div>
                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 12px;">
                    <span class="user-info">Welcome, ${user.username}</span>
                    <button class="logout-btn" onclick="logout()">Logout</button>
                </div>
            </div>
        </div>
    </header>
  
    <main>
        <div class="container">
            <div id="reposView">
                <div class="repos-header">
                    <h1 style="color: #f0f6fc; font-size: 24px;">Your Repositories</h1>
                    <button class="btn" onclick="showModal('createRepoModal')">+ New Repository</button>
                </div>
                <div id="reposList" class="repo-grid"></div>
            </div>
            <div id="repoDetailView" style="display: none;"></div>
        </div>
    </main>
  
    <!-- Create Repository Modal -->
    <div id="createRepoModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Create New Repository</h2>
                <button class="close-btn" onclick="closeModal('createRepoModal')">&times;</button>
            </div>
            <div class="form-group">
                <label>Repository Name</label>
                <input type="text" id="repoName" class="form-control" placeholder="my-project">
            </div>
            <div class="form-group">
                <label>Description (optional)</label>
                <input type="text" id="repoDesc" class="form-control" placeholder="A short description of your repository">
            </div>
            <button class="btn" onclick="createRepository()" style="width: 100%;">Create Repository</button>
        </div>
    </div>
  
    <!-- Add File Modal -->
    <div id="addFileModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title">Add New File</h2>
                <button class="close-btn" onclick="closeModal('addFileModal')">&times;</button>
            </div>
            <div class="form-group">
                <label>File Name</label>
                <input type="text" id="fileName" class="form-control" placeholder="example.js">
            </div>
            <div class="form-group">
                <label>Language</label>
                <select id="fileLanguage" class="form-control">
                    <option value="javascript">JavaScript</option>
                    <option value="python">Python</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="java">Java</option>
                    <option value="cpp">C++</option>
                    <option value="text">Plain Text</option>
                </select>
            </div>
            <div class="form-group">
                <label>Content</label>
                <textarea id="fileContent" class="form-control" rows="12" placeholder="// Your code here..."></textarea>
            </div>
            <button class="btn" onclick="addFile()" style="width: 100%;">Add File</button>
        </div>
    </div>
  
    <!-- Upload File Modal -->
    <div id="uploadFileModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title">Upload Files</h2>
                <button class="close-btn" onclick="closeModal('uploadFileModal')">&times;</button>
            </div>
            <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileUploadInput').click()">
                <div class="upload-icon">+</div>
                <div class="upload-text">Drag and drop files here or click to browse</div>
                <input type="file" id="fileUploadInput" class="file-input" multiple accept=".js,.jsx,.ts,.tsx,.py,.html,.htm,.css,.java,.cpp,.c,.cc,.txt,.md,.json,.xml,.csv">
            </div>
            <div id="selectedFiles" class="file-list"></div>
            <div id="uploadProgress" class="upload-progress" style="display: none;">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div style="margin-top: 8px; color: #8b949e;">Uploading...</div>
            </div>
            <button class="btn" id="uploadBtn" onclick="uploadSelectedFiles()" style="width: 100%; margin-top: 16px;" disabled>Upload Files</button>
        </div>
    </div>
  
    <!-- Import from URL Modal -->
    <div id="importUrlModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title">Import File from URL</h2>
                <button class="close-btn" onclick="closeModal('importUrlModal')">&times;</button>
            </div>
            <div class="url-examples">
                <strong>Supported URLs:</strong>
                <ul class="example-list">
                    <li>Direct file URLs (raw content)</li>
                    <li>GitHub raw files</li>
                    <li>Pastebin raw URLs</li>
                    <li>Any publicly accessible text file</li>
                </ul>
            </div>
            <div class="form-group">
                <label>File URL</label>
                <input type="url" id="importUrl" class="form-control" placeholder="https://raw.githubusercontent.com/user/repo/main/file.js">
            </div>
            <div class="form-group">
                <label>Custom File Name (optional)</label>
                <input type="text" id="importFileName" class="form-control" placeholder="Leave empty to auto-detect from URL">
            </div>
            <div id="importProgress" class="import-progress" style="display: none;">
                <span class="spinner"></span>
                <span>Importing file...</span>
            </div>
            <button class="btn" id="importBtn" onclick="importFromURL()" style="width: 100%; margin-top: 16px;">Import File</button>
        </div>
    </div>
  
    <!-- View/Edit File Modal -->
    <div id="viewFileModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title" id="viewFileTitle">File Name</h2>
                <button class="close-btn" onclick="closeModal('viewFileModal')">&times;</button>
            </div>
            <div class="form-group">
                <label>File Name</label>
                <input type="text" id="editFileName" class="form-control">
            </div>
            <div class="form-group">
                <label>Language</label>
                <select id="editFileLanguage" class="form-control">
                    <option value="javascript">JavaScript</option>
                    <option value="python">Python</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="java">Java</option>
                    <option value="cpp">C++</option>
                    <option value="text">Plain Text</option>
                </select>
            </div>
            <div class="form-group">
                <label>Content</label>
                <textarea id="editFileContent" class="form-control" rows="15"></textarea>
            </div>
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                <button class="btn" onclick="saveFileChanges()" style="flex: 1;">Save Changes</button>
                <button class="btn btn-danger" onclick="deleteFile(currentFileId)">Delete File</button>
            </div>
        </div>
    </div>
  
    <!-- Edit Repository Modal -->
    <div id="editRepoModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Edit Repository</h2>
                <button class="close-btn" onclick="closeModal('editRepoModal')">&times;</button>
            </div>
            <div class="form-group">
                <label>Repository Name</label>
                <input type="text" id="editRepoName" class="form-control">
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" id="editRepoDesc" class="form-control">
            </div>
            <button class="btn" onclick="saveRepoChanges()" style="width: 100%;">Save Changes</button>
        </div>
    </div>
  
    <!-- Edit README Modal -->
    <div id="editReadmeModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title">Edit README</h2>
                <button class="close-btn" onclick="closeModal('editReadmeModal')">&times;</button>
            </div>
            <div class="view-toggle">
                <button class="view-toggle-btn active" id="editViewBtn" onclick="switchReadmeView('edit')">Edit</button>
                <button class="view-toggle-btn" id="previewViewBtn" onclick="switchReadmeView('preview')">Preview</button>
            </div>
            <div id="readmeEditView">
                <div class="markdown-tips">
                    <strong>Markdown Tips:</strong> # Heading, **bold**, *italic*, \`code\`, [link](url), - list item
                </div>
                <textarea id="readmeContent" class="form-control" rows="15" placeholder="# Project Name&#10;&#10;Description of your project..."></textarea>
            </div>
            <div id="readmePreviewView" style="display: none;">
                <div class="readme-content">
                    <div id="readmePreviewContent" class="markdown-body"></div>
                </div>
            </div>
            <button class="btn" onclick="saveReadme()" style="width: 100%; margin-top: 16px;">Save README</button>
        </div>
    </div>
  
    <script>
        let currentRepoId = null;
        let currentFileId = null;
        let selectedFilesForUpload = [];
  
        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            loadRepositories();
            setupUploadEvents();
        });
  
        function setupUploadEvents() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileUploadInput');
  
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });
  
            uploadArea.addEventListener('dragleave', () => {
                uploadArea.classList.remove('dragover');
            });
  
            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                handleFileSelection(e.dataTransfer.files);
            });
  
            fileInput.addEventListener('change', (e) => {
                handleFileSelection(e.target.files);
            });
        }
  
        function handleFileSelection(files) {
            selectedFilesForUpload = Array.from(files);
            displaySelectedFiles();
        }
  
        function displaySelectedFiles() {
            const container = document.getElementById('selectedFiles');
            const uploadBtn = document.getElementById('uploadBtn');
  
            if (selectedFilesForUpload.length === 0) {
                container.innerHTML = '';
                uploadBtn.disabled = true;
                return;
            }
  
            uploadBtn.disabled = false;
            container.innerHTML = selectedFilesForUpload.map((file, index) => \`
                <div class="file-item">
                    <span style="font-size: 16px;">+</span>
                    <div class="file-info">
                        <div class="file-name">\${escapeHtml(file.name)}</div>
                        <div class="file-size">\${formatFileSize(file.size)}</div>
                    </div>
                    <button class="remove-file" onclick="removeSelectedFile(\${index})">X</button>
                </div>
            \`).join('');
        }
  
        function removeSelectedFile(index) {
            selectedFilesForUpload.splice(index, 1);
            displaySelectedFiles();
        }
  
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
  
        async function uploadSelectedFiles() {
            if (selectedFilesForUpload.length === 0 || !currentRepoId) return;
  
            const progressDiv = document.getElementById('uploadProgress');
            const progressFill = document.getElementById('progressFill');
            const uploadBtn = document.getElementById('uploadBtn');
  
            progressDiv.style.display = 'block';
            uploadBtn.disabled = true;
  
            const formData = new FormData();
            formData.append('repoId', currentRepoId);
            selectedFilesForUpload.forEach(file => {
                formData.append('files', file);
            });
  
            try {
                const response = await fetch('/api/upload-multiple', {
                    method: 'POST',
                    body: formData
                });
  
                const result = await response.json();
  
                if (response.ok) {
                    progressFill.style.width = '100%';
                    setTimeout(() => {
                        closeModal('uploadFileModal');
                        showRepoDetail(currentRepoId);
                        showAlert(result.message, 'success');
                        selectedFilesForUpload = [];
                        displaySelectedFiles();
                        progressDiv.style.display = 'none';
                        progressFill.style.width = '0%';
                    }, 500);
                } else {
                    throw new Error(result.error || 'Upload failed');
                }
            } catch (error) {
                console.error('Upload error:', error);
                showAlert('Upload failed: ' + error.message, 'error');
                progressDiv.style.display = 'none';
                uploadBtn.disabled = false;
            }
        }
  
        async function importFromURL() {
            const url = document.getElementById('importUrl').value.trim();
            const customFileName = document.getElementById('importFileName').value.trim();
  
            if (!url || !currentRepoId) {
                showAlert('Please enter a valid URL', 'error');
                return;
            }
  
            const progressDiv = document.getElementById('importProgress');
            const importBtn = document.getElementById('importBtn');
  
            progressDiv.style.display = 'block';
            importBtn.disabled = true;
  
            try {
                const response = await fetch('/api/import-from-url', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        url: url,
                        fileName: customFileName || null,
                        repoId: currentRepoId
                    })
                });
  
                const result = await response.json();
  
                if (response.ok) {
                    closeModal('importUrlModal');
                    showRepoDetail(currentRepoId);
                    showAlert(result.message, 'success');
                    document.getElementById('importUrl').value = '';
                    document.getElementById('importFileName').value = '';
                } else {
                    throw new Error(result.error || 'Import failed');
                }
            } catch (error) {
                console.error('Import error:', error);
                showAlert('Import failed: ' + error.message, 'error');
            } finally {
                progressDiv.style.display = 'none';
                importBtn.disabled = false;
            }
        }
  
        async function loadRepositories() {
            try {
                const response = await fetch('/api/repos');
                const repos = await response.json();
                
                const container = document.getElementById('reposList');
                
                if (repos.length === 0) {
                    container.innerHTML = '<div class="empty-state">No repositories yet. Create your first repository!</div>';
                    return;
                }
                
                container.innerHTML = repos.map(repo => \`
                    <div class="repo-card" onclick="showRepoDetail('\${repo.id}')">
                        <div class="repo-name">\${escapeHtml(repo.name)}</div>
                        <div class="repo-desc">\${escapeHtml(repo.description || 'No description')}</div>
                        <div style="color: #8b949e; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;">
                            <span>Created: \${new Date(repo.created).toLocaleDateString()}</span>
                            <span>Files: \${repo.files ? repo.files.length : 0}</span>
                        </div>
                    </div>
                \`).join('');
            } catch (error) {
                console.error('Error loading repositories:', error);
                showAlert('Failed to load repositories', 'error');
            }
        }
  
        async function createRepository() {
            const name = document.getElementById('repoName').value.trim();
            const description = document.getElementById('repoDesc').value.trim();
            
            if (!name) {
                showAlert('Repository name is required', 'error');
                return;
            }
            
            try {
                const response = await fetch('/api/repos', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, description })
                });
                
                if (response.ok) {
                    closeModal('createRepoModal');
                    document.getElementById('repoName').value = '';
                    document.getElementById('repoDesc').value = '';
                    loadRepositories();
                    showAlert('Repository created successfully!', 'success');
                } else {
                    throw new Error('Failed to create repository');
                }
            } catch (error) {
                console.error('Error creating repository:', error);
                showAlert('Failed to create repository', 'error');
            }
        }
  
        async function showRepoDetail(repoId) {
            try {
                currentRepoId = repoId;
                const response = await fetch(\`/api/repos/\${repoId}\`);
                const repo = await response.json();
                
                // Get README
                const readmeResponse = await fetch(\`/api/repos/\${repoId}/readme\`);
                const readme = await readmeResponse.json();
                
                const baseUrl = window.location.origin;
                const publicUrl = \`\${baseUrl}/repo/\${repoId}\`;
                const gitUrl = \`\${baseUrl}/repo/\${repoId}.git\`;
                
                document.getElementById('reposView').style.display = 'none';
                document.getElementById('repoDetailView').style.display = 'block';
                document.getElementById('repoDetailView').innerHTML = \`
                    <div class="repo-detail">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px;">
                            <div>
                                <h1 style="color: #58a6ff; font-size: 24px; margin-bottom: 8px; word-break: break-word;">\${escapeHtml(repo.name)}</h1>
                                <div style="color: #8b949e; font-size: 14px; word-break: break-word;">\${escapeHtml(repo.description || 'No description')}</div>
                            </div>
                            <button class="btn btn-secondary" onclick="showRepos()">Back</button>
                        </div>
                        
                        <div class="success-banner">
                            <strong>Public URL:</strong> \${publicUrl}<br>
                            <strong>Git Clone URL:</strong> \${gitUrl}
                        </div>
                        
                        <div class="clone-box">
                            <input type="text" value="\${publicUrl}" class="clone-input" id="repoUrl" readonly>
                            <button class="btn btn-secondary" onclick="copyToClipboard('\${publicUrl}')">Copy URL</button>
                        </div>
                        
                        <div class="download-section">
                            <button class="btn" onclick="downloadFullRepo('\${repoId}', '\${escapeHtml(repo.name)}')">
                                Download Archive
                            </button>
                            <span style="color: #8b949e; font-size: 13px;">\${repo.files ? repo.files.length : 0} files in \${escapeHtml(repo.name)}/</span>
                        </div>
                        
                        <div class="action-buttons">
                            <button class="btn" onclick="showModal('addFileModal')">+ Add File</button>
                            <button class="btn btn-secondary" onclick="showModal('uploadFileModal')">Upload Files</button>
                            <button class="btn btn-secondary" onclick="showModal('importUrlModal')">Import from URL</button>
                            <button class="btn btn-secondary" onclick="openEditRepoModal('\${repoId}', '\${escapeHtml(repo.name)}', '\${escapeHtml(repo.description || '')}')">Edit Info</button>
                            <button class="btn btn-danger" onclick="deleteRepository('\${repoId}')">Delete Repo</button>
                        </div>
                        
                        <h3 style="color: #f0f6fc; margin: 24px 0 16px 0; font-size: 18px;">Files</h3>
                        <div class="files-list">
                            \${repo.files && repo.files.length > 0 ? 
                              repo.files.map(file => \`
                                <div class="file-item">
                                    <span style="font-size: 16px;">+</span>
                                    <span class="file-name">\${escapeHtml(file.name)}</span>
                                    <span class="file-language">\${escapeHtml(file.language)}</span>
                                    <div class="file-actions">
                                        <button class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px;" onclick="viewFile('\${file.id}')">View/Edit</button>
                                        <a href="/raw/\${file.id}" target="_blank" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px;">Raw</a>
                                        <button class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px;" onclick="downloadFile('\${file.id}', '\${escapeHtml(file.name)}')">Download</button>
                                    </div>
                                </div>
                              \`).join('') : 
                              '<div class="empty-state">No files yet. Add your first file!</div>'
                            }
                        </div>
                        
                        <!-- README Section -->
                        <div class="readme-section">
                            <div class="readme-content">
                                <div class="readme-header">
                                    <div class="readme-title">README.md</div>
                                    <button class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px;" onclick="openEditReadmeModal()">Edit README</button>
                                </div>
                                <div class="markdown-body">
                                    \${renderMarkdown(readme.content)}
                                </div>
                            </div>
                        </div>
                    </div>
                \`;
            } catch (error) {
                console.error('Error loading repository:', error);
                showAlert('Failed to load repository', 'error');
            }
        }
  
        function showRepos() {
            document.getElementById('reposView').style.display = 'block';
            document.getElementById('repoDetailView').style.display = 'none';
            currentRepoId = null;
            loadRepositories();
        }
  
        async function addFile() {
            const name = document.getElementById('fileName').value.trim();
            const content = document.getElementById('fileContent').value;
            const language = document.getElementById('fileLanguage').value;
            
            if (!name) {
                showAlert('File name is required', 'error');
                return;
            }
            
            try {
                const response = await fetch(\`/api/repos/\${currentRepoId}/files\`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, content, language })
                });
                
                if (response.ok) {
                    closeModal('addFileModal');
                    document.getElementById('fileName').value = '';
                    document.getElementById('fileContent').value = '';
                    showRepoDetail(currentRepoId);
                    showAlert('File added successfully!', 'success');
                } else {
                    throw new Error('Failed to add file');
                }
            } catch (error) {
                console.error('Error adding file:', error);
                showAlert('Failed to add file', 'error');
            }
        }
  
        async function viewFile(fileId) {
            try {
                currentFileId = fileId;
                const response = await fetch(\`/api/files/\${fileId}\`);
                const file = await response.json();
                
                document.getElementById('viewFileTitle').textContent = file.name;
                document.getElementById('editFileName').value = file.name;
                document.getElementById('editFileContent').value = file.content;
                document.getElementById('editFileLanguage').value = file.language;
                
                showModal('viewFileModal');
            } catch (error) {
                console.error('Error loading file:', error);
                showAlert('Failed to load file', 'error');
            }
        }
  
        async function saveFileChanges() {
            const name = document.getElementById('editFileName').value.trim();
            const content = document.getElementById('editFileContent').value;
            const language = document.getElementById('editFileLanguage').value;
            
            try {
                const response = await fetch(\`/api/files/\${currentFileId}\`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, content, language })
                });
                
                if (response.ok) {
                    closeModal('viewFileModal');
                    showRepoDetail(currentRepoId);
                    showAlert('File updated successfully!', 'success');
                } else {
                    throw new Error('Failed to update file');
                }
            } catch (error) {
                console.error('Error updating file:', error);
                showAlert('Failed to update file', 'error');
            }
        }
  
        function openEditRepoModal(repoId, name, description) {
            document.getElementById('editRepoName').value = name;
            document.getElementById('editRepoDesc').value = description;
            showModal('editRepoModal');
        }
  
        async function saveRepoChanges() {
            const name = document.getElementById('editRepoName').value.trim();
            const description = document.getElementById('editRepoDesc').value.trim();
            
            if (!name) {
                showAlert('Repository name is required', 'error');
                return;
            }
            
            try {
                const response = await fetch(\`/api/repos/\${currentRepoId}\`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, description })
                });
                
                if (response.ok) {
                    closeModal('editRepoModal');
                    showRepoDetail(currentRepoId);
                    showAlert('Repository updated successfully!', 'success');
                } else {
                    throw new Error('Failed to update repository');
                }
            } catch (error) {
                console.error('Error updating repository:', error);
                showAlert('Failed to update repository', 'error');
            }
        }
  
        async function openEditReadmeModal() {
            try {
                const response = await fetch(\`/api/repos/\${currentRepoId}/readme\`);
                const readme = await response.json();
                
                document.getElementById('readmeContent').value = readme.content;
                document.getElementById('readmePreviewContent').innerHTML = renderMarkdown(readme.content);
                switchReadmeView('edit');
                showModal('editReadmeModal');
            } catch (error) {
                console.error('Error loading README:', error);
                showAlert('Failed to load README', 'error');
            }
        }
  
        function switchReadmeView(view) {
            const editBtn = document.getElementById('editViewBtn');
            const previewBtn = document.getElementById('previewViewBtn');
            const editView = document.getElementById('readmeEditView');
            const previewView = document.getElementById('readmePreviewView');
            
            if (view === 'edit') {
                editBtn.classList.add('active');
                previewBtn.classList.remove('active');
                editView.style.display = 'block';
                previewView.style.display = 'none';
            } else {
                editBtn.classList.remove('active');
                previewBtn.classList.add('active');
                editView.style.display = 'none';
                previewView.style.display = 'block';
                document.getElementById('readmePreviewContent').innerHTML = renderMarkdown(document.getElementById('readmeContent').value);
            }
        }
  
        function saveReadme() {
            const content = document.getElementById('readmeContent').value;
            
            fetch(\`/api/repos/\${currentRepoId}/readme\`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content })
            })
            .then(response => {
                if (response.ok) {
                    closeModal('editReadmeModal');
                    showRepoDetail(currentRepoId);
                    showAlert('README updated successfully!', 'success');
                } else {
                    throw new Error('Failed to update README');
                }
            })
            .catch(error => {
                console.error('Error updating README:', error);
                showAlert('Failed to update README', 'error');
            });
        }
  
        async function deleteFile(fileId) {
            if (!confirm('Are you sure you want to delete this file? This action cannot be undone.')) {
                return;
            }
  
            try {
                const response = await fetch(\`/api/files/\${fileId}\`, {
                    method: 'DELETE'
                });
  
                if (response.ok) {
                    showAlert('File deleted successfully!', 'success');
                    closeModal('viewFileModal');
                    showRepoDetail(currentRepoId);
                } else {
                    throw new Error('Failed to delete file');
                }
            } catch (error) {
                console.error('Error deleting file:', error);
                showAlert('Failed to delete file', 'error');
            }
        }
  
        async function deleteRepository(repoId) {
            if (!confirm('Are you sure you want to delete this repository? This action cannot be undone.')) {
                return;
            }
  
            try {
                const response = await fetch(\`/api/repos/\${repoId}\`, {
                    method: 'DELETE'
                });
  
                if (response.ok) {
                    showAlert('Repository deleted successfully!', 'success');
                    showRepos();
                } else {
                    throw new Error('Failed to delete repository');
                }
            } catch (error) {
                console.error('Error deleting repository:', error);
                showAlert('Failed to delete repository', 'error');
            }
        }
  
        function downloadFile(fileId, fileName) {
            const link = document.createElement('a');
            link.href = '/raw/' + fileId;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
  
        function downloadFullRepo(repoId, repoName) {
            const link = document.createElement('a');
            link.href = '/download/' + repoId;
            link.download = repoName + '-archive.txt';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
  
        async function copyToClipboard(text) {
            try {
                await navigator.clipboard.writeText(text);
                showAlert('URL copied to clipboard!', 'success');
            } catch (err) {
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showAlert('URL copied to clipboard!', 'success');
            }
        }
  
        function showAlert(message, type) {
            const alertDiv = document.createElement('div');
            alertDiv.style.cssText = \`
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 16px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 10000;
                max-width: 400px;
                word-break: break-word;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                animation: slideIn 0.3s ease;
            \`;
            
            if (type === 'success') {
                alertDiv.style.backgroundColor = '#238636';
            } else {
                alertDiv.style.backgroundColor = '#da3633';
            }
            
            alertDiv.textContent = message;
            document.body.appendChild(alertDiv);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 3000);
        }
  
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
  
        function renderMarkdown(content) {
            return content
                .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
                .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
                .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
                .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                .replace(/\\*\\*(.*?)\\*\\*/gim, '<strong>$1</strong>')
                .replace(/\\*(.*?)\\*/gim, '<em>$1</em>')
                .replace(/_(.*?)_/gim, '<em>$1</em>')
                .replace(/\\\`(.*?)\\\`/gim, '<code>$1</code>')
                .replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
                .replace(/^\\s*[-*+] (.*$)/gim, '<li>$1</li>')
                .replace(/(<li>.*<\\/li>)/s, '<ul>$1</ul>')
                .replace(/\\[([^\\[]+)\\]\\(([^\\)]+)\\)/gim, '<a href="$2">$1</a>')
                .replace(/\\n$/gim, '<br>')
                .replace(/\\n\\n/g, '</p><p>')
                .replace(/\\n/g, '<br>')
                .replace(/^(?!<(\\/)?(h|ul|ol|li|blockquote|code|pre)).*$/gim, '<p>$&</p>')
                .replace(/<p><\\/p>/g, '')
                .replace(/<p><br><\\/p>/g, '')
                .replace(/\\\`\\\`\\\`([^\\\`]+)\\\`\\\`\\\`/g, '<pre><code>$1</code></pre>');
        }
  
        async function logout() {
            try {
                await fetch('/api/auth/logout', { method: 'POST' });
                window.location.href = '/';
            } catch (error) {
                console.error('Logout error:', error);
                window.location.href = '/';
            }
        }
  
        function showModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
        }
  
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }
  
        window.onclick = function(event) {
            const modals = document.getElementsByClassName('modal');
            for (let modal of modals) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        }
  
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modals = document.getElementsByClassName('modal');
                for (let modal of modals) {
                    modal.style.display = 'none';
                }
            }
        });
  
        const style = document.createElement('style');
        style.textContent = \`
            @keyframes slideIn {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
        \`;
        document.head.appendChild(style);
    </script>
  </body>
  </html>`;
  
    return new Response(html, {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    });
  }
  
  // Utility function
  function generateId() {
  return Math.random().toString(36).substring(2) + Date.now().toString(36);
  }
  
  // Markdown renderer function
  function renderMarkdown(content) {
    // Simple markdown to HTML converter
    return content
      // Headers
      .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
      .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
      .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
      
      // Bold & Italic
      .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/gim, '<em>$1</em>')
      .replace(/_(.*?)_/gim, '<em>$1</em>')
      
      // Code
      .replace(/`(.*?)`/gim, '<code>$1</code>')
      
      // Blockquotes
      .replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
      
      // Lists
      .replace(/^\s*[-*+] (.*$)/gim, '<li>$1</li>')
      .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
      
      // Links
      .replace(/\[([^\[]+)\]\(([^\)]+)\)/gim, '<a href="$2">$1</a>')
      
      // Line breaks
      .replace(/\n$/gim, '<br>')
      
      // Preserve multiple newlines
      .replace(/\n\n/g, '</p><p>')
      .replace(/\n/g, '<br>')
      
      // Wrap in paragraphs
      .replace(/^(?!<(\/)?(h|ul|ol|li|blockquote|code|pre)).*$/gim, '<p>$&</p>')
      
      // Clean up empty paragraphs
      .replace(/<p><\/p>/g, '')
      .replace(/<p><br><\/p>/g, '')
      
      // Handle code blocks
      .replace(/```([^`]+)```/g, '<pre><code>$1</code></pre>');
  }
  
  // HTML escape function
  function escapeHtml(unsafe) {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }