@extends('admin.layouts.app')
@section('title', 'Spatial Intelligence')
@section('breadcrumb')
    <span class="current">Spatial Intelligence</span>
@endsection

@section('content')
@include('admin.spatial._tabs')

<div class="page-header">
    <h1 class="page-title">
        <span class="title-icon"><i data-lucide="globe" style="width:20px;height:20px;"></i></span>
        Spatial Intelligence
    </h1>
    <p class="page-subtitle">Manage spatial features, proximity landmarks, and heatmap data</p>
</div>

{{-- PostGIS Status ──────────────────────────────────────────────────── --}}
<div class="glass-card" style="padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px;">
    @if($postgisAvailable)
        <span class="badge badge-green" style="font-size:12px;padding:4px 10px;">
            <i data-lucide="check-circle" style="width:13px;height:13px;"></i> PostGIS Active
        </span>
        <span style="color:var(--vsc-text-secondary);font-size:12px;">
            Spatial queries, buffer analysis, and proximity calculations are fully operational.
        </span>
    @else
        <span class="badge badge-blue" style="font-size:12px;padding:4px 10px;">
            <i data-lucide="database" style="width:13px;height:13px;"></i> MySQL Mode
        </span>
        <span style="color:var(--vsc-text-secondary);font-size:12px;">
            Running on MySQL — spatial data stored as JSON. Features, landmarks, and heatmaps are fully manageable.
            Advanced spatial queries (containment, buffer analysis) require PostgreSQL + PostGIS.
        </span>
    @endif
</div>

{{-- Summary Cards ───────────────────────────────────────────────────── --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;">

    <a href="{{ route('admin.spatial.features') }}" class="glass-card" style="padding:20px;text-decoration:none;transition:border-color 0.15s;border:1px solid transparent;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <div style="width:36px;height:36px;border-radius:8px;background:rgba(255,120,100,0.12);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="shield-alert" style="width:18px;height:18px;color:#ff7864;"></i>
            </div>
            <div>
                <div style="font-size:22px;font-weight:700;color:var(--vsc-text-active);">{{ $featureCount }}</div>
                <div style="font-size:11px;color:var(--vsc-text-secondary);text-transform:uppercase;letter-spacing:0.5px;">Spatial Features</div>
            </div>
        </div>
        <div style="font-size:11px;color:var(--vsc-text-tertiary);">CRZ, flood zones, heritage, eco-sensitive areas</div>
    </a>

    <a href="{{ route('admin.spatial.landmarks') }}" class="glass-card" style="padding:20px;text-decoration:none;transition:border-color 0.15s;border:1px solid transparent;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <div style="width:36px;height:36px;border-radius:8px;background:rgba(100,180,255,0.12);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="map-pin" style="width:18px;height:18px;color:#64b4ff;"></i>
            </div>
            <div>
                <div style="font-size:22px;font-weight:700;color:var(--vsc-text-active);">{{ $landmarkCount }}</div>
                <div style="font-size:11px;color:var(--vsc-text-secondary);text-transform:uppercase;letter-spacing:0.5px;">Landmarks</div>
            </div>
        </div>
        <div style="font-size:11px;color:var(--vsc-text-tertiary);">Metro stations, highways, hospitals, schools</div>
    </a>

    <a href="{{ route('admin.spatial.heatmap') }}" class="glass-card" style="padding:20px;text-decoration:none;transition:border-color 0.15s;border:1px solid transparent;">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <div style="width:36px;height:36px;border-radius:8px;background:rgba(255,200,50,0.12);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="flame" style="width:18px;height:18px;color:#ffc832;"></i>
            </div>
            <div>
                <div style="font-size:22px;font-weight:700;color:var(--vsc-text-active);">{{ $heatmapCount }}</div>
                <div style="font-size:11px;color:var(--vsc-text-secondary);text-transform:uppercase;letter-spacing:0.5px;">Heatmap Cells</div>
            </div>
        </div>
        <div style="font-size:11px;color:var(--vsc-text-tertiary);">Pre-computed feasibility score grid</div>
    </a>

</div>

{{-- Breakdown Tables ────────────────────────────────────────────────── --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">

    {{-- Features by Type --}}
    <div class="admin-table-wrap">
        <div class="admin-table-header">
            <div class="admin-table-title">
                <i data-lucide="shield-alert" class="icon" style="width:14px;height:14px;"></i>
                Features by Type
            </div>
        </div>
        <div class="table-responsive">
            <table class="admin-table">
                <thead><tr><th>Type</th><th style="text-align:right;">Count</th></tr></thead>
                <tbody>
                    @forelse($featuresByType as $type => $count)
                        <tr>
                            <td>
                                <span class="badge badge-orange">{{ str_replace('_', ' ', ucfirst($type)) }}</span>
                            </td>
                            <td style="text-align:right;font-weight:600;color:var(--vsc-text-active);">{{ $count }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" style="text-align:center;padding:24px;color:var(--vsc-text-secondary);">
                                No spatial features yet
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Landmarks by Type --}}
    <div class="admin-table-wrap">
        <div class="admin-table-header">
            <div class="admin-table-title">
                <i data-lucide="map-pin" class="icon" style="width:14px;height:14px;"></i>
                Landmarks by Type
            </div>
        </div>
        <div class="table-responsive">
            <table class="admin-table">
                <thead><tr><th>Type</th><th style="text-align:right;">Count</th></tr></thead>
                <tbody>
                    @forelse($landmarksByType as $type => $count)
                        <tr>
                            <td>
                                <span class="badge badge-blue">{{ str_replace('_', ' ', ucfirst($type)) }}</span>
                            </td>
                            <td style="text-align:right;font-weight:600;color:var(--vsc-text-active);">{{ $count }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" style="text-align:center;padding:24px;color:var(--vsc-text-secondary);">
                                No landmarks yet
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection