import gradio as gr
import os
import time
from pathlib import Path
import subprocess
import requests
import json
from datetime import datetime
import textwrap
import google.generativeai as genai
import asyncio
from typing import Generator, AsyncGenerator, List
from openai import AsyncOpenAI
import dotenv

# Load environment variables
dotenv.load_dotenv()

# Metadata# Metadata
CURRENT_TIME = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
CURRENT_USER = os.getenv("USER", "ErRickow")

# Default API Keys (fallback if user doesn't provide their own)
DEFAULT_XAI_KEY = os.getenv(
    "XAI_API_KEY",
    "xai-vfjhklL384Z4HKdItsZomqpFlXubTZJAFnISQUpV7dE8lRnWwYBVPSCxSTlu08wDbAcv720bx2dDiQ9x",
)
DEFAULT_GEMINI_KEY = os.getenv("GEMINI_API_KEY")

# API settings
OLLAMA_API = os.environ.get("OLLAMA_API", "http://localhost:11434")
XAI_BASE_URL = "https://api.x.ai/v1"

# Model lists
OLLAMA_MODELS = [
    "llama2",
    "codellama",
    "mistral",
    "neural-chat",
    "starling-lm",
    "dolphin-phi",
    "phi",
    "orca-mini",
]

XAI_MODELS = [
    "grok-2-latest",
    "grok-1",
]

GEMINI_MODELS = [
    "gemini-1.5-mini",
    "gemini-pro-vision",
]

# Help texts

GITHUB_TOKEN_HELP = """
### Cara Mendapatkan GitHub Token:

1. Kunjungi [GitHub Token Settings](https://github.com/settings/tokens)
2. Klik "Generate new token" > "Generate new token (classic)"
3. Beri nama token Anda di "Note"
4. Pilih scope:
   - `repo` (untuk akses repository private)
   - `read:packages` (opsional, untuk akses package)
5. Klik "Generate token"
6. **PENTING**: Salin token segera! Token hanya ditampilkan sekali

Token diperlukan untuk:
- Mengakses repository private
- Clone repository dengan rate limit lebih tinggi
- Mengakses fitur GitHub API
"""

GEMINI_API_HELP = """
### Cara Mendapatkan Gemini API Key:

1. Kunjungi [Google AI Studio](https://makersuite.google.com/app/apikey)
2. Login dengan akun Google Anda
3. Klik "Create API Key"
4. Salin API Key yang dihasilkan

Catatan:
- Gemini memberikan kuota gratis setiap bulan
- Key bisa dibuat ulang jika diperlukan
- Monitor penggunaan di [Google Cloud Console](https://console.cloud.google.com/)
"""

OLLAMA_HELP = """
### Cara Menggunakan Ollama:

1. Install Ollama dari [ollama.ai](https://ollama.ai)
2. Jalankan Ollama di komputer Anda
3. Pastikan Ollama berjalan di http://localhost:11434

Catatan:
- Ollama berjalan secara lokal di komputer Anda
- Tidak memerlukan API key
- Ideal untuk privasi dan penggunaan offline
"""

XAI_API_HELP = """
### Cara Mendapatkan X.AI (Grok) API Key:

1. Kunjungi [X.AI Developer Portal](https://x.ai)
2. Daftar/Login ke akun Anda
3. Buat API Key baru
4. Salin API Key

Note:
- Jika tidak diisi, akan menggunakan API key default
- Masukkan API key Anda sendiri jika default mencapai limit
"""


class AIProvider:
    OLLAMA = "ollama"
    GEMINI = "gemini"
    XAI = "xai"


