<?php $pageTitle = Lang::get('profile') . ' - ' . Lang::get('app_name'); ?>
<?php require APP_ROOT . '/views/layouts/header.php'; ?>

<div class="w-full">
    <h1 class="text-2xl font-bold mb-6"><?= Lang::get('profile') ?></h1>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column -->
        <div class="space-y-6">
            <!-- Avatar -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('avatar') ?></h2>
                <div class="flex flex-col sm:flex-row items-center gap-6">
                    <div class="flex-shrink-0">
                        <?php if (!empty($user['avatar'])): ?>
                            <img src="<?= APP_URL ?>/uploads/avatars/<?= htmlspecialchars($user['avatar']) ?>" alt="Avatar" class="w-20 h-20 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600">
                        <?php else: ?>
                            <div class="w-20 h-20 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                <svg class="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                            </div>
                        <?php endif; ?>
                    </div>
                    <form method="POST" action="<?= APP_URL ?>/profile/avatar" enctype="multipart/form-data" class="flex-1 w-full">
                        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                        <input type="file" name="avatar" accept="image/*" required
                               class="w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-600 dark:file:bg-primary-900/30 dark:file:text-primary-400 hover:file:bg-primary-100 transition-colors">
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2 mb-3">JPG, PNG, GIF, WebP. Max <?= MAX_UPLOAD_SIZE / 1024 / 1024 ?>MB.</p>
                        <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-sm">
                            <?= Lang::get('save') ?>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Profile Info -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('profile') ?></h2>
                <form method="POST" action="<?= APP_URL ?>/profile">
                    <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">

                    <div class="mb-4">
                        <label for="display_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('display_name') ?></label>
                        <input type="text" id="display_name" name="display_name" value="<?= htmlspecialchars($user['display_name'] ?? '') ?>" required
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>

                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('email') ?></label>
                        <input type="email" id="email" name="email" value="<?= htmlspecialchars($user['email'] ?? '') ?>"
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('username') ?></label>
                        <input type="text" value="<?= htmlspecialchars($user['username']) ?>" disabled
                               class="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-400 cursor-not-allowed">
                    </div>

                    <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-icon">
                        <?= Lang::get('save') ?>
                    </button>
                </form>
            </div>

            <!-- Preferences -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('preferences') ?></h2>
                <form method="POST" action="<?= APP_URL ?>/profile/preferences">
                    <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">

                    <div class="mb-4">
                        <label for="default_view" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('default_view') ?></label>
                        <select id="default_view" name="default_view"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                            <option value="grid" <?= ($user['default_view'] ?? 'grid') === 'grid' ? 'selected' : '' ?>><?= Lang::get('grid_view') ?></option>
                            <option value="table" <?= ($user['default_view'] ?? 'grid') === 'table' ? 'selected' : '' ?>><?= Lang::get('table_view') ?></option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label for="default_theme" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('default_theme') ?></label>
                        <select id="default_theme" name="default_theme"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                            <option value="system" <?= ($user['default_theme'] ?? 'system') === 'system' ? 'selected' : '' ?>><?= Lang::get('theme_system') ?></option>
                            <option value="light" <?= ($user['default_theme'] ?? 'system') === 'light' ? 'selected' : '' ?>><?= Lang::get('light_mode') ?></option>
                            <option value="dark" <?= ($user['default_theme'] ?? 'system') === 'dark' ? 'selected' : '' ?>><?= Lang::get('dark_mode') ?></option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label for="default_language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('preferred_language') ?></label>
                        <select id="default_language" name="default_language"
                                class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                            <option value="en" <?= ($user['default_language'] ?? 'en') === 'en' ? 'selected' : '' ?>>English</option>
                            <option value="cs" <?= ($user['default_language'] ?? 'en') === 'cs' ? 'selected' : '' ?>><?= Lang::get('language_czech') ?></option>
                            <option value="de" <?= ($user['default_language'] ?? 'en') === 'de' ? 'selected' : '' ?>><?= Lang::get('language_german') ?></option>
                            <option value="el" <?= ($user['default_language'] ?? 'en') === 'el' ? 'selected' : '' ?>><?= Lang::get('language_greek') ?></option>
                            <option value="es" <?= ($user['default_language'] ?? 'en') === 'es' ? 'selected' : '' ?>><?= Lang::get('language_spanish') ?></option>
                            <option value="fr" <?= ($user['default_language'] ?? 'en') === 'fr' ? 'selected' : '' ?>><?= Lang::get('language_french') ?></option>
                            <option value="hu" <?= ($user['default_language'] ?? 'en') === 'hu' ? 'selected' : '' ?>><?= Lang::get('language_hungarian') ?></option>
                            <option value="it" <?= ($user['default_language'] ?? 'en') === 'it' ? 'selected' : '' ?>><?= Lang::get('language_italian') ?></option>
                            <option value="cn" <?= ($user['default_language'] ?? 'en') === 'cn' ? 'selected' : '' ?>><?= Lang::get('language_chinese') ?></option>
                            <option value="jp" <?= ($user['default_language'] ?? 'en') === 'jp' ? 'selected' : '' ?>><?= Lang::get('language_japanese') ?></option>
                            <option value="il" <?= ($user['default_language'] ?? 'en') === 'il' ? 'selected' : '' ?>><?= Lang::get('language_hebrew') ?></option>
                            <option value="nl" <?= ($user['default_language'] ?? 'en') === 'nl' ? 'selected' : '' ?>><?= Lang::get('language_dutch') ?></option>
                            <option value="no" <?= ($user['default_language'] ?? 'en') === 'no' ? 'selected' : '' ?>><?= Lang::get('language_norwegian') ?></option>
                            <option value="pl" <?= ($user['default_language'] ?? 'en') === 'pl' ? 'selected' : '' ?>><?= Lang::get('language_polish') ?></option>
                            <option value="pt" <?= ($user['default_language'] ?? 'en') === 'pt' ? 'selected' : '' ?>><?= Lang::get('language_portuguese') ?></option>
                            <option value="ro" <?= ($user['default_language'] ?? 'en') === 'ro' ? 'selected' : '' ?>><?= Lang::get('language_romanian') ?></option>
                            <option value="ru" <?= ($user['default_language'] ?? 'en') === 'ru' ? 'selected' : '' ?>><?= Lang::get('language_russian') ?></option>
                            <option value="sr" <?= ($user['default_language'] ?? 'en') === 'sr' ? 'selected' : '' ?>>Srpski</option>
                            <option value="sv" <?= ($user['default_language'] ?? 'en') === 'sv' ? 'selected' : '' ?>><?= Lang::get('language_swedish') ?></option>
                            <option value="tr" <?= ($user['default_language'] ?? 'en') === 'tr' ? 'selected' : '' ?>><?= Lang::get('language_turkish') ?></option>
                        </select>
                    </div>

                    <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-icon">
                        <?= Lang::get('save') ?>
                    </button>
                </form>
                <script>
                document.querySelector('form[action="<?= APP_URL ?>/profile/preferences"]').addEventListener('submit', function() {
                    localStorage.removeItem('theme');
                });
                </script>
            </div>

            <!-- Change Password -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('change_password') ?></h2>
                <form method="POST" action="<?= APP_URL ?>/profile/password">
                    <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">

                    <div class="mb-4">
                        <label for="current_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('current_password') ?></label>
                        <input type="password" id="current_password" name="current_password" required
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>

                    <div class="mb-4">
                        <label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('new_password') ?></label>
                        <input type="password" id="new_password" name="new_password" required
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>

                    <div class="mb-4">
                        <label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('confirm_password') ?></label>
                        <input type="password" id="confirm_password" name="confirm_password" required
                               class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>

                    <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-icon">
                        <?= Lang::get('change_password') ?>
                    </button>
                </form>
            </div>
        </div>

        <!-- Right Column -->
        <div class="space-y-6">
            <!-- Collections Sharing -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('collections') ?> - <?= Lang::get('allow_sharing') ?></h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4"><?= Lang::get('allow_sharing_desc') ?></p>
                
                <?php if (empty($collections)): ?>
                    <p class="text-gray-500 dark:text-gray-400"><?= Lang::get('no_collections') ?></p>
                <?php else: ?>
                    <div class="space-y-3">
                        <?php foreach ($collections as $collection): ?>
                            <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg">
                                <div class="flex-1">
                                    <h3 class="font-medium text-gray-900 dark:text-gray-100"><?= htmlspecialchars($collection['name']) ?></h3>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                        <?= $collection['type'] === 'coin' ? Lang::get('collection_type_coin') : Lang::get('collection_type_banknote') ?>
                                        <?php if (!empty($collection['description'])): ?>
                                            - <?= htmlspecialchars(mb_substr($collection['description'], 0, 100)) ?><?= mb_strlen($collection['description']) > 100 ? '...' : '' ?>
                                        <?php endif; ?>
                                    </p>
                                </div>
                                <div class="flex items-center">
                                    <form method="POST" action="<?= APP_URL ?>/profile/toggle-sharing" class="flex items-center gap-2">
                                        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                                        <input type="hidden" name="collection_id" value="<?= $collection['id'] ?>">
                                        <input type="hidden" name="allow_sharing" value="<?= $collection['allow_sharing'] ? '0' : '1' ?>">
                                        
                                        <button type="button" 
                                                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors <?= $collection['allow_sharing'] ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600' ?>"
                                                onclick="showTemplateSharingConfirm(<?= $collection['id'] ?>, '<?= htmlspecialchars($collection['name']) ?>', <?= $collection['allow_sharing'] ? 'false' : 'true' ?>)">
                                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform <?= $collection['allow_sharing'] ? 'translate-x-6' : 'translate-x-1' ?>"></span>
                                        </button>
                                        
                                        <span class="text-sm text-gray-600 dark:text-gray-400">
                                            <?= $collection['allow_sharing'] ? Lang::get('sharing_allowed') : Lang::get('sharing_not_allowed') ?>
                                        </span>
                                    </form>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Backup -->
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                <h2 class="text-lg font-semibold mb-4"><?= Lang::get('backup') ?></h2>
                
                <!-- Export -->
                <div class="mb-6">
                    <h3 class="text-md font-medium mb-3"><?= Lang::get('export_backup') ?></h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3"><?= Lang::get('export_backup_description') ?></p>
                    <a href="<?= APP_URL ?>/profile/export" class="btn-gradient btn-gradient-green btn-gradient-icon btn-gradient-sm">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                        <?= Lang::get('export_backup_button') ?>
                    </a>
                </div>

                <!-- Import -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-md font-medium mb-3"><?= Lang::get('import_backup') ?></h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3"><?= Lang::get('import_backup_description') ?></p>
                    
                    <form method="POST" action="<?= APP_URL ?>/profile/import" enctype="multipart/form-data" id="importForm">
                        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                        
                        <div class="mb-4">
                            <label for="backup_file" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('backup_file') ?></label>
                            <input type="file" id="backup_file" name="backup_file" accept=".zip" required
                                   class="w-full text-sm text-gray-600 dark:text-gray-400 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-600 dark:file:bg-blue-900/30 dark:file:text-blue-400 hover:file:bg-blue-100 transition-colors">
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">ZIP files only</p>
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('import_mode') ?></label>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="radio" name="import_mode" value="add" checked class="mr-2">
                                    <span class="text-sm text-gray-700 dark:text-gray-300"><?= Lang::get('import_mode_add') ?></span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="import_mode" value="replace" class="mr-2">
                                    <span class="text-sm text-gray-700 dark:text-gray-300"><?= Lang::get('import_mode_replace') ?></span>
                                </label>
                            </div>
                            <p class="text-xs text-red-600 dark:text-red-400 mt-2"><?= Lang::get('import_replace_warning') ?></p>
                        </div>

                        <div class="flex gap-3">
                            <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-sm">
                                <?= Lang::get('import_backup_button') ?>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Template Sharing Confirmation Modal -->
