{% extends 'repository/repo_layout.html' %}

{% block title %}PR #{{ pr.id }}: {{ pr.title }} - {{ repo_owner }}/{{ repo_name }} - {{ brand_name }}{% endblock %}

{% block repo_content %}
<div class="flex flex-col space-y-6">
    <!-- Header -->
    <div class="border-b border-white/5 pb-6">
        <div class="flex items-center gap-3 mb-2">
            <h1 class="text-3xl font-bold text-white tracking-tight">{{ pr.title }}</h1>
            <span class="text-zinc-500 text-2xl font-light">#{{ pr.id }}</span>
        </div>
        <div class="flex items-center gap-3 text-sm">
            {% if pr.status == 'open' %}
            <span
                class="bg-green-500/10 text-green-400 border border-green-500/20 px-3 py-1 rounded-full flex items-center gap-1.5 font-medium">
                <i data-lucide="git-pull-request" class="h-4 w-4"></i> Open
            </span>
            {% elif pr.status == 'merged' %}
            <span
                class="bg-purple-500/10 text-purple-400 border border-purple-500/20 px-3 py-1 rounded-full flex items-center gap-1.5 font-medium">
                <i data-lucide="git-merge" class="h-4 w-4"></i> Merged
            </span>
            {% else %}
            <span
                class="bg-red-500/10 text-red-400 border border-red-500/20 px-3 py-1 rounded-full flex items-center gap-1.5 font-medium">
                <i data-lucide="x-circle" class="h-4 w-4"></i> Closed
            </span>
            {% endif %}

            <span class="text-zinc-400 flex items-center gap-1.5 ml-3">
                {% if pr.created_by_avatar %}
                <img src="{{ url_for('static', filename=pr.created_by_avatar) }}"
                    class="w-5 h-5 rounded-full object-cover">
                {% else %}
                <div
                    class="w-5 h-5 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-[8px] font-bold text-white uppercase">
                    {{ pr.created_by_username[:2] }}
                </div>
                {% endif %}
                <a href="{{ url_for('profile.user_profile_by_username_route', username=pr.created_by_username) }}"
                    class="font-bold text-white hover:underline">{{
                    pr.created_by_username }}</a>
                wants to merge into <code
                    class="bg-white/10 px-1.5 py-0.5 rounded text-xs">{{ pr.target_branch }}</code>
                from <code
                    class="bg-white/10 px-1.5 py-0.5 rounded text-xs">{{ pr.source_repo_owner_username }}:{{ pr.source_branch }}</code>
            </span>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Left Column: Conversation & Diff -->
        <div class="lg:col-span-3 space-y-8">

            <!-- PR Description -->
            {% if pr.description %}
            <div class="bg-black/20 border border-white/5 rounded-xl overflow-hidden">
                <div class="bg-white/5 px-4 py-2 border-b border-white/5 flex items-center justify-between">
                    <span class="text-xs font-bold text-zinc-400 uppercase tracking-widest">Description</span>
                </div>
                <div class="p-6 text-zinc-300 prose prose-invert max-w-none">
                    <div id="pr-description-raw" class="hidden">{{ pr.description }}</div>
                    <div id="pr-description-rendered"></div>
                </div>
            </div>
            {% endif %}

            <!-- Diff View -->
            <div class="bg-black/20 border border-white/5 rounded-xl overflow-hidden">
                <div class="bg-white/5 px-4 py-2 border-b border-white/5 flex items-center justify-between">
                    <span class="text-xs font-bold text-zinc-400 uppercase tracking-widest">Changes</span>
                </div>
                <div class="overflow-x-auto">
                    {% if 'Diff error' in pr.diff %}
                    <div class="p-6 text-red-400 font-mono text-sm bg-red-500/5 border-l-2 border-red-500">
                        {{ pr.diff }}
                    </div>
                    {% else %}
                    <pre
                        class="p-4 text-sm font-mono text-zinc-300 overflow-x-auto"><code id="diff-view">{{ pr.diff }}</code></pre>
                    {% endif %}
                </div>
            </div>

            <!-- Merge/Close Actions -->
            {% if pr.status == 'open' and can_write %}
            <div class="bg-black/20 border border-white/5 rounded-xl p-6 flex flex-col items-start gap-4">
                <h3 class="text-lg font-bold text-white">Merge Pull Request</h3>
                <div class="flex items-center gap-3">
                    <button type="button" data-pr-merge="{{ pr.id }}"
                        class="px-4 py-2 bg-green-600 hover:bg-green-500 text-white rounded-lg font-bold text-sm shadow-lg shadow-green-500/20 transition-all flex items-center gap-2">
                        <i data-lucide="git-merge" class="h-4 w-4"></i> Merge Pull Request
                    </button>
                    <button type="button" data-pr-close="{{ pr.id }}"
                        class="px-4 py-2 bg-white/5 hover:bg-white/10 text-zinc-300 hover:text-white rounded-lg font-medium text-sm border border-white/10 transition-all flex items-center gap-2">
                        <i data-lucide="x-circle" class="h-4 w-4"></i> Close Pull Request
                    </button>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Right Column: Sidebar info -->
        <div class="lg:col-span-1 space-y-6">
            <div class="bg-black/20 border border-white/5 rounded-xl p-4 space-y-4">
                <div>
                    <span class="text-xs font-bold text-zinc-500 uppercase tracking-widest block mb-2">Reviewers</span>
                    <span class="text-sm text-zinc-400 italic">No reviewers assigned</span>
                </div>
                <div class="border-t border-white/5 pt-4">
                    <span class="text-xs font-bold text-zinc-500 uppercase tracking-widest block mb-2">Labels</span>
                    <span class="text-sm text-zinc-400 italic">None</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Close PR Confirmation Modal -->
