@extends('layouts.dashboard')

@section('dashboard-content')
    <div class="search-card">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;">
            <div>
                <h2 class="section-title">Boundary – {{ $boundary->boundary_number }}</h2>
                <p style="margin: 4px 0; color: var(--text-muted);">{{ $boundary->name }}</p>
            </div>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <span class="status-pill {{ $boundary->status === 'active' ? 'enabled' : 'disabled' }}">{{ $boundary->status }}</span>
                <span class="status-pill enabled">{{ str_replace('_', ' ', $boundary->workflow_stage ?? 'published') }}</span>
                @if($boundary->dispute_status)
                    <span class="status-pill disabled">{{ str_replace('_', ' ', $boundary->dispute_status) }}</span>
                @endif
                @if($boundary->security_classification)
                    <span class="status-pill disabled">{{ ucfirst($boundary->security_classification) }}</span>
                @endif
                @if($boundary->is_locked)
                    <span class="status-pill disabled">Locked</span>
                @endif
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <ul class="tab-list" id="boundary-tabs" style="display: flex; gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border-color);">
            <li><button type="button" class="tab-btn active" data-tab="general">General</button></li>
            <li><button type="button" class="tab-btn" data-tab="geographic">Geographic data</button></li>
            <li><button type="button" class="tab-btn" data-tab="documents">Documents</button></li>
            <li><button type="button" class="tab-btn" data-tab="security">Security &amp; jurisdiction</button></li>
            <li><button type="button" class="tab-btn" data-tab="history">Change history</button></li>
        </ul>

        <div id="tab-general" class="tab-pane">
            <div class="form-grid" style="margin-top: 20px;">
                <div class="form-group">
                    <span class="form-label">Boundary number</span>
                    <p style="margin: 4px 0;">{{ $boundary->boundary_number }}</p>
                </div>
                <div class="form-group">
                    <span class="form-label">Type</span>
                    <p style="margin: 4px 0;">{{ $boundary->boundary_type }}</p>
                </div>
                <div class="form-group">
                    <span class="form-label">State A / State B</span>
                    <p style="margin: 4px 0;">{{ $boundary->state_a }} ↔ {{ $boundary->state_b }}</p>
                </div>
                <div class="form-group">
                    <span class="form-label">Length (km)</span>
                    <p style="margin: 4px 0;">{{ $boundary->length_km !== null ? $boundary->length_km : '—' }}</p>
                </div>
                <div class="form-group">
                    <span class="form-label">Established date</span>
                    <p style="margin: 4px 0;">{{ $boundary->established_date ? $boundary->established_date->format('d M Y') : '—' }}</p>
                </div>
                <div class="form-group">
                    <span class="form-label">Assigned commissioner</span>
                    <p style="margin: 4px 0;">{{ $boundary->commissioner ? $boundary->commissioner->name : '—' }}</p>
                </div>
                @if($boundary->legal_basis)
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <span class="form-label">Legal basis</span>
                        <p style="margin: 4px 0;">{{ $boundary->legal_basis }}</p>
                    </div>
                @endif
                @if($boundary->description)
                    <div class="form-group" style="grid-column: 1 / -1;">
                        <span class="form-label">Description</span>
                        <p style="margin: 4px 0;">{{ $boundary->description }}</p>
                    </div>
                @endif
            </div>
            <div class="button-group" style="margin-top: 20px;">
                @if(!$boundary->is_locked || ($canEditLocked ?? false))
                    <form method="post" action="{{ route('boundaries.update-workflow', $boundary->id) }}" class="d-inline" style="display: inline-block;">
                        @csrf
                        <select name="workflow_stage" class="form-select" style="width: auto; display: inline-block;">
                            @foreach(['submitted','under_review','commissioner_approval','legal_validation','published'] as $s)
                                <option value="{{ $s }}" {{ ($boundary->workflow_stage ?? '') === $s ? 'selected' : '' }}>{{ str_replace('_', ' ', $s) }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-secondary">Update workflow</button>
                    </form>
                @endif
                <a href="{{ url('/dashboard?section=boundary') }}" class="btn btn-secondary">Back to list</a>
            </div>
        </div>

        <div id="tab-geographic" class="tab-pane" style="display: none;">
            <div class="form-grid" style="margin-top: 20px;">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <span class="form-label">Coordinates ({{ $boundary->coordinates->count() }})</span>
                    @if($boundary->coordinates->isEmpty())
                        <p class="empty-state">No coordinates recorded. Use the GIS workstation or registry to add geographic data.</p>
                    @else
                        <div class="table-responsive">
                            <table class="overview-table">
                                <thead>
                                    <tr><th>#</th><th>Latitude</th><th>Longitude</th><th>System</th></tr>
                                </thead>
                                <tbody>
                                    @foreach($boundary->coordinates as $c)
                                        <tr>
                                            <td>{{ $c->sequence }}</td>
                                            <td>{{ $c->latitude }}</td>
                                            <td>{{ $c->longitude }}</td>
                                            <td>{{ $c->coordinate_system ?? 'WGS84' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div id="boundary-map" style="width: 100%; height: 400px; margin-top: 16px; background: var(--primary-teal-pale); border-radius: 12px;"></div>
                    @endif
                </div>
            </div>
        </div>

        <div id="tab-documents" class="tab-pane" style="display: none;">
            <div style="margin-top: 20px;">
                @if($boundary->documents->isEmpty())
                    <p class="empty-state">No documents linked. Upload via Index Documents and link to this boundary.</p>
                @else
                    <div class="table-responsive">
                        <table class="overview-table">
                            <thead>
                                <tr><th>Document #</th><th>Title</th><th>Type</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                @foreach($boundary->documents as $d)
                                    <tr>
                                        <td>{{ $d->document_number }}</td>
                                        <td>{{ Str::limit($d->title, 50) }}</td>
                                        <td>{{ $d->document_type }}</td>
                                        <td><a href="{{ route('boundary.documents.show', $d->id) }}" class="table-cta">View</a></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
                <a href="{{ route('boundary.documents.upload') }}" class="btn btn-primary" style="margin-top: 12px;">Upload document</a>
            </div>
        </div>

        <div id="tab-security" class="tab-pane" style="display: none;">
            <div style="margin-top: 20px;">
                <p class="section-desc">Dispute status, security classification, and jurisdictional responsibility (Framework UC1, UC2, UC10).</p>
                <div class="form-grid">
                    <div class="form-group">
                        <span class="form-label">Dispute status</span>
                        <p style="margin: 4px 0;">{{ $boundary->dispute_status ? str_replace('_', ' ', $boundary->dispute_status) : '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">Security classification</span>
                        <p style="margin: 4px 0;">{{ $boundary->security_classification ? ucfirst($boundary->security_classification) : '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">Record locked</span>
                        <p style="margin: 4px 0;">{{ $boundary->is_locked ? 'Yes' : 'No' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">Sub-type (community/grazing)</span>
                        <p style="margin: 4px 0;">{{ $boundary->boundary_sub_type ? str_replace('_', ' ', $boundary->boundary_sub_type) : '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">High-risk segment</span>
                        <p style="margin: 4px 0;">{{ $boundary->is_high_risk ? 'Yes' : 'No' }}{{ $boundary->risk_type ? ' (' . str_replace('_', ' ', $boundary->risk_type) . ')' : '' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">Police command</span>
                        <p style="margin: 4px 0;">{{ $boundary->police_command ?: '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">Military formation</span>
                        <p style="margin: 4px 0;">{{ $boundary->military_formation ?: '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">DSS zone</span>
                        <p style="margin: 4px 0;">{{ $boundary->dss_zone ?: '—' }}</p>
                    </div>
                    <div class="form-group">
                        <span class="form-label">NSCDC region</span>
                        <p style="margin: 4px 0;">{{ $boundary->nscdc_region ?: '—' }}</p>
                    </div>
                </div>
                @if(!$boundary->is_locked || ($canEditLocked ?? false))
                    <h3 class="section-subtitle" style="margin-top: 24px;">Update security &amp; jurisdiction</h3>
                    <form method="post" action="{{ route('boundaries.update-security', $boundary->id) }}">
                        @csrf
                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label">Dispute status</label>
                                <select name="dispute_status" class="form-select">
                                    <option value="">— None —</option>
                                    <option value="disputed" {{ $boundary->dispute_status === 'disputed' ? 'selected' : '' }}>Disputed</option>
                                    <option value="contested" {{ $boundary->dispute_status === 'contested' ? 'selected' : '' }}>Contested</option>
                                    <option value="under_litigation" {{ $boundary->dispute_status === 'under_litigation' ? 'selected' : '' }}>Under litigation</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Security classification</label>
                                <select name="security_classification" class="form-select">
                                    <option value="">— None —</option>
                                    <option value="sensitive" {{ $boundary->security_classification === 'sensitive' ? 'selected' : '' }}>Sensitive</option>
                                    <option value="restricted" {{ $boundary->security_classification === 'restricted' ? 'selected' : '' }}>Restricted</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Lock record</label>
                                <select name="is_locked" class="form-select">
                                    <option value="0" {{ !$boundary->is_locked ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ $boundary->is_locked ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Sub-type (community/grazing)</label>
                                <select name="boundary_sub_type" class="form-select">
                                    <option value="">— None —</option>
                                    <option value="community_land" {{ $boundary->boundary_sub_type === 'community_land' ? 'selected' : '' }}>Community land</option>
                                    <option value="grazing_corridor" {{ $boundary->boundary_sub_type === 'grazing_corridor' ? 'selected' : '' }}>Grazing corridor</option>
                                    <option value="waterbody" {{ $boundary->boundary_sub_type === 'waterbody' ? 'selected' : '' }}>Waterbody</option>
                                    <option value="forest" {{ $boundary->boundary_sub_type === 'forest' ? 'selected' : '' }}>Forest</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">High-risk</label>
                                <select name="is_high_risk" class="form-select">
                                    <option value="0" {{ !$boundary->is_high_risk ? 'selected' : '' }}>No</option>
                                    <option value="1" {{ $boundary->is_high_risk ? 'selected' : '' }}>Yes</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Risk type</label>
                                <select name="risk_type" class="form-select">
                                    <option value="">— None —</option>
                                    <option value="porous" {{ $boundary->risk_type === 'porous' ? 'selected' : '' }}>Porous</option>
                                    <option value="disputed" {{ $boundary->risk_type === 'disputed' ? 'selected' : '' }}>Disputed</option>
                                    <option value="ungoverned" {{ $boundary->risk_type === 'ungoverned' ? 'selected' : '' }}>Ungoverned</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Police command</label>
                                <input type="text" name="police_command" class="form-input" value="{{ old('police_command', $boundary->police_command) }}" maxlength="255">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Military formation</label>
                                <input type="text" name="military_formation" class="form-input" value="{{ old('military_formation', $boundary->military_formation) }}" maxlength="255">
                            </div>
                            <div class="form-group">
                                <label class="form-label">DSS zone</label>
                                <input type="text" name="dss_zone" class="form-input" value="{{ old('dss_zone', $boundary->dss_zone) }}" maxlength="255">
                            </div>
                            <div class="form-group">
                                <label class="form-label">NSCDC region</label>
                                <input type="text" name="nscdc_region" class="form-input" value="{{ old('nscdc_region', $boundary->nscdc_region) }}" maxlength="255">
                            </div>
                        </div>
                        <div class="button-group" style="margin-top: 12px;">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </form>
                @else
                    <p class="empty-state">This record is locked. Only commissioners or admins can edit.</p>
                @endif
            </div>
        </div>

        <div id="tab-history" class="tab-pane" style="display: none;">
            <div style="margin-top: 20px;">
                @if($boundary->auditLogs->isEmpty())
                    <p class="empty-state">No change history yet.</p>
                @else
                    <div class="table-responsive">
                        <table class="overview-table">
                            <thead>
                                <tr><th>Action</th><th>By</th><th>When</th><th>Details</th></tr>
                            </thead>
                            <tbody>
                                @foreach($boundary->auditLogs as $log)
                                    <tr>
                                        <td><span class="status-pill enabled">{{ $log->action }}</span></td>
                                        <td>{{ $log->user_authority ?? '—' }}</td>
                                        <td>{{ $log->created_at ? $log->created_at->format('d M Y H:i') : '—' }}</td>
                                        <td>{{ $log->reason ?: '—' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
@endpush
@push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <script>
    (function() {
        var tabs = document.querySelectorAll('#boundary-tabs .tab-btn');
        var panes = document.querySelectorAll('.tab-pane');
        tabs.forEach(function(btn) {
            btn.addEventListener('click', function() {
                var tab = this.getAttribute('data-tab');
                tabs.forEach(function(b) { b.classList.remove('active'); });
                panes.forEach(function(p) {
                    p.style.display = (p.id === 'tab-' + tab) ? 'block' : 'none';
                });
                this.classList.add('active');
                if (tab === 'geographic' && document.getElementById('boundary-map') && typeof L !== 'undefined') {
                    initBoundaryMap();
                }
            });
        });
        var mapInitialized = false;
        function initBoundaryMap() {
            if (mapInitialized) return;
            var coords = @json($boundary->coordinates->map(fn($c) => ['lat' => (float)$c->latitude, 'lng' => (float)$c->longitude])->values());
            if (coords.length === 0) return;
            var map = L.map('boundary-map').setView([coords[0].lat, coords[0].lng], 10);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap' }).addTo(map);
            L.polyline(coords.map(function(c) { return [c.lat, c.lng]; }), { color: '#025864', weight: 3 }).addTo(map);
            mapInitialized = true;
        }
    })();
    </script>
@endpush
@endsection