<?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 $in_bookmarks
 * @var $file
 */

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

<?php if (! $config['mod_down']): ?>
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow mb-4">
        <?= __('Downloads are closed') ?>
    </div>
<?php endif; ?>

<?php if (isset($file['vote_accepted'])): ?>
    <div class="mb-4">
        <div class="max-w-2xl">
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow">
                <?= __('Vote accepted') ?>
            </div>
        </div>
    </div>
<?php endif; ?>

<?php if (! empty($file['screenshots'])): ?>
    <div class="border-b border-gray-200 mb-6 pb-4 <?= count($file['screenshots']) > 1 ? 'swiper-container' : '' ?>">
        <div class="swiper-wrapper image-gallery">
            <?php foreach ($file['screenshots'] as $number => $screenshot): ?>
                <div class="swiper-slide <?= count($file['screenshots']) < 2 ? 'text-left' : '' ?>">
                    <a href="<?= $screenshot['url'] ?>"
                       title="<?= __('Screenshot:') ?> <?= ($number + 1) ?>"
                       data-source="<?= $screenshot['url'] ?>"
                       class="gallery-item block hover:opacity-90 transition-opacity duration-200">
                        <img src="<?= $screenshot['preview'] ?>" alt="." class="rounded-lg shadow-md max-w-full h-auto">
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
        <?php if (count($file['screenshots']) > 1): ?>
            <div class="swiper-pagination mt-4"></div>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php if ($file['file_type'] === 'audio'): ?>
    <div class="mb-6">
        <div class="max-w-4xl">
            <audio src="<?= $file['main_file']['source_url'] ?>" controls class="w-full rounded-lg shadow-sm"></audio>
        </div>
    </div>
<?php endif; ?>

<?php if ($file['file_type'] === 'video'): ?>
    <div class="mb-6">
        <div class="max-w-4xl">
            <div class="relative aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden shadow-lg">
                <video src="<?= $file['main_file']['source_url'] ?>" controls class="w-full h-full object-contain"></video>
            </div>
        </div>
    </div>
<?php endif; ?>

<?php if (! empty($file['description'])): ?>
    <div class="border-b border-gray-200 pb-4 mb-4">
        <div class="prose prose-blue max-w-none">
            <?= $file['description'] ?>
        </div>
    </div>
<?php endif; ?>

<?php if (! empty($file['file_properties'])): ?>
    <div class="mt-4 mb-6 border-b border-gray-200 pb-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
            <?php foreach ($file['file_properties'] as $property): ?>
                <div class="flex justify-between py-1">
                    <span class="font-medium text-gray-700"><?= $property['name'] ?>:</span>
                    <span class="text-gray-900"><?= $property['value'] ?></span>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>

<div class="text-gray-600 mt-4 mb-6 border-b border-gray-200 pb-4 space-y-2">
    <div class="flex justify-between">
        <span class="font-medium"><?= __('File name:') ?></span>
        <span class="text-gray-900"><?= $file['name'] ?></span>
    </div>
    <div class="flex justify-between">
        <span class="font-medium"><?= __('Uploaded by:') ?></span>
        <span class="text-gray-900"><?= $file['upload_user']['name'] ?></span>
    </div>
    <div class="flex justify-between">
        <span class="font-medium"><?= __('Downloads:') ?></span>
        <span class="text-gray-900"><?= $file['field'] ?></span>
    </div>
    <div class="flex justify-between items-center">
        <span class="font-medium"><?= __('Rating:') ?></span>
        <div class="flex items-center space-x-2">
            <?php if ($file['can_vote']): ?>
                <a href="?act=view&amp;id=<?= $id ?>&amp;plus" class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-lg transition-colors duration-200 shadow-sm">
                    <svg class="w-4 h-4 inline mr-1 -mt-1">
                        <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#like"/>
                    </svg>
                </a>
            <?php endif; ?>
            <span class="font-medium text-gray-900"><?= implode(' / ', $file['rate']) ?></span>
            <?php if ($file['can_vote']): ?>
                <a href="?act=view&amp;id=<?= $id ?>&amp;minus" class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-3 py-1 rounded-lg transition-colors duration-200 shadow-sm">
                    <svg class="w-4 h-4 inline mr-1 -mt-1">
                        <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#dislike"/>
                    </svg>
                </a>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Download Files -->