<div id="close-pr-modal" class="fixed inset-0 z-[100] hidden modal-transition" aria-hidden="true">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm modal-backdrop"
        onclick="closeModalAnimation(document.getElementById('close-pr-modal'))"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            class="relative w-full max-w-sm transform overflow-hidden rounded-2xl glass-modal p-6 text-left shadow-2xl transition-all modal-content border border-white/10 bg-[#09090b]">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-white mb-2">Close Pull Request?</h3>
                <p class="text-zinc-400 text-sm">Are you sure you want to close this pull request?</p>
            </div>
            <div class="flex justify-end gap-3">
                <button onclick="closeModalAnimation(document.getElementById('close-pr-modal'))"
                    class="glass-button px-4 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:text-white transition-colors">
                    Cancel
                </button>
                <button type="button" data-pr-confirm-close
                    class="px-4 py-2 bg-red-500/10 text-red-400 hover:bg-red-500/20 border border-red-500/20 rounded-lg font-bold text-sm transition-all shadow-lg shadow-red-500/10">
                    Close Pull Request
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Merge PR Confirmation Modal -->
<div id="merge-pr-modal" class="fixed inset-0 z-[100] hidden modal-transition" aria-hidden="true">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm modal-backdrop"
        onclick="closeModalAnimation(document.getElementById('merge-pr-modal'))"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            class="relative w-full max-w-sm transform overflow-hidden rounded-2xl glass-modal p-6 text-left shadow-2xl transition-all modal-content border border-white/10 bg-[#09090b]">
            <div class="mb-6">
                <h3 class="text-xl font-bold text-white mb-2">Merge Pull Request?</h3>
                <p class="text-zinc-400 text-sm">Are you sure you want to merge this pull request?</p>
            </div>
            <div class="flex justify-end gap-3">
                <button onclick="closeModalAnimation(document.getElementById('merge-pr-modal'))"
                    class="glass-button px-4 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:text-white transition-colors">
                    Cancel
                </button>
                <button type="button" data-pr-confirm-merge
                    class="px-4 py-2 bg-green-500/10 text-green-400 hover:bg-green-500/20 border border-green-500/20 rounded-lg font-bold text-sm transition-all shadow-lg shadow-green-500/10">
                    Merge Pull Request
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    window.currentPrIdToClose = null;
    window.currentPrIdToMerge = null;

    window.initPRDetail = function initPRDetail() {
        // Check for merge success toast
        if (localStorage.getItem('pr_merge_success')) {
            if (window.createToast) {
                window.createToast('pr-success', 'Merged', 'Pull Request Merged Successfully', true);
            }
            localStorage.removeItem('pr_merge_success');
        }

        // Check for create success toast
        if (localStorage.getItem('pr_create_success')) {
            if (window.createToast) {
                window.createToast('pr-success', 'Created', 'Pull Request Successfully Created', true);
            }
            localStorage.removeItem('pr_create_success');
        }

        // Render markdown description
        const rawDesc = document.getElementById('pr-description-raw');
        const targetDesc = document.getElementById('pr-description-rendered');
        if (rawDesc && targetDesc && window.marked) {
            targetDesc.innerHTML = marked.parse(rawDesc.textContent);
        }

        // Colorize Diff
        const diffView = document.getElementById('diff-view');
        if (diffView) {
            const lines = diffView.textContent.split('\n');
            let formatted = '';
            lines.forEach(line => {
                const escapedLine = line.replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');

                if (line.startsWith('+') && !line.startsWith('+++')) {
                    formatted += `<span class="block bg-green-500/10 text-green-400 -mx-4 px-4">${escapedLine}</span>`;
                } else if (line.startsWith('-') && !line.startsWith('---')) {
                    formatted += `<span class="block bg-red-500/10 text-red-400 -mx-4 px-4">${escapedLine}</span>`;
                } else if (line.startsWith('@@')) {
                    formatted += `<span class="block text-blue-400 -mx-4 px-4 border-t border-b border-white/5 my-1 py-1 bg-white/5">${escapedLine}</span>`;
                } else {
                    formatted += `<span class="block -mx-4 px-4 text-zinc-400">${escapedLine}</span>`;
                }
            });
            diffView.innerHTML = formatted;
        }
    };

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

    window.mergePR = function mergePR(id) {
        window.currentPrIdToMerge = id;
        if (typeof openModalAnimation === 'function') openModalAnimation(document.getElementById('merge-pr-modal'));
        else if (typeof window.openModalAnimation === 'function') window.openModalAnimation(document.getElementById('merge-pr-modal'));
        else document.getElementById('merge-pr-modal')?.classList.remove('hidden');
    };

    window.confirmMergePR = async function confirmMergePR() {
        if (!window.currentPrIdToMerge) return;

        const modal = document.getElementById('merge-pr-modal');
        const confirmBtn = modal.querySelector('button[onclick="confirmMergePR()"]');
        const originalText = confirmBtn.innerHTML;

        confirmBtn.disabled = true;
        confirmBtn.innerHTML = `<i class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2 inline-block"></i> Merging...`;

        try {
            const url = `{{ url_for('git.merge_pull_request', repo_owner=repo_owner, repo_name=repo_name, pr_id=0) }}`.replace('/0/merge', `/${window.currentPrIdToMerge}/merge`);
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            const data = await res.json();
            if (res.ok) {
                localStorage.setItem('pr_merge_success', 'true');
                window.location.reload();
            } else {
                if (window.createToast) {
                    window.createToast('pr-error', 'Error', data.error || 'Merge failed', false);
                } else {
                    alert(data.error || 'Merge failed');
                }
                closeModalAnimation(modal);
            }
        } catch (e) {
            console.error(e);
            if (window.createToast) {
                window.createToast('pr-error', 'Error', 'An error occurred', false);
            } else {
                alert('An error occurred');
            }
            closeModalAnimation(modal);
        } finally {
            confirmBtn.disabled = false;
            confirmBtn.innerHTML = originalText;
        }
    };

    window.closePR = function closePR(id) {
        window.currentPrIdToClose = id;
        if (typeof openModalAnimation === 'function') openModalAnimation(document.getElementById('close-pr-modal'));
        else if (typeof window.openModalAnimation === 'function') window.openModalAnimation(document.getElementById('close-pr-modal'));
        else document.getElementById('close-pr-modal')?.classList.remove('hidden');
    };

    async function confirmClosePR() {
        if (!window.currentPrIdToClose) return;

        const modal = document.getElementById('close-pr-modal');
        const confirmBtn = modal.querySelector('button[onclick="confirmClosePR()"]');
        const originalText = confirmBtn.innerHTML;

        confirmBtn.disabled = true;
        confirmBtn.innerHTML = `<i class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full mr-2 inline-block"></i> Closing...`;

        try {
            const url = `{{ url_for('git.close_pull_request', repo_owner=repo_owner, repo_name=repo_name, pr_id=0) }}`.replace('/0/close', `/${window.currentPrIdToClose}/close`);
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            const data = await res.json();
            if (res.ok) {
                window.location.reload();
            } else {
                if (window.createToast) {
                    window.createToast('pr-error', 'Error', data.error || 'Close failed', false);
                } else {
                    alert(data.error || 'Close failed');
                }
                closeModalAnimation(modal);
            }
        } catch (e) {
            console.error(e);
            if (window.createToast) {
                window.createToast('pr-error', 'Error', 'An error occurred', false);
            } else {
                alert('An error occurred');
            }
            closeModalAnimation(modal);
        } finally {
            confirmBtn.disabled = false;
            confirmBtn.innerHTML = originalText;
        }
    };
</script>
{% endblock %}