@extends('layouts.app')

@section('content')
<div class="brafa-screen lock-statistics-page lock-analytics-page">
    @php
        $formatIsk = fn($amount) => number_format((float) $amount, 0, ',', '.') . ' ISK';
        $latestMonthTotal = $billing['month_groups'][0]['month_total'] ?? 0;
        $averageMonthTotal = count($billing['month_groups']) > 0 ? (int) round($billing['grand_total'] / count($billing['month_groups'])) : 0;
        $activeFilterCount = 0;
        $monthsTracked = $stats->count();
        $latestUniqueLocks = (int) ($stats->last()['count'] ?? 0);
        $totalNewLocksInRange = (int) $stats->sum('new_locks');
        $totalNewPropertiesInRange = (int) $stats->sum('new_properties');
        $netGrowthRate = $latestUniqueLocks > 0 && $totalNewLocksInRange > 0
            ? round(($totalNewLocksInRange / max($latestUniqueLocks, 1)) * 100, 1)
            : 0;
        $billableMonths = count($billing['month_groups']);
        $propertyGrowthRows = $stats
            ->flatMap(fn($row) => collect($row['properties'] ?? [])->map(fn($property) => [
                'month' => $row['month'],
                'name'  => $property['name'],
                'locks' => $property['locks'],
            ]))
            ->values();
        $propertyCoverageRate = $monthsTracked > 0
            ? round(($propertyGrowthRows->count() / max($monthsTracked, 1)), 1)
            : 0;

        if (!empty($filters['from_month']))                        $activeFilterCount++;
        if (!empty($filters['to_month']))                          $activeFilterCount++;
        if (!empty($filters['property_id']))                       $activeFilterCount++;
        if (!empty($filters['property_name']))                     $activeFilterCount++;
        if (!empty($filters['only_billable']))                     $activeFilterCount++;
        if (count($selectedApis) !== count($apis))                 $activeFilterCount++;
    @endphp

    {{-- ══════════════════ COMPACT HEADER ════════════════════════════════════ --}}
    <div class="d-flex flex-wrap align-items-center gap-2 mb-3 page-compact-header">
        <div class="me-auto">
            <h5 class="mb-0">Lock analytics</h5>
            <span class="text-xs text-muted">Lock growth, property onboarding and revenue trends. Filters apply to the exports too.</span>
        </div>
        <a href="{{ route('locks-by-month', request()->query()) }}" class="btn btn-outline-secondary btn-sm mb-0">
            <i class="material-icons text-sm me-1 align-middle">receipt_long</i>Back to billing
        </a>
        <a href="{{ route('locks-by-month.export-excel', request()->query()) }}" class="btn btn-outline-dark btn-sm mb-0">
            <i class="material-icons text-sm me-1 align-middle">table_view</i>Excel
        </a>
        <a href="{{ route('locks-by-month.export', request()->query()) }}" class="btn btn-outline-secondary btn-sm mb-0">
            <i class="material-icons text-sm me-1 align-middle">download</i>CSV
        </a>
    </div>

    @include('superadmin.lock-statistics.partials.filters', ['pageRoute' => 'locks-by-month.analytics', 'showExports' => true])


        {{-- 8 KPI cards --}}
        <div class="row g-4 mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Grand total billed</p>
                    <h5 class="mb-0">{{ $formatIsk($billing['grand_total']) }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Latest month total</p>
                    <h5 class="mb-0">{{ $formatIsk($latestMonthTotal) }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Average monthly total</p>
                    <h5 class="mb-0">{{ $formatIsk($averageMonthTotal) }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Active filter groups</p>
                    <h5 class="mb-0">{{ $activeFilterCount }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Latest unique locks</p>
                    <h5 class="mb-0">{{ $latestUniqueLocks }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">New locks in range</p>
                    <h5 class="mb-0">{{ $totalNewLocksInRange }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">New properties in range</p>
                    <h5 class="mb-0">{{ $totalNewPropertiesInRange }}</h5>
                </div></div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card h-100 shadow-sm border"><div class="card-body">
                    <p class="text-xs text-uppercase text-muted mb-1">Months tracked</p>
                    <h5 class="mb-0">{{ $monthsTracked }}</h5>
                </div></div>
            </div>
        </div>

        {{-- 3 insight cards --}}
        <div class="row g-4 mb-4">
            <div class="col-lg-4">
                <div class="card h-100 border shadow-sm">
                    <div class="card-header p-3 pb-0 bg-transparent">
                        <h6 class="mb-0">Growth Health</h6>
                        <p class="text-sm text-muted mb-0">How fast the selected period expanded.</p>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-end mb-2">
                            <h3 class="mb-0 text-dark">{{ $netGrowthRate }}%</h3>
                            <span class="badge bg-gradient-success">Net lock velocity</span>
                        </div>
                        <div class="progress progress-md">
                            <div class="progress-bar bg-gradient-success" role="progressbar" style="width: {{ min(100, max(5, $netGrowthRate)) }}%;"></div>
                        </div>
                        <p class="text-xs text-muted mt-2 mb-0">New locks in range vs. latest unique lock base.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card h-100 border shadow-sm">
                    <div class="card-header p-3 pb-0 bg-transparent">
                        <h6 class="mb-0">Property Activity</h6>
                        <p class="text-sm text-muted mb-0">Average additions per tracked month.</p>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-end mb-2">
                            <h3 class="mb-0 text-dark">{{ $propertyCoverageRate }}</h3>
                            <span class="badge bg-gradient-info">Properties / month</span>
                        </div>
                        <div class="progress progress-md">
                            <div class="progress-bar bg-gradient-info" role="progressbar" style="width: {{ min(100, max(8, $propertyCoverageRate * 12)) }}%;"></div>
                        </div>
                        <p class="text-xs text-muted mt-2 mb-0">Monthly onboarding consistency in current filters.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card h-100 border shadow-sm">
                    <div class="card-header p-3 pb-0 bg-transparent">
                        <h6 class="mb-0">Billing Signal</h6>
                        <p class="text-sm text-muted mb-0">Snapshot of active invoice periods.</p>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-end mb-2">
                            <h3 class="mb-0 text-dark">{{ $billableMonths }}</h3>
                            <span class="badge bg-gradient-dark">Billable months</span>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mt-2">
                            <span class="badge bg-light text-dark border">Grand: {{ $formatIsk($billing['grand_total']) }}</span>
                            <span class="badge bg-light text-dark border">Avg: {{ $formatIsk($averageMonthTotal) }}</span>
                        </div>
                        <p class="text-xs text-muted mt-3 mb-0">Verify billing continuity across the selected range.</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Lock growth chart + table --}}
        <div class="card mb-4 shadow-sm border">
            <div class="card-header pb-0">
                <h6 class="mb-0">Monthly Lock Growth</h6>
                <p class="text-sm text-muted mb-0">Unique locks and property additions per month.</p>
            </div>
            <div class="card-body border-bottom">
                <canvas id="lockGrowthTrendChart" height="90"></canvas>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0 lock-growth-table">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">Month</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Unique Locks</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">New Locks</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">New Properties</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($stats as $statRow)
                                <tr>
                                    <td class="ps-3 fw-semibold">{{ $statRow['month'] }}</td>
                                    <td><span class="badge bg-gradient-dark">{{ $statRow['count'] }}</span></td>
                                    <td><span class="badge bg-gradient-success">{{ $statRow['new_locks'] }}</span></td>
                                    <td><span class="badge bg-gradient-info">{{ $statRow['new_properties'] }}</span></td>
                                </tr>
                            @empty
                                <tr><td class="ps-3 text-muted" colspan="4">No rows for selected filters.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Property growth chart + table --}}
        <div class="card shadow-sm border">
            <div class="card-header pb-0">
                <h6 class="mb-0">Monthly Property Growth</h6>
                <p class="text-sm text-muted mb-0">Property additions per month.</p>
            </div>
            <div class="card-body border-bottom">
                <canvas id="newAdditionsChart" height="90"></canvas>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-items-center mb-0 monthly-property-growth-table">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">Month</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Property Added</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Locks Added</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($propertyGrowthRows as $propertyRow)
                                <tr>
                                    <td class="ps-3">{{ $propertyRow['month'] }}</td>
                                    <td class="properties-added-cell fw-semibold text-dark">{{ strip_tags((string) $propertyRow['name']) }}</td>
                                    <td><span class="badge bg-gradient-dark">{{ $propertyRow['locks'] }}</span></td>
                                </tr>
                            @empty
                                <tr><td class="ps-3 text-muted" colspan="3">No new properties in the selected range.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

</div>
@endsection

@push('css')
<style>
    /* ── Property growth table ────────────────────────────────────────────── */
    .lock-statistics-page .properties-added-cell,
    .lock-statistics-page .properties-added-cell * {
        color: #344767 !important;
        text-decoration: none !important;
    }
    .lock-statistics-page .monthly-property-growth-table thead th,
    .lock-statistics-page .monthly-property-growth-table tbody td {
        font-family: "Roboto","Helvetica","Arial",sans-serif;
        font-size: .875rem;
        font-weight: 400;
        letter-spacing: normal;
    }
    .lock-statistics-page .monthly-property-growth-table thead th {
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .05rem;
        color: #7b809a !important;
    }
    .lock-statistics-page .monthly-property-growth-table tbody td { color: #344767 !important; }

    /* ── Filter card chevron ───────────────────────────────────────────────── */
    .lock-statistics-page .filter-toggle-btn .filter-chevron  { transition: transform .2s ease; }
    .lock-statistics-page .filter-toggle-btn[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
    .lock-statistics-page .lock-growth-table tbody tr:hover { background: rgba(94,114,228,.04); }
    .page-compact-header h5                  { line-height: 1.1; }
</style>
@endpush

@push('js')
<script src="{{ asset('assets') }}/js/plugins/chartjs.min.js"></script>
<script>
    // ── Floating-label behaviour for .input-group-outline inputs ─────────
    (() => {
        function syncFilled(el) {
            const wrap = el.closest('.input-group-outline');
            if (!wrap) return;
            const alwaysFilled = el.tagName === 'SELECT' || ['date','month','time','datetime-local','week'].includes(el.type);
            wrap.classList.toggle('is-filled', alwaysFilled || el.value.length > 0);
        }
        document.querySelectorAll('.input-group-outline .form-control, .input-group-outline .form-select').forEach(el => {
            syncFilled(el);
            el.addEventListener('focus',  () => el.closest('.input-group-outline')?.classList.add('is-focused'));
            el.addEventListener('blur',   () => el.closest('.input-group-outline')?.classList.remove('is-focused'));
            el.addEventListener('input',  () => syncFilled(el));
            el.addEventListener('change', () => syncFilled(el));
        });
        document.getElementById('api-select-all')?.addEventListener('click', () => document.querySelectorAll('input[name="api[]"]').forEach(c => c.checked = true));
        document.getElementById('api-deselect-all')?.addEventListener('click', () => document.querySelectorAll('input[name="api[]"]').forEach(c => c.checked = false));
    })();

    // ── Analytics charts ─────────────────────────────────────────────────────
    (() => {
        const stats = @json($stats->values());
        if (!Array.isArray(stats) || stats.length === 0) return;

        const labels        = stats.map(i => i.month);
        const uniqueLocks   = stats.map(i => Number(i.count      || 0));
        const newLocks      = stats.map(i => Number(i.new_locks  || 0));
        const newProperties = stats.map(i => Number(i.new_properties || 0));

        let chartsBuilt = false;
        function buildCharts() {
            if (chartsBuilt || typeof Chart === 'undefined') return;
            chartsBuilt = true;

            const trend = document.getElementById('lockGrowthTrendChart');
            if (trend) new Chart(trend, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        { label: 'Unique Locks', data: uniqueLocks,   borderColor: '#5e72e4', backgroundColor: 'rgba(94,114,228,.15)', fill: true, tension: .35 },
                        { label: 'New Locks',    data: newLocks,      borderColor: '#2dce89', backgroundColor: 'rgba(45,206,137,.10)', fill: true, tension: .35 },
                    ],
                },
                options: { plugins: { legend: { position: 'bottom' } } },
            });

            const additions = document.getElementById('newAdditionsChart');
            if (additions) new Chart(additions, {
                type: 'bar',
                data: { labels, datasets: [{ label: 'New Properties', data: newProperties, backgroundColor: '#11cdef', borderRadius: 6 }] },
                options: { plugins: { legend: { display: false } } },
            });
        }

        buildCharts();
    })();
</script>
@endpush