{% extends 'base.html' %}
{% load static_v %}
{% block title %}{{ t.fleet_dashboard_title }} — PickkerMarket{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{% endblock %}

{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <span class="section-kicker">{{ company.company_name }}</span>
        <h1>{{ t.fleet_dashboard_title }}</h1>

        <div class="checkout-steps" style="margin-bottom: 20px;">
            <button type="button" class="checkout-step active fleet-tab-btn" data-tab="trucks">{{ t.fleet_trucks_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="drivers">{{ t.fleet_drivers_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="financials">{{ t.fleet_financials_tab }}</button>
            <button type="button" class="checkout-step fleet-tab-btn" data-tab="warehouse">{{ t.fleet_warehouse_tab }}</button>
        </div>

        <div id="fleet-tab-trucks">
            <h3 style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
                {{ t.fleet_live_map_title }}
                <button type="button" id="fleet-large-map-btn" class="btn-small">{{ t.fleet_large_map }}</button>
            </h3>
            <div id="fleet-live-map-wrap" class="map-container" style="height: 320px; margin-bottom: 24px;">
                <button type="button" id="fleet-map-fullscreen-btn" class="map-fullscreen-btn" aria-label="{{ t.fleet_fullscreen_map }}">⛶</button>
                <div id="fleet-live-map" style="width: 100%; height: 100%;"></div>
            </div>
            <p id="fleet-no-live-note" style="color: var(--muted); display: none;">{{ t.fleet_no_live_trucks }}</p>

            <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 30px;">
                <form method="post" action="{% url 'market:fleet_add_truck' %}" class="contact-form">
                    {% csrf_token %}
                    <label for="truck_type_id">{{ t.fleet_truck_type_label }}</label>
                    <select id="truck_type_id" name="truck_type_id" required>
                        {% for tt in truck_types %}<option value="{{ tt.id }}">{{ tt.icon }} {{ tt.name }} ({{ tt.capacity_label }})</option>{% endfor %}
                    </select>

                    <label for="nickname">{{ t.fleet_truck_nickname_label }}</label>
                    <input type="text" id="nickname" name="nickname">

                    <label for="license_plate">{{ t.fleet_truck_plate_label }}</label>
                    <input type="text" id="license_plate" name="license_plate">

                    <button type="submit" class="btn-cta">{{ t.fleet_add_truck }}</button>
                </form>
            </div>

            {% for truck in trucks %}
            <div class="order-card" style="margin-bottom: 14px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;">
                    <div>
                        {% if not truck.is_active %}<span class="surface-badge warn">Inactive</span>{% endif %}
                        <h3 style="margin: 8px 0 2px; display: flex; align-items: center; gap: 8px;">
                            {% if truck.truck_type.icon_url %}<img src="{{ truck.truck_type.icon_url }}" alt="" style="width: 26px; height: 26px; object-fit: contain;">{% else %}{{ truck.truck_type.icon }}{% endif %}
                            {{ truck.nickname|default:truck.truck_type.name }}
                        </h3>
                        <p style="font-size: 0.85rem; color: var(--muted);">{{ truck.truck_type.name }}{% if truck.license_plate %} &middot; {{ truck.license_plate }}{% endif %}</p>
                    </div>
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        <button type="button" class="btn-small fleet-truck-edit-toggle" data-target="fleet-edit-truck-{{ truck.id }}">{{ t.fleet_edit }}</button>
                        <form method="post" action="{% url 'market:fleet_toggle_truck' truck.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small" style="background: var(--muted);">{% if truck.is_active %}Deactivate{% else %}Activate{% endif %}</button>
                        </form>
                    </div>
                </div>

                <form method="post" action="{% url 'market:fleet_edit_truck' truck.id %}" id="fleet-edit-truck-{{ truck.id }}" class="contact-form" style="display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);">
                    {% csrf_token %}
                    <label>{{ t.fleet_truck_type_label }}</label>
                    <select name="truck_type_id" required>
                        {% for tt in truck_types %}<option value="{{ tt.id }}" {% if tt.id == truck.truck_type_id %}selected{% endif %}>{{ tt.icon }} {{ tt.name }}</option>{% endfor %}
                    </select>
                    <label>{{ t.fleet_truck_nickname_label }}</label>
                    <input type="text" name="nickname" value="{{ truck.nickname|default:'' }}">
                    <label>{{ t.fleet_truck_plate_label }}</label>
                    <input type="text" name="license_plate" value="{{ truck.license_plate|default:'' }}">
                    <button type="submit" class="btn-cta">Save</button>
                </form>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_trucks }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-drivers" style="display: none;">
            <div class="contact-form-wrap" style="max-width: 500px; margin-bottom: 30px;">
                <form method="post" action="{% url 'market:fleet_invite_driver' %}" class="contact-form">
                    {% csrf_token %}
                    <label for="driver_first_name">{{ t.fleet_driver_name_label }}</label>
                    <input type="text" id="driver_first_name" name="first_name" required>

                    <label for="driver_last_name">{{ t.fleet_driver_last_name_label }}</label>
                    <input type="text" id="driver_last_name" name="last_name">

                    <label for="driver_email">{{ t.fleet_driver_email_label }}</label>
                    <input type="email" id="driver_email" name="email" required>

                    <label for="driver_phone">{{ t.fleet_driver_phone_label }}</label>
                    <input type="text" id="driver_phone" name="phone_number">

                    <label for="driver_truck_id">{{ t.fleet_driver_truck_label }}</label>
                    <select id="driver_truck_id" name="truck_id" required>
                        {% for truck in trucks %}<option value="{{ truck.id }}">{{ truck.nickname|default:truck.truck_type.name }}</option>{% endfor %}
                    </select>

                    <button type="submit" class="btn-cta">{{ t.fleet_invite_driver }}</button>
                </form>
            </div>

            {% for driver in drivers %}
            <div class="order-card" style="margin-bottom: 14px;">
                <h3 style="margin: 0 0 4px;">{{ driver.user.first_name }} {{ driver.user.last_name }}</h3>
                <p style="font-size: 0.85rem; color: var(--muted);">{{ driver.user.email }}{% if driver.user.phone_number %} &middot; {{ driver.user.phone_number }}{% endif %}</p>
                <p style="font-size: 0.85rem; color: var(--muted); margin-top: 4px;">
                    <span class="surface-badge {% if driver.status_reason == 'available' %}ok{% elif driver.status_reason == 'delivering' %}warn{% endif %}">{{ driver.status_reason }}</span>
                    {{ t.fleet_today_orders }}: {{ driver.today_order_count }}
                </p>
                <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                    <form method="post" action="{% url 'market:fleet_reassign_driver' driver.user_id %}" style="display: flex; gap: 8px; align-items: center;">
                        {% csrf_token %}
                        <select name="truck_id">
                            {% for truck in trucks %}<option value="{{ truck.id }}" {% if truck.id == driver.truck_id %}selected{% endif %}>{{ truck.nickname|default:truck.truck_type.name }}</option>{% endfor %}
                        </select>
                        <button type="submit" class="btn-small">{{ t.fleet_reassign_truck }}</button>
                    </form>
                    <button type="button" class="btn-small fleet-chat-toggle-btn" data-driver-id="{{ driver.user_id }}" style="background: var(--blue);">{{ t.fleet_message_driver }}</button>
                </div>
                {% include 'market/_fleet_chat_widget.html' with driver=driver my_user_id=company.owner_user_id %}
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_drivers }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-financials" style="display: none;">
            <div class="order-card" style="margin-bottom: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                    <h3 style="margin: 0;">{{ t.fleet_ai_insights_title }}</h3>
                    <button type="button" id="fleet-ai-insights-btn" class="btn-small" style="background: var(--blue);">{{ t.fleet_ai_insights_btn }}</button>
                </div>
                <div id="fleet-ai-insights-body" style="margin-top: 10px; color: var(--muted); font-size: 0.9rem; white-space: pre-line;"></div>
            </div>

            <div style="display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px;">
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_pending_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.pending_amount|floatformat:0 }}</h3>
                </div>
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_paid_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.paid_amount|floatformat:0 }}</h3>
                </div>
                <div class="order-card" style="flex: 1; min-width: 140px; text-align: center;">
                    <p style="color: var(--muted); font-size: 0.82rem; margin-bottom: 4px;">{{ t.fleet_lifetime_earnings }}</p>
                    <h3 style="margin: 0;">TSh {{ earnings_summary.lifetime_amount|floatformat:0 }}</h3>
                </div>
            </div>

            <form method="post" action="{% url 'market:fleet_request_payout' %}" style="margin-bottom: 24px;">
                {% csrf_token %}
                <button type="submit" class="btn-cta" {% if not earnings_summary.pending_count %}disabled{% endif %}>{{ t.fleet_request_payout }}</button>
            </form>

            <h3 style="margin-bottom: 10px;">{{ t.fleet_earnings_by_driver_title }}</h3>
            {% for row in earnings_by_driver %}
            <div class="my-data-row">
                <div>
                    <strong>{{ row.name }}</strong>
                    <p style="color: var(--muted); font-size: 0.82rem;">{{ t.fleet_pending_earnings }}: TSh {{ row.pending_amount|floatformat:0 }} ({{ row.pending_count }}) &middot; {{ t.fleet_paid_earnings }}: TSh {{ row.paid_amount|floatformat:0 }}</p>
                </div>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_drivers }}</p>
            {% endfor %}

            <h3 style="margin: 24px 0 10px;">{{ t.fleet_orders_tab_title }}</h3>
            {% for order in recent_orders %}
            <div class="my-data-row">
                <div>
                    <strong>{{ t.order_hash_prefix }}{{ order.id }}</strong>
                    <p style="color: var(--muted); font-size: 0.82rem;">{{ order.delivery_date }} &middot; {{ order.status }} &middot; TSh {{ order.total_amount|floatformat:0 }}</p>
                </div>
            </div>
            {% empty %}
            <p style="color: var(--muted);">{{ t.fleet_no_orders }}</p>
            {% endfor %}
        </div>

        <div id="fleet-tab-warehouse" style="display: none;">
            {% for v in owned_vendors %}
            <div class="order-card" style="margin-bottom: 16px;">
                <h3 style="margin: 0 0 4px;">{{ v.name }} <small style="color: var(--muted); font-weight: 400;">({{ v.vendor_type|title }})</small></h3>
                <p style="color: var(--muted); font-size: 0.85rem; margin-bottom: 12px;">{{ v.region|default:"—" }}</p>

                {% if v.stock %}
                <table class="admin-table" style="margin-bottom: 12px;">
                    <thead><tr><th>{{ t.fleet_stock_product_col }}</th><th>{{ t.fleet_stock_qty_col }}</th></tr></thead>
                    <tbody>
                        {% for s in v.stock %}
                        <tr>
                            <td>{{ s.product_name }}</td>
                            <td>{% if s.quantity < 10 %}<span class="surface-badge warn">{{ s.quantity }} {{ s.unit }}</span>{% else %}{{ s.quantity }} {{ s.unit }}{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_no_stock_yet }}</p>
                {% endif %}

                {% if v.tied_products %}
                <form method="post" action="{% url 'market:fleet_receive_stock' v.vendor_type v.id %}" style="display: inline-flex; align-items: center; gap: 6px;">
                    {% csrf_token %}
                    <select name="product_id" required>
                        {% for p in v.tied_products %}
                        <option value="{{ p.id }}">{{ p.name }}</option>
                        {% endfor %}
                    </select>
                    <input type="number" min="1" name="quantity" placeholder="{{ t.fleet_qty_received_placeholder }}" required style="width: 130px;">
                    <button type="submit" class="btn-small">{{ t.fleet_receive_stock_btn }}</button>
                </form>
                {% else %}
                <p style="color: var(--muted); font-size: 0.85rem;">{{ t.fleet_no_tied_products }}</p>
                {% endif %}
            </div>
            {% empty %}
            <p style="color: var(--muted); margin-bottom: 16px;">{{ t.fleet_no_warehouse_yet }}</p>
            {% endfor %}

            <div class="contact-form-wrap" style="max-width: 560px;">
                <h3 style="margin-bottom: 6px;">{{ t.fleet_register_vendor_title }}</h3>
                <form method="post" action="{% url 'market:fleet_register_vendor' %}" class="contact-form">
                    {% csrf_token %}
                    <label>{{ t.fleet_vendor_type_label }}</label>
                    <select name="vendor_type" required>
                        <option value="warehouse">{{ t.fleet_vendor_type_warehouse }}</option>
                        <option value="industry">{{ t.fleet_vendor_type_industry }}</option>
                    </select>
                    <label>{{ t.fleet_vendor_name_label }}</label>
                    <input type="text" name="name" required>
                    <label>{{ t.fleet_vendor_region_label }}</label>
                    <input type="text" name="region">
                    <label>{{ t.fleet_vendor_lat_label }}</label>
                    <input type="number" step="0.0001" name="lat" placeholder="-6.8197" required>
                    <label>{{ t.fleet_vendor_lng_label }}</label>
                    <input type="number" step="0.0001" name="lng" placeholder="39.2730" required>
                    <label style="margin-top: 10px;">{{ t.fleet_vendor_contact_phone_label }}</label>
                    <input type="text" name="contact_phone">
                    <label>{{ t.fleet_vendor_landmark_label }}</label>
                    <textarea name="landmark_note" rows="2"></textarea>
                    <button type="submit" class="btn-cta">{{ t.fleet_register_vendor_btn }}</button>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-fullscreen.js' %}"></script>
