@extends('layouts.app')

@section('title', 'Deploy - ' . $client->name)
@section('page-title', 'Deploy')

@push('styles')
<style>
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h2 class="page-header__title">Deploy - {{ $client->name }}</h2>
            <p class="page-header__subtitle">Configurar e publicar site no servidor</p>
        </div>
        <a href="{{ route('site-mae.clientes.edit', $client) }}" class="btn btn-outline" id="btnVoltarEditar">
            Voltar ao Cliente
        </a>
    </div>

    @if(session('sucesso'))
        <div class="alert alert--success" id="alertSucesso">{{ session('sucesso') }}</div>
    @endif

    @if(!$client->site_generated_at)
        <div class="content-card" style="border-left: 3px solid var(--color-warning);">
            <div class="content-card__title">Site nao Gerado</div>
            <p style="color: var(--color-text-muted); margin-top: 8px;">
                O site deste cliente ainda nao foi gerado. Complete o briefing antes de fazer o deploy.
            </p>
        </div>
    @else
        @if($client->status !== 'active')
        {{-- Portao de ativacao: aparece apenas quando o cliente nao esta ativo --}}
        <div id="painelAtivacao" style="display: flex; align-items: center; justify-content: center; padding: 3rem 0;">
            <div class="content-card" style="max-width: 480px; width: 100%; text-align: center; border-top: 3px solid var(--color-primary);">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
                     stroke="var(--color-primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                     style="margin: 0 auto 1rem;">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
                <div class="content-card__title" style="font-size: 1.1rem;">Ativar Website</div>
                <p style="color: var(--color-text-muted); font-size: 0.88rem; margin: 8px 0 16px; line-height: 1.6;">
                    O site de <strong>{{ $client->name }}</strong> ainda nao esta ativo.
                    Clique em <strong>Ativar Website</strong> para liberar as ferramentas de publicacao e upload.
                </p>
                @if($client->reseller_id)
                <div style="display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.35); margin-bottom: 12px; text-align: left;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;">
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                    <span style="font-size: 0.82rem; color: #92400e;">
                        <strong>Aviso:</strong> A ativacao ira descontar <strong>{{ $client->layout?->activation_credits ?? 1 }} credito(s)</strong> da conta do revendedor.
                    </span>
                </div>
                @endif
                @php
                    $diasRestantesDeploy = (int) now()->diffInDays($client->site_generated_at->copy()->addDays(30), false);
                    $corDeploy = $diasRestantesDeploy <= 7 ? '#dc2626' : ($diasRestantesDeploy <= 15 ? '#d97706' : '#b45309');
                    $bgDeploy  = $diasRestantesDeploy <= 7 ? 'rgba(220,38,38,0.08)' : 'rgba(180,83,9,0.08)';
                    $bdDeploy  = $diasRestantesDeploy <= 7 ? 'rgba(220,38,38,0.3)' : 'rgba(180,83,9,0.3)';
                @endphp
                <div style="display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: {{ $bgDeploy }}; border: 1px solid {{ $bdDeploy }}; margin-bottom: 20px; text-align: left;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ $corDeploy }}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;">
                        <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                    </svg>
                    <span style="font-size: 0.82rem; color: {{ $corDeploy }}; font-weight: 600;">
                        @if($diasRestantesDeploy <= 0)
                            Prazo encerrado — o conteudo sera removido automaticamente hoje.
                        @else
                            Prazo para ativar: <strong>{{ $diasRestantesDeploy }} dia(s)</strong>. Apos esse prazo, todos os dados serao deletados automaticamente.
                        @endif
                    </span>
                </div>
                <div id="msgAtivacao" style="display:none; margin-bottom:12px;"></div>
                <button type="button" class="btn btn-primary" id="btnAtivarWebsite" onclick="ativarDeploy()" style="width: 100%; padding: 0.8rem;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px;vertical-align:middle;">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Ativar Website
                </button>
            </div>
        </div>
        @endif

        {{-- Conteudo real de deploy --}}
        <div id="conteudoDeploy" style="{{ $client->status === 'active' ? '' : 'display: none;' }}">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);">
            {{-- Formulario de Configuracao FTP --}}
            <div class="content-card">
                <div class="content-card__title">Configuracao FTP</div>

                <form method="POST" action="{{ route('site-mae.clientes.deploy.salvar', $client) }}" id="formFtp" style="margin-top: 16px;">
                    @csrf

                    <div class="form-group">
                        <label class="form-label" for="ftp_host">Servidor (Host)</label>
                        <input type="text" name="ftp_host" id="ftp_host" class="form-control"
                               value="{{ old('ftp_host', $client->ftp_host) }}"
                               placeholder="ftp.seudominio.com.br" maxlength="255" required>
                        @error('ftp_host')
                            <div class="form-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                        <div class="form-group">
                            <label class="form-label" for="ftp_port">Porta</label>
                            <input type="number" name="ftp_port" id="ftp_port" class="form-control"
                                   value="{{ old('ftp_port', $client->ftp_port ?: 21) }}"
                                   min="1" max="65535" required>
                            @error('ftp_port')
                                <div class="form-error">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="ftp_ssl">Conexao Segura</label>
                            <select name="ftp_ssl" id="ftp_ssl" class="form-control">
                                <option value="0" {{ !old('ftp_ssl', $client->ftp_ssl) ? 'selected' : '' }}>FTP Normal</option>
                                <option value="1" {{ old('ftp_ssl', $client->ftp_ssl) ? 'selected' : '' }}>FTPS (SSL)</option>
                            </select>
                            <small style="color: var(--color-text-dim);">Use porta 22 para SFTP (deteccao automatica).</small>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="ftp_username">Usuario</label>
                        <input type="text" name="ftp_username" id="ftp_username" class="form-control"
                               value="{{ old('ftp_username', $client->ftp_username) }}"
                               placeholder="usuario_ftp" maxlength="255" required autocomplete="off">
                        @error('ftp_username')
                            <div class="form-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="ftp_password">Senha</label>
                        <input type="password" name="ftp_password" id="ftp_password" class="form-control"
                               placeholder="{{ $client->ftp_password ? '(senha salva)' : 'Senha FTP' }}"
                               maxlength="255" autocomplete="new-password">
                        @error('ftp_password')
                            <div class="form-error">{{ $message }}</div>
                        @enderror
                        @if($client->ftp_password)
                            <small style="color: var(--color-text-dim);">Deixe em branco para manter a senha atual.</small>
                        @endif
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="ftp_path">Pasta Remota</label>
                        <div style="display: flex; gap: 8px;">
                            <input type="text" name="ftp_path" id="ftp_path" class="form-control"
                                   value="{{ old('ftp_path', $client->ftp_path) }}"
                                   placeholder="/public_html/" maxlength="500">
                            <button type="button" class="btn btn-outline btn-sm" id="btnNavegar"
                                    onclick="abrirNavegador()" title="Navegar nas pastas do servidor"
                                    style="white-space: nowrap;">
                                Navegar
                            </button>
                        </div>
                        @error('ftp_path')
                            <div class="form-error">{{ $message }}</div>
                        @enderror
                    </div>

                    <div style="display: flex; gap: 10px; margin-top: 16px;">
                        <button type="submit" class="btn btn-primary" id="btnSalvarFtp">Salvar Configuracao</button>
                        <button type="button" class="btn btn-outline" id="btnTestarConexao" onclick="testarConexao()">Testar Conexao</button>
                    </div>
                </form>

                <div id="resultadoTeste" style="margin-top: 12px; display: none;"></div>
            </div>

            {{-- Painel de Deploy --}}
            <div>
                {{-- Gerenciador de Arquivos no Servidor --}}
                <div class="content-card" id="painelPastas" style="display: none;">
                    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;">
                        <div class="content-card__title" style="margin: 0;">Gerenciador de Arquivos</div>
                        <div id="acoesGerenciador" style="display: {{ $client->ftp_host ? 'flex' : 'none' }}; gap: 6px; flex-wrap: wrap;">
                            <button type="button" class="btn btn-outline btn-sm" id="btnAtualizarGerenciador" onclick="atualizarGerenciador()">
                                Atualizar
                            </button>
                            <button type="button" class="btn btn-outline btn-sm" id="btnCriarPasta" onclick="criarPasta()">
                                + Nova Pasta
                            </button>
                            <label class="btn btn-outline btn-sm" style="cursor:pointer; margin:0;" title="Enviar arquivo para pasta atual">
                                Enviar Arquivo
                                <input type="file" id="inputUploadGerenciador" style="display:none;" onchange="enviarArquivoGerenciador(this)">
                            </label>
                        </div>
                    </div>
                    <div id="breadcrumbPastas" style="font-size: 0.82rem; color: var(--color-text-muted); margin: 10px 0 6px;"></div>
                    {{-- Banner de selecao da pasta atual --}}
                    <div id="bannerUsarPasta" style="display:none; padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; background: rgba(var(--color-primary-rgb,139,105,20),0.08); border: 1px solid rgba(var(--color-primary-rgb,139,105,20),0.25); display:flex; align-items:center; justify-content:space-between; gap:8px;">
                        <span style="font-size:0.82rem; color: var(--color-text);">Pasta atual: <strong id="txtCaminhoAtual"></strong></span>
                        <button type="button" class="btn btn-primary btn-sm" onclick="usarPastaAtual()" style="white-space:nowrap;">Usar esta pasta</button>
                    </div>
                    <div id="msgGerenciador" style="display:none; padding: 8px 10px; border-radius: 6px; font-size: 0.82rem; margin-bottom: 8px;"></div>
                    <div id="listaPastas" style="max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 6px;"></div>
                </div>

                {{-- Status e Publicar --}}
                <div class="content-card" style="margin-top: var(--space-md);" id="painelPublicar">
                    <div class="content-card__title">Publicar Site</div>

                    @if($client->last_deploy_at)
                        <div style="margin-top: 12px; padding: 10px; border-radius: 6px; background: var(--color-bg-subtle);">
                            <div style="font-size: 0.82rem; color: var(--color-text-muted);">Ultimo deploy</div>
                            <div style="margin-top: 4px;">
                                <span class="badge badge--{{ $client->last_deploy_status === 'success' ? 'active' : 'suspended' }}">
                                    {{ $client->last_deploy_status === 'success' ? 'Sucesso' : 'Erro' }}
                                </span>
                                <span style="font-size: 0.85rem; margin-left: 8px;">
                                    {{ $client->last_deploy_at->format('d/m/Y H:i') }}
                                </span>
                            </div>
                        </div>
                    @endif

                    <div id="blocoPublicarItens" style="display: {{ $client->ftp_host ? 'block' : 'none' }};">
                        <div style="margin-top: 16px;">
                            {{-- Modo de Deploy --}}
                            <div class="form-group">
                                <label class="form-label">Modo de Envio</label>
                                <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 6px;">
                                    <label class="deploy-mode-option" id="modeModificados">
                                        <input type="radio" name="deploy_modo" value="modificados" checked>
                                        <div class="deploy-mode-info">
                                            <span class="deploy-mode-label">Somente modificados</span>
                                            <span class="deploy-mode-desc">Envia apenas arquivos novos ou alterados desde o ultimo deploy</span>
                                        </div>
                                    </label>
                                    <label class="deploy-mode-option" id="modeTudo">
                                        <input type="radio" name="deploy_modo" value="tudo">
                                        <div class="deploy-mode-info">
                                            <span class="deploy-mode-label">Enviar tudo</span>
                                            <span class="deploy-mode-desc">Envia todos os arquivos, sobrescrevendo os existentes no servidor</span>
                                        </div>
                                    </label>
                                    <label class="deploy-mode-option" id="modeLimpar">
                                        <input type="radio" name="deploy_modo" value="limpar">
                                        <div class="deploy-mode-info">
                                            <span class="deploy-mode-label" style="color: #dc2626;">Limpar e enviar tudo</span>
                                            <span class="deploy-mode-desc">Remove todos os arquivos da pasta remota antes de enviar</span>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary" id="btnPublicar" onclick="publicarSite()" style="width: 100%; margin-top: 8px;">
                                Publicar Site
                            </button>
                        </div>
                    </div>
                    
                    <div id="msgNaoTestadoPublicar" style="display: {{ $client->ftp_host ? 'none' : 'block' }};">
                        <p style="margin-top: 12px; font-size: 0.85rem; color: var(--color-text-muted);">
                            Teste a conexao FTP e confirme o sucesso para habilitar a publicacao.
                        </p>
                    </div>

                    <div style="margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 16px;">
                        <button type="button" class="btn btn-outline" id="btnBaixarSite"
                                onclick="baixarSite(this)"
                                title="Compacta e baixa todos os arquivos do site em ZIP"
                                style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            Baixar Website (.zip)
                        </button>
                        <div id="statusBaixar" style="display:none; margin-top: 8px; padding: 10px 14px; border-radius: 8px; font-size: 0.83rem; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.25); color: var(--color-primary); text-align: center;"></div>
                    </div>
                    </div>
                </div>

                {{-- Log do Deploy --}}
                <div class="content-card" id="painelLog" style="display: none; margin-top: var(--space-md);">
                    <div class="content-card__title">Log do Deploy</div>
                    <pre id="logDeploy" style="margin-top: 8px; padding: 12px; border-radius: 6px; background: #1a1a2e; color: #e0e0e0; font-size: 0.78rem; font-family: var(--font-mono); max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;"></pre>
                </div>

                {{-- Upload de Arquivo Avulso --}}
                <div class="content-card" style="margin-top: var(--space-md);">
                    <div class="content-card__title">Enviar Arquivo</div>

                    <div id="blocoEnviarArquivo" style="display: {{ $client->ftp_host ? 'block' : 'none' }};">
                        <p style="font-size: 0.82rem; color: var(--color-text-muted); margin: 8px 0 14px;">
                            Envie um arquivo avulso diretamente para o servidor (ex: .htaccess, robots.txt, etc.)
                        </p>

                        <div class="form-group">
                            <label class="form-label" for="uploadArquivo">Arquivo</label>
                            <div class="upload-drop-zone" id="uploadDropZone" onclick="document.getElementById('uploadArquivo').click()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                <span id="uploadNomeArquivo">Clique ou arraste um arquivo aqui</span>
                                <small style="color: var(--color-text-dim);">Max. 50MB</small>
                            </div>
                            <input type="file" id="uploadArquivo" style="display: none;" onchange="onArquivoSelecionado(this)">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="uploadDestinoPath">Pasta de Destino</label>
                            <div style="display: flex; gap: 8px;">
                                <input type="text" id="uploadDestinoPath" class="form-control"
                                       value="{{ $client->ftp_path ?: '/' }}"
                                       placeholder="/public_html/">
                                <button type="button" class="btn btn-outline btn-sm" onclick="navegarPastasUpload('/')"
                                        style="white-space: nowrap;" title="Navegar pastas do servidor">
                                    Navegar
                                </button>
                            </div>
                        </div>

                        <button type="button" class="btn btn-primary" id="btnUpload" onclick="enviarArquivo()" style="width: 100%;">
                            Enviar para o Servidor
                        </button>
                    </div>

                    <div id="msgNaoTestadoArquivo" style="display: {{ $client->ftp_host ? 'none' : 'block' }};">
                        <p style="margin-top: 12px; font-size: 0.85rem; color: var(--color-text-muted);">
                            Teste a conexao FTP e confirme o sucesso para habilitar arquivos avulsos.
                        </p>
                    </div>

                    <div id="resultadoUpload" style="margin-top: 10px;"></div>
                </div>
            </div>
        </div>
        </div>{{-- /conteudoDeploy --}}
    @endif

