@extends('layouts.app')
@section('title', 'Integrações')

@section('content')

<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

    {{-- ═══ SPX EXPRESS ═══ --}}
    <div class="rounded-2xl overflow-hidden" style="background:#1e293b;border:1px solid #334155">

        {{-- Header --}}
        <div class="px-5 py-4 flex items-center gap-4" style="background:#0f172a;border-bottom:1px solid #334155">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#EE4D2D20;border:1px solid #EE4D2D40">
                <svg class="w-5 h-5" style="color:#EE4D2D" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                </svg>
            </div>
            <div class="flex-1">
                <h2 class="text-white font-bold text-sm">SPX Express (Shopee)</h2>
                <p class="text-xs" style="color:#64748b">Portal de Agências · sp.spx.shopee.com.br</p>
            </div>
            <div>
                @if($spx && $spx->ultimo_status === 'ok')
                    <span class="text-xs font-semibold px-3 py-1 rounded-full" style="background:#14532d;color:#86efac">● Conectado</span>
                @elseif($spx && $spx->ultimo_status === 'erro')
                    <span class="text-xs font-semibold px-3 py-1 rounded-full" style="background:#7f1d1d;color:#fca5a5">● Erro</span>
                @elseif($spx)
                    <span class="text-xs font-semibold px-3 py-1 rounded-full" style="background:#1e293b;color:#94a3b8;border:1px solid #334155">● Pendente</span>
                @else
                    <span class="text-xs font-semibold px-3 py-1 rounded-full" style="background:#1e293b;color:#64748b;border:1px solid #334155">○ Não configurado</span>
                @endif
            </div>
        </div>

        {{-- Form credenciais --}}
        <div class="p-5">
            @if(session('success'))
            <div class="mb-4 px-4 py-2 rounded-xl text-sm font-medium" style="background:#14532d40;border:1px solid #16a34a60;color:#86efac">
                {{ session('success') }}
            </div>
            @endif

            <form method="POST" action="{{ route('integracoes.spx.salvar') }}" class="space-y-3">
                @csrf
                <div>
                    <label class="block text-xs font-medium mb-1" style="color:#94a3b8">Login (e-mail ou usuário SPX)</label>
                    <input type="text" name="login"
                        value="{{ $spx?->login ?? '' }}"
                        placeholder="seu@email.com ou usuário SPX"
                        autocomplete="off"
                        style="width:100%;background:#0f172a;border:1px solid #475569;color:#f1f5f9;border-radius:8px;padding:9px 12px;font-size:14px;outline:none">
                    @error('login')<p class="text-xs mt-1" style="color:#f87171">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-xs font-medium mb-1" style="color:#94a3b8">Senha SPX</label>
                    <input type="password" name="senha"
                        placeholder="Sua senha do portal SPX"
                        autocomplete="new-password"
                        style="width:100%;background:#0f172a;border:1px solid #475569;color:#f1f5f9;border-radius:8px;padding:9px 12px;font-size:14px;outline:none">
                    @error('senha')<p class="text-xs mt-1" style="color:#f87171">{{ $message }}</p>@enderror
                </div>

                <div class="p-3 rounded-xl text-xs" style="background:#0f172a;border:1px solid #1e293b;color:#64748b">
                    🔒 Sua senha é <strong style="color:#94a3b8">criptografada</strong> antes de ser salva e nunca fica visível no sistema.
                </div>

                <div class="flex gap-3">
                    <button type="submit"
                        style="flex:1;background:#16a34a;color:#fff;border:none;border-radius:8px;padding:9px;font-size:14px;font-weight:600;cursor:pointer">
                        💾 Salvar Credenciais
                    </button>
                    @if($spx)
                    <button type="button" onclick="testarSpx()"
                        style="flex:1;background:#1d4ed8;color:#fff;border:none;border-radius:8px;padding:9px;font-size:14px;font-weight:600;cursor:pointer"
                        id="btn-testar">
                        🔌 Testar Conexão
                    </button>
                    @endif
                </div>
            </form>

            {{-- Resultado do teste --}}
            <div id="teste-resultado" class="mt-3 hidden"></div>

            {{-- Info da última sync --}}
            @if($spx)
            <div class="mt-4 pt-4" style="border-top:1px solid #334155">
                <p class="text-xs font-semibold mb-2 uppercase tracking-wider" style="color:#64748b">Informações</p>
                <div class="space-y-1 text-xs" style="color:#94a3b8">
                    <div class="flex justify-between">
                        <span>Último teste:</span>
                        <span style="color:#f1f5f9">{{ $spx->ultimo_sync ? $spx->ultimo_sync->format('d/m/Y H:i') : 'Nunca' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Status:</span>
                        <span style="color:{{ $spx->ultimo_status === 'ok' ? '#86efac' : ($spx->ultimo_status === 'erro' ? '#fca5a5' : '#94a3b8') }}">
                            {{ ucfirst($spx->ultimo_status ?? 'pendente') }}
                        </span>
                    </div>
                    @if($spx->ultimo_erro)
                    <div class="mt-2 p-2 rounded-lg text-xs" style="background:#7f1d1d30;color:#fca5a5;border:1px solid #7f1d1d50">
                        {{ $spx->ultimo_erro }}
                    </div>
                    @endif
                </div>

                {{-- Painel de dados SPX (carregado via AJAX) --}}
                @if($spx->ultimo_status === 'ok')
                <div class="mt-4">
                    <button onclick="carregarDadosSpx()"
                        style="width:100%;background:#0f172a;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:8px;font-size:13px;cursor:pointer"
                        id="btn-dados">
                        📦 Carregar dados do portal SPX
                    </button>
                    <div id="dados-spx" class="mt-3 hidden"></div>
                </div>
                @endif

                <form method="POST" action="{{ route('integracoes.spx.desconectar') }}" class="mt-3">
                    @csrf @method('DELETE')
                    <button type="submit"
                        style="width:100%;background:transparent;border:1px solid #334155;color:#64748b;border-radius:8px;padding:7px;font-size:12px;cursor:pointer"
                        onclick="return confirm('Desconectar do SPX?')">
                        Desconectar
                    </button>
                </form>
            </div>
            @endif
        </div>
    </div>

    {{-- ═══ OUTRAS INTEGRAÇÕES (em breve) ═══ --}}
    <div class="rounded-2xl p-5" style="background:#1e293b;border:1px solid #334155;opacity:.5">
        <div class="text-center py-8">
            <div class="text-3xl mb-3">🔌</div>
            <h3 class="text-white font-semibold text-sm mb-1">Mais integrações em breve</h3>
            <p class="text-xs" style="color:#64748b">Jadlog, Melhor Envio, J&T Express, ANJUN...</p>
        </div>
    </div>

</div>

<script>
async function testarSpx() {
    const btn = document.getElementById('btn-testar');
    const resultado = document.getElementById('teste-resultado');

    btn.disabled = true;
    btn.textContent = '⏳ Testando...';
    resultado.className = 'mt-3';
    resultado.innerHTML = '<div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:12px;text-align:center;font-size:13px;color:#94a3b8">Conectando ao portal SPX...</div>';

    try {
        const r = await fetch('{{ route("integracoes.spx.testar") }}', {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        });
        const d = await r.json();

        if (d.ok) {
            resultado.innerHTML = `
                <div style="background:#14532d30;border:1px solid #16a34a60;border-radius:8px;padding:12px;font-size:13px;color:#86efac">
                    ${d.mensagem}
                </div>`;
            setTimeout(() => location.reload(), 1500);
        } else {
            let detalhe = d.erro || 'Erro desconhecido';
            if (d.status) detalhe += ` (HTTP ${d.status})`;
            if (d.raw) detalhe += '<br><small style="color:#64748b;font-family:monospace">' + JSON.stringify(d.raw).substring(0,200) + '</small>';

            resultado.innerHTML = `
                <div style="background:#7f1d1d30;border:1px solid #7f1d1d60;border-radius:8px;padding:12px;font-size:13px;color:#fca5a5">
                    ❌ ${detalhe}
                </div>`;
        }
    } catch(e) {
        resultado.innerHTML = `<div style="background:#7f1d1d30;border:1px solid #7f1d1d60;border-radius:8px;padding:12px;font-size:13px;color:#fca5a5">❌ ${e.message}</div>`;
    }

    btn.disabled = false;
    btn.textContent = '🔌 Testar Conexão';
}

async function carregarDadosSpx() {
    const btn = document.getElementById('btn-dados');
    const div = document.getElementById('dados-spx');

    btn.disabled = true;
    btn.textContent = '⏳ Carregando...';
    div.className = 'mt-3';

    try {
        const r = await fetch('{{ route("integracoes.spx.dados") }}', {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        });
        const d = await r.json();

        if (d.ok) {
            const p = d.pendentes || [];
            const resumo = d.resumo || {};
            const info = d.info_ponto || {};

            div.innerHTML = `
                <div style="background:#0f172a;border:1px solid #334155;border-radius:10px;padding:14px">
                    ${info.name ? `<p class="text-sm font-semibold mb-3" style="color:#f1f5f9">📍 ${info.name}</p>` : ''}
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px">
                        <div style="background:#1e293b;border-radius:8px;padding:10px;text-align:center">
                            <div style="font-size:22px;font-weight:700;color:#22c55e">${d.total_pendentes}</div>
                            <div style="font-size:11px;color:#64748b">Pacotes no ponto</div>
                        </div>
                        <div style="background:#1e293b;border-radius:8px;padding:10px;text-align:center">
                            <div style="font-size:22px;font-weight:700;color:#3b82f6">${resumo.checkin_count ?? resumo.total_received ?? '—'}</div>
                            <div style="font-size:11px;color:#64748b">Recebidos hoje</div>
                        </div>
                    </div>
                    ${p.length > 0 ? `
                        <p style="font-size:11px;color:#64748b;margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em">Pacotes armazenados</p>
                        <div style="max-height:160px;overflow-y:auto;space-y:4px">
                            ${p.slice(0,10).map(pkg => `
                                <div style="display:flex;align-items:center;gap:8px;padding:6px 8px;background:#1e293b;border-radius:6px;margin-bottom:4px">
                                    <span style="font-family:monospace;font-size:11px;color:#94a3b8;flex:1">${pkg.tracking_number ?? pkg.parcel_no ?? pkg.id ?? '—'}</span>
                                    <span style="font-size:10px;color:#64748b">${pkg.status ?? ''}</span>
                                </div>
                            `).join('')}
                            ${p.length > 10 ? `<p style="font-size:11px;color:#64748b;text-align:center;padding:4px">+ ${p.length-10} mais...</p>` : ''}
                        </div>
                    ` : '<p style="font-size:12px;color:#64748b;text-align:center;padding:8px">Sem dados retornados pelo portal SPX.<br><small>Os endpoints podem variar — abra o F12 no portal SPX e me envie as URLs das requisições.</small></p>'}
                </div>`;
        } else {
            div.innerHTML = `<div style="background:#7f1d1d30;border:1px solid #7f1d1d50;border-radius:8px;padding:12px;font-size:13px;color:#fca5a5">❌ ${d.erro}</div>`;
        }
    } catch(e) {
        div.innerHTML = `<div style="background:#7f1d1d30;border:1px solid #7f1d1d50;border-radius:8px;padding:12px;font-size:13px;color:#fca5a5">❌ ${e.message}</div>`;
    }

    btn.disabled = false;
    btn.textContent = '🔄 Atualizar dados SPX';
}
</script>

@endsection