<?php
/**
 * Klarna Payments Modal Template
 *
 * This file contains the shared Klarna payments popup modal used across
 * giftitems.php, giftcard.php, and front.php
 *
 * Usage: wpgv_get_klarna_modal_html() returns the HTML string
 *
 * @package Gift Voucher Pro
 * @since 1.0.0
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

/**
 * Get Klarna Modal HTML
 *
 * @return string HTML for Klarna payments modal
 */
function wpgv_get_klarna_modal_html() {
    $html = '
    <!-- Klarna Payments Popup Modal -->
    <div id="klarna-payments-modal" class="wpgv-klarna-modal" style="display: none;">
        <div class="wpgv-klarna-modal-overlay"></div>
        <div class="wpgv-klarna-modal-content">
            <div class="wpgv-klarna-modal-header">
                <h3>' . __('Complete Payment with Klarna', 'gift-voucher') . '</h3>
                <button type="button" class="wpgv-klarna-modal-close" aria-label="Close">&times;</button>
            </div>
            <div class="wpgv-klarna-modal-body">
                <div id="klarna-payments-container">
                    <p class="klarna-loading-text">' . __('Loading Klarna payment methods...', 'gift-voucher') . '</p>
                </div>
                <div class="klarna-payment-instructions">
                    <p>' . __('Click "Complete Payment with Klarna" below to proceed with the payment process.', 'gift-voucher') . '</p>
                    <p class="klarna-warning"><strong>' . __('Important:', 'gift-voucher') . '</strong> ' . __('Please do not close your browser while the payment is being processed.', 'gift-voucher') . '</p>
                </div>
            </div>
            <div class="wpgv-klarna-modal-footer">
                <button type="button"
                        data-action="wpgv-klarna-pay"
                        id="wpgv-klarna-pay-btn"
                        class="wpgv-klarna-pay-button">
                    ' . __('Complete Payment with Klarna', 'gift-voucher') . '
                </button>
                <button type="button" class="wpgv-klarna-cancel-btn">' . __('Cancel', 'gift-voucher') . '</button>
            </div>
        </div>
    </div>

    <style>
        /* Klarna Modal Overlay */
        .wpgv-klarna-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wpgv-klarna-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
        }

        /* Modal Content Box */
        .wpgv-klarna-modal-content {
            position: relative;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow: hidden;
            animation: wpgvKlarnaModalIn 0.3s ease-out;
        }

        @keyframes wpgvKlarnaModalIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Modal Header */
        .wpgv-klarna-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(135deg, #ffb3c6 0%, #ffc8dd 100%);
        }

        .wpgv-klarna-modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
        }

        .wpgv-klarna-modal-close {
            background: rgba(255, 255, 255, 0.8);
            border: none;
            font-size: 24px;
            line-height: 1;
            color: #6b7280;
            cursor: pointer;
            padding: 4px 10px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .wpgv-klarna-modal-close:hover {
            background: #ffffff;
            color: #1f2937;
        }

        /* Modal Body */
        .wpgv-klarna-modal-body {
            padding: 24px;
            max-height: 50vh;
            overflow-y: auto;
        }

        #klarna-payments-container {
            min-height: 150px;
            position: relative;
        }

        #klarna-payments-container .klarna-loading-text {
            text-align: center;
            color: #6b7280;
            font-size: 14px;
            padding: 40px 20px;
        }

        #klarna-payments-container iframe {
            width: 100% !important;
            border: none !important;
            background: white;
        }

        /* Payment Instructions */
        .klarna-payment-instructions {
            margin-top: 16px;
            padding: 16px;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 8px;
            font-size: 14px;
            color: #0369a1;
        }

        .klarna-payment-instructions p {
            margin: 0 0 8px 0;
        }

        .klarna-payment-instructions p:last-child {
            margin-bottom: 0;
        }

        .klarna-payment-instructions .klarna-warning {
            color: #b45309;
            background: #fef3c7;
            border: 1px solid #fcd34d;
            padding: 10px 12px;
            border-radius: 6px;
            margin-top: 12px;
        }

        /* Modal Footer */
        .wpgv-klarna-modal-footer {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px 24px;
            border-top: 1px solid #e5e7eb;
            background: #f9fafb;
        }

        .wpgv-klarna-pay-button {
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, #ffb3c6 0%, #ff8fab 100%);
            color: #1f2937;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .wpgv-klarna-pay-button:hover {
            background: linear-gradient(135deg, #ff8fab 0%, #ff758f 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 143, 171, 0.4);
        }

        .wpgv-klarna-pay-button:active {
            transform: translateY(0);
        }

        .wpgv-klarna-pay-button:disabled {
            background: #d1d5db;
            color: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .wpgv-klarna-cancel-btn {
            width: 100%;
            padding: 12px 24px;
            background: transparent;
            color: #6b7280;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .wpgv-klarna-cancel-btn:hover {
            background: #f3f4f6;
            color: #374151;
            border-color: #9ca3af;
        }

        /* Responsive */
        @media (max-width: 600px) {
            .wpgv-klarna-modal-content {
                width: 95%;
                max-height: 95vh;
                margin: 10px;
            }

            .wpgv-klarna-modal-header {
                padding: 16px 20px;
            }

            .wpgv-klarna-modal-header h3 {
                font-size: 16px;
            }

            .wpgv-klarna-modal-body {
                padding: 20px;
            }

            .wpgv-klarna-modal-footer {
                padding: 16px 20px;
            }
        }
    </style>

    <script>
    (function() {
        // Klarna Modal Controller
        var modal = document.getElementById("klarna-payments-modal");
        var overlay = modal ? modal.querySelector(".wpgv-klarna-modal-overlay") : null;
        var closeBtn = modal ? modal.querySelector(".wpgv-klarna-modal-close") : null;
        var cancelBtn = modal ? modal.querySelector(".wpgv-klarna-cancel-btn") : null;

        function openKlarnaModal() {
            if (modal) {
                modal.style.display = "flex";
                document.body.style.overflow = "hidden";
            }
        }

        function closeKlarnaModal() {
            if (modal) {
                modal.style.display = "none";
                document.body.style.overflow = "";
            }
        }

        // Expose globally for wpgv-klarna.js to use
        window.wpgvKlarnaModal = {
            open: openKlarnaModal,
            close: closeKlarnaModal
        };

        // Event listeners
        if (overlay) overlay.addEventListener("click", closeKlarnaModal);
        if (closeBtn) closeBtn.addEventListener("click", closeKlarnaModal);
        if (cancelBtn) cancelBtn.addEventListener("click", closeKlarnaModal);

        // ESC key to close
        document.addEventListener("keydown", function(e) {
            if (e.key === "Escape" && modal && modal.style.display === "flex") {
                closeKlarnaModal();
            }
        });
    })();
    </script>
    ';

    return $html;
}