@push('scripts')
<script>
(function() {
    var clientId = {{ $client->id }};
    var baseUrl = '{{ route("site-mae.clientes.deploy", $client) }}';
    var csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    var urlBaixar = '{{ route("site-mae.clientes.deploy.baixar", $client) }}';
    var urlBaixarMiniEngine = '{{ route("site-mae.clientes.deploy.baixar-mini-engine", $client) }}';

    window.baixarSite = function(btn) {
        btn.disabled = true;
        btn.style.opacity = '0.6';
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:spin 1s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg> Aguarde...';

        var status = document.getElementById('statusBaixar');
        status.style.display = 'block';
        status.style.background = 'rgba(99,102,241,0.08)';
        status.style.borderColor = 'rgba(99,102,241,0.25)';
        status.style.color = 'var(--color-primary)';
        status.innerHTML = '<span style="display:inline-flex;align-items:center;gap:8px;">'
            + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:spin 1s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>'
            + 'Compactando o site em ZIP, aguarde...'
            + '</span>';

        // Redirecionar diretamente para a rota de download (GET autenticado com sessao ativa)
        // window.location.href mantem cookies de sessao e dispara o Content-Disposition corretamente
        window.location.href = urlBaixar;

        // Apos 4s reabilitar o botao (o download ja foi iniciado pelo browser)
        setTimeout(function() {
            status.style.background = 'rgba(22,163,74,0.08)';
            status.style.borderColor = 'rgba(22,163,74,0.3)';
            status.style.color = '#16a34a';
            status.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;"><polyline points="20 6 9 17 4 12"/></svg>'
                + 'Download iniciado. O arquivo ZIP sera deletado automaticamente do servidor.';

            btn.disabled = false;
            btn.style.opacity = '1';
            btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Baixar Website (.zip)';
        }, 4000);
    };

    window.baixarMiniEngine = function(btn) {
        btn.disabled = true;
        btn.style.opacity = '0.6';
        btn.textContent = 'Gerando pacote... Aguarde';
        window.location.href = urlBaixarMiniEngine;
        setTimeout(function() {
            btn.disabled = false;
            btn.style.opacity = '1';
            btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> Baixar com Admin (.zip)';
        }, 6000);
    };

    @if($client->status !== 'active')
    window.ativarDeploy = function() {
        @if($client->reseller_id)
        var custo = {{ $client->layout?->activation_credits ?? 1 }};
        var confirmar = confirm(
            'Confirmar ativacao do site "{{ addslashes($client->name) }}"?\n\n' +
            'Isso ira descontar ' + custo + ' credito(s) da conta do revendedor.\n\n' +
            'Esta acao nao pode ser desfeita.'
        );
        @else
        var confirmar = confirm('Confirmar ativacao do site "{{ addslashes($client->name) }}"?');
        @endif

        if (!confirmar) return;

        var btn = document.getElementById('btnAtivarWebsite');
        var msg = document.getElementById('msgAtivacao');
        btn.disabled = true;
        btn.textContent = 'Ativando...';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', baseUrl + '/ativar', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.onload = function() {
            try {
                var res = JSON.parse(xhr.responseText);
                if (res.ok) {
                    msg.style.display = 'block';
                    msg.innerHTML = '<div style="padding:10px;border-radius:6px;font-size:0.85rem;background:rgba(22,163,74,0.1);color:#16a34a;border:1px solid rgba(22,163,74,0.3);">Site ativado com sucesso! Liberando ferramentas...</div>';
                    setTimeout(function() {
                        document.getElementById('painelAtivacao').style.display = 'none';
                        document.getElementById('conteudoDeploy').style.display = 'block';
                    }, 1200);
                } else {
                    msg.style.display = 'block';
                    msg.innerHTML = '<div style="padding:10px;border-radius:6px;font-size:0.85rem;background:rgba(220,38,38,0.1);color:#dc2626;border:1px solid rgba(220,38,38,0.3);">' + (res.mensagem || 'Erro ao ativar.') + '</div>';
                    btn.disabled = false;
                    btn.textContent = 'Ativar Website';
                }
            } catch(e) {
                btn.disabled = false;
                btn.textContent = 'Ativar Website';
            }
        };
        xhr.onerror = function() {
            btn.disabled = false;
            btn.textContent = 'Ativar Website';
        };
        xhr.send(JSON.stringify({}));
    };
    @endif


    function getCredenciaisForm() {
        return {
            ftp_host: document.getElementById('ftp_host') ? document.getElementById('ftp_host').value : '',
            ftp_port: document.getElementById('ftp_port') ? document.getElementById('ftp_port').value : '',
            ftp_username: document.getElementById('ftp_username') ? document.getElementById('ftp_username').value : '',
            ftp_password: document.getElementById('ftp_password') ? document.getElementById('ftp_password').value : '',
            ftp_ssl: document.getElementById('ftp_ssl') ? document.getElementById('ftp_ssl').value : '',
            ftp_path: document.getElementById('ftp_path') ? document.getElementById('ftp_path').value : ''
        };
    }

    function ajax(url, dados, callback) {
        dados = dados || {};
        var creds = getCredenciaisForm();
        for (var key in creds) {
            if (dados[key] === undefined) { dados[key] = creds[key]; }
        }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var parsed = JSON.parse(xhr.responseText);
                    callback(parsed);
                } catch(e) {
                    callback({ ok: false, mensagem: 'Ocorreu um erro no servidor. A resposta nao foi em JSON válido (provavelmente um timeout ou erro fatal).' });
                    console.error('Resposta bruta: ', xhr.responseText);
                }
            } else {
                callback({ ok: false, mensagem: 'Erro do servidor: ' + xhr.status });
            }
        };
        xhr.onerror = function() {
            callback({ ok: false, mensagem: 'Erro de conexao.' });
        };
        xhr.send(JSON.stringify(dados));
    }

    function mostrarResultado(elementoId, ok, mensagem) {
        var el = document.getElementById(elementoId);
        el.style.display = 'block';
        el.innerHTML = '<div style="padding: 10px; border-radius: 6px; font-size: 0.85rem; background: ' +
            (ok ? 'rgba(22,163,74,0.1); color: #16a34a; border: 1px solid rgba(22,163,74,0.3)' : 'rgba(220,38,38,0.1); color: #dc2626; border: 1px solid rgba(220,38,38,0.3)') +
            ';">' + mensagem + '</div>';
    }

    // Testar Conexao
    window.testarConexao = function() {
        var host = document.getElementById('ftp_host').value;
        var porta = document.getElementById('ftp_port').value;
        var usuario = document.getElementById('ftp_username').value;
        var senha = document.getElementById('ftp_password').value;
        var ssl = document.getElementById('ftp_ssl').value;
        var path = document.getElementById('ftp_path').value;

        if (!host || !usuario) {
            mostrarResultado('resultadoTeste', false, 'Preencha Servidor (Host) e Usuario no formulario antes de testar.');
            return;
        }

        var btn = document.getElementById('btnTestarConexao');
        var textoOriginal = btn.textContent;
        btn.textContent = 'Testando...';
        btn.disabled = true;

        ajax(baseUrl + '/testar', {}, function(res) {
            mostrarResultado('resultadoTeste', res.ok, res.mensagem);
            btn.textContent = textoOriginal;
            btn.disabled = false;

            var bPub = document.getElementById('blocoPublicarItens');
            var mPub = document.getElementById('msgNaoTestadoPublicar');
            var bArq = document.getElementById('blocoEnviarArquivo');
            var mArq = document.getElementById('msgNaoTestadoArquivo');
            var actsGer = document.getElementById('acoesGerenciador');

            if (res.ok) {
                if(bPub) bPub.style.display = 'block';
                if(mPub) mPub.style.display = 'none';
                if(bArq) bArq.style.display = 'block';
                if(mArq) mArq.style.display = 'none';
                if(actsGer) actsGer.style.display = 'flex';
            } else {
                if(bPub) bPub.style.display = 'none';
                if(mPub) mPub.style.display = 'block';
                if(bArq) bArq.style.display = 'none';
                if(mArq) mArq.style.display = 'block';
                if(actsGer) actsGer.style.display = 'none';
            }
        });
    };

    // ======= Gerenciador de Arquivos =======
    var caminhoAtualGerenciador = '/';
    var __itensGerenciador = [];
    var __crumbsGerenciador = [];

    // Abrir navegador partindo do ftp_path atual (ou /)
    window.abrirNavegador = function() {
        var inicio = (document.getElementById('ftp_path').value || '/').trim() || '/';
        navegarPastas(inicio);
        // Scroll ate o painel
        setTimeout(function() {
            var el = document.getElementById('painelPastas');
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
    };

    // Usar o caminho do gerenciador como Pasta Remota e fechar
    window.usarPastaAtual = function() {
        var el = document.getElementById('ftp_path');
        if (el) el.value = caminhoAtualGerenciador;
        document.getElementById('painelPastas').style.display = 'none';
        document.getElementById('bannerUsarPasta').style.display = 'none';
    };

    function mostrarMsgGerenciador(ok, mensagem) {
        var el = document.getElementById('msgGerenciador');
        el.style.display = 'block';
        el.style.background = ok ? 'rgba(22,163,74,0.1)' : 'rgba(220,38,38,0.1)';
        el.style.color      = ok ? '#16a34a' : '#dc2626';
        el.style.border     = '1px solid ' + (ok ? 'rgba(22,163,74,0.3)' : 'rgba(220,38,38,0.3)');
        el.textContent = mensagem;
        setTimeout(function() { el.style.display = 'none'; }, 4000);
    }

    // Chamados via indice — sem aspas escapadas
    window.__gerNav = function(i) { navegarPastas(__itensGerenciador[i].caminho); };
    window.__gerDel = function(i) {
        var item = __itensGerenciador[i];
        if (!confirm('Excluir "' + item.nome + '"' + (item.tipo === 'pasta' ? ' e todo o seu conteudo' : '') + '?\nEsta acao nao pode ser desfeita.')) return;
        ajax(baseUrl + '/deletar-item', { caminho: item.caminho, tipo: item.tipo }, function(res) {
            mostrarMsgGerenciador(res.ok, res.mensagem);
            if (res.ok) navegarPastas(caminhoAtualGerenciador);
        });
    };
    window.__gerSel = function(i) { // Selecionar pasta para usar como Pasta Remota
        var caminho = __itensGerenciador[i].caminho;
        var el = document.getElementById('ftp_path');
        if (el) { el.value = caminho; }
        document.getElementById('painelPastas').style.display = 'none';
    };
    window.__crumbNav = function(i) { navegarPastas(__crumbsGerenciador[i]); };

    function iconePasta() {
        return '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;color:#f59e0b"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
    }
    function iconeArquivo() {
        return '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;color:var(--color-text-muted)"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>';
    }

    // Navegar e listar conteudo da pasta
    window.navegarPastas = function(caminho) {
        caminhoAtualGerenciador = caminho;
        document.getElementById('painelPastas').style.display = 'block';
        document.getElementById('listaPastas').innerHTML = '<div style="padding:16px;text-align:center;color:var(--color-text-dim)">Carregando...</div>';

        // Banner com caminho atual
        var banner = document.getElementById('bannerUsarPasta');
        var txtCaminho = document.getElementById('txtCaminhoAtual');
        if (banner) { banner.style.display = 'flex'; }
        if (txtCaminho) { txtCaminho.textContent = caminho; }

        ajax(baseUrl + '/listar-pastas', { caminho: caminho }, function(res) {
            // Breadcrumb usando indices
            var partes = caminho.split('/').filter(Boolean);
            __crumbsGerenciador = ['/'];
            var acc = '';
            partes.forEach(function(p) { acc += '/' + p; __crumbsGerenciador.push(acc); });

            var crumbHtml = '<a href="#" onclick="__crumbNav(0);return false;" style="color:var(--color-primary);">/</a>';
            partes.forEach(function(p, i) {
                crumbHtml += ' / <a href="#" onclick="__crumbNav(' + (i + 1) + ');return false;" style="color:var(--color-primary);">' + p + '</a>';
            });
            document.getElementById('breadcrumbPastas').innerHTML = crumbHtml;

            if (!res.ok) {
                document.getElementById('listaPastas').innerHTML = '<div style="padding:12px;color:#dc2626;font-size:0.82rem;">' + res.mensagem + '</div>';
                return;
            }

            __itensGerenciador = res.itens || res.pastas || [];

            if (__itensGerenciador.length === 0) {
                document.getElementById('listaPastas').innerHTML = '<div style="padding:12px;font-size:0.85rem;color:var(--color-text-dim)">Pasta vazia</div>';
                return;
            }

            var html = '';
            __itensGerenciador.forEach(function(item, i) {
                var ePasta  = item.tipo === 'pasta';
                var icone   = ePasta ? iconePasta() : iconeArquivo();
                var tamanho = item.tamanho ? '<span style="font-size:0.74rem;color:var(--color-text-dim);margin-left:6px;">' + item.tamanho + '</span>' : '';
                var nomeEl  = ePasta
                    ? '<span style="flex:1;font-size:0.85rem;cursor:pointer;" onclick="__gerNav(' + i + ')">' + icone + item.nome + tamanho + '</span>'
                    : '<span style="flex:1;font-size:0.85rem;">' + icone + item.nome + tamanho + '</span>';
                var btnSel  = ePasta
                    ? '<button type="button" class="btn btn-sm btn-outline" onclick="__gerSel(' + i + ')" style="font-size:0.73rem;margin-right:4px;">Selecionar</button>'
                    : '';
                var btnDel  = '<button type="button" class="btn btn-sm" onclick="__gerDel(' + i + ')" style="font-size:0.73rem;color:#dc2626;border-color:#dc2626;padding:2px 8px;">Excluir</button>';

                html += '<div style="display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--color-border);" ' +
                        'onmouseover="this.style.background=\'var(--color-bg-subtle)\'" onmouseout="this.style.background=\'transparent\'">' +
                        nomeEl +
                        '<div style="display:flex;gap:4px;flex-shrink:0;">' + btnSel + btnDel + '</div>' +
                        '</div>';
            });
            document.getElementById('listaPastas').innerHTML = html;
        });
    };

    window.atualizarGerenciador = function() { navegarPastas(caminhoAtualGerenciador); };

    window.criarPasta = function() {
        var nome = prompt('Nome da nova pasta:');
        if (!nome || !nome.trim()) return;
        nome = nome.trim().replace(/[^a-zA-Z0-9_\-\.]/g, '_');
        var caminho = caminhoAtualGerenciador.replace(/\/$/, '') + '/' + nome;
        ajax(baseUrl + '/criar-pasta', { caminho: caminho }, function(res) {
            mostrarMsgGerenciador(res.ok, res.mensagem);
            if (res.ok) navegarPastas(caminhoAtualGerenciador);
        });
    };

    window.deletarItem = function(caminho, tipo, nome) { // mantido por compatibilidade
        if (!confirm('Excluir "' + nome + '"?')) return;
        ajax(baseUrl + '/deletar-item', { caminho: caminho, tipo: tipo }, function(res) {
            mostrarMsgGerenciador(res.ok, res.mensagem);
            if (res.ok) navegarPastas(caminhoAtualGerenciador);
        });
    };

    window.enviarArquivoGerenciador = function(input) {
        if (!input.files[0]) return;
        var form = new FormData();
        form.append('arquivo', input.files[0]);
        form.append('destino_path', caminhoAtualGerenciador);
        form.append('_token', csrfToken);
        
        var creds = getCredenciaisForm();
        for (var key in creds) { form.append(key, creds[key]); }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', baseUrl + '/upload-arquivo', true);
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.onload = function() {
            input.value = '';
            try {
                var res = JSON.parse(xhr.responseText);
                mostrarMsgGerenciador(res.ok, res.mensagem);
                if (res.ok) navegarPastas(caminhoAtualGerenciador);
            } catch(e) { mostrarMsgGerenciador(false, 'Erro ao processar resposta.'); }
        };
        xhr.send(form);
    };

    window.navegarPastasUpload = function(caminho) { navegarPastas(caminho); };
    window.selecionarPasta     = function(caminho) {
        var el = document.getElementById('ftp_path');
        if (el) el.value = caminho;
        document.getElementById('painelPastas').style.display = 'none';
    };




    // Publicar Site
    window.publicarSite = function() {
        var modo = document.querySelector('input[name="deploy_modo"]:checked').value;

        var mensagemConfirm = {
            'modificados': 'Deseja publicar apenas os arquivos modificados no servidor?',
            'tudo': 'Deseja enviar todos os arquivos? Isso ira sobrescrever os existentes na pasta remota.',
            'limpar': 'ATENCAO: Isso ira REMOVER todos os arquivos da pasta remota antes de enviar. Deseja continuar?'
        }[modo];

        if (!confirm(mensagemConfirm)) return;

        if (modo === 'limpar' && !confirm('Tem certeza? Esta acao nao pode ser desfeita.')) return;

        var btn = document.getElementById('btnPublicar');
        var painelLog = document.getElementById('painelLog');
        var logEl = document.getElementById('logDeploy');

        btn.textContent = 'Publicando...';
        btn.disabled = true;
        painelLog.style.display = 'block';
        logEl.textContent = 'Iniciando deploy (modo: ' + modo + ')...\n';

        ajax(baseUrl + '/publicar', { modo: modo }, function(res) {
            btn.disabled = false;
            btn.textContent = 'Publicar Site';

            if (res.log && res.log.length > 0) {
                logEl.textContent = res.log.join('\n');
            }

            if (res.ok) {
                btn.style.background = '#16a34a';
                btn.textContent = 'Deploy Concluido!';
                setTimeout(function() {
                    btn.style.background = '';
                    btn.textContent = 'Publicar Site';
                    location.reload();
                }, 2000);
            } else {
                mostrarResultado('resultadoTeste', false, res.mensagem);
            }
        });
    };
    // Upload de arquivo avulso
    window.onArquivoSelecionado = function(input) {
        var nome = input.files[0] ? input.files[0].name : 'Clique ou arraste um arquivo aqui';
        document.getElementById('uploadNomeArquivo').textContent = nome;
        document.getElementById('uploadDropZone').classList.toggle('upload-drop-zone--selecionado', !!input.files[0]);
    };

    window.enviarArquivo = function() {
        var input = document.getElementById('uploadArquivo');
        if (!input.files[0]) {
            alert('Selecione um arquivo primeiro.');
            return;
        }

        var btn = document.getElementById('btnUpload');
        var resultado = document.getElementById('resultadoUpload');
        var destino = document.getElementById('uploadDestinoPath').value || '/';

        var form = new FormData();
        form.append('arquivo', input.files[0]);
        form.append('destino_path', destino);
        form.append('_token', csrfToken);

        var creds = getCredenciaisForm();
        for (var key in creds) { form.append(key, creds[key]); }

        btn.textContent = 'Enviando...';
        btn.disabled = true;
        resultado.innerHTML = '';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', baseUrl + '/upload-arquivo', true);
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.onload = function() {
            btn.disabled = false;
            btn.textContent = 'Enviar para o Servidor';
            try {
                var res = JSON.parse(xhr.responseText);
                mostrarResultado('resultadoUpload', res.ok, res.mensagem);
                if (res.ok) {
                    input.value = '';
                    document.getElementById('uploadNomeArquivo').textContent = 'Clique ou arraste um arquivo aqui';
                    document.getElementById('uploadDropZone').classList.remove('upload-drop-zone--selecionado');
                }
            } catch(e) {
                mostrarResultado('resultadoUpload', false, 'Erro ao processar resposta do servidor.');
            }
        };
        xhr.onerror = function() {
            btn.disabled = false;
            btn.textContent = 'Enviar para o Servidor';
            mostrarResultado('resultadoUpload', false, 'Erro de conexao.');
        };
        xhr.send(form);
    };

    // Drag and drop no drop zone
    (function() {
        var dropZone = document.getElementById('uploadDropZone');
        if (!dropZone) return;
        dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('upload-drop-zone--drag'); });
        dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('upload-drop-zone--drag'); });
        dropZone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropZone.classList.remove('upload-drop-zone--drag');
            var files = e.dataTransfer.files;
            if (files[0]) {
                document.getElementById('uploadArquivo').files = files;
                window.onArquivoSelecionado(document.getElementById('uploadArquivo'));
            }
        });
    })();
})();
</script>
@endpush

