<?php
/**
 * ASISMA CRM - Configuración de Sistema
 */
$_gruposLabel = array(
    'general'       => array('label' => 'Parámetros Generales', 'icon' => 'sliders-horizontal', 'color' => 'text-blue-500'),
    'finanzas'      => array('label' => 'Finanzas y Cotizaciones', 'icon' => 'coins', 'color' => 'text-emerald-500'),
    'api'           => array('label' => 'API de Captación de Leads', 'icon' => 'plug-zap', 'color' => 'text-amber-500'),
    'integraciones' => array('label' => 'Integración Control Empresas', 'icon' => 'network', 'color' => 'text-purple-500'),
);

// Agrupar configuraciones
$porGrupo = array();
foreach ($configuraciones as $conf) {
    $porGrupo[$conf['grupo']][] = $conf;
}
$esSensible = function($clave) {
    return strpos($clave, 'KEY') !== false || strpos($clave, 'TOKEN') !== false || strpos($clave, 'PASS') !== false;
};
?>
<!-- Header -->
<div class="mb-8">
    <h1 class="text-3xl font-extrabold text-white tracking-tight">Configuración del Sistema</h1>
    <p class="text-slate-400 text-sm mt-1">
        <?php echo $puedeEditar ? 'Ajuste de parámetros globales, API keys e integraciones del CRM.' : 'Parámetros generales del CRM (solo lectura).'; ?>
    </p>
</div>

<form id="configForm" class="space-y-8 max-w-3xl">
    <?php foreach ($porGrupo as $grupo => $items): ?>
        <?php $gl = isset($_gruposLabel[$grupo]) ? $_gruposLabel[$grupo] : array('label' => ucfirst($grupo), 'icon' => 'settings', 'color' => 'text-slate-500'); ?>
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-8 shadow-xl relative overflow-hidden">
            <h3 class="text-sm font-bold text-white mb-6 uppercase tracking-wider border-b border-slate-800 pb-3 flex items-center gap-2">
                <i data-lucide="<?php echo $gl['icon']; ?>" class="w-4 h-4 <?php echo $gl['color']; ?>"></i>
                <span><?php echo $gl['label']; ?></span>
            </h3>

            <?php if ($grupo === 'api'): ?>
                <p class="text-xs text-slate-400 leading-relaxed mb-5 bg-slate-950 border border-slate-800 rounded-xl px-4 py-3">
                    Endpoint público para recibir leads desde formularios web:
                    <code class="text-emerald-400 block mt-1 select-all">POST <?php echo APP_URL; ?>/api/leads</code>
                    Autenticación mediante header <code class="text-amber-400">X-API-KEY</code> con el valor de <code class="text-amber-400">API_KEY_LEADS</code>.
                </p>
            <?php elseif ($grupo === 'integraciones'): ?>
                <p class="text-xs text-slate-400 leading-relaxed mb-5 bg-slate-950 border border-slate-800 rounded-xl px-4 py-3">
                    Al marcar un lead como <strong class="text-emerald-400">Ganado</strong>, el CRM crea el cliente en Control Empresas mediante el webservice <code class="text-purple-400">ws_provision.php</code>.
                    <strong class="text-amber-400 block mt-1">Si los tres campos están vacíos, la integración queda desactivada</strong> (no se toca producción).
                </p>
            <?php endif; ?>

            <div class="space-y-5">
                <?php foreach ($items as $conf): ?>
                    <div>
                        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">
                            <?php echo htmlspecialchars(str_replace('_', ' ', $conf['clave'])); ?>
                        </label>
                        <?php if ($puedeEditar): ?>
                            <input type="<?php echo $esSensible($conf['clave']) ? 'password' : 'text'; ?>"
                                   name="config[<?php echo htmlspecialchars($conf['clave']); ?>]"
                                   value="<?php echo htmlspecialchars($conf['valor']); ?>"
                                   <?php if ($esSensible($conf['clave'])): ?>onfocus="this.type='text'" onblur="this.type='password'" autocomplete="off"<?php endif; ?>
                                   class="block w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm <?php echo $esSensible($conf['clave']) ? 'font-mono' : ''; ?> focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <?php else: ?>
                            <span class="block w-full px-3 py-2.5 bg-slate-950/60 border border-slate-800/60 rounded-xl text-slate-400 text-sm"><?php echo htmlspecialchars($conf['valor']); ?></span>
                        <?php endif; ?>
                        <span class="text-[10px] text-slate-500 mt-1 block"><?php echo htmlspecialchars($conf['descripcion']); ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endforeach; ?>

    <?php if ($puedeEditar): ?>
    <div class="flex justify-end max-w-3xl">
        <button type="submit" id="saveConfigBtn"
                class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-xl text-sm transition-colors shadow-lg shadow-blue-500/10">
            Guardar Ajustes
        </button>
    </div>
    <?php endif; ?>
</form>

<?php if ($puedeEditar): ?>
<script>
    $('#configForm').on('submit', function(e) {
        e.preventDefault();
        $('#saveConfigBtn').attr('disabled', true).addClass('opacity-80');

        $.ajax({
            url: '<?php echo APP_URL; ?>/configuracion',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(response) {
                Swal.fire({
                    icon: response.success ? 'success' : 'error',
                    title: response.success ? 'Ajustes Guardados' : 'Error de validación',
                    text: response.message,
                    background: '#1e293b',
                    color: '#f8fafc',
                    confirmButtonColor: response.success ? '#3b82f6' : '#ef4444',
                    timer: response.success ? 1500 : undefined,
                    showConfirmButton: !response.success
                });
                $('#saveConfigBtn').attr('disabled', false).removeClass('opacity-80');
            },
            error: function() {
                Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo guardar la configuración.', background: '#1e293b', color: '#f8fafc' });
                $('#saveConfigBtn').attr('disabled', false).removeClass('opacity-80');
            }
        });
    });
</script>
<?php endif; ?>
