@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/modules/settings.css') }}">
@endpush

@section('content')
<section class="settings-page">
    <div class="page-heading">
        <div>
            <h1>Configuración del sistema</h1>
            <p>Personaliza la apariencia del sistema, paletas de color y parámetros operativos de La Buena Mesa.</p>
        </div>
    </div>

    <div class="settings-tabs" role="tablist" aria-label="Secciones de configuración">
        <button type="button" class="settings-tab-btn active" data-tab="general">General</button>
        <button type="button" class="settings-tab-btn" data-tab="appearance">Apariencia y Colores</button>
        <button type="button" class="settings-tab-btn" data-tab="mesas">Mesas &amp; Salón</button>
        <button type="button" class="settings-tab-btn" data-tab="impresoras">Impresoras</button>
        <button type="button" class="settings-tab-btn" data-tab="notificaciones">Notificaciones</button>
    </div>

    <!-- Pestaña Apariencia y Paletas de Colores -->
    <div class="settings-panel-section" id="panel-appearance" style="display: none;">
        <div class="theme-settings-card">
            <div class="theme-card-header">
                <div>
                    <h2 class="theme-title">Paleta de Colores del Layout &amp; POS</h2>
                    <p class="theme-subtitle">Selecciona o personaliza el tono principal de la interfaz, botones, estados activos e identidad de marca.</p>
                </div>
                <span class="theme-badge-current" id="current-theme-label">Tema Activo: Esmeralda POS</span>
            </div>

            <div class="theme-presets-grid">
                <!-- Preset 1: Esmeralda POS (Default Actual) -->
                <div class="theme-preset-card is-active" data-theme="emerald" tabindex="0" role="button" aria-label="Tema Esmeralda POS">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #059669, #004d35);"></div>
                    <div class="theme-preset-info">
                        <strong>Esmeralda POS (Recomendado)</strong>
                        <span>Estilo restaurante clásico, relajante y de alta legibilidad para turnos largos.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>

                <!-- Preset 2: Azul Corporativo -->
                <div class="theme-preset-card" data-theme="blue" tabindex="0" role="button" aria-label="Tema Azul Corporativo">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #2563eb, #1e40af);"></div>
                    <div class="theme-preset-info">
                        <strong>Azul Océano</strong>
                        <span>Tono tecnológico, dinámico y con alto contraste corporativo.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>

                <!-- Preset 3: Terracota Bistro -->
                <div class="theme-preset-card" data-theme="terracotta" tabindex="0" role="button" aria-label="Tema Terracota Bistro">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #ea580c, #9a3412);"></div>
                    <div class="theme-preset-info">
                        <strong>Terracota &amp; Brasas</strong>
                        <span>Ideal para parrillas, bistrós, cortes y hornos de leña.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>

                <!-- Preset 4: Borgoña / Vino Tinto -->
                <div class="theme-preset-card" data-theme="burgundy" tabindex="0" role="button" aria-label="Tema Borgoña">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #be123c, #881337);"></div>
                    <div class="theme-preset-info">
                        <strong>Vino Gourmet</strong>
                        <span>Elegante para cocina de autor, pastas, vinos y cenas formales.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>

                <!-- Preset 5: Amatista Lounge -->
                <div class="theme-preset-card" data-theme="purple" tabindex="0" role="button" aria-label="Tema Amatista Lounge">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #7c3aed, #4c1d95);"></div>
                    <div class="theme-preset-info">
                        <strong>Amatista &amp; Coctelería</strong>
                        <span>Moderno para rooftops, gastrobares y coctelería de autor.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>

                <!-- Preset 6: Carbón Dark Moderno -->
                <div class="theme-preset-card" data-theme="dark-slate" tabindex="0" role="button" aria-label="Tema Carbón Ejecutivo">
                    <div class="theme-swatch" style="background: linear-gradient(135deg, #334155, #0f172a);"></div>
                    <div class="theme-preset-info">
                        <strong>Carbón Ejecutivo</strong>
                        <span>Neutro, sobrio y minimalista sin saturación de color.</span>
                    </div>
                    <span class="theme-check-icon" aria-hidden="true">✓</span>
                </div>
            </div>

            <!-- Ajustador Manual Personalizado de Color -->
            <div class="custom-color-picker-box">
                <div class="picker-label-group">
                    <span class="picker-icon" aria-hidden="true">🎨</span>
                    <div>
                        <strong>Personalizar Color Primario a Medida</strong>
                        <small>Elige cualquier tono exacto con el selector de color hexadecimal.</small>
                    </div>
                </div>
                <div class="picker-controls">
                    <input type="color" id="theme-custom-color-input" value="#059669" aria-label="Selector de color personalizado">
                    <input type="text" id="theme-custom-hex" value="#059669" maxlength="7" aria-label="Valor hexadecimal">
                    <button type="button" class="btn-apply-custom-theme" id="btn-apply-custom-theme">Aplicar a Todo el Sistema</button>
                    <button type="button" class="btn-reset-theme" id="btn-reset-theme" title="Restaurar a esmeralda predeterminado">Restaurar</button>
                </div>
            </div>

            <!-- Vista previa en vivo -->
            <div class="theme-live-preview">
                <div class="preview-title">Vista Previa de Componentes Afectados:</div>
                <div class="preview-elements">
                    <button type="button" class="preview-btn-primary">Botón Principal</button>
                    <div class="preview-tab active">Tab Seleccionado</div>
                    <div class="preview-badge">Badge Destacado</div>
                    <span class="preview-metric">S/ 2,480.90</span>
                </div>
            </div>

            <!-- Separador visual -->
            <div class="settings-divider" style="margin: 36px 0 28px; border-bottom: 1px solid #e2e8f0;"></div>

            <!-- SECCIÓN: Paleta de Botones de Mesas (Terminal de Caja) -->
            <div class="settings-section-header" style="margin-bottom: 18px;">
                <div class="section-title-wrap" style="display: flex; align-items: center; gap: 12px;">
                    <span class="section-badge-icon" style="display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #e0f2fe; color: #0284c7; font-size: 1.2rem;">🪑</span>
                    <div>
                        <h3 style="margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a;">Paleta de Botones de Mesas (Caja POS)</h3>
                        <p style="margin: 3px 0 0; color: #64748b; font-size: 0.86rem;">Personaliza de manera independiente el color de cada botón en las cartas de mesa del salón.</p>
                    </div>
                </div>
            </div>

            <div class="table-buttons-config-layout" style="display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; margin-bottom: 24px;">
                <!-- Columna Izquierda: Presets y Controles por Botón -->
                <div class="table-buttons-controls-col">
                    <!-- Presets Rápidos -->
                    <div style="margin-bottom: 16px;">
                        <span style="font-size: 0.76rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Estilos Rápidos Recomendados:</span>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                            <button type="button" class="btn-table-preset active" data-preset="default" style="padding: 6px 12px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #ffffff; font-size: 0.78rem; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.15s ease;">
                                Predeterminado (Claridad POS)
                            </button>
                            <button type="button" class="btn-table-preset" data-preset="pastel" style="padding: 6px 12px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #ffffff; font-size: 0.78rem; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.15s ease;">
                                Suave / Pastel
                            </button>
                            <button type="button" class="btn-table-preset" data-preset="high-contrast" style="padding: 6px 12px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #ffffff; font-size: 0.78rem; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.15s ease;">
                                Alto Contraste
                            </button>
                            <button type="button" class="btn-table-preset" data-preset="modern-dark" style="padding: 6px 12px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #ffffff; font-size: 0.78rem; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.15s ease;">
                                Minimalista / Slate
                            </button>
                        </div>
                    </div>

                    <!-- Lista de Controles Individuales de Cada Botón -->
                    <div class="table-button-pickers-list" style="display: flex; flex-direction: column; gap: 10px;">
                        <!-- 1. Botón + Abrir Mesa & Ordenar -->
                        <div class="button-color-row" style="background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                            <div>
                                <strong style="display: block; font-size: 0.86rem; color: #0f172a;">+ Abrir Mesa &amp; Ordenar</strong>
                                <small style="color: #64748b; font-size: 0.74rem;">Acción en mesas libres (Disponible)</small>
                            </div>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Fondo:</span>
                                    <input type="color" class="table-btn-color-input" data-key="open_bg" value="#059669" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Texto:</span>
                                    <input type="color" class="table-btn-color-input" data-key="open_color" value="#ffffff" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                            </div>
                        </div>

                        <!-- 2. Botón + Pedido -->
                        <div class="button-color-row" style="background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                            <div>
                                <strong style="display: block; font-size: 0.86rem; color: #0f172a;">+ Pedido</strong>
                                <small style="color: #64748b; font-size: 0.74rem;">Acción comanda en mesa Ocupada</small>
                            </div>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Fondo:</span>
                                    <input type="color" class="table-btn-color-input" data-key="order_bg" value="#fff7ed" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Texto:</span>
                                    <input type="color" class="table-btn-color-input" data-key="order_color" value="#c2410c" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                            </div>
                        </div>

                        <!-- 3. Botón Cobrar -->
                        <div class="button-color-row" style="background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                            <div>
                                <strong style="display: block; font-size: 0.86rem; color: #0f172a;">Cobrar</strong>
                                <small style="color: #64748b; font-size: 0.74rem;">Acción cobro en mesa Ocupada</small>
                            </div>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Fondo:</span>
                                    <input type="color" class="table-btn-color-input" data-key="pay_bg" value="#2563eb" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Texto:</span>
                                    <input type="color" class="table-btn-color-input" data-key="pay_color" value="#ffffff" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                            </div>
                        </div>

                        <!-- 4. Botón Finalizar Pago -->
                        <div class="button-color-row" style="background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;">
                            <div>
                                <strong style="display: block; font-size: 0.86rem; color: #0f172a;">Finalizar Pago</strong>
                                <small style="color: #64748b; font-size: 0.74rem;">Cierre definitivo en mesa En Pago</small>
                            </div>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Fondo:</span>
                                    <input type="color" class="table-btn-color-input" data-key="finalize_bg" value="#006948" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                                <label style="display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: #475569; margin: 0; cursor: pointer;">
                                    <span>Texto:</span>
                                    <input type="color" class="table-btn-color-input" data-key="finalize_color" value="#ffffff" style="width: 32px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 0; background: none;">
                                </label>
                            </div>
                        </div>

                    </div>

                    <!-- Botones de Acción Guardar / Restaurar -->
                    <div style="display: flex; gap: 10px; margin-top: 16px;">
                        <button type="button" class="btn-save-table-buttons" id="btn-save-table-buttons" style="background: #059669; color: #ffffff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease;">
                            Guardar Colores de Botones
                        </button>
                        <button type="button" class="btn-reset-table-buttons" id="btn-reset-table-buttons" style="background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; padding: 9px 16px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease;">
                            Restaurar Predeterminados
                        </button>
                    </div>
                </div>

                <!-- Columna Derecha: Vista Previa en Vivo de Tarjeta de Mesa -->
                <div class="table-buttons-preview-col" style="background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; position: sticky; top: 16px;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                        <span style="font-size: 0.78rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.04em;">Vista Previa de Mesa</span>
                        <div class="preview-state-switcher" id="mockup-state-switcher" style="display: flex; gap: 4px;">
                            <button type="button" class="btn-preview-state active" data-state="ocupada" style="padding: 2px 7px; font-size: 0.72rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #ffffff; cursor: pointer; font-weight: 700; color: #0f172a;">Ocupada</button>
                            <button type="button" class="btn-preview-state" data-state="disponible" style="padding: 2px 7px; font-size: 0.72rem; border-radius: 4px; border: 1px solid #cbd5e1; background: transparent; cursor: pointer; font-weight: 600; color: #64748b;">Disponible</button>
                            <button type="button" class="btn-preview-state" data-state="en_pago" style="padding: 2px 7px; font-size: 0.72rem; border-radius: 4px; border: 1px solid #cbd5e1; background: transparent; cursor: pointer; font-weight: 600; color: #64748b;">En Pago</button>
                        </div>
                    </div>

                    <!-- Tarjeta Mockup Real -->
                    <div class="mockup-table-card cashier-table-card" id="mockup-table-card" style="min-height: 108px; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);">
                        <div class="card-top-row" style="display: flex; align-items: center; justify-content: space-between; gap: 6px;">
                            <strong class="table-title" id="mockup-title" style="font-size: 0.98rem; font-weight: 800; color: #0f172a;">Mesa 12</strong>
                            <span class="status-pill red" id="mockup-pill" style="padding: 2px 8px; font-size: 0.72rem; font-weight: 700; border-radius: 999px; background: #fee2e2; color: #dc2626;">Ocupada</span>
                        </div>

                        <div class="card-amount-row" style="display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 3px 8px; background: #f8fafc; border-radius: 6px; border: 1px solid #edf2f7;">
                            <span class="amount-lbl" id="mockup-amount-lbl" style="font-size: 0.66rem; font-weight: 700; color: #64748b; text-transform: uppercase;">Consumo Total</span>
                            <strong class="table-amount" id="mockup-amount" style="font-size: 1.06rem; font-weight: 800; color: #0f172a;">S/ 112.00</strong>
                        </div>

                        <div class="card-actions-row" id="mockup-actions-container" style="display: flex; align-items: center; gap: 5px;">
                            <!-- Botones renderizados dinámicamente -->
                        </div>
                    </div>

                    <p style="margin: 12px 0 0; font-size: 0.74rem; color: #64748b; line-height: 1.4;">
                        ✨ <strong>Vista en vivo:</strong> Las tarjetas de mesa en el Terminal de Caja adoptarán fielmente los colores que elijas aquí.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Pestaña General (Formulario Operativo) -->
    <div class="settings-panel-section" id="panel-general">
        <form class="settings-form" id="settings-form">
            <label>Nombre del restaurante<input value="La Buena Mesa"></label>
            <label>RUC o ID<input value="20123456789"></label>
            <label>Dirección<input value="Av. Principal 123, Lima"></label>
            <label>Teléfono<input value="+51 987 654 321"></label>
            <label>Moneda<select><option>Soles (S/)</option></select></label>
            <label>Impuesto (IGV)<select><option>18%</option></select></label>
            <div class="settings-note">
                <span>◷</span>
                <div>
                    <strong>Tiempo máximo de cocina</strong>
                    <small>Las órdenes se marcarán como retrasadas después de 15 minutos.</small>
                </div>
                <input type="number" value="15" min="1"><b>min</b>
            </div>
            <button class="button blue save-settings" type="submit">Guardar cambios</button>
        </form>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1. Manejo de Pestañas de Configuración
    const tabBtns = document.querySelectorAll('.settings-tab-btn');
    const panelGeneral = document.getElementById('panel-general');
    const panelAppearance = document.getElementById('panel-appearance');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            tabBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            const tab = btn.dataset.tab;
            if (tab === 'appearance') {
                panelAppearance.style.display = 'block';
                panelGeneral.style.display = 'none';
            } else {
                panelAppearance.style.display = 'none';
                panelGeneral.style.display = 'block';
            }
        });
    });

    // 2. Definición de Paletas Preset de Tema
    const themePalettes = {
        emerald: { primary: '#059669', label: 'Esmeralda POS' },
        blue: { primary: '#2563eb', label: 'Azul Océano' },
        terracotta: { primary: '#ea580c', label: 'Terracota & Brasas' },
        burgundy: { primary: '#be123c', label: 'Vino Gourmet' },
        purple: { primary: '#7c3aed', label: 'Amatista & Coctelería' },
        'dark-slate': { primary: '#334155', label: 'Carbón Ejecutivo' }
    };

    const styleEl = document.getElementById('custom-theme-variables');
    const labelEl = document.getElementById('current-theme-label');
    const colorInput = document.getElementById('theme-custom-color-input');
    const hexInput = document.getElementById('theme-custom-hex');
    const presetCards = document.querySelectorAll('.theme-preset-card');

    let currentThemeHex = localStorage.getItem('la-buena-mesa.theme-primary') || '#059669';

    // 3. Paleta de Botones de Mesas (Valores Predeterminados y Presets)
    const DEFAULT_TABLE_BTN_COLORS = {
        open_bg: '#059669',
        open_color: '#ffffff',
        order_bg: '#fff7ed',
        order_color: '#c2410c',
        pay_bg: '#2563eb',
        pay_color: '#ffffff',
        finalize_bg: '#006948',
        finalize_color: '#ffffff'
    };

    const TABLE_BUTTON_PRESETS = {
        default: { ...DEFAULT_TABLE_BTN_COLORS },
        pastel: {
            open_bg: '#d1fae5',
            open_color: '#065f46',
            order_bg: '#ffedd5',
            order_color: '#9a3412',
            pay_bg: '#dbeafe',
            pay_color: '#1e40af',
            finalize_bg: '#ccfbf1',
            finalize_color: '#115e59'
        },
        'high-contrast': {
            open_bg: '#10b981',
            open_color: '#000000',
            order_bg: '#f59e0b',
            order_color: '#000000',
            pay_bg: '#3b82f6',
            pay_color: '#ffffff',
            finalize_bg: '#047857',
            finalize_color: '#ffffff'
        },
        'modern-dark': {
            open_bg: '#0f172a',
            open_color: '#ffffff',
            order_bg: '#334155',
            order_color: '#f8fafc',
            pay_bg: '#1e293b',
            pay_color: '#38bdf8',
            finalize_bg: '#0f766e',
            finalize_color: '#ffffff'
        }
    };

    let currentTableBtnColors = { ...DEFAULT_TABLE_BTN_COLORS };
    try {
        const savedButtons = localStorage.getItem('la-buena-mesa.table-buttons-palette');
        if (savedButtons) {
            const parsed = JSON.parse(savedButtons);
            currentTableBtnColors = { ...DEFAULT_TABLE_BTN_COLORS, ...parsed };
        }
    } catch(e) {}

    // 4. Inyección de Estilos Globales Combinados
    function renderGlobalStyles() {
        if (!styleEl) return;
        const hex = currentThemeHex;
        const b = currentTableBtnColors;

        styleEl.textContent = `
            :root {
                --theme-primary: ${hex} !important;
                --theme-primary-hover: ${hex}ee !important;
                --theme-primary-soft: ${hex}18 !important;

                --btn-table-open-bg: ${b.open_bg} !important;
                --btn-table-open-color: ${b.open_color} !important;
                --btn-table-open-border: ${b.open_bg} !important;

                --btn-table-order-bg: ${b.order_bg} !important;
                --btn-table-order-color: ${b.order_color} !important;
                --btn-table-order-border: ${b.order_bg} !important;

                --btn-table-pay-bg: ${b.pay_bg} !important;
                --btn-table-pay-color: ${b.pay_color} !important;
                --btn-table-pay-border: ${b.pay_bg} !important;

                --btn-table-finalize-bg: ${b.finalize_bg} !important;
                --btn-table-finalize-color: ${b.finalize_color} !important;
                --btn-table-finalize-border: ${b.finalize_bg} !important;
            }
            .restaurant-topbar,
            .restaurant-topbar.topbar-cashier-mode {
                background: ${hex} !important;
            }
            .restaurant-topbar .btn-cashier-mode.active {
                color: ${hex} !important;
            }
            .restaurant-topbar .btn-cashier-mode.active .mode-icon svg {
                stroke: ${hex} !important;
            }
            .restaurant-topbar .btn-cashier-mode.active .mode-badge-pill {
                color: ${hex} !important;
            }
            .restaurant-topbar .topbar-user-pill .profile-avatar {
                background: ${hex} !important;
            }
            .restaurant-topbar .quick-nav a.selected {
                color: ${hex} !important;
            }
            .btn-quick-new-order,
            .btn-reset-filters,
            .cat-pill.pill-all,
            .pipeline-step.active,
            .pipeline-line.active {
                background: ${hex} !important;
                border-color: ${hex} !important;
            }
            .restaurant-sidebar nav a.active {
                color: ${hex} !important;
                box-shadow: inset 3px 0 ${hex} !important;
            }
            .sector-tab.active {
                color: ${hex} !important;
            }
            .save-settings,
            .btn-apply-custom-theme,
            .btn-submit-expense-action,
            .btn-autocomplete-audit:hover {
                background: ${hex} !important;
                border-color: ${hex} !important;
            }
            .expense-reason-row.active,
            .staff-choice-card.active {
                border-color: ${hex} !important;
                background: ${hex}18 !important;
                box-shadow: 0 0 0 1px ${hex} !important;
            }
            .expense-reason-row.active .reason-check-mark,
            .staff-choice-card.active .staff-avatar,
            .staff-avatar.green {
                background: ${hex} !important;
                border-color: ${hex} !important;
            }
            .display-currency,
            .step-header-icon,
            .btn-autocomplete-audit,
            .audit-title-icon,
            .audit-system-icon {
                color: ${hex} !important;
            }
            .btn-autocomplete-audit {
                background: ${hex}18 !important;
                border-color: ${hex} !important;
            }
            .physical-big-input-wrapper:focus-within,
            .expense-textarea:focus,
            .audit-justification-box textarea:focus {
                border-color: ${hex} !important;
            }
        `;
    }

    function applyThemeColor(hex, themeKey = null) {
        if (!hex) return;
        hex = hex.trim();
        if (!hex.startsWith('#')) hex = '#' + hex;
        currentThemeHex = hex;

        renderGlobalStyles();

        // Guardar en localStorage
        try {
            localStorage.setItem('la-buena-mesa.theme-primary', hex);
            if (themeKey) {
                localStorage.setItem('la-buena-mesa.theme-key', themeKey);
            } else {
                localStorage.removeItem('la-buena-mesa.theme-key');
            }
        } catch (e) {}

        if (colorInput) colorInput.value = hex;
        if (hexInput) hexInput.value = hex.toUpperCase();

        presetCards.forEach(card => {
            if (themeKey && card.dataset.theme === themeKey) {
                card.classList.add('is-active');
            } else {
                card.classList.remove('is-active');
            }
        });

        if (labelEl) {
            const foundPreset = Object.values(themePalettes).find(p => p.primary.toLowerCase() === hex.toLowerCase());
            const displayLabel = foundPreset ? foundPreset.label : 'Personalizado (' + hex.toUpperCase() + ')';
            labelEl.textContent = 'Tema Activo: ' + displayLabel;
        }

        if (typeof window.showToast === 'function') {
            window.showToast('Paleta aplicada con éxito: ' + hex.toUpperCase());
        }
    }

    // 5. Vista Previa Interactiva de Tarjeta de Mesa
    let currentMockupState = 'ocupada';

    function renderMockup() {
        const container = document.getElementById('mockup-actions-container');
        const titleEl = document.getElementById('mockup-title');
        const pillEl = document.getElementById('mockup-pill');
        const amountLbl = document.getElementById('mockup-amount-lbl');
        const amountEl = document.getElementById('mockup-amount');
        if (!container) return;

        const b = currentTableBtnColors;

        if (currentMockupState === 'ocupada') {
            titleEl.textContent = 'Mesa 12';
            pillEl.className = 'status-pill red';
            pillEl.textContent = 'Ocupada';
            amountLbl.textContent = 'Consumo Total';
            amountEl.textContent = 'S/ 112.00';
            container.innerHTML = `
                <button type="button" class="btn-table-action-split" style="width: 28px; height: 28px; flex: 0 0 28px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: default;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 21V12"/><path d="M21 3l-7.5 7.5"/><path d="M3 3l7.5 7.5"/></svg>
                </button>
                <button type="button" style="flex: 1 1 0; height: 28px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: default; background: ${b.order_bg}; color: ${b.order_color}; border: 1px solid ${b.order_bg};">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${b.order_color}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2v6a3 3 0 0 1-3 3 3 3 0 0 1-3-3V2"/><line x1="15" y1="2" x2="15" y2="22"/><line x1="4" y1="2" x2="4" y2="8"/><path d="M4 8a4 4 0 0 0 4 4 4 4 0 0 0 4-4V2"/><line x1="8" y1="12" x2="8" y2="22"/></svg>
                    <span>+ Pedido</span>
                </button>
                <button type="button" style="flex: 1 1 0; height: 28px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: default; background: ${b.pay_bg}; color: ${b.pay_color}; border: 1px solid ${b.pay_bg};">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="${b.pay_color}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                    <span>Cobrar</span>
                </button>
            `;
        } else if (currentMockupState === 'disponible') {
            titleEl.textContent = 'Mesa 2';
            pillEl.className = 'status-pill green';
            pillEl.textContent = 'Disponible';
            amountLbl.textContent = 'Consumo Total';
            amountEl.textContent = 'S/ 0.00';
            container.innerHTML = `
                <button type="button" style="width: 100%; height: 28px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: default; background: ${b.open_bg}; color: ${b.open_color}; border: 1px solid ${b.open_bg};">
                    <span>+ Abrir Mesa &amp; Ordenar</span>
                </button>
            `;
        } else if (currentMockupState === 'en_pago') {
            titleEl.textContent = 'Mesa 3';
            pillEl.className = 'status-pill blue';
            pillEl.textContent = 'En Pago';
            amountLbl.textContent = 'Total Pendiente';
            amountEl.textContent = 'S/ 96.00';
            container.innerHTML = `
                <button type="button" style="width: 28px; height: 28px; flex: 0 0 28px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: default;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
                </button>
                <button type="button" style="flex: 1 1 0; height: 28px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: default; background: ${b.finalize_bg}; color: ${b.finalize_color}; border: 1px solid ${b.finalize_bg};">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${b.finalize_color}" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    <span>Finalizar Pago</span>
                </button>
            `;
        }
    }

    function syncColorInputs() {
        document.querySelectorAll('.table-btn-color-input').forEach(input => {
            const key = input.dataset.key;
            if (currentTableBtnColors[key]) {
                input.value = currentTableBtnColors[key];
            }
        });
    }

    // Inicializar inputs y renderizado
    syncColorInputs();
    renderGlobalStyles();
    renderMockup();

    // Eventos en los selectores de color de cada botón
    document.querySelectorAll('.table-btn-color-input').forEach(input => {
        input.addEventListener('input', (e) => {
            const key = e.target.dataset.key;
            currentTableBtnColors[key] = e.target.value;
            renderGlobalStyles();
            renderMockup();

            // Marcar presets como no activos al personalizar manualmente
            document.querySelectorAll('.btn-table-preset').forEach(p => p.classList.remove('active'));
        });
    });

    // Switcher de estados del Mockup
    document.querySelectorAll('.btn-preview-state').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.btn-preview-state').forEach(b => {
                b.classList.remove('active');
                b.style.background = 'transparent';
                b.style.fontWeight = '600';
                b.style.color = '#64748b';
            });
            btn.classList.add('active');
            btn.style.background = '#ffffff';
            btn.style.fontWeight = '700';
            btn.style.color = '#0f172a';
            currentMockupState = btn.dataset.state;
            renderMockup();
        });
    });

    // Guardar colores de botones
    const btnSaveButtons = document.getElementById('btn-save-table-buttons');
    if (btnSaveButtons) {
        btnSaveButtons.addEventListener('click', () => {
            try {
                localStorage.setItem('la-buena-mesa.table-buttons-palette', JSON.stringify(currentTableBtnColors));
                renderGlobalStyles();
                renderMockup();
                alert('¡Colores de botones de mesa guardados con éxito!');
            } catch(e) {
                alert('Error al guardar los colores en el almacenamiento local.');
            }
        });
    }

    // Restaurar colores predeterminados
    const btnResetButtons = document.getElementById('btn-reset-table-buttons');
    if (btnResetButtons) {
        btnResetButtons.addEventListener('click', () => {
            currentTableBtnColors = { ...DEFAULT_TABLE_BTN_COLORS };
            try {
                localStorage.removeItem('la-buena-mesa.table-buttons-palette');
            } catch(e) {}
            syncColorInputs();
            renderGlobalStyles();
            renderMockup();
            document.querySelectorAll('.btn-table-preset').forEach(p => {
                p.classList.toggle('active', p.dataset.preset === 'default');
            });
            alert('Se han restaurado los colores predeterminados de las mesas.');
        });
    }

    // Presets rápidos de botones
    document.querySelectorAll('.btn-table-preset').forEach(btn => {
        btn.addEventListener('click', () => {
            const key = btn.dataset.preset;
            if (TABLE_BUTTON_PRESETS[key]) {
                currentTableBtnColors = { ...TABLE_BUTTON_PRESETS[key] };
                try {
                    localStorage.setItem('la-buena-mesa.table-buttons-palette', JSON.stringify(currentTableBtnColors));
                } catch(e) {}
                syncColorInputs();
                renderGlobalStyles();
                renderMockup();

                document.querySelectorAll('.btn-table-preset').forEach(p => p.classList.remove('active'));
                btn.classList.add('active');
            }
        });
    });

    // Cargar tema guardado al iniciar
    const savedKey = localStorage.getItem('la-buena-mesa.theme-key') || 'emerald';
    applyThemeColor(currentThemeHex, savedKey);

    // Eventos de selección de Presets de Tema
    presetCards.forEach(card => {
        card.addEventListener('click', () => {
            const key = card.dataset.theme;
            const preset = themePalettes[key];
            if (preset) {
                applyThemeColor(preset.primary, key);
            }
        });

        card.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                card.click();
            }
        });
    });

    // Selector manual de Tema
    if (colorInput) {
        colorInput.addEventListener('input', (e) => {
            if (hexInput) hexInput.value = e.target.value.toUpperCase();
        });
    }

    const btnApply = document.getElementById('btn-apply-custom-theme');
    if (btnApply) {
        btnApply.addEventListener('click', () => {
            const val = hexInput ? hexInput.value : colorInput.value;
            if (/^#[0-9A-F]{6}$/i.test(val)) {
                applyThemeColor(val);
            } else {
                alert('Ingresa un código hexadecimal válido de 6 caracteres (ej: #059669)');
            }
        });
    }

    const btnReset = document.getElementById('btn-reset-theme');
    if (btnReset) {
        btnReset.addEventListener('click', () => {
            applyThemeColor('#059669', 'emerald');
        });
    }
});
</script>
@endpush