<?php
defined( 'ABSPATH' ) || exit;

/** @var WC_Order $order */
if ( ! isset( $order ) || ! $order ) {
    global $wp;
    if ( isset( $wp->query_vars['order-received'] ) ) {
        $order_id = absint( $wp->query_vars['order-received'] );
        $order    = wc_get_order( $order_id );
    }
}

if ( ! $order ) return;

/* =========================
   1. إعداد البيانات
========================= */
$key = get_post_meta( $order->get_id(), '_digital_key', true );

$product         = null;
$product_name    = '';
$product_image   = '';
$product_url     = '';
$activation_text = '';

foreach ( $order->get_items() as $item ) {
    $product = $item->get_product();
    if ( $product ) {
        $product_name    = $item->get_name();
        $product_url     = get_permalink( $product->get_id() );
        $activation_text = $product->get_short_description(); 
        
        if ( $product->get_image_id() ) {
            $product_image = wp_get_attachment_image_url( $product->get_image_id(), 'thumbnail' ); 
        }
        break; 
    }
}

$show_key = ( $order->has_status( 'completed' ) || $order->has_status( 'processing' ) ) && ! empty( $key );
?>

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">

<style>
    :root {
        --bg-card: #0f172a;
        --bg-inner: #1e293b;
        --accent: #3b82f6;
        --text-main: #f8fafc;
        --text-muted: #94a3b8;
        --border: rgba(255, 255, 255, 0.08);
    }

    .digital-order-container {
        padding: 30px 10px;
        direction: rtl;
        font-family: 'Cairo', sans-serif;
    }

    .premium-card {
        max-width: 800px;
        margin: 0 auto;
        background: radial-gradient(circle at top left, #1e293b, #0f172a);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 32px;
        color: var(--text-main);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: hidden;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 24px;
    }

    .product-thumb img {
        width: 80px;
        height: 80px;
        border-radius: 16px;
        object-fit: cover;
        border: 2px solid var(--border);
        background: var(--bg-inner);
    }

    .product-info h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: #fff;
        line-height: 1.4;
    }

    .order-meta {
        font-size: 14px;
        color: var(--text-muted);
        background: rgba(255,255,255,0.05);
        padding: 4px 12px;
        border-radius: 20px;
        display: inline-block;
    }

    .key-display-area {
        background: rgba(0, 0, 0, 0.3);
        border: 1px dashed var(--accent);
        border-radius: 16px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    @media(min-width: 640px) {
        .key-display-area {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    .key-code {
        font-family: 'JetBrains Mono', monospace;
        font-size: 18px;
        color: #4ade80;
        letter-spacing: 1px;
        word-break: break-all;
        text-align: center;
    }

    .copy-btn {
        background: var(--accent);
        border: none;
        color: white;
        padding: 10px 24px;
        border-radius: 12px;
        font-family: 'Cairo', sans-serif;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .copy-btn:hover {
        background: #2563eb;
        transform: translateY(-2px);
    }

    .copy-btn.copied {
        background: #10b981;
        pointer-events: none;
    }

    .activation-guide {
        background: var(--bg-inner);
        border-radius: 16px;
        padding: 24px;
        border: 1px solid var(--border);
    }

    .activation-guide h3 {
        font-size: 16px;
        color: #fff;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .status-msg {
        padding: 16px;
        border-radius: 12px;
        text-align: center;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .msg-wait {
        background: rgba(234, 179, 8, 0.15);
        color: #facc15;
        border: 1px solid rgba(234, 179, 8, 0.2);
    }

    .card-footer {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .action-link {
        font-size: 13px;
        color: var(--text-muted);
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 8px;
        transition: 0.2s;
        background: rgba(255,255,255,0.03);
    }

    .action-link:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }
</style>

<div class="digital-order-container">
    <div class="premium-card">
        
        <div class="card-header">
            <div class="product-thumb">
                <img src="<?php echo esc_url( $product_image ?: wc_placeholder_img_src() ); ?>" alt="Product Image">
            </div>
            <div class="product-info">
                <h2><?php echo esc_html( $product_name ); ?></h2>
                <span class="order-meta">طلب رقم #<?php echo esc_html( $order->get_order_number() ); ?></span>
            </div>
        </div>

        <?php if ( $show_key ) : ?>
            
            <div class="key-display-area">
                <div class="key-code" id="uniqueDigitalKey"><?php echo esc_html( $key ); ?></div>
                <button class="copy-btn" onclick="copyToClipboard(this)">
                    <span class="btn-text">نسخ الكود</span>
                    <span class="btn-icon">📋</span>
                </button>
            </div>

            <?php if ( $product_url ) : ?>
                <div style="text-align:center; margin-bottom:20px;">
                    <a href="<?php echo esc_url( $product_url ); ?>" target="_blank" style="color:var(--accent); text-decoration:none; font-weight:bold;">
                        فتح صفحة المنتج ↗
                    </a>
                </div>
            <?php endif; ?>

        <?php else : ?>
            
            <div class="status-msg msg-wait">
                ⏳ الكود قيد التجهيز، سيظهر هنا فور اكتمال الدفع أو المراجعة.
            </div>

        <?php endif; ?>

        <?php if ( $activation_text ) : ?>
            <div class="activation-guide">
                <h3>طريقة التفعيل:</h3>
                <div class="activation-content">
                    <?php echo wpautop( wp_kses_post( $activation_text ) ); ?>
                </div>
            </div>
        <?php endif; ?>

        <div class="card-footer">
            <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>" class="action-link">عرض تفاصيل الفاتورة</a>
            <?php if ( $product_url ) : ?>
                <a href="<?php echo esc_url( $product_url . '#reviews' ); ?>" class="action-link">★ قيّم المنتج</a>
            <?php endif; ?>
        </div>

    </div>
</div>

<script>
function copyToClipboard(btn) {
    const keyText = document.getElementById('uniqueDigitalKey').innerText;
    const btnText = btn.querySelector('.btn-text');
    const originalText = btnText.innerText;

    navigator.clipboard.writeText(keyText).then(() => {
        btn.classList.add('copied');
        btnText.innerText = "تم النسخ!";
        
        setTimeout(() => {
            btn.classList.remove('copied');
            btnText.innerText = originalText;
        }, 2000);
    }).catch(err => {
        console.error('فشل النسخ', err);
        alert('يرجى تحديد النص ونسخه يدوياً');
    });
}
</script>