<div id="templateSharingModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="templateSharingHeading">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 max-w-md w-full shadow-xl">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-4">
                <svg class="w-6 h-6 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"/>
                </svg>
            </div>
            <div>
                <h3 id="templateSharingHeading" class="text-lg font-semibold text-gray-900 dark:text-gray-100"><?= Lang::get('template_sharing') ?></h3>
                <p class="text-sm text-gray-600 dark:text-gray-400" id="modalCollectionName"></p>
            </div>
        </div>
        
        <div class="mb-6">
            <p class="text-gray-700 dark:text-gray-300" id="modalMessage"></p>
        </div>
        
        <div class="flex gap-3 justify-end">
            <button onclick="closeTemplateSharingModal()" 
                    class="btn-gradient btn-gradient-gray btn-gradient-sm">
                <?= Lang::get('cancel') ?>
            </button>
            <button onclick="confirmTemplateSharing()" 
                    class="btn-gradient btn-gradient-blue btn-gradient-sm">
                <?= Lang::get('confirm_action') ?>
            </button>
        </div>
    </div>
</div>

<script>
let pendingCollectionId = null;
let pendingAllowSharing = null;

function showTemplateSharingConfirm(collectionId, collectionName, allowSharing) {
    pendingCollectionId = collectionId;
    pendingAllowSharing = allowSharing;
    
    const modal = document.getElementById('templateSharingModal');
    const nameEl = document.getElementById('modalCollectionName');
    const messageEl = document.getElementById('modalMessage');
    
    nameEl.textContent = collectionName;
    
    if (allowSharing) {
        messageEl.textContent = '<?= Lang::get('template_sharing_confirm_enable') ?>';
    } else {
        messageEl.textContent = '<?= Lang::get('template_sharing_confirm_disable') ?>';
    }
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeTemplateSharingModal() {
    document.getElementById('templateSharingModal').classList.add('hidden');
    document.body.style.overflow = '';
    pendingCollectionId = null;
    pendingAllowSharing = null;
}

function confirmTemplateSharing() {
    if (pendingCollectionId) {
        // Find the form and submit it
        const form = document.querySelector(`input[name="collection_id"][value="${pendingCollectionId}"]`).closest('form');
        const allowSharingInput = form.querySelector('input[name="allow_sharing"]');
        allowSharingInput.value = pendingAllowSharing ? '1' : '0';
        form.submit();
    }
}

// Close modal when clicking outside
document.getElementById('templateSharingModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeTemplateSharingModal();
    }
});
</script>

<?php require APP_ROOT . '/views/layouts/footer.php'; ?>

<script>
document.getElementById('importForm').addEventListener('submit', function(e) {
    const importMode = document.querySelector('input[name="import_mode"]:checked').value;
    if (importMode === 'replace') {
        e.preventDefault();
        if (confirm('<?= Lang::get('import_replace_confirm') ?>')) {
            this.submit();
        }
    }
});
</script>
