@extends('portal.layout')
@section('title', 'Data Integrations — Report #'.str_pad($report->id, 5, '0', STR_PAD_LEFT))

@section('content')
@php
    $score      = $report->feasibility_score ?? 0;
    $scoreColor = $score >= 70 ? 'var(--green)' : ($score >= 40 ? 'var(--yellow)' : 'var(--red)');

    $integrationMeta = [
        'land_record'    => ['label' => 'Land Records',          'icon' => '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>',   'desc' => 'Bhulekh / Bhoomi / Dharani — 7/12 extract, ownership, encumbrances'],
        'rera'           => ['label' => 'RERA Projects',         'icon' => '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/>',                                                                                          'desc' => 'Nearby RERA-registered projects for price & density comparison'],
        'valuation'      => ['label' => 'Property Valuation',    'icon' => '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',                                                                              'desc' => 'Circle rate / ready reckoner & estimated market value'],
        'environmental'  => ['label' => 'Environmental',         'icon' => '<path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76"/><path d="m14 8 4 4-4 4"/>',                   'desc' => 'CRZ, eco-sensitive zones, forest & wildlife clearances (MOEF / NCZMA)'],
        'infrastructure' => ['label' => 'Infrastructure',        'icon' => '<path d="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/>',                                                                              'desc' => 'Metro, highway, SEZ, smart city & airport projects nearby'],
        'flood_risk'     => ['label' => 'Flood & Weather Risk',  'icon' => '<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 17v5"/><path d="M8 17v5"/><path d="M12 17v5"/>',                                                    'desc' => 'NDMA flood zones, IMD rainfall, elevation & composite risk score'],
    ];
@endphp

<div class="report-layout">
@include('portal.partials.report-sidebar')
<div class="report-content">
<div style="max-width:1080px;margin:0 auto;padding:32px 24px;">

    {{-- Header --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap;">
        <div>
            <h1 style="font-size:20px;font-weight:700;">Real-Time Data Integrations</h1>
            <div style="font-size:13px;color:var(--text-secondary);margin-top:4px;">
                {{ $report->address ?? 'Plot' }} &mdash; {{ number_format($report->plot_area_sqm) }} sqm &mdash;
                Score: <span style="color:{{ $scoreColor }};font-weight:600;">{{ $score }}/100</span>
            </div>
        </div>
        <div style="display:flex;gap:8px;flex-shrink:0;">
            <button id="fetchAllBtn" onclick="fetchAll()" class="btn btn-primary" style="font-size:12px;display:inline-flex;align-items:center;gap:6px;">
                <svg id="fetchAllIcon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                <svg id="fetchAllSpinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;animation:spin 1s linear infinite"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                <span id="fetchAllLabel">Fetch All Integrations</span>
            </button>
        </div>
    </div>

    {{-- Integration Cards --}}
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:32px;">
        @foreach($integrationMeta as $type => $meta)
        <div class="card" style="padding:0;overflow:hidden;">
            {{-- Card Header --}}
            <div style="padding:16px 16px 12px;display:flex;align-items:flex-start;gap:12px;">
                <div style="width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(37,99,235,.12);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $meta['icon'] !!}</svg>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:600;">{{ $meta['label'] }}</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.4;">{{ $meta['desc'] }}</div>
                </div>
                {{-- Status badge --}}
                @php $s = $status[$type] ?? ['available' => false]; @endphp
                <span id="badge-{{ $type }}" class="badge {{ $s['available'] ? 'badge-green' : '' }}" style="flex-shrink:0;{{ $s['available'] ? '' : 'background:rgba(255,255,255,.06);color:var(--text-muted);' }}">{{ $s['available'] ? 'Fetched' : 'Pending' }}</span>
            </div>

            {{-- Card Body — Data or Placeholder --}}
            <div id="body-{{ $type }}" style="padding:0 16px 12px;min-height:48px;">
                @if(isset($integrations[$type]) && $integrations[$type]->count())
                    @foreach($integrations[$type] as $item)
                        <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:8px;font-size:12px;">
                            @if($item->summary && is_array($item->summary))
                                @foreach($item->summary as $k => $v)
                                    <div style="display:flex;justify-content:space-between;gap:8px;padding:2px 0;">
                                        <span style="color:var(--text-muted);text-transform:capitalize;">{{ str_replace('_', ' ', $k) }}</span>
                                        <span style="font-weight:500;text-align:right;">
                                            @if(is_bool($v))
                                                {!! $v ? '<span style="color:var(--green);">Yes</span>' : '<span style="color:var(--red);">No</span>' !!}
                                            @elseif(is_numeric($v))
                                                {{ number_format($v, is_float($v) ? 2 : 0) }}
                                            @else
                                                {{ $v }}
                                            @endif
                                        </span>
                                    </div>
                                @endforeach
                            @else
                                <span style="color:var(--text-muted);">Data available — expand for details</span>
                            @endif
                        </div>
                    @endforeach
                @else
                    <div style="color:var(--text-muted);font-size:12px;padding:4px 0;">
                        No data yet. Click <strong>Fetch</strong> to query live sources.
                    </div>
                @endif
            </div>

            {{-- Card Footer --}}
            <div style="padding:8px 16px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
                @if($s['available'] && ($s['updated_at'] ?? null))
                    <span style="font-size:11px;color:var(--text-muted);">Updated {{ \Carbon\Carbon::parse($s['updated_at'])->diffForHumans() }}</span>
                @else
                    <span></span>
                @endif
                <button id="fetchBtn-{{ $type }}" onclick="fetchSingle('{{ $type }}')"
                        class="btn btn-secondary" style="font-size:11px;padding:5px 12px;display:inline-flex;align-items:center;gap:5px;">
                    <svg class="fetch-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                    <svg class="fetch-spinner" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;animation:spin 1s linear infinite"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                    <span class="fetch-label">{{ $s['available'] ? 'Refresh' : 'Fetch' }}</span>
                </button>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Integration Summary Panel --}}
    @if($integrations->count())
    <div class="card" style="padding:20px;">
        <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Integration Summary</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;">
            @foreach($integrationMeta as $type => $meta)
                @php $count = isset($integrations[$type]) ? $integrations[$type]->count() : 0; @endphp
                <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;">
                    <div style="font-size:20px;font-weight:700;color:{{ $count ? '#60a5fa' : 'var(--text-muted)' }};">{{ $count }}</div>
                    <div style="font-size:11px;color:var(--text-secondary);margin-top:2px;">{{ $meta['label'] }}</div>
                </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Toast notification --}}
    <div id="toast" style="position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:500;z-index:200;display:none;transition:opacity .3s;"></div>
