@extends('layouts.demo10.base')

@section('content')
<div class="min-h-screen p-8">

    {{-- ── Page Header ── --}}
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">RBMS Dashboard</h1>
        <p class="text-sm text-gray-500 mt-1">
            <a href="#" class="hover:underline">Home</a>
            <span class="mx-1">/</span>
            <span>Dashboard</span>
        </p>
    </div>

    {{-- ── Tab Buttons ── --}}
    <div class="flex items-center gap-2 mb-8">
        <button onclick="switchTab('pdo')" id="tab-pdo"
            class="px-5 py-2 rounded-full text-sm font-semibold transition-all bg-blue-100 text-blue-700">
            PDO
        </button>
        <button onclick="switchTab('iri')" id="tab-iri"
            class="px-5 py-2 rounded-full text-sm font-semibold transition-all text-gray-500 hover:bg-gray-200">
            IRI
        </button>
    </div>

    {{-- ══════════════════════════════════════════
         PDO Tab
    ══════════════════════════════════════════ --}}
    <div id="content-pdo">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @forelse($pdo as $indicator)
                <div onclick="openModal({{ $indicator->id }})"
                    class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5
                           hover:shadow-md transition-shadow duration-200 cursor-pointer">

                    {{-- Badge + menu --}}
                    <div class="flex items-center justify-between mb-4">
                        <span class="bg-gray-900 text-white text-xs font-semibold px-3 py-1 rounded-full">
                            PDO-{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                        </span>
                        <button onclick="event.stopPropagation()"
                            class="text-gray-400 hover:text-gray-600 p-1 rounded-md hover:bg-gray-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                <circle cx="5" cy="12" r="1.5"/>
                                <circle cx="12" cy="12" r="1.5"/>
                                <circle cx="19" cy="12" r="1.5"/>
                            </svg>
                        </button>
                    </div>

                    {{-- Title --}}
                    <p class="text-gray-800 text-sm font-semibold leading-snug mb-5">
                        {{ $indicator->name ?: ($indicator->definition ?: 'No title provided.') }}
                    </p>

                    {{-- Stats --}}
                    <div class="space-y-2 border-t border-gray-100 pt-4">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 text-xs">Target</span>
                            <span class="text-gray-800 text-sm font-bold">
                                {{ $indicator->end_target ?? '-' }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 text-xs">Baseline</span>
                            <span class="text-gray-800 text-sm font-bold">
                                {{ $indicator->baseline_value ?? '-' }}
                            </span>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-4 bg-white p-6 rounded-xl border border-gray-200
                            text-center text-gray-500 text-sm">
                    No PDO indicators found.
                </div>
            @endforelse
        </div>
    </div>

    {{-- ══════════════════════════════════════════
         IRI Tab  (hidden by default)
    ══════════════════════════════════════════ --}}
    <div id="content-iri" class="hidden">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @forelse($iri as $indicator)
                <div onclick="openModal({{ $indicator->id }})"
                    class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5
                           hover:shadow-md transition-shadow duration-200 cursor-pointer">

                    {{-- Badge + menu --}}
                    <div class="flex items-center justify-between mb-4">
                        <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
                            IRI-{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                        </span>
                        <button onclick="event.stopPropagation()"
                            class="text-gray-400 hover:text-gray-600 p-1 rounded-md hover:bg-gray-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                <circle cx="5" cy="12" r="1.5"/>
                                <circle cx="12" cy="12" r="1.5"/>
                                <circle cx="19" cy="12" r="1.5"/>
                            </svg>
                        </button>
                    </div>

                    {{-- Title --}}
                    <p class="text-gray-800 text-sm font-semibold leading-snug mb-5">
                        {{ $indicator->name ?: ($indicator->definition ?: 'No title provided.') }}
                    </p>

                    {{-- Stats --}}
                    <div class="space-y-2 border-t border-gray-100 pt-4">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 text-xs">Target</span>
                            <span class="text-blue-600 text-sm font-bold">
                                {{ $indicator->end_target ?? '-' }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500 text-xs">Baseline</span>
                            <span class="text-blue-600 text-sm font-bold">
                                {{ $indicator->baseline_value ?? '-' }}
                            </span>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-4 bg-white p-6 rounded-xl border border-gray-200
                            text-center text-gray-500 text-sm">
                    No IRI indicators found.
                </div>
            @endforelse
        </div>
    </div>

</div>{{-- /min-h-screen --}}

{{-- ══════════════════════════════════════════════════════════
     Detail Modal
══════════════════════════════════════════════════════════ --}}
<div id="tableModal"
    class="fixed inset-0 z-50 hidden items-center justify-center p-4"
    style="background: rgba(0,0,0,0.45);">

    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-3xl p-6 relative max-h-[85vh] overflow-hidden">

        {{-- Header --}}
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center gap-3">
                <span id="modalBadge"
                    class="text-white text-xs font-semibold px-3 py-1 rounded-full">
                </span>
                <h2 class="text-xl font-semibold text-gray-800" id="modalCardTitle"></h2>
            </div>
            <button onclick="closeModal()"
                class="text-gray-400 hover:text-gray-700 text-2xl leading-none font-bold">&times;</button>
        </div>

        {{-- Metadata --}}
        <div id="indicatorMeta" class="overflow-x-auto rounded-xl border border-gray-200 mb-5">
            <table class="w-full text-sm">
                <tbody id="indicatorMetaBody"></tbody>
            </table>
        </div>

        {{-- Table view preview --}}
        <div id="indicatorViewPreview" class="mt-2">
            {{-- <div class="mb-3 text-sm font-semibold">Table View</div> --}}

            <div id="viewPagination" class="mb-3 flex items-center gap-2 text-xs" style="display:none;">
                <button id="prevPageBtn" onclick="changePreviewPage(-1)" class="px-3 py-1 rounded border text-gray-600 hover:bg-gray-100">Prev</button>
                <span id="pageInfo" class="text-gray-700">Page 1</span>
                <button id="nextPageBtn" onclick="changePreviewPage(1)" class="px-3 py-1 rounded border text-gray-600 hover:bg-gray-100">Next</button>
                <span id="totalInfo" class="text-gray-500">(total 0)</span>
            </div>

            <div id="viewPreviewMessage" class="p-3 text-gray-500 text-sm">Loading view preview…</div>
            <div class="overflow-x-auto rounded-xl border border-gray-200 max-h-72 overflow-y-auto" id="viewPreviewContainer" style="display:none;">
                <table class="w-full text-sm">
                    <thead id="viewPreviewHead"></thead>
                    <tbody id="viewPreviewBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
/* ── Indicator data map keyed by id ── */
const rbmsIndicators = @json($rbmsIndicators);
let currentPreviewIndicatorId = null;
let previewPage = 1;
const previewLimit = 20;
let previewTotal = 0;

/* ── Tab switching ── */
function switchTab(tab) {
    document.querySelectorAll('[id^="content-"]').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('[id^="tab-"]').forEach(btn => {
        btn.classList.remove('bg-blue-100', 'text-blue-700');
        btn.classList.add('text-gray-500');
    });
    document.getElementById('content-' + tab).classList.remove('hidden');
    const activeBtn = document.getElementById('tab-' + tab);
    activeBtn.classList.remove('text-gray-500');
    activeBtn.classList.add('bg-blue-100', 'text-blue-700');
}

/* ── Modal ── */
function openModal(indicatorId) {

    const ind = rbmsIndicators[indicatorId];
    if (!ind) return;

    const isPdo = ind.level === 'PDO';

    // Badge
    const badge = document.getElementById('modalBadge');
    badge.textContent = isPdo ? 'PDO' : 'IRI';
    badge.style.background = isPdo ? '#111827' : '#2563eb';

    // Title
    document.getElementById('modalCardTitle').textContent =
        `Table View — ${isPdo ? 'PDO' : 'IRI'}-${String(ind.id).padStart(2, '0')}`;

    // Fill metadata
    renderIndicatorMeta(ind);

    // Reset pagination state and load table data
    currentPreviewIndicatorId = indicatorId;
    previewPage = 1;
    previewTotal = 0;
    loadIndicatorViewPreview(ind, previewPage);

    // Show modal
    const modal = document.getElementById('tableModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function formatLabel(key) {
    return key.replace(/_/g, ' ')
              .replace(/\b\w/g, l => l.toUpperCase());
}

function formatValue(key, value) {

    if (!value) return '—';

    // Gender
    if (key === 'gender') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-blue-100 text-blue-700">♂ ${value}</span>`;
    }

    // Age group
    if (key === 'age_group') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-gray-100">${value}</span>`;
    }

    // Beneficiary
    if (key === 'beneficiary_type') {
        return `<span class="px-3 py-1 text-xs rounded-full bg-teal-600 text-white">👤 ${value}</span>`;
    }

    // Disability
    if (key === 'disability_status') {
        return value === 'Yes'
            ? `<span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-700">Yes</span>`
            : `<span class="px-3 py-1 text-xs rounded-full bg-gray-200 text-gray-600">No</span>`;
    }

    return value;
}

function renderIndicatorMeta(indicator) {
    const metaBody = document.getElementById('indicatorMetaBody');

    const disaggregations = Array.isArray(indicator.disaggregations) && indicator.disaggregations.length
        ? indicator.disaggregations.map(d => formatLabel(String(d))).join(', ')
        : '—';

    // metaBody.innerHTML = `
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">ID</td><td class="px-3 py-2">${indicator.id}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Name</td><td class="px-3 py-2">${indicator.name || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Level</td><td class="px-3 py-2">${indicator.level || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Data Source</td><td class="px-3 py-2">${indicator.data_source_type || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">View</td><td class="px-3 py-2">${indicator.view_list || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Aggregate Field</td><td class="px-3 py-2">${indicator.field_to_aggregate || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Disaggregations</td><td class="px-3 py-2">${disaggregations}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Baseline</td><td class="px-3 py-2">${indicator.baseline_value || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Target</td><td class="px-3 py-2">${indicator.end_target || '—'}</td></tr>
    //     <tr><td class="px-3 py-2 font-medium text-gray-700">Status</td><td class="px-3 py-2">${indicator.status || '—'}</td></tr>
    // `;
}

function updateViewPagination(page, total, totalPages) {
    const pagination = document.getElementById('viewPagination');
    const pageInfo = document.getElementById('pageInfo');
    const totalInfo = document.getElementById('totalInfo');
    const prevBtn = document.getElementById('prevPageBtn');
    const nextBtn = document.getElementById('nextPageBtn');

    if (!pagination || total <= 0) {
        pagination.style.display = 'none';
        return;
    }

    pagination.style.display = 'flex';
    pageInfo.textContent = `Page ${page} of ${totalPages}`;
    totalInfo.textContent = `(total ${total})`;

    prevBtn.disabled = page <= 1;
    nextBtn.disabled = page >= totalPages;
    prevBtn.classList.toggle('opacity-50', page <= 1);
    nextBtn.classList.toggle('opacity-50', page >= totalPages);
}

function loadIndicatorViewPreview(indicator, page = 1) {
    previewPage = page;
    const message = document.getElementById('viewPreviewMessage');
    const container = document.getElementById('viewPreviewContainer');
    const head = document.getElementById('viewPreviewHead');
    const body = document.getElementById('viewPreviewBody');

    message.textContent = 'Loading view preview…';
    message.style.display = 'block';
    container.style.display = 'none';

    head.innerHTML = '';
    body.innerHTML = '';

    const viewKey = (indicator.view_list || '').trim();
    if (!viewKey) {
        message.textContent = 'No view configured for this indicator.';
        updateViewPagination(0, 0, 0);
        return;
    }

    const db = indicator.database || 'public';
    const limit = previewLimit;
    let url = `/api/databases/${encodeURIComponent(db)}/views/${encodeURIComponent(viewKey)}/preview?limit=${limit}&page=${page}`;
    if (viewKey.startsWith('tenant:')) {
        const tenantViewId = viewKey.replace(/^tenant:/, '');
        url = `/api/views/${encodeURIComponent(tenantViewId)}/preview?limit=${limit}&page=${page}`;
    }

    fetch(url)
        .then(res => res.json())
        .then(res => {
            if (!res.success || !Array.isArray(res.rows) || res.rows.length === 0) {
                message.textContent = 'No data found in view preview.';
                updateViewPagination(page, res.total || 0, res.totalPages || 0);
                previewTotal = res.total || 0;
                return;
            }

            previewTotal = res.total || res.rows.length;
            const totalPages = res.totalPages || Math.max(1, Math.ceil(previewTotal / limit));
            updateViewPagination(page, previewTotal, totalPages);

            const allCols = Object.keys(res.rows[0] || {});
            const selectedCols = new Set();

            if (Array.isArray(indicator.disaggregations) && indicator.disaggregations.length) {
                indicator.disaggregations.forEach(c => selectedCols.add(String(c)));
            }
            if (indicator.field_to_aggregate) {
                selectedCols.add(String(indicator.field_to_aggregate));
            }

            const cols = selectedCols.size
                ? allCols.filter(col => selectedCols.has(col) || col === indicator.field_to_aggregate)
                : allCols;

            if (!cols.length) {
                message.textContent = 'No matching columns found for disaggregations/aggregate field.';
                container.style.display = 'none';
                return;
            }

            head.innerHTML = `\n                <tr class="bg-gray-900 text-white">\n                    ${cols.map(col => `\n                        <th class="px-4 py-3 text-left font-semibold text-sm">↕ ${formatLabel(col)}</th>\n                    `).join('')}\n                </tr>\n            `;

            body.innerHTML = res.rows.map(row => `\n                <tr class="border-b hover:bg-gray-50">\n                    ${cols.map(col => `\n                        <td class="px-4 py-3">${formatValue(col, row[col])}</td>\n                    `).join('')}\n                </tr>\n            `).join('');

            message.style.display = 'none';
            container.style.display = 'block';
        })
        .catch(err => {
            console.error('View preview error:', err);
            message.textContent = 'Error loading view preview.';
            updateViewPagination(page, 0, 0);
        });
}

function changePreviewPage(delta) {
    if (!currentPreviewIndicatorId) return;
    const totalPages = previewLimit > 0 ? Math.ceil(previewTotal / previewLimit) : 1;
    const nextPage = Math.min(Math.max(1, previewPage + delta), totalPages);
    if (nextPage === previewPage) return;

    previewPage = nextPage;
    const indicator = rbmsIndicators[currentPreviewIndicatorId];
    if (indicator) {
        loadIndicatorViewPreview(indicator, previewPage);
    }
}

function closeModal() {
    const modal = document.getElementById('tableModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

/* Close on backdrop click */
document.getElementById('tableModal').addEventListener('click', function (e) {
    if (e.target === this) closeModal();
});
</script>
@endsection