<?php

/**
 * This file is part of JohnCMS Content Management System.
 *
 * @copyright JohnCMS Community
 * @license   https://opensource.org/licenses/GPL-3.0 GPL-3.0
 * @link      https://johncms.com JohnCMS Project
 */

/**
 * @var $title
 * @var $page_title
 * @var $data
 */

$this->layout(
    'system::layout/default',
    [
        'title'      => __('Moderation Articles'),
        'page_title' => __('Moderation Articles'),
    ]
);
?>

<!-- Main Container -->
<div class="max-w-4xl mx-auto p-4 space-y-6">

    <!-- Header Section -->
    <div class="bg-gradient-to-r from-orange-500 to-red-600 rounded-2xl shadow-lg overflow-hidden">
        <div class="p-6 text-white">
            <div class="flex items-center space-x-3 mb-2">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                <h1 class="text-2xl font-bold"><?= __('Moderation Articles') ?></h1>
            </div>
            <p class="text-orange-100 text-sm opacity-90">
                <?= __('Review and approve articles waiting for moderation') ?>
            </p>
        </div>
    </div>

    <!-- Success Messages -->
    <?php if (isset($_GET['all'])) : ?>
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-2xl p-4">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span class="text-green-800 dark:text-green-200 font-medium"><?= __('All Articles added in database') ?></span>
            </div>
        </div>
    <?php endif; ?>

    <?php if ($id && isset($_GET['yes'])) : ?>
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-2xl p-4">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <div>
                    <span class="text-green-800 dark:text-green-200 font-medium">
                        <?= __('Article') ?> <strong class="text-green-900 dark:text-green-100"><?= $article ?></strong> <?= __('Added to the database') ?>
                    </span>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <!-- Moderation Queue -->
    <?php if ($total) : ?>
        <!-- Queue Stats -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white"><?= __('Pending Approval') ?></h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            <?= sprintf(__('%d articles waiting for review'), $total) ?>
                        </p>
                    </div>
                </div>
                <span class="bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-sm font-medium px-3 py-1 rounded-full">
                    <?= $total ?>
                </span>
            </div>
        </div>

        <!-- Articles List -->
        <div class="space-y-4">
            <?php foreach ($list() as $premod) : ?>
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-orange-200 dark:border-orange-800 hover:shadow-md transition duration-200 overflow-hidden">
                    <div class="p-6">
                        <!-- Article Title -->
                        <a href="?id=<?= $premod['id'] ?>" class="block group mb-3">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition duration-200 leading-tight">
                                <?= $premod['name'] ?>
                            </h3>
                        </a>

                        <!-- Author Info -->
                        <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
                            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                            <span class="font-medium text-gray-700 dark:text-gray-300"><?= __('Author:') ?></span>
                            <span class="text-gray-600 dark:text-gray-400"><?= $premod['who'] ?></span>
                        </div>

                        <!-- Moderation Actions -->
                        <div class="flex flex-wrap gap-3 pt-4 border-t border-gray-100 dark:border-gray-700">
                            <a href="?act=premod&amp;yes&amp;id=<?= $premod['id'] ?>" 
                               class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition duration-200 font-medium text-sm">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <?= __('Approve') ?>
                            </a>
                            <a href="?act=del&amp;type=article&amp;id=<?= $premod['id'] ?>" 
                               class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition duration-200 font-medium text-sm">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                <?= __('Delete') ?>
                            </a>
                            <a href="?id=<?= $premod['id'] ?>" 
                               class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition duration-200 font-medium text-sm">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                                <?= __('Preview') ?>
                            </a>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Pagination and Stats -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <!-- Total Count -->
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300"><?= __('Total Articles') ?></div>
                        <div class="text-2xl font-bold text-gray-900 dark:text-white"><?= $total ?></div>
                    </div>
                </div>

                <!-- Pagination -->
                <?php if ($total > $user->config->kmess): ?>
                    <div class="flex items-center">
                        <?= $pagination ?>
                    </div>
                <?php endif ?>
            </div>
        </div>

        <!-- Bulk Actions -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2"><?= __('Bulk Actions') ?></h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        <?= __('Approve all pending articles at once') ?>
                    </p>
                </div>
                <a href="?act=premod&amp;all" 
                   class="inline-flex items-center px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl shadow-sm hover:shadow-md transition duration-200 font-medium">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    <?= __('Approve all') ?>
                </a>
            </div>
        </div>

    <?php else: ?>
        <!-- Empty State -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
            <div class="w-24 h-24 mx-auto mb-6 text-green-400">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3"><?= __('No Articles Pending') ?></h3>
            <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto mb-6">
                <?= __('All articles have been moderated. Check back later for new submissions.') ?>
            </p>
        </div>
    <?php endif; ?>

    <!-- Navigation -->
    <div class="text-center">
        <a href="?" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-sm hover:shadow-md transition duration-200 font-medium">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            <?= __('To Library') ?>
        </a>
    </div>

</div>