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': '*'
          }
        });
      }
    }
  };
  
  // 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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.put(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.put(`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)
          };
  
          await env.KODE_STORAGE.put(`session:${sessionId}`, JSON.stringify(sessionData), {
            expirationTtl: 86400 // 24 hours
          });
  
          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 env.KODE_STORAGE.delete(`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 repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
      const repoList = [];
  
      for (const key of repos.keys) {
        try {
          const repoData = await env.KODE_STORAGE.get(key.name);
          if (repoData) {
            const repo = JSON.parse(repoData);
            const repoId = key.name.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 env.KODE_STORAGE.get(`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 repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
      console.log('Found repositories:', repos.keys.length);
      
      for (const key of repos.keys) {
        try {
          const repoData = await env.KODE_STORAGE.get(key.name);
          if (repoData) {
            const repo = JSON.parse(repoData);
            if (repo.files && repo.files.length > 0) {
              console.log(`Checking repo ${key.name} 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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.get(`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 repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
        const repoList = [];
  
        for (const key of repos.keys) {
          const repoData = await env.KODE_STORAGE.get(key.name);
          if (repoData) {
            const repo = JSON.parse(repoData);
            const repoId = key.name.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 env.KODE_STORAGE.put(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.put(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.put(`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 repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
        
        for (const key of repos.keys) {
          const repoData = await env.KODE_STORAGE.get(key.name);
          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 env.KODE_STORAGE.put(key.name, 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 repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
        
        for (const key of repos.keys) {
          const repoData = await env.KODE_STORAGE.get(key.name);
          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 env.KODE_STORAGE.put(key.name, 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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.delete(`repo:${repoId}`);
        return jsonResponse({ success: true });
      }
  
      // Get file content - PUBLIC
      if (path.match(/^\/api\/files\/[^\/]+$/) && method === 'GET') {
        const fileId = path.split('/')[3];
        const repos = await env.KODE_STORAGE.list({ prefix: 'repo:' });
        
        for (const key of repos.keys) {
          const repoData = await env.KODE_STORAGE.get(key.name);
          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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.get(`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 env.KODE_STORAGE.put(`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 env.KODE_STORAGE.get(`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({ file: file.name, error: error.message });
            }
        }
  
        // Save repository with new files
        await env.KODE_STORAGE.put(`repo:${repoId}`, JSON.stringify(repo));
  
        return jsonResponse({
            success: true,
            uploaded: uploadedFiles.length,
            files: uploadedFiles,
            errors: errors
        });
      }
  
      // Import file from URL - PROTECTED - DIPINDAHKAN ke handler terpisah
      if (path === '/api/import-from-url' && method === 'POST') {
        // Handler ini sekarang dipindahkan ke fungsi handleImportFromURL terpisah
        // yang sudah ditangani di routing utama
        return jsonResponse({ error: 'This endpoint is handled separately' }, 404);
      }
  
      return jsonResponse({ error: 'Not found' }, 404);
  
    } catch (error) {
      console.error('API error:', error);
      return jsonResponse({ error: 'API error' }, 500);
    }
  }
  
  // Serve login page
  function serveLoginPage() {
    const html = `<!DOCTYPE html>
  <html>
  <head>
    <title>Login - CodeHub</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
            background: #0d1117; 
            color: #c9d1d9; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-height: 100vh; 
            margin: 0; 
            padding: 20px;
        }
        .login-container { 
            background: #161b22; 
            padding: 24px; 
            border-radius: 12px; 
            border: 1px solid #30363d; 
            width: 100%;
            max-width: 400px;
        }
        .form-group { 
            margin-bottom: 20px; 
        }
        label { 
            display: block; 
            margin-bottom: 8px; 
            font-weight: 500;
            font-size: 14px;
        }
        input { 
            width: 100%; 
            padding: 12px; 
            background: #0d1117; 
            border: 1px solid #30363d; 
            border-radius: 6px; 
            color: #c9d1d9; 
            font-size: 16px;
            box-sizing: border-box;
        }
        input:focus {
            outline: none;
            border-color: #58a6ff;
        }
        button { 
            width: 100%; 
            padding: 12px; 
            background: #238636; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            font-size: 16px;
            font-weight: 500;
        }
        button:hover {
            background: #2ea043;
        }
        .error { 
            color: #f85149; 
            margin-top: 16px; 
            font-size: 14px;
            text-align: center;
            padding: 10px;
            background: #da3633;
            border-radius: 6px;
        }
        h2 {
            text-align: center;
            margin-bottom: 24px;
            color: #f0f6fc;
            font-size: 24px;
        }
        .credential-note {
            margin-top: 20px;
            font-size: 13px;
            color: #8b949e;
            text-align: center;
            line-height: 1.5;
            padding: 12px;
            background: #1c2128;
            border-radius: 6px;
        }
    </style>
  </head>
  <body>
    <div class="login-container">
        <h2>Login to CodeHub</h2>
        <form id="loginForm">
            <div class="form-group">
                <label>Username:</label>
                <input type="text" name="username" required value="">
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input type="password" name="password" required value="">
            </div>
            <button type="submit">Login</button>
        </form>
        <div id="error" class="error" style="display: none;"></div>
        <div class="credential-note">
            <strong>Default credentials are pre-filled</strong><br>
            Username: admin<br>
            Password:admin123
        </div>
    </div>
    <script>
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const errorDiv = document.getElementById('error');
            errorDiv.style.display = 'none';
            
            const formData = new FormData(e.target);
            const data = {
                username: formData.get('username'),
                password: formData.get('password')
            };
  
            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
  
                if (response.ok) {
                    window.location.href = '/';
                } else {
                    const result = await response.json();
                    errorDiv.textContent = result.error;
                    errorDiv.style.display = 'block';
                }
            } catch (error) {
                errorDiv.textContent = 'Login failed. Please try again.';
                errorDiv.style.display = 'block';
            }
        });
  
        // Auto-hide error when user starts typing
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', () => {
                document.getElementById('error').style.display = 'none';
            });
        });
    </script>
  </body>
  </html>`;
  
    return new Response(html, {
      headers: { 'Content-Type': 'text/html; charset=utf-8' }
    });
  }
  
  // Serve main app dengan tampilan yang disatukan dan fitur upload - DIPERBAIKI
  function serveHTML(env, authenticated, user) {
    if (!authenticated) {
      return new Response('', {
        status: 302,
        headers: { 'Location': '/login' }
      });
    }
  
    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 - Your Code Repository</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/html.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/json.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-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            margin-bottom: 8px;
        }
  
        .file-info {
            flex: 1;
            margin-left: 12px;
        }
  
        .file-name {
            color: #c9d1d9;
            font-weight: 500;
        }
  
        .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="showNewRepoModal()">
                        <span style="font-size: 16px;">+</span> New Repository
                    </button>
                </div>
                <div id="repoList" class="repo-grid"></div>
            </div>
  
            <div id="repoDetailView" style="display: none;">
                <button class="btn btn-secondary" onclick="showRepos()" style="margin-bottom: 20px; display: inline-flex; align-items: center; gap: 6px;">
                    ← Back to Repositories
                </button>
                <div id="repoDetailContent"></div>
            </div>
        </div>
    </main>
  
    <!-- New Repository Modal -->
    <div id="newRepoModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Create New Repository</h2>
                <button class="close-btn" onclick="closeModal('newRepoModal')">&times;</button>
            </div>
            <form id="newRepoForm">
                <div class="form-group">
                    <label for="repoName">Repository Name</label>
                    <input type="text" id="repoName" class="form-control" required placeholder="my-awesome-project">
                </div>
                <div class="form-group">
                    <label for="repoDescription">Description</label>
                    <textarea id="repoDescription" class="form-control" placeholder="A brief description of your repository"></textarea>
                </div>
                <button type="submit" class="btn" style="width: 100%;">Create Repository</button>
            </form>
        </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>
            <form id="editRepoForm">
                <div class="form-group">
                    <label for="editRepoName">Repository Name</label>
                    <input type="text" id="editRepoName" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="editRepoDescription">Description</label>
                    <textarea id="editRepoDescription" class="form-control" placeholder="A brief description of your repository"></textarea>
                </div>
                <button type="submit" class="btn" style="width: 100%;">Save Changes</button>
            </form>
        </div>
    </div>
  
    <!-- New File Modal -->
    <div id="newFileModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Add New File</h2>
                <button class="close-btn" onclick="closeModal('newFileModal')">&times;</button>
            </div>
            <form id="newFileForm">
                <div class="form-group">
                    <label for="fileName">File Name</label>
                    <input type="text" id="fileName" class="form-control" required placeholder="example.js">
                </div>
                <div class="form-group">
                    <label for="fileLanguage">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">Text</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="fileContent">Content</label>
                    <textarea id="fileContent" class="form-control" required placeholder="// Your code here" style="min-height: 200px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;"></textarea>
                </div>
                <button type="submit" class="btn" style="width: 100%;">Add File</button>
            </form>
        </div>
    </div>
  
    <!-- Edit File Modal -->
    <div id="editFileModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Edit File</h2>
                <button class="close-btn" onclick="closeModal('editFileModal')">&times;</button>
            </div>
            <form id="editFileForm">
                <div class="form-group">
                    <label for="editFileName">File Name</label>
                    <input type="text" id="editFileName" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="editFileLanguage">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">Text</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="editFileContent">Content</label>
                    <textarea id="editFileContent" class="form-control" required style="min-height: 300px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;"></textarea>
                </div>
                <button type="submit" class="btn" style="width: 100%;">Save Changes</button>
            </form>
        </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.md</h2>
                <button class="close-btn" onclick="closeModal('editReadmeModal')">&times;</button>
            </div>
            <div class="view-toggle">
                <button class="view-toggle-btn active" onclick="switchReadmeView('edit')">Edit</button>
                <button class="view-toggle-btn" onclick="switchReadmeView('preview')">Preview</button>
            </div>
            <div id="readme-edit-view">
                <div class="form-group">
                    <label for="readmeContent">README Content (Markdown)</label>
                    <textarea id="readmeContent" class="form-control" style="min-height: 400px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;" placeholder="# Project Title&#10;&#10;## Description&#10;&#10;Write your project description here..."></textarea>
                </div>
                <div class="markdown-tips">
                    <strong>Markdown Tips:</strong><br>
                    • Headers: # H1, ## H2, ### H3<br>
                    • <strong>Bold</strong>: **text** or __text__<br>
                    • <em>Italic</em>: *text* or _text_<br>
                    • \`code\`: \`inline code\`<br>
                    • Lists: - item or 1. item<br>
                    • [Links](url), ![Images](url)<br>
                    • \`\`\`code blocks\`\`\`
                </div>
                <button type="button" class="btn" onclick="saveReadme()" style="width: 100%;">Save README</button>
            </div>
            <div id="readme-preview-view" style="display: none;">
                <div class="readme-content">
                    <div class="markdown-body" id="liveReadmePreview"></div>
                </div>
            </div>
        </div>
    </div>
  
    <!-- Upload File Modal -->
    <div id="uploadFileModal" class="modal">
        <div class="modal-content">
            <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">
                <div class="upload-icon">📁</div>
                <div class="upload-text">
                    <strong>Drag & drop files here</strong><br>
                    or click to select files
                </div>
                <input type="file" id="fileInput" class="file-input" multiple accept=".js,.py,.html,.css,.java,.cpp,.txt,.md,.json,.xml,.csv">
                <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
                    Select Files
                </button>
            </div>
            <div id="fileList" class="file-list"></div>
            <div id="uploadProgress" class="upload-progress" style="display: none;">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                </div>
                <div style="text-align: center; color: #8b949e; font-size: 14px; margin-top: 8px;">
                    Uploading: <span id="progressText">0%</span>
                </div>
            </div>
            <button id="uploadSubmitBtn" class="btn" style="width: 100%; margin-top: 20px; display: none;" onclick="uploadFiles()">
                📤 Upload Files
            </button>
        </div>
    </div>
  
    <!-- Import from URL Modal -->
    <div id="importUrlModal" class="modal">
        <div class="modal-content">
            <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-import-form">
                <div class="form-group">
                    <label for="importUrl">File URL</label>
                    <input type="url" id="importUrl" class="form-control" required placeholder="https://example.com/file.js">
                </div>
                <div class="form-group">
                    <label for="importFileName">File Name (optional)</label>
                    <input type="text" id="importFileName" class="form-control" placeholder="custom-name.js">
                    <div style="color: #8b949e; font-size: 12px; margin-top: 4px;">
                        Leave empty to use filename from URL
                    </div>
                </div>
                <button type="button" class="btn" style="width: 100%;" onclick="importFromURL()">
                    🌐 Import from URL
                </button>
            </div>
            <div class="url-examples">
                <strong>Supported URL Examples:</strong>
                <ul class="example-list">
                    <li>Raw GitHub files: <code>https://raw.githubusercontent.com/user/repo/main/file.js</code></li>
                    <li>Gists: <code>https://gist.githubusercontent.com/user/gist-id/raw/file.js</code></li>
                    <li>Pastebin-like services</li>
                    <li>Any public URL with text content</li>
                </ul>
            </div>
            <div id="importProgress" class="import-progress" style="display: none;">
                <div class="spinner"></div>
                <span style="color: #8b949e;">Importing file...</span>
            </div>
        </div>
    </div>
  
    <!-- View File Modal -->
    <div id="viewFileModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h2 class="modal-title" id="viewFileTitle">View File</h2>
                <button class="close-btn" onclick="closeModal('viewFileModal')">&times;</button>
            </div>
            <div id="fileViewerContent"></div>
        </div>
    </div>
  
    <script>
        let currentRepoId = null;
        let currentEditingFileId = null;
        let selectedFiles = [];
  
        // Load repositories on page load - DIPERBAIKI
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, initializing...');
            loadRepos();
            initUpload();
            setupEventListeners();
        });
  
        // Setup event listeners - FUNGSI BARU
        function setupEventListeners() {
            console.log('Setting up event listeners...');
            
            // New Repository Form
            const newRepoForm = document.getElementById('newRepoForm');
            if (newRepoForm) {
                newRepoForm.addEventListener('submit', handleNewRepoSubmit);
            } else {
                console.error('newRepoForm not found');
            }
  
            // Edit Repository Form
            const editRepoForm = document.getElementById('editRepoForm');
            if (editRepoForm) {
                editRepoForm.addEventListener('submit', handleEditRepoSubmit);
            }
  
            // New File Form
            const newFileForm = document.getElementById('newFileForm');
            if (newFileForm) {
                newFileForm.addEventListener('submit', handleNewFileSubmit);
            }
  
            // Edit File Form
            const editFileForm = document.getElementById('editFileForm');
            if (editFileForm) {
                editFileForm.addEventListener('submit', handleEditFileSubmit);
            }
        }
  
        async function loadRepos() {
            try {
                console.log('Loading repositories...');
                const response = await fetch('/api/repos');
                if (response.status === 401) {
                    window.location.href = '/login';
                    return;
                }
                
                if (!response.ok) {
                    throw new Error(\`HTTP error! status: \${response.status}\`);
                }
                
                const repos = await response.json();
                console.log('Repositories loaded:', repos);
                displayRepos(repos);
            } catch (error) {
                console.error('Error loading repositories:', error);
                showAlert('Failed to load repositories: ' + error.message, 'error');
            }
        }
  
        function displayRepos(repos) {
            const repoList = document.getElementById('repoList');
            if (!repoList) {
                console.error('repoList element not found');
                return;
            }
  
            if (repos.length === 0) {
                repoList.innerHTML = '<div class="empty-state">No repositories yet. Create your first repository!</div>';
                return;
            }
  
            repoList.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; align-items: center; 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('');
        }
  
        function showRepos() {
            const reposView = document.getElementById('reposView');
            const repoDetailView = document.getElementById('repoDetailView');
            
            if (reposView && repoDetailView) {
                reposView.style.display = 'block';
                repoDetailView.style.display = 'none';
                loadRepos();
            }
        }
  
        // Handler functions - DIPISAHKAN UNTUK LEBIH BAIK
        async function handleNewRepoSubmit(e) {
            e.preventDefault();
            console.log('Handling new repository submission...');
            
            const name = document.getElementById('repoName').value;
            const description = document.getElementById('repoDescription').value;
  
            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) {
                    const result = await response.json();
                    console.log('Repository created:', result);
                    closeModal('newRepoModal');
                    document.getElementById('newRepoForm').reset();
                    loadRepos();
                    showAlert('Repository created successfully!', 'success');
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to create repository');
                }
            } catch (error) {
                console.error('Error creating repository:', error);
                showAlert('Failed to create repository: ' + error.message, 'error');
            }
        }
  
        async function handleEditRepoSubmit(e) {
            e.preventDefault();
            const name = document.getElementById('editRepoName').value;
            const description = document.getElementById('editRepoDescription').value;
  
            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 {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to update repository');
                }
            } catch (error) {
                console.error('Error updating repository:', error);
                showAlert('Failed to update repository: ' + error.message, 'error');
            }
        }
  
        async function handleNewFileSubmit(e) {
            e.preventDefault();
            const name = document.getElementById('fileName').value;
            const language = document.getElementById('fileLanguage').value;
            const content = document.getElementById('fileContent').value;
  
            if (!name || !content) {
                showAlert('File name and content are required', 'error');
                return;
            }
  
            try {
                const response = await fetch(\`/api/repos/\${currentRepoId}/files\`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, language, content })
                });
  
                if (response.ok) {
                    closeModal('newFileModal');
                    document.getElementById('newFileForm').reset();
                    showRepoDetail(currentRepoId);
                    showAlert('File added successfully!', 'success');
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to add file');
                }
            } catch (error) {
                console.error('Error adding file:', error);
                showAlert('Failed to add file: ' + error.message, 'error');
            }
        }
  
        async function handleEditFileSubmit(e) {
            e.preventDefault();
            const name = document.getElementById('editFileName').value;
            const language = document.getElementById('editFileLanguage').value;
            const content = document.getElementById('editFileContent').value;
  
            if (!name || !content) {
                showAlert('File name and content are required', 'error');
                return;
            }
  
            try {
                const response = await fetch(\`/api/files/\${currentEditingFileId}\`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, language, content })
                });
  
                if (response.ok) {
                    closeModal('editFileModal');
                    showRepoDetail(currentRepoId);
                    showAlert('File updated successfully!', 'success');
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to update file');
                }
            } catch (error) {
                console.error('Error updating file:', error);
                showAlert('Failed to update file: ' + error.message, 'error');
            }
        }
  
        async function showRepoDetail(repoId) {
            try {
                const response = await fetch(\`/api/repos/\${repoId}\`);
                if (response.status === 401) {
                    window.location.href = '/login';
                    return;
                }
                if (!response.ok) {
                    throw new Error('Repository not found');
                }
                
                const repo = await response.json();
                currentRepoId = repoId;
                
                document.getElementById('reposView').style.display = 'none';
                document.getElementById('repoDetailView').style.display = 'block';
                
                const detailContent = document.getElementById('repoDetailContent');
                detailContent.innerHTML = \`
                    <div class="repo-detail">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; gap: 12px;">
                            <div style="flex: 1;">
                                <h1 style="color: #58a6ff; margin-bottom: 8px; font-size: 28px;">\${escapeHtml(repo.name)}</h1>
                                <div style="color: #8b949e; margin-bottom: 12px; font-size: 16px;">\${escapeHtml(repo.description || 'No description')}</div>
                            </div>
                            <button class="btn btn-secondary" onclick="showEditRepoModal()" style="white-space: nowrap;">
                                ✏️ Edit Repository
                            </button>
                        </div>
                        
                        <div style="color: #8b949e; font-size: 14px; margin-bottom: 24px;">
                            Created: \${new Date(repo.created).toLocaleDateString()} • 
                            Files: \${repo.files ? repo.files.length : 0}
                        </div>
                        
                        <!-- Repository Info & Clone Section -->
                        <div class="success-banner">
                            <strong>Public URL:</strong> \${repo.publicUrl}<br>
                            <strong>Git Clone URL:</strong> \${repo.gitUrl}
                        </div>
                        
                        <div class="clone-box">
                            <input type="text" value="\${repo.publicUrl}" class="clone-input" id="publicUrl-\${repo.id}" readonly>
                            <button class="btn" onclick="copyToClipboard('\${repo.publicUrl}')">Copy Public URL</button>
                        </div>
  
                        <div class="clone-box">
                            <input type="text" value="\${repo.gitUrl}" class="clone-input" id="gitUrl-\${repo.id}" readonly>
                            <button class="btn" onclick="copyToClipboard('\${repo.gitUrl}')">Copy Git URL</button>
                        </div>
  
                        <div class="download-section">
                            <button class="btn" onclick="downloadFullRepo('\${repo.id}', '\${escapeHtml(repo.name)}')">
                                📥 Download as Text Archive
                            </button>
                            <div style="color: #8b949e; font-size: 14px;">
                                📁 <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 -->
                        <div style="display: flex; justify-content: space-between; align-items: center; margin: 32px 0 20px 0; flex-wrap: wrap; gap: 12px;">
                            <h2 style="color: #f0f6fc; font-size: 20px;">Files</h2>
                            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                                <button class="btn" onclick="showNewFileModal()">
                                    <span style="font-size: 16px;">+</span> Add File
                                </button>
                                <button class="btn" onclick="showUploadFileModal()">
                                    📁 Upload Files
                                </button>
                                <button class="btn" onclick="showImportUrlModal()">
                                    🌐 Import from URL
                                </button>
                            </div>
                        </div>
                        
                        <div class="files-list">
                            \${repo.files && repo.files.length > 0 ? 
                                repo.files.map(file => \`
                                    <div class="file-item">
                                        <span style="font-size: 18px;">📄</span>
                                        <span class="file-name">\${escapeHtml(file.name)} \${file.importedFrom ? '<span style="color: #8b949e; font-size: 11px;">(imported)</span>' : ''}</span>
                                        <span class="file-language">\${escapeHtml(file.language)}</span>
                                        <div class="file-actions">
                                            <button class="btn btn-secondary" onclick="viewFile('\${file.id}')" style="padding: 6px 12px; font-size: 12px;">
                                                👁️ View
                                            </button>
                                            <button class="btn btn-secondary" onclick="editFile('\${file.id}')" style="padding: 6px 12px; font-size: 12px;">
                                                ✏️ Edit
                                            </button>
                                            <a href="/raw/\${file.id}" class="btn btn-secondary" target="_blank" style="padding: 6px 12px; font-size: 12px; text-decoration: none;">
                                                📄 Raw
                                            </a>
                                            <button class="btn" onclick="downloadFile('\${file.id}', '\${escapeHtml(file.name)}')" style="padding: 6px 12px; font-size: 12px;">
                                                📥 Download
                                            </button>
                                            <button class="btn btn-danger" onclick="deleteFile('\${file.id}')" style="padding: 6px 12px; font-size: 12px;">
                                                🗑️ Delete
                                            </button>
                                        </div>
                                    </div>
                                \`).join('') : 
                                '<div class="empty-state">No files yet. Add your first file!</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 style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                                        <div class="readme-meta">
                                            Last updated: \${new Date(repo.readme ? repo.readme.lastUpdated : repo.created).toLocaleDateString()}
                                        </div>
                                        <button class="btn" onclick="showEditReadmeModal()">
                                            ✏️ Edit README
                                        </button>
                                    </div>
                                </div>
                                <div class="markdown-body">
                                    \${renderMarkdown(repo.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.')}
                                </div>
                            </div>
                        </div>
                        
                        <div class="action-buttons">
                            <button class="btn btn-danger" onclick="deleteRepository('\${repo.id}')">
                                🗑️ Delete Repository
                            </button>
                        </div>
                    </div>
                \`;
            } catch (error) {
                console.error('Error loading repository:', error);
                showAlert('Failed to load repository', 'error');
            }
        }
  
        function showNewRepoModal() {
            console.log('Showing new repo modal');
            const modal = document.getElementById('newRepoModal');
            if (modal) {
                modal.style.display = 'block';
            } else {
                console.error('newRepoModal not found');
            }
        }
  
        function showEditRepoModal() {
            fetch(\`/api/repos/\${currentRepoId}\`)
                .then(response => response.json())
                .then(repo => {
                    document.getElementById('editRepoName').value = repo.name;
                    document.getElementById('editRepoDescription').value = repo.description || '';
                    document.getElementById('editRepoModal').style.display = 'block';
                })
                .catch(error => {
                    console.error('Error loading repository:', error);
                    showAlert('Failed to load repository', 'error');
                });
        }
  
        function showNewFileModal() {
            document.getElementById('newFileModal').style.display = 'block';
        }
  
        function showUploadFileModal() {
            selectedFiles = [];
            document.getElementById('fileList').innerHTML = '';
            document.getElementById('uploadSubmitBtn').style.display = 'none';
            document.getElementById('uploadProgress').style.display = 'none';
            document.getElementById('uploadFileModal').style.display = 'block';
        }
  
        function showImportUrlModal() {
            document.getElementById('importUrl').value = '';
            document.getElementById('importFileName').value = '';
            document.getElementById('importProgress').style.display = 'none';
            document.getElementById('importUrlModal').style.display = 'block';
        }
  
        function showEditReadmeModal() {
            fetch(\`/api/repos/\${currentRepoId}/readme\`)
                .then(response => response.json())
                .then(readme => {
                    document.getElementById('readmeContent').value = readme.content;
                    switchReadmeView('edit');
                    document.getElementById('editReadmeModal').style.display = 'block';
                })
                .catch(error => {
                    console.error('Error loading README:', error);
                    showAlert('Failed to load README', 'error');
                });
        }
  
        async function viewFile(fileId) {
            try {
                const response = await fetch(\`/api/files/\${fileId}\`);
                if (!response.ok) {
                    throw new Error('File not found');
                }
                
                const file = await response.json();
                
                document.getElementById('viewFileTitle').textContent = file.name;
                const fileViewerContent = document.getElementById('fileViewerContent');
                
                // Determine language for syntax highlighting
                const languageMap = {
                    'javascript': 'javascript',
                    'python': 'python',
                    'html': 'html',
                    'css': 'css',
                    'java': 'java',
                    'cpp': 'cpp',
                    'text': 'plaintext'
                };
                
                const lang = languageMap[file.language] || 'plaintext';
                const highlightedCode = hljs.highlight(file.content, { language: lang }).value;
                
                fileViewerContent.innerHTML = \`
                    <div class="code-viewer">
                        <div class="code-header">
                            <div class="code-title">\${escapeHtml(file.name)} \${file.importedFrom ? '<span style="color: #8b949e; font-size: 12px;">(imported from ' + escapeHtml(file.importedFrom) + ')</span>' : ''}</div>
                            <div class="code-actions">
                                <button class="btn btn-secondary" onclick="editFile('\${file.id}')">
                                    ✏️ Edit
                                </button>
                                <button class="btn" onclick="downloadFile('\${file.id}', '\${escapeHtml(file.name)}')">
                                    📥 Download
                                </button>
                                <button class="btn btn-danger" onclick="deleteFile('\${file.id}')">
                                    🗑️ Delete
                                </button>
                            </div>
                        </div>
                        <div class="code-content">
                            <pre><code class="hljs language-\${lang}">\${highlightedCode}</code></pre>
                        </div>
                    </div>
                \`;
                
                document.getElementById('viewFileModal').style.display = 'block';
            } catch (error) {
                console.error('Error loading file:', error);
                showAlert('Failed to load file', 'error');
            }
        }
  
        async function editFile(fileId) {
            try {
                const response = await fetch(\`/api/files/\${fileId}\`);
                if (!response.ok) {
                    throw new Error('File not found');
                }
                
                const file = await response.json();
                currentEditingFileId = fileId;
                
                document.getElementById('editFileName').value = file.name;
                document.getElementById('editFileLanguage').value = file.language;
                document.getElementById('editFileContent').value = file.content;
                
                document.getElementById('editFileModal').style.display = 'block';
                closeModal('viewFileModal');
            } catch (error) {
                console.error('Error loading file:', error);
                showAlert('Failed to load file', 'error');
            }
        }
  
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'none';
            }
        }
  
        function switchReadmeView(view) {
            const editBtn = document.querySelector('.view-toggle-btn:nth-child(1)');
            const previewBtn = document.querySelector('.view-toggle-btn:nth-child(2)');
            
            if (view === 'edit') {
                document.getElementById('readme-edit-view').style.display = 'block';
                document.getElementById('readme-preview-view').style.display = 'none';
                editBtn.classList.add('active');
                previewBtn.classList.remove('active');
            } else {
                document.getElementById('readme-edit-view').style.display = 'none';
                document.getElementById('readme-preview-view').style.display = 'block';
                editBtn.classList.remove('active');
                previewBtn.classList.add('active');
                
                const content = document.getElementById('readmeContent').value;
                document.getElementById('liveReadmePreview').innerHTML = renderMarkdown(content);
            }
        }
  
        // Initialize upload functionality
        function initUpload() {
            const uploadArea = document.getElementById('uploadArea');
            const fileInput = document.getElementById('fileInput');
  
            // Click to select files
            uploadArea.addEventListener('click', () => {
                fileInput.click();
            });
  
            // Drag and drop functionality
            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');
                handleFiles(e.dataTransfer.files);
            });
  
            // File input change
            fileInput.addEventListener('change', (e) => {
                handleFiles(e.target.files);
            });
        }
  
        function handleFiles(files) {
            for (let file of files) {
                // Check if file already selected
                if (!selectedFiles.find(f => f.name === file.name && f.size === file.size)) {
                    selectedFiles.push(file);
                }
            }
            updateFileList();
        }
  
        function updateFileList() {
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = '';
  
            if (selectedFiles.length === 0) {
                fileList.innerHTML = '<div style="text-align: center; color: #8b949e; padding: 20px;">No files selected</div>';
                document.getElementById('uploadSubmitBtn').style.display = 'none';
                return;
            }
  
            selectedFiles.forEach((file, index) => {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                fileItem.innerHTML = \`
                    <span style="font-size: 20px;">📄</span>
                    <div class="file-info">
                        <div class="file-name">\${file.name}</div>
                        <div class="file-size">\${formatFileSize(file.size)}</div>
                    </div>
                    <button class="remove-file" onclick="removeFile(\${index})">×</button>
                \`;
                fileList.appendChild(fileItem);
            });
  
            document.getElementById('uploadSubmitBtn').style.display = 'block';
        }
  
        function removeFile(index) {
            selectedFiles.splice(index, 1);
            updateFileList();
        }
  
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
  
        async function uploadFiles() {
            if (selectedFiles.length === 0) return;
  
            const uploadBtn = document.getElementById('uploadSubmitBtn');
            const progressBar = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            const progressContainer = document.getElementById('uploadProgress');
  
            uploadBtn.disabled = true;
            uploadBtn.textContent = 'Uploading...';
            progressContainer.style.display = 'block';
  
            try {
                const formData = new FormData();
                formData.append('repoId', currentRepoId);
                
                for (let file of selectedFiles) {
                    formData.append('files', file);
                }
  
                const xhr = new XMLHttpRequest();
                
                xhr.upload.addEventListener('progress', (e) => {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        progressBar.style.width = percentComplete + '%';
                        progressText.textContent = Math.round(percentComplete) + '%';
                    }
                });
  
                xhr.addEventListener('load', () => {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        showAlert(\`Successfully uploaded \${response.uploaded} files!\`, 'success');
                        closeModal('uploadFileModal');
                        showRepoDetail(currentRepoId);
                    } else {
                        throw new Error('Upload failed');
                    }
                });
  
                xhr.addEventListener('error', () => {
                    throw new Error('Upload failed');
                });
  
                xhr.open('POST', '/api/upload-multiple');
                xhr.send(formData);
  
            } catch (error) {
                console.error('Upload error:', error);
                showAlert('Failed to upload files', 'error');
                uploadBtn.disabled = false;
                uploadBtn.textContent = '📤 Upload Files';
                progressContainer.style.display = 'none';
            }
        }
  
        async function importFromURL() {
            const url = document.getElementById('importUrl').value;
            const fileName = document.getElementById('importFileName').value;
            const importProgress = document.getElementById('importProgress');
  
            if (!url) {
                showAlert('Please enter a URL', 'error');
                return;
            }
  
            importProgress.style.display = 'block';
  
            try {
                const response = await fetch('/api/import-from-url', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url, fileName, repoId: currentRepoId })
                });
  
                const result = await response.json();
  
                if (response.ok) {
                    showAlert(result.message, 'success');
                    closeModal('importUrlModal');
                    showRepoDetail(currentRepoId);
                } else {
                    throw new Error(result.error);
                }
            } catch (error) {
                console.error('Import from URL error:', error);
                showAlert('Failed to import from URL: ' + error.message, 'error');
            } finally {
                importProgress.style.display = 'none';
            }
        }
  
        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 = '/';
            }
        }
  
        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;");
  }