class RepoAnalyzer:
    def __init__(self):
        self.current_repo = None
        self.repo_content = {}
        self.chat_history = []

    async def stream_xai_response(
        self, prompt: str, api_key: str = None, model: str = "grok-2-latest"
    ) -> AsyncGenerator[str, None]:
        """Stream response dari X.AI (Grok) API"""
        try:
            # Use default key if none provided
            actual_key = api_key if api_key else DEFAULT_XAI_KEY

            if not actual_key:
                yield "⚠️ API Key X.AI diperlukan. Gunakan key Anda sendiri atau tunggu reset limit default key."
                return

            client = AsyncOpenAI(api_key=actual_key, base_url=XAI_BASE_URL)

            # Prepare messages with repository context if available
            messages = [
                {
                    "role": "system",
                    "content": "Anda adalah asisten AI yang membantu menganalisis repository code. Berikan respons dalam Bahasa Indonesia.",
                }
            ]

            if self.current_repo:
                context = f"Repository: {self.current_repo}\n\n"
                repo_files = "\n".join(list(self.repo_content.keys()))
                context += f"Files in repository:\n{repo_files}\n\n"
                messages.append({"role": "system", "content": context})

            messages.append({"role": "user", "content": prompt})

            stream = await client.chat.completions.create(
                model=model, messages=messages, stream=True
            )

            full_response = ""
            async for chunk in stream:
                if chunk.choices[0].delta.content:
                    content = chunk.choices[0].delta.content
                    full_response += content
                    yield content

            self.chat_history.append({"role": "user", "content": prompt})
            self.chat_history.append({"role": "assistant", "content": full_response})

        except Exception as e:
            error_msg = f"⚠️ Error dalam X.AI API: {str(e)}"
            print(error_msg)
            yield error_msg

    async def stream_gemini_response(
        self, prompt: str, api_key: str
    ) -> AsyncGenerator[str, None]:
        """Stream response dari Gemini API"""
        try:
            if not api_key:
                yield "⚠️ API Key Gemini diperlukan. Klik icon bantuan (?) di samping input API Key untuk panduan mendapatkan key."
                return

            genai.configure(api_key=api_key)
            model = genai.GenerativeModel("gemini-pro")

            # Tambahkan konteks repository jika ada
            if self.current_repo:
                context = f"Repository: {self.current_repo}\n\n"
                repo_files = "\n".join(list(self.repo_content.keys()))
                context += f"Files in repository:\n{repo_files}\n\n"
                prompt = context + prompt

            response = model.generate_content(
                prompt,
                generation_config={"temperature": 0.7, "top_p": 0.8, "top_k": 40},
                stream=True,
            )

            full_response = ""
            async for chunk in response:
                if chunk.text:
                    full_response += chunk.text
                    yield chunk.text

            self.chat_history.append({"role": "user", "content": prompt})
            self.chat_history.append({"role": "assistant", "content": full_response})

        except Exception as e:
            error_msg = f"⚠️ Error dalam Gemini API: {str(e)}\n\nPastikan API Key valid dan memiliki kuota yang cukup."
            print(error_msg)
            yield error_msg

    def clone_repository(
        self, repo_url: str, github_token: str, branch: str = None
    ) -> tuple[bool, str]:
        """Clone repository GitHub dengan autentikasi"""
        if not repo_url:
            return False, "⚠️ URL repository diperlukan"

        repo_name = repo_url.split("/")[-1].replace(".git", "")

        if os.path.exists(repo_name):
            subprocess.run(["rm", "-rf", repo_name], check=True)

        try:
            owner_repo = "/".join(repo_url.split("/")[-2:])

            # Cek apakah repository private
            headers = {"Authorization": f"token {github_token}"} if github_token else {}
            repo_check = requests.get(
                f"https://api.github.com/repos/{owner_repo}", headers=headers
            )

            if repo_check.status_code == 404:
                return False, "⚠️ Repository tidak ditemukan. Periksa URL repository."
            elif repo_check.status_code == 401:
                return (
                    False,
                    "⚠️ Token GitHub tidak valid. Klik icon bantuan (?) untuk panduan mendapatkan token.",
                )
            elif repo_check.status_code == 403 and repo_check.json().get(
                "private", False
            ):
                return (
                    False,
                    "⚠️ Ini adalah repository private. Token GitHub dengan akses 'repo' diperlukan.",
                )

            auth_url = (
                f"https://{github_token}@github.com/{owner_repo}"
                if github_token
                else f"https://github.com/{owner_repo}"
            )

            cmd = ["git", "clone"]
            if branch:
                cmd.extend(["--branch", branch])
            cmd.append(auth_url)

            process = subprocess.run(
                cmd,
                capture_output=True,
                text=True,
                env=dict(os.environ, GIT_ASKPASS="echo", GIT_TERMINAL_PROMPT="0"),
            )

            if process.returncode == 0:
                self.current_repo = repo_name
                # Scan dan simpan konten repository
                file_count = 0
                for file_path in Path(repo_name).rglob("*"):
                    if file_path.is_file() and ".git" not in str(file_path):
                        success, content = self.read_file_safely(str(file_path))
                        if success:
                            self.repo_content[str(file_path)] = content
                            file_count += 1

                return (
                    True,
                    f"✅ Repository berhasil di-clone!\n\nNama: {repo_name}\nJumlah file: {file_count}\n\nAnda sekarang bisa mengajukan pertanyaan tentang repository ini.",
                )
            else:
                return False, f"⚠️ Gagal clone repository:\n{process.stderr}"

        except Exception as e:
            return False, f"⚠️ Error: {str(e)}"

    def read_file_safely(self, file_path: str) -> tuple[bool, str]:
        """Baca file dengan aman menggunakan berbagai encoding"""
        encodings = ["utf-8", "latin-1", "cp1252"]
        for encoding in encodings:
            try:
                with open(file_path, "r", encoding=encoding) as f:
                    content = f.read()
                    return True, content
            except Exception as e:
                continue
        return False, "Tidak dapat membaca file dengan encoding yang didukung"


