<?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 $categories
 * @var $urls
 * @var $pagination
 * @var $can_upload
 * @var $total_new
 */

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

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

    <!-- Downloads Status Alert -->
    <?php if (! $config['mod_down']): ?>
        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg shadow-sm">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-700"><?= __('Downloads are closed') ?></p>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <!-- Quick Actions Bar -->
    <?php if (empty($id)): ?>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex flex-wrap gap-3 items-center">
                <?php if (! empty($urls['new'])): ?>
                    <a href="<?= $urls['new'] ?>" class="inline-flex items-center px-4 py-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition duration-200">
                        <?= __('New Files') ?>
                        <span class="ml-2 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs font-medium px-2 py-1 rounded-full"><?= $total_new ?></span>
                    </a>
                <?php endif; ?>
                <a href="?act=search" class="inline-flex items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-200">
                    <?= __('Search') ?>
                </a>
                <a href="?act=top_files&amp;id=0" class="inline-flex items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-200">
                    <?= __('Top Files') ?>
                </a>
                <a href="?act=top_users" class="inline-flex items-center px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-200">
                    <?= __('Top Users') ?>
                </a>
            </div>
        </div>
    <?php endif; ?>

    <!-- Categories Grid -->
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <?php foreach ($categories as $category): ?>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition duration-200">
                <div class="p-5">
                    <!-- Category Header -->
                    <div class="flex items-center justify-between mb-3">
                        <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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                                </svg>
                            </div>
                            <div>
                                <a href="<?= $category['url'] ?>" class="text-lg font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition duration-200">
                                    <?= $category['rus_name'] ?>
                                </a>
                                <span class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-sm font-medium px-2 py-1 rounded-full ml-2"><?= $category['total'] ?></span>
                            </div>
                        </div>
                    </div>

                    <!-- Category Description -->
                    <?php if (! empty($category['desc']) || ! empty($category['text'])): ?>
                        <div class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                            <?php if (! empty($category['desc'])): ?>
                                <p class="leading-relaxed"><?= $category['desc'] ?></p>
                            <?php endif; ?>
                            <?php if (! empty($category['text'])): ?>
                                <div class="flex items-center text-xs">
                                    <svg class="w-4 h-4 mr-1" 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>
                                    <?= __('Allowed extensions') ?>: <?= $category['text'] ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>

                    <!-- Admin Actions -->
                    <?php if ($category['has_edit']): ?>
                        <div class="mt-4 pt-3 border-t border-gray-100 dark:border-gray-700">
                            <div class="flex flex-wrap gap-2 text-xs">
                                <?php if ($total_cat > 1): ?>
                                    <a href="<?= $category['up_url'] ?>" class="inline-flex items-center px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">
                                        ↑ <?= __('Up') ?>
                                    </a>
                                    <a href="<?= $category['down_url'] ?>" class="inline-flex items-center px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">
                                        ↓ <?= __('Down') ?>
                                    </a>
                                <?php endif; ?>
                                <a href="<?= $category['edit_url'] ?>" class="inline-flex items-center px-2 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded hover:bg-yellow-200 dark:hover:bg-yellow-900/50 transition duration-200">
                                    ✏️ <?= __('Edit') ?>
                                </a>
                                <a href="<?= $category['delete_url'] ?>" class="inline-flex items-center px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded hover:bg-red-200 dark:hover:bg-red-900/50 transition duration-200">
                                    🗑️ <?= __('Delete') ?>
                                </a>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

    <!-- Files Section Header -->
    <?php if ($total_cat > 0 && $total_files > 0): ?>
        <div class="flex items-center justify-between">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white"><?= __('List of files') ?></h3>
            <?php if (! empty($urls['sort_action'])): ?>
                <form method="post" action="<?= $urls['sort_action'] ?>" class="flex items-center space-x-2">
                    <select class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 px-3 py-2" name="sort_down" id="sort_down">
                        <option value="0" <?= ! $_SESSION['sort_down'] ? ' selected="selected"' : '' ?>><?= __('by time') ?></option>
                        <option value="1" <?= $_SESSION['sort_down'] ? ' selected="selected"' : '' ?>><?= __('by name') ?></option>
                    </select>
                    <select class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 px-3 py-2" name="sort_down2" id="sort_down2">
                        <option value="0" <?= ! $_SESSION['sort_down2'] ? ' selected="selected"' : '' ?>><?= __('descending') ?></option>
                        <option value="1" <?= $_SESSION['sort_down2'] ? ' selected="selected"' : '' ?>><?= __('ascending') ?></option>
                    </select>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-200 text-sm font-medium">
                        <?= __('Sort') ?>
                    </button>
                </form>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <!-- Files List -->
    <div class="space-y-3">
        <?php foreach ($files as $file): ?>
            <?= $this->fetch('downloads::file_row', ['file' => $file]) ?>
        <?php endforeach; ?>
    </div>

    <!-- Pagination and Stats -->
    <?php if ($total_files): ?>
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    <?= __('Total') ?>: <span class="font-semibold text-gray-900 dark:text-white"><?= $total_files ?></span>
                </div>
                <?php if ($total_files > $user->config->kmess): ?>
                    <div class="flex items-center space-x-2"><?= $pagination ?></div>
                <?php endif ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- Empty State -->
    <?php if (empty($total_cat) && empty($total_files)): ?>
        <div class="text-center py-12">
            <div class="w-24 h-24 mx-auto mb-4 text-gray-300 dark:text-gray-600">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2"><?= __('List is empty') ?></h3>
            <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto"><?= __('No files or categories found. Start by uploading your first file or creating a new category.') ?></p>
        </div>
    <?php endif; ?>

    <!-- Action Buttons -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
            <!-- Admin Actions -->
            <?php if ($user->rights === 4 || $user->rights >= 6): ?>
                <div class="flex flex-wrap gap-3">
                    <?php if (! empty($id)): ?>
                        <div class="relative group">
                            <button type="button" 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">
                                <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                <?= __('Add file') ?>
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                            <div class="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                                <a href="?act=files_upload&amp;id=<?= $id ?>" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg"><?= __('Upload File') ?></a>
                                <a href="?act=import&amp;id=<?= $id ?>" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg"><?= __('Import File') ?></a>
                            </div>
                        </div>
                    <?php endif; ?>
                    
                    <!-- Section Actions Dropdown -->
                    <div class="relative group">
                        <button type="button" 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">
                            <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <?= __('Section actions') ?>
                        </button>
                        <div class="absolute left-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 transform group-hover:translate-y-0 translate-y-1">
                            <a href="?act=folder_add&amp;id=<?= $id ?? '' ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150">
                                <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                <?= __('Create Folder') ?>
                            </a>
                            <a href="?act=scan_dir&amp;id=<?= $id ?? '' ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150">
                                <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                                <?= __('Update Files') ?>
                            </a>
                            <?php if (! empty($id)): ?>
                                <a href="?act=folder_edit&amp;id=<?= $id ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150">
                                    <svg class="w-4 h-4 mr-2 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                    </svg>
                                    <?= __('Change Folder') ?>
                                </a>
                                <a href="?act=folder_delete&amp;id=<?= $id ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150">
                                    <svg class="w-4 h-4 mr-2 text-red-500" 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 Folder') ?>
                                </a>
                                <a href="?act=scan_dir&amp;do=clean&amp;id=<?= $id ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150">
                                    <svg class="w-4 h-4 mr-2 text-orange-500" 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>
                                    <?= __('Remove missing files') ?>
                                </a>
                                <a href="?act=recount&amp;id=<?= $id ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg transition duration-150">
                                    <svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                    <?= __('Update counters') ?>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php elseif ($can_upload): ?>
                <a href="?act=files_upload&amp;id=<?= $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">
                    <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                    <?= __('Upload File') ?>
                </a>
            <?php endif; ?>

            <!-- Navigation Links -->
            <div class="flex flex-wrap gap-4 text-sm">
                <?php if ($id): ?>
                    <a href="<?= $urls['downloads'] ?>" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
                        <svg class="w-4 h-4 mr-1" 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>
                        <?= __('Downloads') ?>
                    </a>
                <?php else: ?>
                    <?php if ($user->rights >= 7 || (isset($config['mod_down_comm']) && $config['mod_down_comm'])): ?>
                        <a href="?act=review_comments" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition duration-200">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            <?= __('Review comments') ?>
                        </a>
                    <?php endif; ?>
                    <a href="?act=bookmark" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition duration-200">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
                        </svg>
                        <?= __('Favorites') ?>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

</div>
<style>
.group:hover .group-hover\:block {
    display: block !important;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}
.group:hover .group-hover\:visible {
    visibility: visible !important;
}
.dropdown-menu {
    pointer-events: none;
}
.group:hover .dropdown-menu {
    pointer-events: auto;
}
</style>