{{-- resources/views/livewire/configuracion/empresa.blade.php --}}
<div>
    <div style="margin-bottom:20px;">
        <div class="page-title">⚙️ Configuración</div>
        <div class="page-sub">Datos de la empresa · certificado · documentos · correo</div>
    </div>

    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 5000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    {{-- Navegación de secciones --}}
    <div style="display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;">
        @foreach([
            'general'       => '🏢 Datos generales',
            'certificado'   => '🔐 Certificado digital',
            'documentos'    => '📄 Personalización docs',
            'correo'        => '✉️ Correo electrónico',
        ] as $sec => $label)
        <button wire:click="$set('seccion','{{ $sec }}')"
                class="{{ $seccion === $sec ? 'btn-blue' : 'btn-plain' }}"
                style="font-size:12px;padding:8px 16px;">
            {{ $label }}
        </button>
        @endforeach
    </div>

    {{-- ── SECCIÓN: DATOS GENERALES ────────────── --}}
    @if($seccion === 'general')
    <div class="inset-card">
        <div style="padding:20px;">
            <div class="group-label" style="margin-bottom:16px;">Información fiscal</div>

            <div class="form-row">
                <div class="field">
                    <label>Nombre de la empresa *</label>
                    <input type="text" wire:model="nombre" placeholder="Razón social completa" />
                    @error('nombre')<div style="font-size:11px;color:var(--red);margin-top:3px;">{{ $message }}</div>@enderror
                </div>
                <div class="field">
                    <label>Nombre comercial</label>
                    <input type="text" wire:model="nombre_comercial" placeholder="Como aparece en el PDF" />
                </div>
            </div>

            <div class="form-row cols3">
                <div class="field">
                    <label>Tipo de cédula *</label>
                    <select wire:model="cedula_tipo">
                        <option value="01">01 · Física</option>
                        <option value="02">02 · Jurídica</option>
                        <option value="03">03 · DIMEX</option>
                        <option value="04">04 · NITE</option>
                    </select>
                </div>
                <div class="field">
                    <label>Número de cédula *</label>
                    <input type="text" wire:model="cedula_numero" placeholder="Sin guiones" />
                </div>
                <div class="field">
                    <label>Actividad económica *</label>
                    <input type="text" wire:model="actividad_economica" placeholder="Ej: 86101" />
                </div>
            </div>

            <div class="form-row">
                <div class="field">
                    <label>Correo de facturación *</label>
                    <input type="email" wire:model="email_facturacion" />
                </div>
                <div class="field">
                    <label>Correo contabilidad</label>
                    <input type="email" wire:model="email_contabilidad" />
                </div>
            </div>

            <div class="form-row">
                <div class="field">
                    <label>Teléfono</label>
                    <input type="text" wire:model="telefono" placeholder="XXXX-XXXX" />
                </div>
                <div class="field">
                    <label>Otras señas</label>
                    <input type="text" wire:model="otras_senas" placeholder="Dirección completa" />
                </div>
            </div>

            <div class="group-label" style="margin:18px 0 12px;">Parámetros operativos</div>

            <div class="form-row cols3">
                <div class="field">
                    <label>Ambiente Hacienda</label>
                    <select wire:model="ambiente_hacienda">
                        <option value="sandbox">Sandbox (pruebas)</option>
                        <option value="produccion">Producción</option>
                    </select>
                </div>
                <div class="field">
                    <label>Plazo crédito default (días)</label>
                    <input type="number" wire:model="plazo_credito_default" min="1" max="365" />
                </div>
                <div class="field">
                    <label>Umbral ajuste inventario (₡)</label>
                    <input type="number" wire:model="umbral_ajuste_inv" min="0" step="1000" />
                </div>
            </div>

            @if($ambiente_hacienda === 'produccion')
            <div class="alert alert-red" style="margin:12px 0;">
                <span style="flex-shrink:0;">🚨</span>
                <span>Ambiente <strong>PRODUCCIÓN</strong>: las facturas enviadas a Hacienda son legalmente válidas y no se pueden anular sin nota de crédito.</span>
            </div>
            @endif

            <div style="margin-top:20px;">
                <button wire:click="guardarGeneral" wire:loading.attr="disabled" class="btn-blue">
                    <span wire:loading.remove>💾 Guardar cambios</span>
                    <span wire:loading>Guardando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- ── SECCIÓN: CERTIFICADO ─────────────────── --}}
    @if($seccion === 'certificado')
    <div class="inset-card">
        <div style="padding:20px;">

            {{-- Estado actual del certificado --}}
            @if($empresa->certificado_vence)
            <div style="background:var(--bg);border-radius:14px;padding:16px;margin-bottom:20px;">
                <div style="font-size:12px;font-weight:600;margin-bottom:8px;">Certificado actual</div>
                <div style="display:flex;gap:20px;flex-wrap:wrap;font-size:13px;">
                    <div>
                        <span style="color:var(--label2);">Vence:</span>
                        <strong style="color:{{ $empresa->certificadoVenceProonto() ? 'var(--red)' : 'var(--green2)' }}">
                            {{ $empresa->certificado_vence->format('d/m/Y') }}
                        </strong>
                    </div>
                    <div>
                        <span style="color:var(--label2);">Días restantes:</span>
                        <strong>{{ $empresa->diasParaVencimientoCertificado() }}</strong>
                    </div>
                </div>
                @if($empresa->certificadoVenceProonto())
                <div style="margin-top:8px;font-size:12px;color:var(--red);">
                    ⚠️ Renueve el certificado en
                    <a href="https://atv.hacienda.go.cr" target="_blank" style="color:var(--red);">ATV</a>
                    antes de que venza.
                </div>
                @endif
            </div>
            @endif

            @if($cert_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $cert_error }}</div>
            @endif
            @if($cert_info)
            <div class="alert alert-green" style="margin-bottom:14px;">✅ {{ $cert_info }}</div>
            @endif

            <div class="group-label" style="margin-bottom:12px;">Cargar nuevo certificado .p12</div>

            <div class="field" style="margin-bottom:14px;">
                <label>Archivo .p12 del BCCR</label>
                <input type="file" wire:model="certificado_file" accept=".p12"
                       style="background:var(--bg);border:none;border-radius:12px;
                              padding:8px 12px;font-family:'Ubuntu',sans-serif;" />
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>PIN del certificado</label>
                <input type="password" wire:model="certificado_pin" placeholder="PIN de acceso" />
            </div>

            <div class="alert alert-orange" style="margin-bottom:16px;">
                <span style="flex-shrink:0;">🔒</span>
                <span style="font-size:12px;">
                    El PIN se cifra con AES-256 antes de guardarse. El archivo .p12 se almacena
                    fuera del webroot con nombre aleatorio.
                </span>
            </div>

            <button wire:click="subirCertificado" wire:loading.attr="disabled" class="btn-blue">
                <span wire:loading.remove>📤 Cargar certificado</span>
                <span wire:loading>Validando…</span>
            </button>
        </div>
    </div>
    @endif

    {{-- ── SECCIÓN: PERSONALIZACIÓN ─────────────── --}}
    @if($seccion === 'documentos')
    <div class="inset-card">
        <div style="padding:20px;">
            <div class="group-label" style="margin-bottom:16px;">Diseño del PDF</div>

            <div class="form-row">
                <div class="field">
                    <label>Color primario (banda título y footer)</label>
                    <div style="display:flex;gap:10px;align-items:center;">
                        <input type="color" wire:model.live="doc_color_primario"
                               style="width:48px;height:38px;border:none;border-radius:8px;
                                      background:none;cursor:pointer;padding:0;" />
                        <input type="text" wire:model.live="doc_color_primario"
                               placeholder="#1A1D23" style="flex:1;font-family:'Courier New',monospace;" />
                    </div>
                </div>
                <div class="field">
                    <label>Color secundario (tipo y total)</label>
                    <div style="display:flex;gap:10px;align-items:center;">
                        <input type="color" wire:model.live="doc_color_secundario"
                               style="width:48px;height:38px;border:none;border-radius:8px;
                                      background:none;cursor:pointer;padding:0;" />
                        <input type="text" wire:model.live="doc_color_secundario"
                               placeholder="#F59E0B" style="flex:1;font-family:'Courier New',monospace;" />
                    </div>
                </div>
            </div>

            {{-- Preview de colores --}}
            <div style="border-radius:12px;overflow:hidden;margin-bottom:16px;">
                <div style="background:{{ $doc_color_primario }};padding:12px 16px;
                            display:flex;align-items:center;justify-content:space-between;">
                    <span style="color:{{ $doc_color_secundario }};font-size:16px;font-weight:700;">
                        FACTURA ELECTRÓNICA
                    </span>
                    <span style="color:rgba(255,255,255,.5);font-size:10px;">electrónica · v4.4</span>
                </div>
                <div style="background:#f8f8f8;padding:10px 16px;font-size:11px;color:#555;">
                    Vista previa de la banda de título del PDF
                </div>
            </div>

            <div class="field" style="margin-bottom:14px;">
                <label>Logo de la empresa (PNG, JPG — max 1MB)</label>
                <input type="file" wire:model="logo_file" accept="image/png,image/jpeg"
                       style="background:var(--bg);border:none;border-radius:12px;
                              padding:8px 12px;font-family:'Ubuntu',sans-serif;" />
                @if($empresa->logo_path)
                <div style="font-size:11px;color:var(--green2);margin-top:4px;">✅ Logo cargado</div>
                @endif
            </div>

            <div class="form-row">
                <div class="field">
                    <label>Nombre del responsable (firma del PDF)</label>
                    <input type="text" wire:model="doc_responsable_nombre" placeholder="Dr. Juan Pérez" />
                </div>
                <div class="field">
                    <label>Cargo del responsable</label>
                    <input type="text" wire:model="doc_responsable_cargo" placeholder="Director General" />
                </div>
            </div>

            <div class="field" style="margin-bottom:14px;">
                <label>Mensaje de agradecimiento (footer del PDF)</label>
                <input type="text" wire:model="doc_mensaje_footer"
                       placeholder="¡Gracias por su preferencia!" />
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Términos y condiciones (footer del PDF)</label>
                <textarea wire:model="doc_terminos" rows="3"
                          placeholder="Este comprobante es válido como factura electrónica…"
                          style="width:100%;padding:10px 12px;background:var(--bg);border:none;
                                 border-radius:12px;font-family:'Ubuntu',sans-serif;
                                 font-size:13px;resize:none;outline:none;"></textarea>
            </div>

            <button wire:click="guardarPersonalizacion" wire:loading.attr="disabled" class="btn-blue">
                <span wire:loading.remove>💾 Guardar personalización</span>
                <span wire:loading>Guardando…</span>
            </button>
        </div>
    </div>
    @endif

    {{-- ── SECCIÓN: CORREO ──────────────────────── --}}
    @if($seccion === 'correo')
    <div class="inset-card">
        <div style="padding:20px;">
            <div class="group-label" style="margin-bottom:16px;">Servidor SMTP</div>

            <div class="form-row cols3">
                <div class="field">
                    <label>Host SMTP *</label>
                    <input type="text" wire:model="smtp_host" placeholder="smtp.gmail.com" />
                </div>
                <div class="field">
                    <label>Puerto *</label>
                    <input type="number" wire:model="smtp_puerto" placeholder="587" />
                </div>
                <div class="field">
                    <label>Cifrado</label>
                    <select wire:model="smtp_cifrado">
                        <option value="tls">TLS (recomendado)</option>
                        <option value="ssl">SSL</option>
                        <option value="none">Ninguno</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="field">
                    <label>Usuario SMTP *</label>
                    <input type="email" wire:model="smtp_usuario" placeholder="facturacion@empresa.cr" />
                </div>
                <div class="field">
                    <label>Contraseña SMTP (dejar vacío para no cambiar)</label>
                    <input type="password" wire:model="smtp_password" placeholder="••••••••" />
                </div>
            </div>

            <div class="group-label" style="margin:18px 0 12px;">Plantilla de correo — FE</div>
            <div class="field" style="margin-bottom:10px;">
                <label>Asunto *</label>
                <input type="text" wire:model="correo_asunto_fe"
                       placeholder="Factura electrónica - {numero}" />
                <div style="font-size:10px;color:var(--label2);margin-top:3px;">
                    Variables: {cliente} {numero} {total} {fecha} {empresa} {vencimiento}
                </div>
            </div>
            <div class="field" style="margin-bottom:16px;">
                <label>Cuerpo del correo</label>
                <textarea wire:model="correo_cuerpo_fe" rows="4"
                          style="width:100%;padding:10px 12px;background:var(--bg);border:none;
                                 border-radius:12px;font-family:'Ubuntu',sans-serif;
                                 font-size:13px;resize:none;outline:none;"></textarea>
            </div>

            <div class="group-label" style="margin:0 0 12px;">Plantilla de correo — NC</div>
            <div class="field" style="margin-bottom:10px;">
                <label>Asunto NC</label>
                <input type="text" wire:model="correo_asunto_nc" />
            </div>
            <div class="field" style="margin-bottom:16px;">
                <label>Firma del correo (HTML permitido)</label>
                <textarea wire:model="correo_firma" rows="3"
                          style="width:100%;padding:10px 12px;background:var(--bg);border:none;
                                 border-radius:12px;font-family:'Ubuntu',sans-serif;
                                 font-size:13px;resize:none;outline:none;"
                          placeholder="Saludos,&#10;Nombre de la empresa&#10;Tel: XXXX-XXXX"></textarea>
            </div>

            <button wire:click="guardarCorreo" wire:loading.attr="disabled" class="btn-blue">
                <span wire:loading.remove>💾 Guardar configuración</span>
                <span wire:loading>Guardando…</span>
            </button>
        </div>
    </div>
    @endif
</div>