analyzer = RepoAnalyzer()


async def handle_chat(message, history, provider_choice, model_name, xai_key, gemini_key, selected_files, analyzer=analyzer):
    """Menangani interaksi chat dengan model AI"""
    if not analyzer.current_repo:
        new_message = {
            "role": "assistant",
            "content": "⚠️ Mohon clone repository terlebih dahulu sebelum mengajukan pertanyaan."
        }
        history = history or []
        history.append({"role": "user", "content": message})
        history.append(new_message)
        yield history
        return

    history = history or []
    
    # Format user message
    user_message = f'<div class="user-message">{message}</div>'
    history.append({"role": "user", "content": user_message})
    
    # Initialize assistant message
    assistant_message = '<div class="assistant-message">'
    history.append({"role": "assistant", "content": assistant_message})

    try:
        # Add context about selected files to the prompt
        file_context = ""
        if selected_files:
            file_context = "\n\nFile yang dipilih:\n"
            for file in selected_files:
                content = analyzer.repo_content.get(file, "")
                if content:
                    file_context += f"\n{file}:\n```\n{content}\n```\n"

        enhanced_message = f"{message}\n{file_context}"

        full_response = ""
        if provider_choice == AIProvider.XAI:
            async for chunk in analyzer.stream_xai_response(enhanced_message, xai_key, model_name):
                full_response += chunk
                # Format the response with code blocks
                formatted_response = format_response(full_response)
                history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
                await asyncio.sleep(0.05)
                yield history

        elif provider_choice == AIProvider.GEMINI:
            async for chunk in analyzer.stream_gemini_response(enhanced_message, gemini_key or DEFAULT_GEMINI_KEY):
                full_response += chunk
                formatted_response = format_response(full_response)
                history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
                await asyncio.sleep(0.05)
                yield history

        else:  # OLLAMA
            response = analyze_with_ollama(model_name, enhanced_message)
            words = response.split()
            for i in range(len(words)):
                full_response = " ".join(words[:i + 1])
                formatted_response = format_response(full_response)
                history[-1]["content"] = f'<div class="assistant-message">{formatted_response}</div>'
                await asyncio.sleep(0.05)
                yield history

    except Exception as e:
        error_msg = f"⚠️ Error: {str(e)}"
        history[-1]["content"] = f'<div class="assistant-message">{error_msg}</div>'
        yield history

