{% extends "core/base.html" %}
{% block title %}Citizen Dashboard - CivixFix{% endblock %}

{% block extra_css %}
<style>
    .dashboard-card {
        transition: transform 0.2s;
    }
    .dashboard-card:hover {
        transform: translateY(-2px);
    }
    .map-container {
        height: 300px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px dashed #dee2e6;
    }
    .issue-status {
        font-size: 0.8rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- Sidebar - Quick Actions -->
        <div class="col-md-3">
            <div class="card shadow-sm dashboard-card">
                <div class="card-body text-center">
                    <h5 class="card-title">Welcome, {{ user.username }}</h5>
                    <p class="text-muted">Citizen Dashboard</p>
                    
                    <div class="d-grid gap-2 mb-3">
                        <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#reportIssueModal">
                            <i class="fas fa-plus me-2"></i>Report New Issue
                        </button>
                    </div>
                    
                    <hr>
                    
                    <h6>Quick Stats</h6>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="bg-light p-2 rounded">
                                <h4 class="mb-0 text-primary">{{ user_issues.count }}</h4>
                                <small>My Reports</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-light p-2 rounded">
                                <h4 class="mb-0 text-success">
                                    {{ resolved_count }}
                                </h4>
                                <small>Resolved</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content - Recent Issues -->
        <div class="col-md-9">
            <!-- Welcome Message -->
            <div class="card shadow-sm dashboard-card mb-4">
                <div class="card-body">
                    <h4>Welcome to CivixFix!</h4>
                    <p class="text-muted mb-0">
                        Report community issues, track their progress, and help make your neighborhood better.
                        Start by reporting an issue using the button on the left.
                    </p>
                </div>
            </div>

            <!-- My Recent Issues -->
            <div class="card shadow-sm dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0">My Recent Reports</h5>
                </div>
                <div class="card-body">
                    {% for issue in user_issues %}
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <h6 class="card-title mb-1">{{ issue.title }}</h6>
                                    <p class="card-text text-muted mb-2 small">
                                        {{ issue.description|truncatewords:15 }}
                                    </p>
                                    <div class="d-flex gap-2 align-items-center">
                                        <span class="badge 
                                            {% if issue.department.name == 'Roads & Transportation' %} bg-primary
                                            {% elif issue.department.name == 'Sanitation & Waste Management' %} bg-success
                                            {% elif issue.department.name == 'Public Safety' %} bg-danger
                                            {% elif issue.department.name == 'Water & Sewage' %} bg-info text-dark
                                            {% elif issue.department.name == 'Parks & Recreation' %} bg-warning text-dark
                                            {% elif issue.department.name == 'Electricity & Utilities' %} bg-dark
                                            {% elif issue.department.name == 'Environmental Services' %} bg-secondary
                                            {% elif issue.department.name == 'Public Works' %} bg-teal text-white
                                            {% else %} bg-light text-dark
                                            {% endif %}">
                                            {{ issue.department.name|default:"No Department" }}
                                        </span>
            
                                        <!-- 🔹 Status badge -->
                                        <span class="badge bg-{% if issue.status == 'resolved' %}success
                                                              {% elif issue.status == 'in_progress' %}warning
                                                              {% else %}primary{% endif %} issue-status">
                                            {{ issue.get_status_display }}
                                        </span>
            
                                        <small class="text-muted">{{ issue.created_at|date:"M d, Y" }}</small>
                                    </div>
                                </div>
            
                                {% if issue.photo %}
                                <div class="ms-3">
                                    <img src="{{ issue.photo.url }}" alt="Issue photo" class="img-fluid rounded"
                                        style="max-height: 60px; max-width: 80px;">
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-4">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5>No issues reported yet</h5>
                        <p class="text-muted">Click "Report New Issue" to get started!</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Report Issue Modal -->
<div class="modal fade" id="reportIssueModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Report New Issue</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="issueForm" method="post" enctype="multipart/form-data" action="{% url 'report_issue' %}">
                    {% csrf_token %}
                    
                    {% if messages %}
                        {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-3">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endfor %}
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Issue Title*</label>
                                {{ issue_form.title }}
                            </div>
                        </div>
                        
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Description*</label>
                        {{ issue_form.description }}
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Location*</label>
                                {{ issue_form.location }}
                                <small class="text-muted">Click on the map to select location</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Photo</label>
                                {{ issue_form.photo }}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hidden latitude/longitude fields -->
                    {{ issue_form.latitude }}
                    {{ issue_form.longitude }}
                    
                    <div class="map-container mb-3">
                        <div id="map" style="height: 100%;"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="issueForm" class="btn btn-primary">
                    <i class="fas fa-paper-plane me-2"></i>Report Issue
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener("DOMContentLoaded", () => {
    let map = null, marker = null;

    // Lazy load Leaflet only when modal opens
    const ensureLeafletLoaded = () => {
        return new Promise((resolve) => {
            if (window.L) return resolve();

            const css = document.createElement("link");
            css.rel = "stylesheet";
            css.href = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.css";
            document.head.appendChild(css);

            const js = document.createElement("script");
            js.src = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.js";
            js.onload = resolve;
            document.body.appendChild(js);
        });
    };

    const initMap = () => {
        if (map) return;

        map = L.map("map", {
            center: [12.9716, 77.5946],
            zoom: 13
        });

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "&copy; OpenStreetMap contributors",
            maxZoom: 19
        }).addTo(map);

        map.on("click", (e) => {
            if (!marker) {
                marker = L.marker(e.latlng).addTo(map);
            } else {
                marker.setLatLng(e.latlng);
            }
            marker.bindPopup("Selected location").openPopup();

            // update hidden fields immediately
            document.getElementById("id_latitude").value = e.latlng.lat.toFixed(6);
            document.getElementById("id_longitude").value = e.latlng.lng.toFixed(6);

            // defer reverse geocode
            requestIdleCallback(() => {
                fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
                    .then(r => r.json())
                    .then(data => {
                        document.getElementById("id_location").value =
                            data?.display_name ||
                            `Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
                    })
                    .catch(() => {
                        document.getElementById("id_location").value =
                            `Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
                    });
            });
        });
    };

    const modal = document.getElementById("reportIssueModal");
    modal.addEventListener("shown.bs.modal", async () => {
        await ensureLeafletLoaded();
        initMap();

        // fix resize/centering after animation
        setTimeout(() => {
            map.invalidateSize();
            if (marker) map.setView(marker.getLatLng(), 15);
        }, 200);
    });
});
</script>
{% endblock %}