@component('v2-cms::components.box', ['title' => 'Conexão de E-mail do Sistema (SMTP)'])
    <p class="text-muted mb-4">
        Configure o servidor SMTP utilizado pelo sistema para disparar e-mails de recuperação de senha,
        notificações e formulários de contato.
        As configurações são armazenadas na tabela dedicada <code>v2_system_mail_configs</code> (V2).
    </p>

    {{-- ═══════════════════════════════════════════════════════
         INFO ARQUITETURA
         ═══════════════════════════════════════════════════════ --}}
    <div class="alert alert-info d-flex gap-3 p-3 mb-4 border-0 shadow-sm" role="alert">
        <i class="bi bi-database-gear fs-4 flex-shrink-0" aria-hidden="true"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Arquitetura de Dados</h4>
            <p class="mb-1 small text-secondary">
                Os dados de e-mail residem em tabela própria (<code>v2_system_mail_configs</code>) com:
            </p>
            <ul class="mb-0 small text-secondary ps-3">
                <li>Isolamento de domínio — separado das demais configurações do portal</li>
                <li>Suporte futuro a múltiplos profiles (ex: <em>default</em>, <em>contact</em>, <em>newsletter</em>)</li>
                <li>Criptografia da senha via <code>APP_KEY</code> (AES-256-CBC)</li>
                <li>Trilha de auditoria com <code>transaction_snapshot_id</code></li>
                <li>Soft deletes para recuperação de configurações apagadas acidentalmente</li>
            </ul>
        </div>
    </div>

    <div class="row g-4">
        {{-- ═══════════════════════════════════════════════════════
             COLUNA A — Conexão SMTP
             ═══════════════════════════════════════════════════════ --}}
        <div class="col-md-6 col-12">
            <fieldset class="border rounded-3 p-3 h-100">
                <legend class="h6 fw-bold text-dark d-flex align-items-center gap-2 w-100 mb-3 pb-2 border-bottom" style="font-size: var(--text-base);">
                    <i class="bi bi-server text-primary" aria-hidden="true"></i> Servidor SMTP
                </legend>

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_profile">Profile</label>
                    <select name="mail_profile" id="mail_profile" class="form-select">
                        <option value="default">Default (Principal)</option>
                    </select>
                    <div class="form-text mt-1">Atualmente apenas o profile <strong>Default</strong> está disponível.</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_driver">Driver de E-mail</label>
                    <select name="mail_driver" id="mail_driver" class="form-select">
                        <option value="smtp" {{ ($configs['mail_driver'] ?? 'smtp') == 'smtp' ? 'selected' : '' }}>SMTP</option>
                        <option value="sendmail" {{ ($configs['mail_driver'] ?? '') == 'sendmail' ? 'selected' : '' }}>Sendmail</option>
                        <option value="mailgun" {{ ($configs['mail_driver'] ?? '') == 'mailgun' ? 'selected' : '' }}>Mailgun</option>
                        <option value="ses" {{ ($configs['mail_driver'] ?? '') == 'ses' ? 'selected' : '' }}>Amazon SES</option>
                        <option value="log" {{ ($configs['mail_driver'] ?? '') == 'log' ? 'selected' : '' }}>Log (teste apenas)</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_host">Servidor Host</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white" aria-hidden="true">
                            <i class="bi bi-globe2"></i>
                        </span>
                        <input type="text" name="mail_host" id="mail_host" class="form-control"
                               placeholder="smtp.exemplo.com" value="{{ $configs['mail_host'] ?? '' }}">
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label fw-bold" for="mail_port">Porta</label>
                        <input type="number" name="mail_port" id="mail_port" class="form-control"
                               placeholder="587" value="{{ $configs['mail_port'] ?? '' }}"
                               aria-describedby="portHelp">
                        <div class="form-text mt-1" id="portHelp">Comum: 587 (TLS) ou 465 (SSL)</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-bold" for="mail_encryption">Criptografia</label>
                        <select name="mail_encryption" id="mail_encryption" class="form-select">
                            <option value="tls" {{ ($configs['mail_encryption'] ?? 'tls') == 'tls' ? 'selected' : '' }}>TLS</option>
                            <option value="ssl" {{ ($configs['mail_encryption'] ?? '') == 'ssl' ? 'selected' : '' }}>SSL</option>
                            <option value="" {{ ($configs['mail_encryption'] ?? '') == '' ? 'selected' : '' }}>Nenhuma</option>
                        </select>
                    </div>
                </div>
            </fieldset>
        </div>

        {{-- ═══════════════════════════════════════════════════════
             COLUNA B — Credenciais + Remetente
             ═══════════════════════════════════════════════════════ --}}
        <div class="col-md-6 col-12">
            <fieldset class="border rounded-3 p-3 h-100">
                <legend class="h6 fw-bold text-dark d-flex align-items-center gap-2 w-100 mb-3 pb-2 border-bottom" style="font-size: var(--text-base);">
                    <i class="bi bi-shield-lock text-warning" aria-hidden="true"></i> Credenciais &amp; Remetente
                </legend>

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_username">Usuário (Username)</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white" aria-hidden="true">
                            <i class="bi bi-person"></i>
                        </span>
                        <input type="text" name="mail_username" id="mail_username" class="form-control"
                               placeholder="contato@dominio.com" value="{{ $configs['mail_username'] ?? '' }}">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_password">Senha (Password)</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white" aria-hidden="true">
                            <i class="bi bi-key"></i>
                        </span>
                        <input type="password" name="mail_password" id="mail_password" class="form-control"
                               placeholder="{{ !empty($configs['mail_has_password']) ? '••••••••' : 'Digite a senha' }}"
                               value="" aria-describedby="passwordHelp">
                        <button type="button" class="btn btn-outline-secondary" id="togglePassword"
                                onclick="togglePasswordVisibility()" aria-label="Mostrar/ocultar senha">
                            <i class="bi bi-eye" id="passwordIcon" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="form-text mt-1" id="passwordHelp">
                        @if(!empty($configs['mail_has_password']))
                            Uma senha já está configurada. Deixe em branco para mantê-la.
                        @else
                            Nenhuma senha configurada. A senha será criptografada com a chave da aplicação (APP_KEY).
                        @endif
                    </div>
                </div>

                <hr class="my-4">

                <div class="mb-3">
                    <label class="form-label fw-bold" for="mail_from_address">Endereço de Remetente (From Address)</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white" aria-hidden="true">@</span>
                        <input type="email" name="mail_from_address" id="mail_from_address" class="form-control"
                               placeholder="no-reply@lotep.pb.gov.br" value="{{ $configs['mail_from_address'] ?? '' }}">
                    </div>
                </div>

                <div class="mb-0">
                    <label class="form-label fw-bold" for="mail_from_name">Nome do Remetente (From Name)</label>
                    <input type="text" name="mail_from_name" id="mail_from_name" class="form-control"
                           placeholder="Maxima — Paraíba" value="{{ $configs['mail_from_name'] ?? '' }}">
                </div>
            </fieldset>
        </div>
    </div>

    @slot('footer')
        <div class="d-flex justify-content-between align-items-center">
            <button type="button" class="btn btn-outline-secondary fw-bold d-inline-flex align-items-center gap-1" disabled
                    title="Funcionalidade em desenvolvimento">
                <i class="bi bi-send" aria-hidden="true"></i> Enviar E-mail de Teste
            </button>
            <button type="submit" class="btn btn-primary fw-bold px-3 d-inline-flex align-items-center gap-1">
                <i class="bi bi-save" aria-hidden="true"></i> Salvar Configurações de E-mail
            </button>
        </div>
    @endslot
@endcomponent

@push('scripts')
<script>
    function togglePasswordVisibility() {
        var input = document.getElementById('mail_password');
        var icon = document.getElementById('passwordIcon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'bi bi-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'bi bi-eye';
        }
    }
</script>
@endpush