def format_response(text):
    """Format response text with code blocks"""
    import re
    import uuid

    # Replace code blocks with styled versions
    def replace_code_block(match):
        language = match.group(1) or ''
        code = match.group(2)
        block_id = f'code-block-{uuid.uuid4().hex[:8]}'
        
        return f'''
        <div class="code-block">
            <div class="code-header">
                <span class="code-title">{language}</span>
                <button class="code-copy-btn" id="{block_id}-btn" onclick="copyCode('{block_id}')">Copy</button>
            </div>
            <pre class="code-content" id="{block_id}">{code}</pre>
        </div>
        '''

    # Replace ```language\ncode``` blocks
    text = re.sub(r'```(\w+)?\n(.*?)```', replace_code_block, text, flags=re.DOTALL)
    
    # Replace inline code
    text = re.sub(r'`([^`]+)`', r'<code>\1</code>', text)
    
    return text

def clear_all():
    """Clear semua input dan status"""
    return (
        "", # repo_url
        "", # github_token
        "", # branch
        "", # clone_status
        [], # chat_history
        [], # file_selector
        "<div class='file-list'>Belum ada file yang dipilih</div>", # file_list
        "", # xai_key
        "", # gemini_key
        "grok-2-latest", # model_dropdown default value
    )

def create_ui():
    global analyzer
    current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")

    with gr.Blocks(title="Open Repo AI", theme=gr.themes.Soft()) as app:
        # CSS Styling
        gr.Markdown("""
        <style>
        /* General Styles */
        .container { max-width: 100% !important; padding: 1rem; }
        .mobile-full { width: 100% !important; }
        
        /* Header Styles */
        .header-info {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
        }
        .timestamp, .user-info {
            padding: 5px 10px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }
        
        /* File List Styles */
        .file-list { 
            margin: 10px 0; 
            padding: 10px; 
            border: 1px solid #ddd; 
            border-radius: 4px; 
        }
        .file-item { 
            display: flex; 
            justify-content: space-between; 
            padding: 5px 0; 
        }
        
        /* Collapsible Sections */
        details {
            margin: 10px 0;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            overflow: hidden;
        }
        summary {
            padding: 15px;
            background: #f8f9fa;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            transition: background-color 0.3s;
        }
        summary:hover {
            background: #e9ecef;
        }
        .help-content {
            padding: 15px;
            background: white;
        }
        
        /* Example Sections */
        .examples-wrapper {
            margin: 20px 0;
        }
        .example-section {
            margin: 10px 0;
        }
        .example-content {
            padding: 15px;
            background: white;
        }
        .example-btn {
            width: 100%;
            text-align: left;
            padding: 8px 12px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .example-btn:hover {
            background: #e9ecef;
            border-color: #dee2e6;
        }
        
        /* Chat Message Styling */
        .message-wrap {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .user-message, .assistant-message {
            padding: 1rem;
            border-radius: 8px;
            max-width: 90%;
        }
        .user-message {
            align-self: flex-end;
            background: #007AFF;
            color: white;
        }
        .assistant-message {
            align-self: flex-start;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        
        /* Code Block Styling */
        .code-block {
            position: relative;
            margin: 1rem 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e9ecef;
        }
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        .code-title {
            font-family: monospace;
            font-weight: bold;
            color: #495057;
        }
        .code-copy-btn {
            padding: 4px 8px;
            font-size: 12px;
            color: #6c757d;
            background: white;
            border: 1px solid #ced4da;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .code-copy-btn:hover {
            background: #e9ecef;
            border-color: #adb5bd;
        }
        .code-content {
            padding: 1rem;
            background: #282a36;
            color: #f8f8f2;
            overflow-x: auto;
            font-family: monospace;
        }
        
        /* Media Queries */
        @media (max-width: 768px) {
            .gr-form { flex-direction: column !important; }
            .gr-group { margin: 0.5rem 0 !important; }
        }
        .clear-button {
            background: #dc3545 !important;
            color: white !important;
            border: none !important;
            padding: 0.5rem 1rem !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            transition: background-color 0.2s !important;
        }
        
        .clear-button:hover {
            background: #c82333 !important;
        }
        
        /* Button Container */
        .button-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .button-container button {
            flex: 1;
        }
        </style>

        <script>
        function copyCode(blockId) {
            const codeBlock = document.getElementById(blockId);
            const code = codeBlock.innerText;
            navigator.clipboard.writeText(code).then(() => {
                const btn = document.querySelector(`#${blockId}-btn`);
                btn.innerText = 'Copied!';
                setTimeout(() => {
                    btn.innerText = 'Copy';
                }, 2000);
            });
        }
        
        function setQuestion(text) {
            const chatInput = document.querySelector('textarea[data-testid="textbox"]');
            if (chatInput) {
                chatInput.value = text;
                chatInput.focus();
            }
        }
        </script>
        """)

        # Header
        with gr.Row(elem_classes="container"):
            gr.Markdown(f"""
            # AI Github Repository Chat
            
            <div class="header-info">
                <span class="timestamp">Current Date and Time (UTC - YYYY-MM-DD HH:MM:SS formatted): {current_time}</span>
            </div>
            """)

        # Main Tabs Container
        with gr.Tabs() as tabs:
            # Configuration Tab
            with gr.Tab("🛠️ Konfigurasi"):
                provider = gr.Radio(
                    choices=[AIProvider.XAI, AIProvider.GEMINI, AIProvider.OLLAMA],
                    label="Penyedia AI",
                    value=AIProvider.XAI
                )

                with gr.Group() as api_settings:
                    # X.AI API Key section
                    with gr.Row():
                        with gr.Column(scale=3):
                            xai_key = gr.Textbox(
                                label="X.AI (Grok) API Key",
                                type="password",
                                placeholder="Opsional - Klik (?) untuk info",
                                show_label=True
                            )
                        with gr.Column(scale=1):
                            gr.Markdown("""
                            <details>
                                <summary>❓ Cara Mendapatkan X.AI API Key</summary>
                                <div class="help-content">
                                    <ol>
                                        <li>Kunjungi <a href="https://x.ai" target="_blank">X.AI Developer Portal</a></li>
                                        <li>Daftar/Login ke akun Anda</li>
                                        <li>Buat API Key baru</li>
                                        <li>Salin API Key</li>
                                    </ol>
                                    <p><strong>Catatan:</strong></p>
                                    <ul>
                                        <li>Jika tidak diisi, akan menggunakan API key default</li>
                                        <li>Masukkan API key Anda sendiri jika default mencapai limit</li>
                                    </ul>
                                </div>
                            </details>
                            """)

                    # Gemini API Key section
                    with gr.Row():
                        with gr.Column(scale=3):
                            gemini_key = gr.Textbox(
                                label="Gemini API Key",
                                type="password",
                                placeholder="Opsional - Klik (?) untuk info",
                                show_label=True
                            )
                        with gr.Column(scale=1):
                            gr.Markdown("""
                            <details>
                                <summary>❓ Cara Mendapatkan Gemini API Key</summary>
                                <div class="help-content">
                                    <ol>
                                        <li>Kunjungi <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a></li>
                                        <li>Login dengan akun Google Anda</li>
                                        <li>Klik "Create API Key"</li>
                                        <li>Salin API Key yang dihasilkan</li>
                                    </ol>
                                    <p><strong>Catatan:</strong></p>
                                    <ul>
                                        <li>Gemini memberikan kuota gratis setiap bulan</li>
                                        <li>Key bisa dibuat ulang jika diperlukan</li>
                                        <li>Monitor penggunaan di <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
                                    </ul>
                                </div>
                            </details>
                            """)

                with gr.Row():
                    model_dropdown = gr.Dropdown(
                        label="Model AI",
                        choices=XAI_MODELS,
                        value="grok-2-latest",
                        interactive=True
                    )

            # Repository Analysis Tab
            with gr.Tab("📊 Analisis Repository"):
                with gr.Group():
                    # Repository URL input
                    with gr.Row():
                        repo_url = gr.Textbox(
                            label="URL Repository GitHub",
                            placeholder="https://github.com/username/repository",
                            elem_classes="mobile-full"
                        )

                    # GitHub Token section
                    with gr.Row():
                        with gr.Column(scale=2):
                            github_token = gr.Textbox(
                                label="Token GitHub",
                                type="password",
                                placeholder="Klik (?) untuk panduan",
                                elem_classes="mobile-full"
                            )
                            gr.Markdown("""
                            <details>
                                <summary>❓ Cara Mendapatkan GitHub Token</summary>
                                <div class="help-content">
                                    <ol>
                                        <li>Kunjungi <a href="https://github.com/settings/tokens" target="_blank">GitHub Token Settings</a></li>
                                        <li>Klik "Generate new token" > "Generate new token (classic)"</li>
                                        <li>Beri nama token Anda di "Note"</li>
                                        <li>Pilih scope:
                                            <ul>
                                                <li><code>repo</code> (untuk akses repository private)</li>
                                                <li><code>read:packages</code> (opsional, untuk akses package)</li>
                                            </ul>
                                        </li>
                                        <li>Klik "Generate token"</li>
                                        <li><strong>PENTING:</strong> Salin token segera! Token hanya ditampilkan sekali</li>
                                    </ol>
                                </div>
                            </details>
                            """)
                        with gr.Column(scale=1):
                            branch = gr.Textbox(
                                label="Branch (opsional)",
                                placeholder="main",
                                elem_classes="mobile-full"
                            )

                    # Clone Button and Status
                    clone_button = gr.Button(
                        "🔄 Clone Repository",
                        variant="primary",
                        elem_classes="mobile-full"
                    )
                    
                    clone_status = gr.Markdown(
                        value="",
                        label="Status Repository",
                        elem_classes="mobile-full"
                    )

                    # File Selection
                    with gr.Group():
                        gr.Markdown("### 📎 File yang Dipilih")
                        with gr.Row():
                            file_selector = gr.Dropdown(
                                label="Pilih File dari Repository",
                                choices=[],
                                multiselect=True,
                                value=[],
                                allow_custom_value=True,
                                max_choices=None,
                                elem_classes="mobile-full"
                            )
                        
                        file_list = gr.HTML(
                            value="<div class='file-list'>Belum ada file yang dipilih</div>",
                            label="Daftar File Terpilih"
                        )

            # Examples Tab
            with gr.Tab("💡 Examples"):
                gr.Markdown("""
                <style>
                /* Styling untuk collapse */
                .examples-container {
                    padding: 20px;
                    background: #fff;
                    border-radius: 8px;
                }
                
                .category-collapse {
                    margin-bottom: 15px;
                    border: 1px solid #e9ecef;
                    border-radius: 8px;
                    overflow: hidden;
                }
                
                .category-header {
                    padding: 15px;
                    background: #f8f9fa;
                    cursor: pointer;
                    user-select: none;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    transition: background-color 0.2s;
                }
                
                .category-header:hover {
                    background: #e9ecef;
                }
                
                .category-content {
                    padding: 15px;
                    display: none;
                    border-top: 1px solid #e9ecef;
                }
                
                .category-collapse.active .category-content {
                    display: block;
                    animation: slideDown 0.3s ease-out;
                }
                
                .category-header::after {
                    content: '▼';
                    font-size: 12px;
                    transition: transform 0.3s;
                }
                
                .category-collapse.active .category-header::after {
                    transform: rotate(180deg);
                }
                
                .example-button {
                    display: block;
                    width: 100%;
                    padding: 10px;
                    margin: 5px 0;
                    text-align: left;
                    background: #fff;
                    border: 1px solid #e9ecef;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                
                .example-button:hover {
                    background: #f8f9fa;
                    border-color: #dee2e6;
                }
                
                @keyframes slideDown {
                    from {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                </style>
                
                <div class="examples-container">
                    <h3>🎯 Contoh Pertanyaan</h3>
                    <p>Klik pada kategori untuk melihat contoh pertanyaan yang bisa diajukan</p>
                    
                    <div class="category-collapse">
                        <div class="category-header">
                            🔍 Analisis Kode
                        </div>
                        <div class="category-content">
                            <button class="example-button" onclick="setQuestion('Jelaskan logika dan alur dari kode ini')">
                                Jelaskan logika dari kode
                            </button>
                            <button class="example-button" onclick="setQuestion('Bagaimana cara mengoptimalkan performa kode ini?')">
                                Optimasi performa
                            </button>
                            <button class="example-button" onclick="setQuestion('Apakah ada potential bugs yang perlu diperbaiki?')">
                                Cek potential bugs
                            </button>
                        </div>
                    </div>
                    
                    <div class="category-collapse">
                        <div class="category-header">
                            📚 Best Practices
                        </div>
                        <div class="category-content">
                            <button class="example-button" onclick="setQuestion('Apa saja best practices yang bisa diterapkan di kode ini?')">
                                Saran best practices
                            </button>
                            <button class="example-button" onclick="setQuestion('Bagaimana cara meningkatkan maintainability kode ini?')">
                                Improve maintainability
                            </button>
                            <button class="example-button" onclick="setQuestion('Berikan saran untuk meningkatkan code quality')">
                                Improve code quality
                            </button>
                        </div>
                    </div>
                    
                    <div class="category-collapse">
                        <div class="category-header">
                            🧪 Testing
                        </div>
                        <div class="category-content">
                            <button class="example-button" onclick="setQuestion('Buatkan unit test untuk fungsi ini')">
                                Generate unit tests
                            </button>
                            <button class="example-button" onclick="setQuestion('Bagaimana cara test error handling yang baik?')">
                                Test error handling
                            </button>
                            <button class="example-button" onclick="setQuestion('Berikan saran untuk meningkatkan test coverage')">
                                Improve test coverage
                            </button>
                        </div>
                    </div>
                    
                    <div class="category-collapse">
                        <div class="category-header">
                            📝 Dokumentasi
                        </div>
                        <div class="category-content">
                            <button class="example-button" onclick="setQuestion('Buatkan dokumentasi untuk fungsi-fungsi utama')">
                                Generate documentation
                            </button>
                            <button class="example-button" onclick="setQuestion('Buat README.md untuk project ini')">
                                Create README.md
                            </button>
                            <button class="example-button" onclick="setQuestion('Jelaskan cara penggunaan library/framework')">
                                Usage guide
                            </button>
                        </div>
                    </div>
                </div>
            
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    // Handle collapse functionality
                    const categories = document.querySelectorAll('.category-collapse');
                    
                    categories.forEach(category => {
                        const header = category.querySelector('.category-header');
                        
                        header.addEventListener('click', () => {
                            const isActive = category.classList.contains('active');
                            
                            // Close all categories
                            categories.forEach(c => c.classList.remove('active'));
                            
                            // If clicked category wasn't active, open it
                            if (!isActive) {
                                category.classList.add('active');
                            }
                        });
                    });
                });
            
                // Function to set question in chat input
                function setQuestion(text) {
                    const chatInput = document.querySelector('textarea[data-testid="textbox"]');
                    if (chatInput) {
                        chatInput.value = text;
                        chatInput.focus();
                    }
                }
                </script>
                """)

        # Chat Interface (outside tabs)
        with gr.Group():
            chat_history = gr.Chatbot(
                label="📝 Riwayat Chat",
                height=500,
                show_label=True,
                type="messages",
                elem_classes="mobile-full"
            )
            
            with gr.Row():
                chat_input = gr.Textbox(
                    label="💭 Tanyakan tentang Repository",
                    placeholder="Ketik pertanyaan Anda di sini...",
                    lines=3,
                    elem_classes="mobile-full",
                )
                with gr.Column(scale=1):
                    send_button = gr.Button("📤 Kirim", variant="primary")
                    clear_button = gr.Button("🧹 Bersihkan Semua", variant="secondary")

        # Event Handlers
        def handle_clone(repo_url, github_token, branch):
            if not repo_url:
                return (
                    "⚠️ URL repository diperlukan!",
                    gr.Dropdown(choices=[]),
                    "<div class='file-list'>Belum ada file yang dipilih</div>"
                )
            
            success, message = analyzer.clone_repository(repo_url, github_token, branch)
            
            if success:
                files = sorted(list(analyzer.repo_content.keys()))
                return (
                    message,
                    gr.Dropdown(choices=files, value=[]),
                    "<div class='file-list'>Belum ada file yang dipilih</div>"
                )
            
            return (
                message,
                gr.Dropdown(choices=[]),
                "<div class='file-list'>Belum ada file yang dipilih</div>"
            )

        def update_file_list(selected):
            if not selected:
                return "<div class='file-list'>Belum ada file yang dipilih</div>"
            
            html = "<div class='file-list'>"
            for file in selected:
                html += f"<div class='file-item'><span>{file}</span></div>"
            html += "</div>"
            return html

        def clear_chat_history():
            return []

        def update_model_list(provider_choice):
            if provider_choice == AIProvider.XAI:
                return gr.Dropdown(choices=XAI_MODELS, value="grok-2-latest")
            elif provider_choice == AIProvider.GEMINI:
                return gr.Dropdown(choices=GEMINI_MODELS, value="gemini-1.5-mini")
            else:  # OLLAMA
                return gr.Dropdown(choices=OLLAMA_MODELS, value="llama2")

        # Connect Events
        provider.change(
            fn=update_model_list,
            inputs=[provider],
            outputs=[model_dropdown]
        )

        clone_button.click(
            fn=handle_clone,
            inputs=[repo_url, github_token, branch],
            outputs=[clone_status, file_selector, file_list]
        )

        file_selector.change(
            fn=update_file_list,
            inputs=[file_selector],
            outputs=[file_list]
        )

        clear_button = gr.Button("🧹 Bersihkan Semua", variant="secondary")

        # Chat events
        clear_button.click(
            fn=clear_all,
            outputs=[
                repo_url,
                github_token,
                branch,
                clone_status,
                chat_history,
                file_selector,
                file_list,
                xai_key,
                gemini_key,
                model_dropdown,
            ]
        )

        send_button.click(
            fn=handle_chat,
            inputs=[
                chat_input,
                chat_history,
                provider,
                model_dropdown,
                xai_key,
                gemini_key,
                file_selector
            ],
            outputs=chat_history,
            show_progress=True
        ).then(
            fn=lambda: gr.update(value=""),
            outputs=chat_input
        )

        chat_input.submit(
            fn=handle_chat,
            inputs=[
                chat_input,
                chat_history,
                provider,
                model_dropdown,
                xai_key,
                gemini_key,
                file_selector
            ],
            outputs=chat_history,
            show_progress=True
        ).then(
            fn=lambda: gr.update(value=""),
            outputs=chat_input
        )

        return app


if __name__ == "__main__":
    print("""
    🚀 Starting Repository Chat Analysis
    ====================================
    """)

    app = create_ui()
    app.launch(share=True, server_name="0.0.0.0", server_port=7860, debug=True)