</div>
</div>
</div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
</style>

<script>
(function(){
    const CSRF   = '{{ csrf_token() }}';
    const URL_ALL    = '{{ route("portal.integrations.enrich", $report->id) }}';
    const URL_SINGLE = '{{ route("portal.integrations.single", [$report->id, "__TYPE__"]) }}';

    let toastTimer = null;

    function showToast(msg, type) {
        const el = document.getElementById('toast');
        el.textContent = msg;
        if (type === 'error') {
            el.style.background = 'rgba(239,68,68,.15)';
            el.style.color = '#ef4444';
            el.style.border = '1px solid rgba(239,68,68,.3)';
        } else {
            el.style.background = 'rgba(34,197,94,.15)';
            el.style.color = '#22c55e';
            el.style.border = '1px solid rgba(34,197,94,.3)';
        }
        el.style.display = 'block';
        el.style.opacity = '1';
        clearTimeout(toastTimer);
        toastTimer = setTimeout(function(){ el.style.opacity = '0'; setTimeout(function(){ el.style.display = 'none'; }, 300); }, 4000);
    }

    window.fetchAll = async function() {
        const btn = document.getElementById('fetchAllBtn');
        const icon = document.getElementById('fetchAllIcon');
        const spinner = document.getElementById('fetchAllSpinner');
        const label = document.getElementById('fetchAllLabel');

        btn.disabled = true;
        icon.style.display = 'none';
        spinner.style.display = '';
        label.textContent = 'Fetching\u2026';

        try {
            const res = await fetch(URL_ALL, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
            });
            const data = await res.json();
            if (data.success) {
                showToast('All integrations fetched successfully.', 'success');
                setTimeout(function(){ location.reload(); }, 1500);
            } else {
                showToast('Some integrations failed.', 'error');
            }
        } catch (e) {
            showToast('Network error: ' + e.message, 'error');
        } finally {
            btn.disabled = false;
            icon.style.display = '';
            spinner.style.display = 'none';
            label.textContent = 'Fetch All Integrations';
        }
    };

    window.fetchSingle = async function(type) {
        const btn = document.getElementById('fetchBtn-' + type);
        const icon = btn.querySelector('.fetch-icon');
        const spinner = btn.querySelector('.fetch-spinner');
        const label = btn.querySelector('.fetch-label');

        btn.disabled = true;
        icon.style.display = 'none';
        spinner.style.display = '';
        label.textContent = 'Fetching\u2026';

        try {
            const url = URL_SINGLE.replace('__TYPE__', type);
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
            });
            const data = await res.json();
            if (data.success) {
                showToast(type.replace(/_/g, ' ') + ' fetched.', 'success');
                setTimeout(function(){ location.reload(); }, 1200);
            } else {
                showToast('Failed: ' + (data.error || 'unknown'), 'error');
            }
        } catch (e) {
            showToast('Network error: ' + e.message, 'error');
        } finally {
            btn.disabled = false;
            icon.style.display = '';
            spinner.style.display = 'none';
            label.textContent = 'Refresh';
        }
    };
})();
</script>
@endsection