@extends('layouts.app')

@section('title', 'Integração Portais (ZAP, VivaReal, OLX, Imovelweb) - NT Imobi AI')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">

    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900">🌐 Central de Integração com Portais</h1>
            <p class="text-sm text-slate-500">Exportação automática via Feed XML (ZAP, VivaReal, OLX e Imovelweb) e recebimento de Leads via Webhook.</p>
        </div>
        <a href="{{ route('admin.properties.index') }}" class="bg-slate-200 hover:bg-slate-300 text-slate-800 font-semibold px-4 py-2 rounded-md text-sm">
            ← Voltar para Imóveis
        </a>
    </div>

    <!-- Resumo de Métricas dos Portais -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-xs font-bold text-slate-500 uppercase">Imóveis no Feed XML</span>
            <div class="text-2xl font-extrabold text-slate-900 mt-1">
                {{ $stats['exported_count'] }} <span class="text-xs font-normal text-slate-500">/ {{ $stats['total_available'] }} disponíveis</span>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-xs font-bold text-slate-500 uppercase">Leads ZAP / VivaReal</span>
            <div class="text-2xl font-extrabold text-amber-600 mt-1">{{ $stats['leads_zap'] }}</div>
        </div>
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-xs font-bold text-slate-500 uppercase">Leads OLX</span>
            <div class="text-2xl font-extrabold text-purple-600 mt-1">{{ $stats['leads_olx'] }}</div>
        </div>
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
            <span class="text-xs font-bold text-slate-500 uppercase">Leads Imovelweb</span>
            <div class="text-2xl font-extrabold text-blue-600 mt-1">{{ $stats['leads_imovelweb'] }}</div>
        </div>
    </div>

    <!-- Bloco de URLs de Integração (Para copiar e colar nos portais) -->
    <div class="bg-slate-900 text-white p-6 rounded-xl shadow-md space-y-5">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 border-b border-slate-800 pb-4">
            <div>
                <h2 class="text-lg font-bold text-amber-400">Links de Integração (Feeds XML e Webhook)</h2>
                <p class="text-xs text-slate-400">Copie os links abaixo e informe no painel comercial do respectivo portal imobiliário.</p>
            </div>
            <form action="{{ route('admin.portals.settings') }}" method="POST" onsubmit="return confirm('Gerar um novo token invalidará o link antigo nos portais até que você atualize lá. Continuar?')">
                @csrf
                <input type="hidden" name="regenerate_token" value="1">
                <button type="submit" class="bg-slate-800 hover:bg-slate-700 text-xs text-slate-300 border border-slate-700 px-3 py-1.5 rounded">
                    🔑 Gerar Novo Token de Segurança
                </button>
            </form>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Feed 1: Grupo OLX / ZAP / VivaReal -->
            <div class="bg-slate-800/90 p-4 rounded-lg border border-slate-700 space-y-2">
                <div class="flex justify-between items-center">
                    <span class="text-xs font-extrabold uppercase text-amber-400">1. XML ZAP / VivaReal / OLX (VrSync)</span>
                    <a href="{{ route('feeds.zap', $settings['token']) }}" target="_blank" class="text-xs text-emerald-400 hover:underline">Abrir XML ↗</a>
                </div>
                <input 
                    type="text" 
                    readonly 
                    onclick="this.select()"
                    value="{{ route('feeds.zap', $settings['token']) }}" 
                    class="w-full bg-slate-950 text-slate-200 font-mono text-xs px-3 py-2 rounded border border-slate-700"
                >
            </div>

            <!-- Feed 2: Imovelweb -->
            <div class="bg-slate-800/90 p-4 rounded-lg border border-slate-700 space-y-2">
                <div class="flex justify-between items-center">
                    <span class="text-xs font-extrabold uppercase text-amber-400">2. XML Imovelweb (OpenNavent)</span>
                    <a href="{{ route('feeds.imovelweb', $settings['token']) }}" target="_blank" class="text-xs text-emerald-400 hover:underline">Abrir XML ↗</a>
                </div>
                <input 
                    type="text" 
                    readonly 
                    onclick="this.select()"
                    value="{{ route('feeds.imovelweb', $settings['token']) }}" 
                    class="w-full bg-slate-950 text-slate-200 font-mono text-xs px-3 py-2 rounded border border-slate-700"
                >
            </div>

            <!-- Webhook Recebedor de Leads -->
            <div class="bg-slate-800/90 p-4 rounded-lg border border-slate-700 space-y-2">
                <div class="flex justify-between items-center">
                    <span class="text-xs font-extrabold uppercase text-emerald-400">3. Webhook Recebedor de Leads (POST)</span>
                    <span class="text-[10px] bg-emerald-950 text-emerald-300 px-2 py-0.5 rounded">Leadbroker</span>
                </div>
                <input 
                    type="text" 
                    readonly 
                    onclick="this.select()"
                    value="{{ route('webhooks.portals.leads', $settings['token']) }}" 
                    class="w-full bg-slate-950 text-slate-200 font-mono text-xs px-3 py-2 rounded border border-slate-700"
                >
            </div>
        </div>
    </div>

    <!-- Configurações do Cabeçalho do XML -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
        <h2 class="text-base font-bold text-slate-900 mb-4 border-b pb-2">Dados da Imobiliária no Cabeçalho do XML</h2>
        <form action="{{ route('admin.portals.settings') }}" method="POST" class="grid grid-cols-1 sm:grid-cols-5 gap-4 items-end">
            @csrf
            <div class="sm:col-span-2">
                <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Nome da Imobiliária (Provider) *</label>
                <input type="text" name="agency_name" value="{{ $settings['agency_name'] ?? '' }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase mb-1">E-mail de Contato *</label>
                <input type="email" name="agency_email" value="{{ $settings['agency_email'] ?? '' }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-700 uppercase mb-1">UF Padrão *</label>
                <input type="text" name="default_state" maxlength="2" value="{{ $settings['default_state'] ?? 'RJ' }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm uppercase">
            </div>
            <button type="submit" class="bg-slate-900 hover:bg-slate-800 text-amber-400 font-bold py-2 px-4 rounded-md text-sm">
                Salvar Cabeçalho
            </button>
        </form>
    </div>

    <!-- Controle Rápido de Quais Imóveis Disponíveis Vão para os Portais -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-x-auto">
        <div class="p-4 border-b border-slate-200">
            <h2 class="text-base font-bold text-slate-900">Controle de Publicação nos Portais (Imóveis Disponíveis)</h2>
        </div>
        <table class="w-full text-left border-collapse text-sm">
            <thead>
                <tr class="bg-slate-100 text-slate-600 uppercase text-xs border-b border-slate-200">
                    <th class="py-3 px-4">Código</th>
                    <th class="py-3 px-4">Título / Localização</th>
                    <th class="py-3 px-4">Tipo</th>
                    <th class="py-3 px-4">Valor</th>
                    <th class="py-3 px-4 text-right">Exportar p/ Portais?</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-200">
                @forelse($properties as $prop)
                    <tr class="hover:bg-slate-50">
                        <td class="py-3 px-4 font-bold text-slate-900">#{{ $prop->code }}</td>
                        <td class="py-3 px-4">
                            <div class="font-medium text-slate-800">{{ $prop->title }}</div>
                            <div class="text-xs text-slate-500">{{ $prop->neighborhood }}, {{ $prop->city }}</div>
                        </td>
                        <td class="py-3 px-4 capitalize">{{ $prop->property_type }} ({{ $prop->business_type }})</td>
                        <td class="py-3 px-4 font-bold">R$ {{ number_format($prop->price, 2, ',', '.') }}</td>
                        <td class="py-3 px-4 text-right">
                            <form action="{{ route('admin.portals.toggle', $prop->id) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <button 
                                    type="submit" 
                                    class="text-xs font-bold px-3 py-1.5 rounded transition {{ $prop->publish_portals ? 'bg-emerald-100 text-emerald-800 hover:bg-emerald-200' : 'bg-slate-200 text-slate-600 hover:bg-slate-300' }}"
                                >
                                    {{ $prop->publish_portals ? '✔ Publicando nos Portais' : '⏸ Pausado nos Portais' }}
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="py-6 text-center text-slate-500">Nenhum imóvel disponível cadastrado.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div>
        {{ $properties->links() }}
    </div>

</div>
@endsection