<div class="mb-6">
    <div class="mb-3">
        <div class="flex items-center text-green-600 hover:text-green-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2">
                <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#download"/>
            </svg>
            <a href="<?= $file['main_file']['url'] ?>" class="font-medium">
                <?= $file['main_file']['name'] ?>
            </a>
            <span class="text-gray-500 ml-2">(<?= $file['main_file']['size'] ?>)</span>
        </div>
    </div>
    
    <?php if (! empty($file['additional_files'])): ?>
        <?php foreach ($file['additional_files'] as $additional_file): ?>
            <div class="mb-3">
                <div class="flex items-center text-green-600 hover:text-green-700 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2">
                        <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#download"/>
                    </svg>
                    <a href="<?= $additional_file['url'] ?>" class="font-medium">
                        <?= $additional_file['name'] ?>
                    </a>
                    <span class="text-gray-500 ml-2">(<?= $additional_file['size'] ?>)</span>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

<div class="border-b border-gray-200 mt-6 mb-4"></div>

<?php if ($config['mod_down_comm'] || $systemUser->rights >= 7): ?>
    <div class="mt-4 mb-6">
        <div class="flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2">
                <use xlink:href="<?= $this->asset('icons/sprite.svg') ?>#forum"/>
            </svg>
            <a href="?act=comments&amp;id=<?= $id ?>" class="font-medium">
                <?= __('Comments') ?>
            </a>
            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded-full text-sm ml-2">
                <?= $file['comm_count'] ?>
            </span>
        </div>
    </div>
<?php endif; ?>

<!-- Actions Section -->
<div class="mt-6 space-y-4">
    <?php if ($user->rights === 4 || $user->rights >= 6): ?>
        <div class="flex flex-wrap gap-3">
            <div class="relative">
                <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg shadow-sm transition-colors duration-200 flex items-center text-sm font-medium" 
                        type="button" 
                        id="dropdownMenuButton" 
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="false">
                    <?= __('Actions') ?>
                    <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"></path>
                    </svg>
                </button>
                <div class="absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-10 hidden" 
                     aria-labelledby="dropdownMenuButton">
                    <div class="py-1">
                        <?php if (! empty($id)): ?>
                            <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" 
                               href="?act=edit_file&amp;id=<?= $id ?>">
                                <?= __('Edit File') ?>
                            </a>
                            <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" 
                               href="?act=edit_screen&amp;id=<?= $id ?>">
                                <?= __('Managing Screenshots') ?>
                            </a>
                            <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" 
                               href="?act=files_more&amp;id=<?= $id ?>">
                                <?= __('Additional Files') ?>
                            </a>
                            <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" 
                               href="?act=delete_file&amp;do=clean&amp;id=<?= $id ?>">
                                <?= __('Delete File') ?>
                            </a>
                            <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" 
                               href="?act=transfer_file&amp;id=<?= $id ?>">
                                <?= __('Move File') ?>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if ($user->isValid()): ?>
        <div class="mt-4">
            <?php if ($in_bookmarks): ?>
                <a href="?act=view&amp;id=<?= $id ?>&amp;delBookmark" 
                   class="inline-flex items-center text-orange-600 hover:text-orange-700 transition-colors duration-200 font-medium">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1z" clip-rule="evenodd"></path>
                    </svg>
                    <?= __('Remove from Favorites') ?>
                </a>
            <?php else: ?>
                <a href="?act=view&amp;id=<?= $id ?>&amp;addBookmark" 
                   class="inline-flex items-center text-orange-600 hover:text-orange-700 transition-colors duration-200 font-medium">
                    <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"></path>
                    </svg>
                    <?= __('Add to Favorites') ?>
                </a>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <!-- Navigation Links -->
    <div class="mt-6 space-y-2">
        <div>
            <a href="<?= $urls['back'] ?>" 
               class="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-200 font-medium">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                <?= __('Back') ?>
            </a>
        </div>
        <div>
            <a href="<?= $urls['downloads'] ?>" 
               class="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-200 font-medium">
                <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 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                </svg>
                <?= __('Downloads') ?>
            </a>
        </div>
    </div>
</div>

<script>
// Simple dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('dropdownMenuButton');
    const dropdownMenu = dropdownButton?.nextElementSibling;
    
    if (dropdownButton && dropdownMenu) {
        dropdownButton.addEventListener('click', function(e) {
            e.stopPropagation();
            dropdownMenu.classList.toggle('hidden');
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function() {
            dropdownMenu.classList.add('hidden');
        });
        
        // Prevent dropdown from closing when clicking inside
        dropdownMenu.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
});
</script>