<?php
/**
 * CloudForge Theme - 域名自助授权申请页
 * 无CDK模式：提交域名 → 自动生成 license_key → 365天有效期
 */
$pageDescription = '域名自助授权申请 - ' . SITE_NAME;
$breadcrumbItems = [['title' => '申请授权']];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container" style="max-width:720px;">

        <div class="section-header section-header--center">
            <span class="section-label">// LICENSE</span>
            <h2 class="section-title">域名自助授权申请</h2>
            <p class="section-subtitle">无需 CDK，提交域名即可自动开通 365 天授权</p>
        </div>

        <!-- 消息区域 -->
        <div id="applyMsg"></div>

        <!-- 授权说明卡片 -->
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-8);">
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-5);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-bottom:var(--sp-2);">1</div>
                <h4 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-sm);">提交域名</h4>
                <p style="font-size:var(--fs-xs);color:var(--text-secondary);">输入您部署CMS的域名</p>
            </div>
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-5);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-bottom:var(--sp-2);">2</div>
                <h4 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-sm);">系统验证</h4>
                <p style="font-size:var(--fs-xs);color:var(--text-secondary);">自动生成唯一授权密钥</p>
            </div>
            <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-5);text-align:center;">
                <div style="font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-bottom:var(--sp-2);">3</div>
                <h4 style="font-family:var(--font-display);font-weight:600;margin-bottom:var(--sp-2);font-size:var(--fs-sm);">授权生效</h4>
                <p style="font-size:var(--fs-xs);color:var(--text-secondary);">365天授权即刻生效</p>
            </div>
        </div>

        <!-- 申请表单 -->
        <div style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:var(--sp-8);">
            <form id="applyForm" onsubmit="return submitApply(event)">
                <div class="form-group" style="margin-bottom:var(--sp-6);">
                    <label for="domain" style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:var(--sp-2);">
                        域名 <span style="color:var(--danger);">*</span>
                    </label>
                    <div style="display:flex;gap:var(--sp-3);">
                        <input type="text" id="domain" name="domain" class="form-input" 
                               placeholder="example.com" required
                               style="flex:1;font-family:var(--font-mono);">
                    </div>
                    <small style="color:var(--text-muted);font-size:var(--fs-xs);margin-top:var(--sp-1);display:block;font-family:var(--font-mono);">
                        // 无需 http:// 或 www 前缀，系统自动处理
                    </small>
                </div>

                <button type="submit" class="btn btn--primary btn--lg" id="submitBtn" style="width:100%;justify-content:center;">
                    <span id="btnText">提交申请</span>
                    <svg id="btnSpinner" width="16" height="16" viewBox="0 0 16 16" fill="none" style="display:none;">
                        <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" stroke-dasharray="31.4" stroke-dashoffset="8" opacity="0.6">
                            <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite"/>
                        </circle>
                    </svg>
                </button>
            </form>

            <!-- 授权结果 -->
            <div id="applyResult" style="display:none;margin-top:var(--sp-6);padding:var(--sp-6);background:var(--bg-surface-2);border:1px solid var(--accent);border-radius:var(--r-md);">
                <div style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);margin-bottom:var(--sp-3);">// AUTHORIZATION GRANTED</div>
                <div id="resultDetails"></div>
            </div>
        </div>

        <!-- 常见问题 -->
        <div style="margin-top:var(--sp-10);">
            <h3 style="font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);margin-bottom:var(--sp-4);">常见问题</h3>
            <div style="display:flex;flex-direction:column;gap:var(--sp-3);">
                <details style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-4);">
                    <summary style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);cursor:pointer;">授权有效期多久？</summary>
                    <p style="margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">每个域名授权有效期 365 天。到期后可重新申请续期，系统会自动保留您的数据和配置。</p>
                </details>
                <details style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-4);">
                    <summary style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);cursor:pointer;">一个域名可以多次申请吗？</summary>
                    <p style="margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">同一域名不可重复申请。如果授权已过期，重新提交会自动续期。如果显示"已授权"说明您的域名处于有效期内，无需再次申请。</p>
                </details>
                <details style="background:var(--bg-surface-1);border:1px solid var(--border-default);border-radius:var(--r-md);padding:var(--sp-4);">
                    <summary style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);cursor:pointer;">授权失败怎么办？</summary>
                    <p style="margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal);">请检查域名格式是否正确，确保输入的是顶级域名（如 example.com）。如问题持续，请联系管理员 support@barju.cn。</p>
                </details>
            </div>
        </div>

    </div>
</div>

<script>
function submitApply(e) {
    e.preventDefault();

    var domain = document.getElementById('domain').value.trim();
    if (!domain) {
        showMsg('请输入域名', 'error');
        return false;
    }

    var btn = document.getElementById('submitBtn');
    var btnText = document.getElementById('btnText');
    var spinner = document.getElementById('btnSpinner');
    btn.disabled = true;
    btnText.textContent = '处理中...';
    spinner.style.display = 'inline';

    var resultDiv = document.getElementById('applyResult');
    resultDiv.style.display = 'none';

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/license_apply.php', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
        btn.disabled = false;
        btnText.textContent = '提交申请';
        spinner.style.display = 'none';

        try {
            var resp = JSON.parse(xhr.responseText);
            if (resp.success) {
                showMsg(resp.message, 'success');
                showResult(resp.data);
            } else {
                showMsg(resp.message, 'error');
            }
        } catch(e) {
            showMsg('服务器返回异常，请稍后重试', 'error');
        }
    };
    xhr.onerror = function() {
        btn.disabled = false;
        btnText.textContent = '提交申请';
        spinner.style.display = 'none';
        showMsg('网络错误，请检查连接后重试', 'error');
    };
    xhr.send(JSON.stringify({domain: domain}));
    return false;
}

function showMsg(text, type) {
    var colors = type === 'success'
        ? {bg: 'rgba(78,204,163,0.1)', border: 'var(--success)', text: 'var(--success)'}
        : {bg: 'rgba(239,68,68,0.1)', border: 'var(--danger)', text: 'var(--danger)'};
    var msgDiv = document.getElementById('applyMsg');
    msgDiv.innerHTML = '<div style="background:' + colors.bg + ';border:1px solid ' + colors.border + ';border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6);font-size:var(--fs-sm);color:' + colors.text + ';">' + text + '</div>';
    setTimeout(function() { msgDiv.innerHTML = ''; }, 8000);
}

function showResult(data) {
    var resultDiv = document.getElementById('applyResult');
    var details = document.getElementById('resultDetails');
    details.innerHTML = ''
        + '<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-4);">'
        + '  <div><div style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-1);">域名</div><div style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-primary);">' + data.domain + '</div></div>'
        + '  <div><div style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-1);">License Key</div><div style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);">' + data.license_key + '</div></div>'
        + '  <div><div style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-1);">有效期至</div><div style="font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-primary);">' + data.expire_date + '</div></div>'
        + '  <div><div style="font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:var(--sp-1);">剩余天数</div><div style="font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--accent);">' + data.days_left + '</div></div>'
        + '</div>';
    resultDiv.style.display = 'block';
    resultDiv.scrollIntoView({behavior: 'smooth', block: 'center'});
}
</script>
