{% extends "base.html" %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1>GitHub Configuration</h1>
        <p class="text-muted">Configure GitHub integration to clone and sync repositories</p>
    </div>
</div>

<!-- GitHub Auth Status -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Authentication Status</h5>
                {% if github_configured %}
                    <span class="badge bg-success"><i class="bi bi-check-circle"></i> Connected</span>
                {% else %}
                    <span class="badge bg-warning text-dark"><i class="bi bi-exclamation-triangle"></i> Not configured</span>
                {% endif %}
            </div>
            <div class="card-body">
                {% if github_configured %}
                    <div class="alert alert-success py-2">
                        <i class="bi bi-check-circle-fill"></i>
                        Token aktywny
                        {% if github_user %} — zalogowany jako <strong>{{ github_user }}</strong>{% endif %}
                        {% if github_token_hint %}<br><small class="text-muted">Token: <code>{{ github_token_hint }}</code></small>{% endif %}
                    </div>
                {% endif %}

                {% if cli_fetch_result %}
                    {% if cli_fetch_result.success %}
                        <div class="alert alert-success py-2">
                            <i class="bi bi-check-circle-fill"></i>
                            Token pobrany z gh CLI — zapisany do <code>.env</code>
                            {% if cli_fetch_result.user %}<br><strong>{{ cli_fetch_result.user }}</strong>{% endif %}
                        </div>
                    {% else %}
                        <div class="alert alert-danger py-2">
                            <i class="bi bi-x-circle"></i> {{ cli_fetch_result.error }}
                        </div>
                    {% endif %}
                {% endif %}

                <!-- Opcja 1: pobierz z gh CLI jednym kliknięciem -->
                <div class="mb-3 p-3 border rounded bg-light">
                    <p class="mb-2 fw-semibold"><i class="bi bi-terminal"></i> Opcja 1 — pobierz token z gh CLI (zalecane)</p>
                    <p class="text-muted small mb-2">
                        Jeśli masz zainstalowane <code>gh</code> i jesteś zalogowany (<code>gh auth login</code>),
                        kliknij poniżej — <code>gh2mcp-agent</code> pobierze token i zapisze go do <code>.env</code>.
                    </p>
                    <form method="post" action="/github/fetch-token-from-cli">
                        <button type="submit" class="btn btn-dark btn-sm">
                            <i class="bi bi-download"></i> Pobierz token z gh CLI
                        </button>
                    </form>
                    <div class="mt-2 text-muted small">
                        Nie masz gh CLI?
                        <a href="https://cli.github.com/" target="_blank">Zainstaluj</a>,
                        potem: <code>gh auth login</code>
                    </div>
                </div>

                <!-- Opcja 2: wpisz token ręcznie -->
                <div class="p-3 border rounded">
                    <p class="mb-2 fw-semibold"><i class="bi bi-key"></i> Opcja 2 — wpisz Personal Access Token</p>
                    <form method="post" action="/github/configure">
                        <div class="mb-2">
                            <input type="password" class="form-control form-control-sm" id="token" name="token"
                                   placeholder="ghp_xxx... lub github_pat_xxx..."
                                   autocomplete="off"
                                   value="{{ prefill_token if prefill_token else '' }}">
                            <div class="form-text">
                                Utwórz token na
                                <a href="https://github.com/settings/tokens/new?scopes=repo,delete_repo" target="_blank">github.com/settings/tokens</a>
                                z zakresem <code>repo</code> (i opcjonalnie <code>delete_repo</code>).
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Zapisz token</button>
                        {% if github_configured %}
                            <button type="submit" name="action" value="clear" class="btn btn-outline-danger btn-sm ms-2">Usuń token</button>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Instrukcja konfiguracji</h5>
            </div>
            <div class="card-body">
                <h6 class="text-success">Metoda A — gh CLI (najszybsza)</h6>
                <pre class="bg-dark text-light p-2 rounded small"><code># 1. Zainstaluj gh CLI (raz)
# https://cli.github.com/

# 2. Zaloguj się
gh auth login

# 3. Kliknij "Pobierz token z gh CLI" powyżej
# lub w terminalu:
make setup-github</code></pre>

                <h6 class="text-primary mt-3">Metoda B — Personal Access Token</h6>
                <ol class="small ps-3">
                    <li>Wejdź na <a href="https://github.com/settings/tokens/new?scopes=repo,delete_repo" target="_blank">github.com/settings/tokens</a></li>
                    <li>Kliknij <strong>Generate new token (classic)</strong></li>
                    <li>Zaznacz scope: <code>repo</code> + <code>delete_repo</code> (opcjonalnie)</li>
                    <li>Skopiuj token i wklej w Opcji 2</li>
                </ol>

                <h6 class="text-secondary mt-3">Metoda C — zmienna środowiskowa</h6>
                <pre class="bg-dark text-light p-2 rounded small"><code>echo "GITHUB_PAT=ghp_xxx" >> .env
# lub
export GITHUB_PAT=ghp_xxx
make restart</code></pre>

                <div class="mt-3 text-muted small">
                    Token jest zapisywany do <code>.env</code> jako <code>GITHUB_PAT</code>
                    i współdzielony między <code>mcp-gateway</code> i <code>mcp-webui</code>.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create New Repository -->
<div class="row mb-4">
    <div class="col">
        <div class="card border-success">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="bi bi-plus-circle"></i> Create New Repository on GitHub</h5>
            </div>
            <div class="card-body">
                {% if not github_configured %}
                    <div class="alert alert-warning">
                        Configure GitHub token above before creating repositories.
                    </div>
                {% endif %}
                <form method="post" action="/github/create-repo">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="repo_name" class="form-label">Repository Name</label>
                            <input type="text" class="form-control" id="repo_name" name="repo_name"
                                   placeholder="my-new-project" required
                                   {% if not github_configured %}disabled{% endif %}>
                        </div>
                        <div class="col-md-4">
                            <label for="create_description" class="form-label">Description</label>
                            <input type="text" class="form-control" id="create_description" name="description"
                                   placeholder="Optional description"
                                   {% if not github_configured %}disabled{% endif %}>
                        </div>
                        <div class="col-md-2 d-flex flex-column justify-content-end">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="private" name="private" value="true"
                                       {% if not github_configured %}disabled{% endif %}>
                                <label class="form-check-label" for="private">Private</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="auto_clone" name="auto_clone" value="true" checked
                                       {% if not github_configured %}disabled{% endif %}>
                                <label class="form-check-label" for="auto_clone">Clone locally</label>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-success w-100"
                                    {% if not github_configured %}disabled{% endif %}>
                                <i class="bi bi-plus-circle"></i> Create
                            </button>
                        </div>
                    </div>
                </form>

                {% if create_result %}
                    <div class="mt-3">
                        {% if create_result.success %}
                            <div class="alert alert-success">
                                <i class="bi bi-check-circle"></i>
                                Repository created: <strong>{{ create_result.github_repo }}</strong>
                                <br>
                                <a href="{{ create_result.html_url }}" target="_blank">{{ create_result.html_url }}</a>
                                {% if create_result.repo_id %}
                                    <br><small>Sklonowano lokalnie jako: <code>{{ create_result.repo_id }}</code> →
                                    <a href="/repos">View in Repos</a></small>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="alert alert-danger">
                                <i class="bi bi-x-circle"></i>
                                Create failed: {{ create_result.error }}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Clone Repository -->
<div class="row mb-4">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Clone Repository from GitHub</h5>
            </div>
            <div class="card-body">
                <form method="post" action="/github/clone">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="repo_url" class="form-label">Repository URL</label>
                            <input type="text" class="form-control" id="repo_url" name="repo_url"
                                   placeholder="owner/repo or https://github.com/owner/repo"
                                   required>
                            <div class="form-text">
                                Examples: <code>semcod/mcp</code>, <code>microsoft/vscode</code>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="repo_id" class="form-label">Local Repo ID</label>
                            <input type="text" class="form-control" id="repo_id" name="repo_id"
                                   placeholder="my-project"
                                   required>
                            <div class="form-text">Unique identifier for this repo</div>
                        </div>
                        <div class="col-md-3">
                            <label for="branch" class="form-label">Branch</label>
                            <input type="text" class="form-control" id="branch" name="branch"
                                   value="main">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">Clone</button>
                        </div>
                    </div>
                </form>

                {% if clone_result %}
                    <div class="mt-3">
                        {% if clone_result.success %}
                            <div class="alert alert-success">
                                <i class="bi bi-check-circle"></i>
                                Repository cloned successfully!
                                <br>
                                <code>{{ clone_result.repo_id }}</code> →
                                <a href="/repos">View in Repos</a>
                            </div>
                        {% else %}
                            <div class="alert alert-danger">
                                <i class="bi bi-x-circle"></i>
                                Clone failed: {{ clone_result.error }}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Sync Existing Repo -->
<div class="row mb-4">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Sync Repository</h5>
            </div>
            <div class="card-body">
                <form method="post" action="/github/sync">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="sync_repo_id" class="form-label">Repository ID</label>
                            <select class="form-select" id="sync_repo_id" name="repo_id" required>
                                <option value="">Select repository...</option>
                                {% for repo in repos %}
                                    <option value="{{ repo.id }}">{{ repo.id }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="sync_branch" class="form-label">Branch</label>
                            <input type="text" class="form-control" id="sync_branch" name="branch"
                                   value="main">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-success w-100">
                                <i class="bi bi-arrow-repeat"></i> Pull Updates
                            </button>
                        </div>
                    </div>
                </form>

                {% if sync_result %}
                    <div class="mt-3">
                        {% if sync_result.success %}
                            <div class="alert alert-success">
                                <i class="bi bi-check-circle"></i>
                                Repository synced: {{ sync_result.message }}
                            </div>
                        {% else %}
                            <div class="alert alert-danger">
                                <i class="bi bi-x-circle"></i>
                                Sync failed: {{ sync_result.error }}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- My Repositories -->
{% if my_repos %}
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Your GitHub Repositories</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Repository</th>
                                <th>Description</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for repo in my_repos %}
                                <tr>
                                    <td>
                                        <code>{{ repo.name }}</code>
                                        <br>
                                        <small class="text-muted">{{ repo.url }}</small>
                                    </td>
                                    <td>{{ repo.description or '-' }}</td>
                                    <td>
                                        <form method="post" action="/github/clone" class="d-inline">
                                            <input type="hidden" name="repo_url" value="{{ repo.url }}">
                                            <input type="hidden" name="repo_id" value="{{ repo.name }}">
                                            <input type="hidden" name="branch" value="main">
                                            <button type="submit" class="btn btn-sm btn-outline-primary">
                                                Clone
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Documentation -->
<div class="row mt-4">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Environment Variables</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Variable</th>
                            <th>Description</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>GITHUB_PAT</code></td>
                            <td>GitHub Personal Access Token</td>
                            <td>
                                {% if github_configured %}
                                    <span class="badge bg-success">Set</span>
                                {% else %}
                                    <span class="badge bg-warning">Not set</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td><code>GITHUB_USER</code></td>
                            <td>GitHub username</td>
                            <td>
                                {% if github_user %}
                                    <span class="badge bg-success">{{ github_user }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">Optional</span>
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}