// ==UserScript==
// @name         Mydealz Comment-Preview
// @namespace    https://mydealz.de/
// @version      1.0
// @description  Zeigt verlinkte Kommentare beim Klick in einem Vorschau Popup an
// @match        https://www.mydealz.de/*
// @license      MIT
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Popup erstellen
    const popup = document.createElement('div');
    popup.style.position = 'fixed';
    popup.style.backgroundColor = '#fff';
    popup.style.padding = '12px';
    popup.style.border = '1px solid #ccc';
    popup.style.borderRadius = '6px';
    popup.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
    popup.style.zIndex = '999999';
    popup.style.maxWidth = '600px';
    popup.style.maxHeight = '400px';
    popup.style.overflow = 'auto';
    popup.style.display = 'none';
    document.body.appendChild(popup);

    // GraphQL-Abfrage für einen Kommentar - exakt wie im Bookmarklet
    async function fetchSingleComment(dealId, commentId) {
        const query = `
            query comments($filter: CommentFilter!, $limit: Int, $page: Int) {
                comments(filter: $filter, limit: $limit, page: $page) {
                    items {
                        commentId
                        preparedHtmlContent
                        user {
                            userId
                            username
                        }
                        replyCount
                        createdAt
                    }
                }
            }
        `;
        
        const variables = {
            filter: {
                threadId: { eq: parseInt(dealId) },
                order: { direction: "Ascending" }
            },
            limit: 100,
            page: 1
        };

        const response = await fetch('https://www.mydealz.de/graphql', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify({ query, variables })
        });

        const data = await response.json();
        if (data.errors) {
            throw new Error(data.errors[0].message);
        }

        // Finde den spezifischen Kommentar in den Ergebnissen
        return data?.data?.comments?.items?.find(item => item.commentId === commentId.toString());
    }

    // Click-Handler für Links
    async function onLinkClick(event) {
        const link = event.target.closest('a');
        if (!link) return;

        const fullUrl = link.title || link.href;
        
        // Prüfe auf verschiedene Kommentar-Link-Formate
        const commentMatch = fullUrl.match(/(?:\/deals\/.*?-)(\d+)(?:#comment-|#reply-)(\d+)/i);
        if (!commentMatch) return;

        event.preventDefault();
        
        const dealId = commentMatch[1];
        const commentId = commentMatch[2];

        try {
            popup.style.display = 'block';
            popup.style.left = (event.clientX + 15) + 'px';
            popup.style.top = (event.clientY + 15) + 'px';
            popup.innerHTML = '<em>Lade Kommentar...</em>';

            const commentData = await fetchSingleComment(dealId, commentId);
            if (!commentData) {
                popup.innerHTML = '<em>Kommentar nicht gefunden</em>';
                return;
            }

            popup.innerHTML = `
                <div style="position:relative; padding-right:30px;">
                    <button onclick="this.parentElement.parentElement.style.display='none'" 
                            style="position:absolute; top:0; right:0; background:none; border:none; cursor:pointer; font-size:20px; padding:0 5px;">
                        ×
                    </button>
                    <div style="font-weight: bold; margin-bottom: 8px;">
                        Kommentar von ${commentData.user.username}:
                    </div>
                    <div style="font-size: 14px; margin-bottom: 15px;">
                        ${commentData.preparedHtmlContent}
                    </div>
                    <div style="text-align: right;">
                        <button onclick="window.location.href='${fullUrl}'" 
                                style="padding: 6px 12px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
                            Zum Kommentar
                        </button>
                    </div>
                </div>
            `;
        } catch(e) {
            console.error(e);
            popup.innerHTML = '<em>Fehler beim Laden</em>';
        }
    }

    // Event-Listener für Klicks
    document.addEventListener('click', onLinkClick);

    // Popup schließen wenn außerhalb geklickt wird
    document.addEventListener('click', (event) => {
        if (!popup.contains(event.target) && event.target.tagName !== 'A') {
            popup.style.display = 'none';
        }
    });
})();