{% extends 'repository/repo_layout.html' %}
{% from "_custom_select.html" import custom_select %}

{% block title %}Pull Requests - {{ repo_owner }}/{{ repo_name }} - {{ brand_name }}{% endblock %}

{% block repo_content %}
<div class="flex flex-col space-y-6">
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h1 class="text-2xl font-bold text-white tracking-tight">Pull Requests</h1>
            <span class="text-zinc-500 text-sm font-medium px-2 py-0.5 rounded-full bg-white/5 border border-white/5">{{
                pull_requests|length }}</span>
        </div>

        {% if session.get('user_id') %}
        <button onclick="openModalAnimation(document.getElementById('new-pr-modal'))"
            class="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm transition-colors">
            <i data-lucide="git-pull-request" class="h-4 w-4"></i> New Pull Request
        </button>
        {% endif %}
    </div>

    <!-- Search/Filter Bar -->
    <div class="flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
        <div class="flex-1 relative">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500"></i>
            <input type="text" placeholder="Search pull requests..."
                class="w-full bg-transparent border-none text-sm text-zinc-200 placeholder-zinc-500 pl-10 py-2 focus:ring-0 outline-none">
        </div>
        <div class="flex items-center border-l border-white/5 pl-2">
            <button class="px-3 py-1.5 text-xs font-bold text-white bg-white/10 rounded-lg mr-1">Open</button>
            <button
                class="px-3 py-1.5 text-xs font-medium text-zinc-400 hover:text-white rounded-lg transition-colors">Closed</button>
        </div>
    </div>

    <!-- Pull Requests List -->
    <div class="rounded-xl border border-white/5 bg-black/20 overflow-hidden min-h-[400px]">
        {% if pull_requests %}
        <div class="divide-y divide-white/5">
            {% for pr in pull_requests %}
            <div class="p-4 hover:bg-white/5 transition-colors group">
                <div class="flex items-start gap-3">
                    <div class="mt-1">
                        {% if pr.status == 'open' %}
                        <i data-lucide="git-pull-request" class="h-5 w-5 text-zinc-400"></i>
                        {% elif pr.status == 'merged' %}
                        <i data-lucide="git-merge" class="h-5 w-5 text-purple-500"></i>
                        {% else %}
                        <i data-lucide="x-circle" class="h-5 w-5 text-red-500"></i>
                        {% endif %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between mb-1">
                            <a href="{{ url_for('git.view_pull_request', repo_owner=repo_owner, repo_name=repo_name, pr_id=pr.id) }}"
                                class="text-base font-bold text-zinc-200 group-hover:text-blue-400 transition-colors truncate block">
                                {{ pr.title }}
                            </a>
                        </div>
                        <div class="text-xs text-zinc-500 flex items-center gap-2">
                            <span>#{{ pr.id }} opened {{ pr.created_at | timesince }} by </span>
                            <span class="flex items-center gap-1 mx-1">
                                {% if pr.created_by_avatar %}
                                <img src="{{ url_for('static', filename=pr.created_by_avatar) }}"
                                    class="w-4 h-4 rounded-full object-cover">
                                {% else %}
                                <div
                                    class="w-4 h-4 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-[6px] font-bold text-white uppercase">
                                    {{ pr.created_by_username[:2] }}
                                </div>
                                {% endif %}
                                <span
                                    class="text-zinc-400 font-medium hover:text-white transition-colors cursor-pointer">{{
                                    pr.created_by_username }}</span>
                            </span>
                            <span class="mx-1">•</span>
                            <span class="flex items-center gap-1">
                                <i data-lucide="git-branch" class="h-3 w-3"></i> {{ pr.source_branch }} <i
                                    data-lucide="arrow-right" class="h-3 w-3"></i> {{ pr.target_branch }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="git-pull-request" class="h-8 w-8 text-zinc-600"></i>
            </div>
            <h3 class="text-lg font-bold text-zinc-300">No pull requests found</h3>
            <p class="text-zinc-500 text-sm mt-1 max-w-sm">There aren’t any open pull requests.</p>
            {% if session.get('user_id') %}
            <button onclick="openModalAnimation(document.getElementById('new-pr-modal'))"
                class="mt-6 glass-button-primary px-6 py-2 rounded-lg text-sm font-bold">
                Create Pull Request
            </button>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- New PR Modal -->
<div id="new-pr-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4" aria-hidden="true">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"
        onclick="closeModalAnimation(document.getElementById('new-pr-modal'))"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl w-full max-w-2xl max-h-[85vh] flex flex-col modal-content-transition relative z-[100] overflow-hidden border border-white/10">

            <!-- Modal Header -->
            <div class="flex items-center justify-between p-6 border-b border-white/5 flex-shrink-0">
                <h3 class="text-xl font-bold text-white flex items-center gap-2">
                    <i data-lucide="git-pull-request" class="h-5 w-5 text-blue-400"></i>
                    New Pull Request
                </h3>
                <button onclick="closeModalAnimation(document.getElementById('new-pr-modal'))"
                    class="rounded-lg p-2 text-zinc-400 hover:bg-white/5 hover:text-white transition-colors">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>

            <!-- Modal Body (Scrollable) -->
            <form id="new-pr-form" onsubmit="createPR(event)" class="flex-1 flex flex-col overflow-hidden">
                <div class="flex-1 overflow-y-auto p-6 space-y-6 custom-scrollbar">
                    {% set pr_cur = repo_owner ~ '/' ~ repo_name %}
                    {% if parent_repo %}
                    {% set pr_target_repo_opts = [
                        {"value": parent_repo.owner ~ '/' ~ parent_repo.name, "label": parent_repo.owner ~ '/' ~ parent_repo.name},
                        {"value": pr_cur, "label": pr_cur}
                    ] %}
                    {% else %}
                    {% set pr_target_repo_opts = [{"value": pr_cur, "label": pr_cur}] %}
                    {% endif %}
                    {% if can_write %}
                    {% set pr_source_repo_opts = [{"value": pr_cur, "label": pr_cur}] %}
                    {% set pr_source_repo_val = pr_cur %}
                    {% set pr_source_repo_dis = false %}
                    {% elif user_fork and (user_fork.owner != repo_owner or user_fork.name != repo_name) %}
                    {% set pr_fork_slug = user_fork.owner ~ '/' ~ user_fork.name %}
                    {% set pr_source_repo_opts = [{"value": pr_fork_slug, "label": pr_fork_slug}] %}
                    {% set pr_source_repo_val = pr_fork_slug %}
                    {% set pr_source_repo_dis = false %}
                    {% else %}
                    {% set pr_source_repo_opts = [{"value": "", "label": "No write access or fork found"}] %}
                    {% set pr_source_repo_val = "" %}
                    {% set pr_source_repo_dis = true %}
                    {% endif %}
                    {% set pr_def_branch = 'main' if branches and ('main' in branches) else ('master' if branches and ('master' in branches) else (branches[0] if branches else '')) %}
                    <!-- Target Repo Selection -->
                    <div class="bg-white/5 p-4 rounded-xl border border-white/5">
                        <div class="flex flex-col md:flex-row items-center gap-4">
                            <!-- Base (Target) -->
                            <div class="flex-1 w-full space-y-2">
                                <label class="block text-xs font-bold text-zinc-500 uppercase tracking-widest">Base
                                    Repository</label>
                                <div class="flex flex-col gap-2">
                                    {{ custom_select(id="pr-target-repo-select", options=pr_target_repo_opts, selected_value=pr_cur, selected_label=pr_cur, mode="form", class="w-full", picker_title="Base repository") }}
                                    {{ custom_select(id="pr-target-branch-select", name="target_branch", options=[], selected_value=pr_def_branch, selected_label=pr_def_branch, mode="form", dynamic=true, class="w-full", picker_title="Base branch") }}
                                </div>
                            </div>

                            <!-- Arrow -->
                            <div class="flex items-center justify-center pt-6 text-zinc-500">
                                <i data-lucide="arrow-left" class="h-5 w-5 md:rotate-0 rotate-90"></i>
                            </div>

                            <!-- Head (Source) -->
                            <div class="flex-1 w-full space-y-2">
                                <label class="block text-xs font-bold text-zinc-500 uppercase tracking-widest">Head
                                    Repository</label>
                                <div class="flex flex-col gap-2">
                                    {{ custom_select(id="pr-source-repo-select", options=pr_source_repo_opts, selected_value=pr_source_repo_val, selected_label=(pr_source_repo_opts[0].label if pr_source_repo_opts else 'Select...'), mode="form", class="w-full", disabled=pr_source_repo_dis, picker_title="Head repository") }}
                                    {{ custom_select(id="pr-source-branch-select", name="source_branch", options=[], selected_value=pr_def_branch, selected_label=pr_def_branch, mode="form", dynamic=true, class="w-full", disabled=pr_source_repo_dis, picker_title="Head branch") }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label for="pr-title" class="block text-sm font-medium text-zinc-400 mb-1.5">Title</label>
                        <input type="text" id="pr-title" name="title" required
                            class="w-full rounded-xl bg-black/20 border border-white/10 px-4 py-2.5 text-white placeholder-zinc-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all"
                            placeholder="Title">
                    </div>

                    <div>
                        <label for="pr-description"
                            class="block text-sm font-medium text-zinc-400 mb-1.5">Description</label>
                        <textarea id="pr-description" name="description" rows="6"
                            class="w-full rounded-xl bg-black/20 border border-white/10 px-4 py-3 text-white placeholder-zinc-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all resize-none custom-scrollbar"
                            placeholder="Leave a comment"></textarea>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="px-6 py-5 flex justify-end gap-3 border-t border-white/5 flex-shrink-0">
                    <button type="button" onclick="closeModalAnimation(document.getElementById('new-pr-modal'))"
                        class="glass-button no-hover-lift text-zinc-300 font-bold py-2.5 px-6 rounded-xl text-sm">Cancel</button>
                    <button type="submit" id="create-pr-btn"
                        class="create-file-btn-shine glass-button-primary font-bold py-2.5 px-8 rounded-xl text-sm flex items-center gap-2">
                        Create Pull Request
                    </button>
                </div>
            </form>
    </div>
</div>

<script>
    async function createPR(e) {
        e.preventDefault();
        const btn = document.getElementById('create-pr-btn');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<i class="animate-spin h-4 w-4 border-2 border-white/20 border-t-white rounded-full mr-2"></i> Creating...`;

        const title = document.getElementById('pr-title').value;
        const description = document.getElementById('pr-description').value;
        const sourceBranch = document.getElementById('pr-source-branch-select').value;
        const targetBranch = document.getElementById('pr-target-branch-select').value;

        // Parse source repo
        const sourceRepoVal = document.getElementById('pr-source-repo-select').value;
        const [sourceRepoOwner, sourceRepoName] = sourceRepoVal.split('/');

        // Parse target repo (this page is the context, but user might select parent)
        // Actually the route /:owner/:name/pulls handles creation. 
        // If we want to create a PR *on* the parent repo, we should probably POST to the parent repo's endpoint?
        // OR we POST to the *context* repo (where we are viewing) and specify the *target* repo in the body?
        // The `create_pull_request` python code uses `get_repo_and_check_auth(repo_owner, repo_name)` for target.
        // So we are creating the PR *on the repository we are currently viewing*.
        // If the user wants to create a PR on the PARENT repo, they should ideally be on the parent repo's page, OR we explicitly support cross-repo PRs via the API.
        // The current Python code `create_pull_request` takes `repo_owner, repo_name` from the URL as the TARGET repo.
        // So we must ensure we are on the correct page or the API supports specifying target.
        // Looking at python code: `target_repo_data = get_repo_and_check_auth(repo_owner, repo_name)`.
        // So the URL defines the target.
        // If I am on `my-fork/pulls` and I want to PR to `upstream/original`, the backend currently treats `my-fork` as the target.
        // TO FIX THIS: We need to allow specifying target_repo_owner/_name in the JSON body and have the backend use THAT as target, overriding the URL if present, or just redirect the fetch to the correct URL.

        const targetRepoVal = document.getElementById('pr-target-repo-select').value;
        const [targetRepoOwner, targetRepoName] = targetRepoVal.split('/');

        try {
            // We post to the TARGET repo's endpoint to create the PR there.
            const response = await fetch(`/${targetRepoOwner}/${targetRepoName}/pulls`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    title,
                    description,
                    source_branch: sourceBranch,
                    target_branch: targetBranch,
                    source_repo_owner: sourceRepoOwner,
                    source_repo_name: sourceRepoName
                })
            });

            const data = await response.json();

            if (response.ok) {
                if (data.pr_id) {
                    // Redirect to the new PR on the TARGET repo
                    localStorage.setItem('pr_create_success', 'true');
                    window.location.href = `/${targetRepoOwner}/${targetRepoName}/pulls/${data.pr_id}`;
                } else {
                    window.location.reload();
                }
            } else {
                if (window.createToast) {
                    window.createToast('pr-error', 'Error', data.error || 'Failed to create PR', false);
                } else {
                    alert(data.error || 'Failed to create PR');
                }
            }
        } catch (error) {
            console.error('Error:', error);
            if (window.createToast) {
                window.createToast('pr-error', 'Unexpected Error', 'An unexpected error occurred', false);
            } else {
                alert('An unexpected error occurred');
            }
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }

    function pickDefaultBranch(branches) {
        if (!branches || !branches.length) return '';
        if (branches.includes('main')) return 'main';
        if (branches.includes('master')) return 'master';
        return branches[0];
    }

    async function updateSourceRepo() {
        const sourceRepoInput = document.getElementById('pr-source-repo-select');
        const selectedRepo = sourceRepoInput && sourceRepoInput.value;
        if (!selectedRepo) return;

        if (typeof window.setModalSelectDisabled === 'function') {
            window.setModalSelectDisabled('pr-source-branch-select', true);
        }
        if (typeof window.populateCustomSelect === 'function') {
            window.populateCustomSelect('pr-source-branch-select', [{ value: '', label: 'Loading...' }], '');
        }

        try {
            const response = await fetch(`/${selectedRepo}/branches`);
            const data = await response.json();

            let branches = [];
            if (Array.isArray(data)) {
                branches = data;
            } else if (data && Array.isArray(data.branches)) {
                if (data.branches.length > 0 && typeof data.branches[0] === 'object') {
                    branches = data.branches.map(b => b.name);
                } else {
                    branches = data.branches;
                }
            }

            if (response.ok && Array.isArray(branches) && typeof window.populateCustomSelect === 'function') {
                const opts = branches.map(b => ({ value: b, label: b }));
                window.populateCustomSelect('pr-source-branch-select', opts, pickDefaultBranch(branches));
            } else if (typeof window.populateCustomSelect === 'function') {
                console.error("Failed to fetch branches or invalid format:", data);
                window.populateCustomSelect('pr-source-branch-select', [{ value: '', label: 'Error loading branches' }], '');
            }
        } catch (e) {
            console.error("Error fetching branches:", e);
            if (typeof window.populateCustomSelect === 'function') {
                window.populateCustomSelect('pr-source-branch-select', [{ value: '', label: 'Error loading branches' }], '');
            }
        } finally {
            if (typeof window.setModalSelectDisabled === 'function') {
                window.setModalSelectDisabled('pr-source-branch-select', false);
            }
        }
    }

    // Initialize source repo branches on load if needed (though template handles initial state for current page)
    // If the "selected" repo in template isn't the current page one (meaning it defaulted to fork), 
    // we might want to trigger this update to ensure branches are correct for THAT fork.
    // Let's add a small check on load.
    function initPullsList() {
        const sourceRepoInput = document.getElementById('pr-source-repo-select');
        const targetRepoInput = document.getElementById('pr-target-repo-select');
        if (!sourceRepoInput || !targetRepoInput) return;

        const initialBranches = {{ branches | tojson }};
        const opts = (initialBranches || []).map(b => ({ value: b, label: b }));
        const def = pickDefaultBranch(initialBranches || []);
        if (typeof window.populateCustomSelect === 'function') {
            window.populateCustomSelect('pr-target-branch-select', opts, def);
            window.populateCustomSelect('pr-source-branch-select', opts, def);
        }

        sourceRepoInput.addEventListener('change', updateSourceRepo);
        targetRepoInput.addEventListener('change', updateTargetRepo);

        const currentPageRepo = "{{ repo_owner }}/{{ repo_name }}";
        const initialSourceValue = sourceRepoInput.value;
        if (initialSourceValue && initialSourceValue !== currentPageRepo) {
            updateSourceRepo();
        }

        const initialTargetValue = targetRepoInput.value;
        if (initialTargetValue && initialTargetValue !== currentPageRepo) {
            updateTargetRepo();
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPullsList);
    } else {
        initPullsList();
    }

    async function updateTargetRepo() {
        const targetRepoInput = document.getElementById('pr-target-repo-select');
        const selectedRepo = targetRepoInput && targetRepoInput.value;
        if (!selectedRepo) return;

        if (typeof window.setModalSelectDisabled === 'function') {
            window.setModalSelectDisabled('pr-target-branch-select', true);
        }
        if (typeof window.populateCustomSelect === 'function') {
            window.populateCustomSelect('pr-target-branch-select', [{ value: '', label: 'Loading...' }], '');
        }

        try {
            const response = await fetch(`/${selectedRepo}/branches`);
            const data = await response.json();

            let branches = [];
            if (Array.isArray(data)) {
                branches = data;
            } else if (data && Array.isArray(data.branches)) {
                if (data.branches.length > 0 && typeof data.branches[0] === 'object') {
                    branches = data.branches.map(b => b.name);
                } else {
                    branches = data.branches;
                }
            }

            if (response.ok && Array.isArray(branches) && typeof window.populateCustomSelect === 'function') {
                const opts = branches.map(b => ({ value: b, label: b }));
                window.populateCustomSelect('pr-target-branch-select', opts, pickDefaultBranch(branches));
            } else if (typeof window.populateCustomSelect === 'function') {
                console.error("Failed to fetch branches or invalid format:", data);
                window.populateCustomSelect('pr-target-branch-select', [{ value: '', label: 'Error loading branches' }], '');
            }
        } catch (e) {
            console.error("Error fetching branches:", e);
            if (typeof window.populateCustomSelect === 'function') {
                window.populateCustomSelect('pr-target-branch-select', [{ value: '', label: 'Error loading branches' }], '');
            }
        } finally {
            if (typeof window.setModalSelectDisabled === 'function') {
                window.setModalSelectDisabled('pr-target-branch-select', false);
            }
        }
    }
</script>
{% endblock %}