{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Enterprise Experience Center - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/hil-pages/enterprise_experience.css">
{% endblock %}
{% block content %}
<main class="shell">
    <div class="topbar">
        <div>
            <h1>Enterprise Experience Center</h1>
            <p class="muted">System-wide consistency, universal search, command palette, notifications, auditability, localization, trust indicators, readiness, and performance guardrails.</p>
        </div>
        <div class="actions">
            <a class="btn secondary" href="/admin">Admin</a>
            <a class="btn secondary" href="/server/dashboard">Server</a>
            <a class="btn secondary" href="/reports/enterprise">Enterprise Reports</a>
        </div>
    </div>

    <section class="panel">
        <h2>Operational Trust</h2>
        <div class="kpi-grid">
            {% for indicator in snapshot.trust.indicators %}
                <div class="kpi">
                    <span>{{ indicator.label }}</span>
                    <strong class="{{ indicator.status }}">{{ indicator.value }}</strong>
                </div>
            {% endfor %}
        </div>
        <p class="muted">Readiness score {{ snapshot.readiness.score }}/100. Consistency score {{ snapshot.consistency.score }}/100.</p>
    </section>

    <section class="grid hil-inline-d6f2af6e0a">
        <article class="panel">
            <h2>Global Search</h2>
            <input id="global-search-box" placeholder="Search products, receipts, branches, reports, customers, barcodes...">
            <div id="global-search-results" class="hil-inline-d2c171b18b"></div>
        </article>

        <article class="panel">
            <h2>Command Palette</h2>
            <p class="muted">Press Ctrl+K anywhere, or use these shortcuts directly.</p>
            {% for command in snapshot.commands[:10] %}
                <div class="result"><a href="{{ command.url }}">{{ command.label }}</a><br><span class="muted">{{ command.keywords }}</span></div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Notification Center</h2>
            {% for notice in snapshot.notifications[:10] %}
                <div class="event">
                    <span class="badge">{{ notice.priority or notice.severity }}</span>
                    <strong>{{ notice.subject }}</strong>
                    <p class="muted hil-inline-ef0b7a1148">{{ notice.message }}</p>
                </div>
            {% else %}
                <p class="muted">No active operational notifications.</p>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Consistency Engine</h2>
            {% for check in snapshot.consistency.checks %}
                <div class="event">
                    <strong class="{{ check.status }}">{{ check.name }}</strong>
                    <p class="muted hil-inline-ef0b7a1148">{{ check.detail }}</p>
                </div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Enterprise Settings Governance</h2>
            <form id="enterprise-setting-form">
                <div class="grid hil-inline-4451138d48">
                    <select name="setting_key" id="enterprise-setting-key" required>
                        <option value="timezone" data-placeholder="Africa/Nairobi" data-category="localization">Timezone</option>
                        <option value="date_format" data-placeholder="YYYY-MM-DD" data-category="localization">Date Format</option>
                        <option value="currency_display" data-placeholder="shop_currency" data-category="localization">Currency Display</option>
                        <option value="high_contrast" data-placeholder="available" data-category="accessibility">High Contrast</option>
                        <option value="command_palette" data-placeholder="enabled" data-category="experience">Command Palette</option>
                        <option value="report_retention_days" data-placeholder="180" data-category="reports">Report Retention Days</option>
                        <option value="inventory_low_stock_threshold" data-placeholder="10" data-category="inventory">Low Stock Threshold</option>
                        <option value="sync_retry_policy" data-placeholder="balanced" data-category="sync">Sync Retry Policy</option>
                    </select>
                    <input name="setting_value" id="enterprise-setting-value" required placeholder="Africa/Nairobi">
                </div>
                <input type="hidden" name="category" id="enterprise-setting-category" value="localization">
                <input type="hidden" name="scope" value="global">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="actions hil-inline-8a77e5a311"><button type="submit">Save Setting</button></div>
            </form>
            <div id="enterprise-setting-status" class="form-status" role="status" aria-live="polite"></div>
            <p class="muted hil-inline-d2c171b18b">Currency {{ snapshot.localization.currency }}, language {{ snapshot.localization.language }}, timezone {{ snapshot.localization.timezone }}.</p>
        </article>

        <article class="panel">
            <h2>Performance Guardrails</h2>
            <p class="muted">{{ snapshot.performance.slow_count }} slow route event(s) above {{ snapshot.performance.threshold_ms }}ms.</p>
            {% for event in snapshot.performance.events[:5] %}
                <div class="event"><strong>{{ event.path }}</strong><br><span class="muted">{{ event.duration_ms }}ms | {{ event.severity }}</span></div>
            {% endfor %}
        </article>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Operational Event Stream</h2>
        <table class="table">
            <thead><tr><th>Time</th><th>Source</th><th>Event</th><th>Category</th><th>Target</th></tr></thead>
            <tbody>
            {% for event in snapshot.stream %}
                <tr>
                    <td>{{ event.created_at }}</td>
                    <td>{{ event.source }}</td>
                    <td>{{ event.event_type }}</td>
                    <td>{{ event.category }}</td>
                    <td>{{ event.target_type }} {{ event.target_id or '' }}</td>
                </tr>
            {% else %}
                <tr><td colspan="5">No event stream records yet.</td></tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="actions hil-inline-56f4356299">
            <button type="button" onclick="regenerateExperienceReports()">Regenerate Experience Reports</button>
        </div>
    </section>
</main>

<script>
const searchBox = document.getElementById("global-search-box");
const searchResults = document.getElementById("global-search-results");
let searchTimer = null;
searchBox.addEventListener("input", () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(async () => {
        const q = searchBox.value.trim();
        if (!q) { searchResults.innerHTML = ""; return; }
        const res = await fetch("/api/global-search?q=" + encodeURIComponent(q));
        const data = await res.json();
        searchResults.innerHTML = (data.results || []).map(item =>
            `<div class="result"><a href="${item.url}">${item.title}</a><br><span class="muted">${item.type} | ${item.subtitle}</span></div>`
        ).join("") || "<p class='muted'>No results.</p>";
    }, 120);
});

document.getElementById("enterprise-setting-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = document.getElementById("enterprise-setting-status");
    status.className = "form-status";
    status.textContent = "Saving setting...";
    const form = new FormData(event.target);
    try {
        const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
        const res = await fetch("/api/enterprise-settings", {
            method:"POST",
            body:form,
            credentials:"same-origin",
            headers: token ? {"X-CSRF-Token": token} : {}
        });
        const data = await res.json();
        if (!data.ok) throw new Error(data.error || "Setting failed.");
        status.className = "form-status ok";
        status.textContent = "Setting saved.";
    } catch (error) {
        status.className = "form-status error";
        status.textContent = error.message || "Setting failed.";
    }
});

const settingKey = document.getElementById("enterprise-setting-key");
const settingValue = document.getElementById("enterprise-setting-value");
const settingCategory = document.getElementById("enterprise-setting-category");
function syncSettingPlaceholder() {
    const option = settingKey.options[settingKey.selectedIndex];
    settingValue.placeholder = option.dataset.placeholder || "";
    settingCategory.value = option.dataset.category || "general";
}
settingKey.addEventListener("change", syncSettingPlaceholder);
syncSettingPlaceholder();

async function regenerateExperienceReports() {
    const res = await fetch("/api/enterprise-experience/reports/regenerate", {method:"POST"});
    const data = await res.json();
    alert(data.ok ? "Generated " + data.reports.length + " enterprise experience reports." : (data.error || "Failed."));
}
</script>
{% endblock %}