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

<div class="max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold"><?= Lang::get('settings') ?></h1>
        <a href="<?= APP_URL ?>/admin" class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg transition-colors">
            <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 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            <?= Lang::get('back') ?>
        </a>
    </div>

    <form method="POST" action="<?= APP_URL ?>/admin/settings">
        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">

        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4"><?= Lang::get('email_settings') ?></h2>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('email_provider') ?></label>
                <div class="space-y-2">
                    <div class="flex items-center">
                        <input type="radio" id="email_provider_sendgrid" name="email_provider" value="sendgrid" 
                               <?= ($settings['email_provider'] ?? 'sendgrid') === 'sendgrid' ? 'checked' : '' ?>
                               class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="email_provider_sendgrid" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                            SendGrid
                        </label>
                    </div>
                    <div class="flex items-center">
                        <input type="radio" id="email_provider_mailersend" name="email_provider" value="mailersend" 
                               <?= ($settings['email_provider'] ?? 'sendgrid') === 'mailersend' ? 'checked' : '' ?>
                               class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        <label for="email_provider_mailersend" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                            MailerSend
                        </label>
                    </div>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('email_provider_help') ?></p>
            </div>

            <div id="sendgrid-settings" class="mb-4 <?= ($settings['email_provider'] ?? 'sendgrid') === 'sendgrid' ? '' : 'hidden' ?>">
                <label for="sendgrid_api_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SendGrid API Key</label>
                <input type="password" id="sendgrid_api_key" name="sendgrid_api_key" value="<?= htmlspecialchars($settings['sendgrid_api_key'] ?? '') ?>"
                       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 font-mono text-sm"
                       placeholder="SG.xxxxxxxxxxxx">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('sendgrid_api_key_help') ?></p>
            </div>

            <div id="mailersend-settings" class="mb-4 <?= ($settings['email_provider'] ?? 'sendgrid') === 'mailersend' ? '' : 'hidden' ?>">
                <label for="mailersend_api_token" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('mailersend_api_token') ?></label>
                <input type="password" id="mailersend_api_token" name="mailersend_api_token" value="<?= htmlspecialchars($settings['mailersend_api_token'] ?? '') ?>"
                       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 font-mono text-sm"
                       placeholder="mlsn.xxxxxxxxxxxx">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('mailersend_api_token_help') ?></p>
            </div>

            <div class="mb-4">
                <label for="from_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('from_email') ?></label>
                <input type="email" id="from_email" name="from_email" value="<?= htmlspecialchars($settings['from_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"
                       placeholder="noreply@notaphilycatalogue.com">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('from_email_help') ?></p>
            </div>

            <div class="mb-4">
                <label for="admin_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('admin_email') ?></label>
                <input type="email" id="admin_email" name="admin_email" value="<?= htmlspecialchars($settings['admin_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"
                       placeholder="admin@notaphilycatalogue.com">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('admin_email_help') ?></p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4"><?= Lang::get('registration_settings') ?></h2>

            <div class="mb-4">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="auto_approve_registrations" name="auto_approve_registrations" value="1"
                           <?= ($settings['auto_approve_registrations'] ?? '0') === '1' ? 'checked' : '' ?>
                           class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-500 peer-checked:bg-primary-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('auto_approve_registrations') ?></span>
                </label>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14"><?= Lang::get('auto_approve_registrations_desc') ?></p>
            </div>

            <div class="mb-4">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="email_verification_required" name="email_verification_required" value="1"
                           <?= ($settings['email_verification_required'] ?? '0') === '1' ? 'checked' : '' ?>
                           class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-500 peer-checked:bg-primary-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('email_verification_required') ?></span>
                </label>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14"><?= Lang::get('email_verification_required_desc') ?></p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4"><?= Lang::get('recaptcha_settings') ?></h2>

            <div class="mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="recaptcha_enabled" name="recaptcha_enabled" value="1" 
                           <?= ($settings['recaptcha_enabled'] ?? '0') === '1' ? 'checked' : '' ?>
                           class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                    <label for="recaptcha_enabled" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        <?= Lang::get('recaptcha_enabled') ?>
                    </label>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('recaptcha_enabled_desc') ?></p>
            </div>

            <div class="mb-4">
                <label for="recaptcha_site_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('recaptcha_site_key') ?></label>
                <input type="text" id="recaptcha_site_key" name="recaptcha_site_key" value="<?= htmlspecialchars($settings['recaptcha_site_key'] ?? '') ?>"
                       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 font-mono text-sm"
                       placeholder="6LeIxAcTAAAAAJcZVRqyHh71UMIEbQjV...">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('recaptcha_site_key_help') ?></p>
            </div>

            <div class="mb-4">
                <label for="recaptcha_secret_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('recaptcha_secret_key') ?></label>
                <input type="password" id="recaptcha_secret_key" name="recaptcha_secret_key" value="<?= htmlspecialchars($settings['recaptcha_secret_key'] ?? '') ?>"
                       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 font-mono text-sm"
                       placeholder="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuoj...">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= Lang::get('recaptcha_secret_key_help') ?></p>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4"><?= Lang::get('numista_settings') ?></h2>

            <div class="mb-4">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="download_numista_large_images" name="download_numista_large_images" value="1"
                           <?= ($settings['download_numista_large_images'] ?? '0') === '1' ? 'checked' : '' ?>
                           class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:after:border-gray-500 peer-checked:bg-primary-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('download_numista_large_images') ?></span>
                </label>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14"><?= Lang::get('download_numista_large_images_desc') ?></p>
            </div>
        </div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sendgridRadio = document.getElementById('email_provider_sendgrid');
    const mailersendRadio = document.getElementById('email_provider_mailersend');
    const sendgridSettings = document.getElementById('sendgrid-settings');
    const mailersendSettings = document.getElementById('mailersend-settings');

    function toggleProviderSettings() {
        if (sendgridRadio.checked) {
            sendgridSettings.classList.remove('hidden');
            mailersendSettings.classList.add('hidden');
        } else {
            sendgridSettings.classList.add('hidden');
            mailersendSettings.classList.remove('hidden');
        }
    }

    sendgridRadio.addEventListener('change', toggleProviderSettings);
    mailersendRadio.addEventListener('change', toggleProviderSettings);
});
</script>

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