<div class="mb-4">
    <a href="/articles" class="text-muted small">&larr; Powrót do listy</a>
    <h2 class="mt-2"><?= htmlspecialchars($article['title']) ?></h2>
    <div class="d-flex gap-3 text-muted small">
        <span><i class="bi bi-globe me-1"></i><?= htmlspecialchars($article['site_name']) ?></span>
        <span><i class="bi bi-tag me-1"></i><?= htmlspecialchars($article['topic_name']) ?></span>
        <span><i class="bi bi-calendar me-1"></i><?= date('d.m.Y H:i', strtotime($article['created_at'])) ?></span>
        <span><i class="bi bi-cpu me-1"></i><?= htmlspecialchars($article['ai_model'] ?? 'N/A') ?></span>
        <?php if ((int) ($article['retry_count'] ?? 0) > 0): ?>
            <span><i class="bi bi-arrow-repeat me-1"></i>Retry: <?= (int) $article['retry_count'] ?></span>
        <?php endif; ?>
        <?php if (!empty($article['last_retry_at'])): ?>
            <span><i class="bi bi-clock-history me-1"></i>Ostatnia proba: <?= date('d.m.Y H:i', strtotime($article['last_retry_at'])) ?></span>
        <?php endif; ?>
        <?php if ($article['status'] === 'published'): ?>
            <span class="badge bg-success">Opublikowany</span>
        <?php elseif ($article['status'] === 'failed'): ?>
            <span class="badge bg-danger">Błąd</span>
        <?php else: ?>
            <span class="badge bg-warning">Wygenerowany</span>
        <?php endif; ?>
    </div>
</div>

<?php if ($article['status'] === 'failed' && $article['error_message']): ?>
    <div class="alert alert-danger">
        <strong>Błąd:</strong> <?= htmlspecialchars($article['error_message']) ?>
    </div>
<?php endif; ?>

<?php if ($article['wp_post_id'] && !empty($article['site_url'])): ?>
    <?php $publishedUrl = !empty($article['wp_post_url']) ? (string) $article['wp_post_url'] : ((string) $article['site_url'] . '/?p=' . (int) $article['wp_post_id']); ?>
    <div class="alert alert-info d-flex justify-content-between align-items-center">
        <div>
            <i class="bi bi-wordpress me-1"></i>
            Post WordPress ID: <strong><?= $article['wp_post_id'] ?></strong>
            | <a href="<?= htmlspecialchars($publishedUrl) ?>" target="_blank">Zobacz na stronie</a>
        </div>
        <div class="d-flex align-items-center gap-2">
            <input type="file" id="imageFile" accept="image/jpeg,image/png,image/gif,image/webp" class="form-control form-control-sm" style="max-width: 250px;">
            <button class="btn btn-sm btn-outline-warning" id="btnReplaceImage" onclick="replaceImage()" disabled>
                <i class="bi bi-upload me-1"></i>Podmień
            </button>
        </div>
    </div>
<?php endif; ?>

<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Treść artykułu</h5>
    </div>
    <div class="card-body article-content">
        <?= $article['content'] ?>
    </div>
</div>

<?php if (!empty($article['prompt_used'])): ?>
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Prompt użyty do generowania</h5>
    </div>
    <div class="card-body">
        <pre class="mb-0" style="white-space: pre-wrap;"><?= htmlspecialchars($article['prompt_used']) ?></pre>
    </div>
</div>
<?php endif; ?>

<?php if ($article['wp_post_id']): ?>
<script>
document.getElementById('imageFile').addEventListener('change', function () {
    document.getElementById('btnReplaceImage').disabled = !this.files.length;
});

async function replaceImage() {
    var fileInput = document.getElementById('imageFile');
    if (!fileInput.files.length) return;

    var ok = await backproConfirm(
        'Podmienic zdjecie wyrozniajace na WordPressie? Stare zdjecie zostanie usuniete.',
        {
            title: 'Podmiana zdjecia',
            confirmText: 'Podmien',
            cancelText: 'Anuluj',
            confirmClass: 'btn-warning'
        }
    );
    if (!ok) return;

    var btn = document.getElementById('btnReplaceImage');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Wgrywanie...';

    var formData = new FormData();
    formData.append('image', fileInput.files[0]);

    fetch('/articles/<?= $article['id'] ?>/replace-image', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        if (data.success) {
            btn.classList.remove('btn-outline-warning');
            btn.classList.add('btn-outline-success');
            btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Podmieniono!';
            fileInput.value = '';
            backproNotify(data.message || 'Zdjecie zostalo podmienione.', 'success', { delay: 2500 });
            setTimeout(function () {
                btn.classList.remove('btn-outline-success');
                btn.classList.add('btn-outline-warning');
                btn.innerHTML = '<i class="bi bi-upload me-1"></i>Podmien';
                btn.disabled = true;
            }, 3000);
        } else {
            backproNotify(data.message || 'Blad podmiany zdjecia', 'danger');
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-upload me-1"></i>Podmien';
        }
    })
    .catch(function () {
        backproNotify('Blad polaczenia', 'danger');
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-upload me-1"></i>Podmien';
    });
}
</script>
<?php endif; ?>