@push('styles')
<style>
    .form-group { margin-bottom: 14px; }
    .form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
    .form-error { color: #dc2626; font-size: 0.8rem; margin-top: 4px; }

    /* Seletor de modo de deploy */
    .deploy-mode-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1.5px solid var(--color-border);
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    .deploy-mode-option:has(input:checked) {
        border-color: var(--color-primary);
        background: rgba(var(--color-primary-rgb, 139,105,20), 0.05);
    }
    .deploy-mode-option input[type="radio"] {
        margin-top: 3px;
        accent-color: var(--color-primary);
        flex-shrink: 0;
    }
    .deploy-mode-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .deploy-mode-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text);
    }
    .deploy-mode-desc {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        line-height: 1.4;
    }
    /* Drop zone upload */
    .upload-drop-zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 20px 16px;
        border: 2px dashed var(--color-border);
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        color: var(--color-text-muted);
        font-size: 0.85rem;
        transition: border-color 0.2s, background 0.2s;
        user-select: none;
    }
    .upload-drop-zone:hover,
    .upload-drop-zone--drag {
        border-color: var(--color-primary);
        background: rgba(var(--color-primary-rgb, 139,105,20), 0.04);
    }
    .upload-drop-zone--selecionado {
        border-color: var(--color-primary);
        color: var(--color-text);
    }
</style>
@endpush
@endsection