<script src="{% static_v 'js/fleet-chat.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.fleet-tab-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.fleet-tab-btn').forEach(function (b) { b.classList.remove('active'); });
                btn.classList.add('active');
                document.getElementById('fleet-tab-trucks').style.display = btn.dataset.tab === 'trucks' ? 'block' : 'none';
                document.getElementById('fleet-tab-drivers').style.display = btn.dataset.tab === 'drivers' ? 'block' : 'none';
                document.getElementById('fleet-tab-financials').style.display = btn.dataset.tab === 'financials' ? 'block' : 'none';
                document.getElementById('fleet-tab-warehouse').style.display = btn.dataset.tab === 'warehouse' ? 'block' : 'none';
            });
        });

        var aiBtn = document.getElementById('fleet-ai-insights-btn');
        var aiBody = document.getElementById('fleet-ai-insights-body');
        var aiLoaded = false;
        aiBtn.addEventListener('click', function () {
            aiBtn.disabled = true;
            aiBody.textContent = '{{ t.fleet_ai_insights_loading|escapejs }}';
            fetch('{% url "market:fleet_ai_insights" %}' + (aiLoaded ? '?refresh=1' : ''))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    aiBody.textContent = data.insights;
                    aiLoaded = true;
                })
                .catch(function () {
                    aiBody.textContent = '{{ t.fleet_ai_insights_error|escapejs }}';
                })
                .finally(function () { aiBtn.disabled = false; });
        });

        var largeMapBtn = document.getElementById('fleet-large-map-btn');
        var mapWrap = document.getElementById('fleet-live-map-wrap');
        var isLarge = false;
        largeMapBtn.addEventListener('click', function () {
            isLarge = !isLarge;
            mapWrap.style.height = isLarge ? '600px' : '320px';
            largeMapBtn.textContent = isLarge ? '{{ t.fleet_normal_map|escapejs }}' : '{{ t.fleet_large_map|escapejs }}';
            setTimeout(function () { map.invalidateSize(); }, 50);
        });

        document.querySelectorAll('.fleet-truck-edit-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var form = document.getElementById(btn.getAttribute('data-target'));
                if (!form) return;
                var isOpen = form.style.display !== 'none';
                form.style.display = isOpen ? 'none' : 'flex';
            });
        });

        var map = L.map('fleet-live-map').setView([{{ center.lat }}, {{ center.lng }}], 12);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
        enableMapFullscreen('fleet-live-map-wrap', map, 'fleet-map-fullscreen-btn');

        var truckMarkers = {};
        var truckRoutes = {};

        function popupHtml(p) {
            var truckLabel = p.truck_nickname || p.truck_type_name || '';
            return '<strong>' + p.driver_name + '</strong>' +
                (p.driver_phone ? '<br>' + p.driver_phone : '') +
                (truckLabel ? '<br>' + truckLabel : '') +
                '<br>{{ t.order_hash_prefix }}' + p.order_id + ' &middot; ' + p.order_status +
                (p.route ? '<br>' + p.route.distance_km + ' km &middot; ~' + Math.round(p.route.duration_min) + ' min' : '');
        }

        function refreshPositions() {
            fetch('{% url "market:fleet_live_positions" %}')
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var positions = data.positions || [];
                    var seenIds = {};
                    var bounds = [];

                    positions.forEach(function (p) {
                        seenIds[p.driver_id] = true;
                        var latlng = [p.lat, p.lng];
                        bounds.push(latlng);
                        var label = p.truck_nickname || p.truck_type_name || p.driver_name;

                        if (truckMarkers[p.driver_id]) {
                            truckMarkers[p.driver_id].setLatLng(latlng).setPopupContent(popupHtml(p));
                        } else {
                            truckMarkers[p.driver_id] = L.marker(latlng, { icon: vehicleMarkerIcon('car', {}) }).addTo(map)
                                .bindTooltip(label, { permanent: true, direction: 'top', offset: [0, -20] })
                                .bindPopup(popupHtml(p));
                        }

                        if (truckRoutes[p.driver_id]) {
                            map.removeLayer(truckRoutes[p.driver_id]);
                            delete truckRoutes[p.driver_id];
                        }
                        if (p.route && p.route.geometry) {
                            truckRoutes[p.driver_id] = L.geoJSON(p.route.geometry, { style: { color: '#1c3fd6', weight: 4, opacity: 0.75 } }).addTo(map);
                        }
                    });

                    Object.keys(truckMarkers).forEach(function (driverId) {
                        if (!seenIds[driverId]) {
                            map.removeLayer(truckMarkers[driverId]);
                            delete truckMarkers[driverId];
                            if (truckRoutes[driverId]) { map.removeLayer(truckRoutes[driverId]); delete truckRoutes[driverId]; }
                        }
                    });

                    document.getElementById('fleet-no-live-note').style.display = positions.length ? 'none' : 'block';
                    if (bounds.length) { map.fitBounds(bounds, { padding: [30, 30] }); }
                });
        }

        refreshPositions();
        setInterval(refreshPositions, 8000);
    });
</script>
{% endblock %}