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

{% block title %}Organizational Governance{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
    
    <link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/organizational_governance.css">
{% endblock %}
{% block content %}
<main class="page">
    <header class="topbar">
        <div>
            <h1>Organizational Governance</h1>
            <div class="muted">Policies, approvals, accountability, staff intelligence, compliance, suspicious activity, and continuity governance.</div>
        </div>
        <div class="actions">
            <a class="btn" href="/admin">Admin</a>
            <a class="btn" href="/enterprise/branches">Branch Command</a>
            <a class="btn" href="/workflows">Workflows</a>
            <a class="btn" href="/operational-memory">Memory</a>
            {% if can_manage %}<button class="primary" type="button" onclick="regenerateReports()">Reports</button>{% endif %}
        </div>
    </header>

    <section class="grid">
        <div class="metric"><span>Policies</span><strong>{{ snapshot.summary.policy_count }}</strong></div>
        <div class="metric"><span>Pending Approvals</span><strong>{{ snapshot.summary.pending_approvals }}</strong></div>
        <div class="metric"><span>Risk Findings</span><strong>{{ snapshot.summary.suspicious_findings }}</strong></div>
        <div class="metric"><span>Compliance Warnings</span><strong>{{ snapshot.summary.compliance_warnings }}</strong></div>
        <div class="metric"><span>Expansion Readiness</span><strong>{{ snapshot.strategic_intelligence.expansion_readiness }}</strong></div>
    </section>

    <div class="layout">
        <section>
            <div class="panel">
                <h2>Executive Alert Prioritization</h2>
                <div class="stack">
                    {% for alert in snapshot.executive_alerts %}
                        <div class="line">
                            <span><strong>{{ alert.message }}</strong><br><span class="muted">{{ alert.action }}</span></span>
                            <span class="pill {{ alert.severity }}">{{ alert.score }}</span>
                        </div>
                    {% else %}
                        <div class="muted">No executive governance alerts.</div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Pending Approval Workflow</h2>
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>ID</th><th>Action</th><th>Branch</th><th>Requested By</th><th>Severity</th><th>Reason</th><th>Controls</th></tr></thead>
                        <tbody>
                        {% for approval in snapshot.approvals %}
                            <tr>
                                <td>#{{ approval.id }}</td>
                                <td>{{ approval.action_type }}</td>
                                <td>{{ approval.branch_name or "All" }}</td>
                                <td>{{ approval.requested_by_name or approval.requested_by or "System" }}</td>
                                <td><span class="pill {{ approval.severity }}">{{ approval.severity }}</span></td>
                                <td>{{ approval.reason or "" }}</td>
                                <td>
                                    {% if can_manage %}
                                        <button class="primary" type="button" onclick="decideApproval({{ approval.id }}, 'approved')">Approve</button>
                                        <button class="danger" type="button" onclick="decideApproval({{ approval.id }}, 'rejected')">Reject</button>
                                    {% else %}
                                        <span class="muted">Waiting</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr><td colspan="7">No pending approvals.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel">
                <h2>Staff Performance Intelligence</h2>
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>Staff</th><th>Role</th><th>Branch</th><th>Score</th><th>Transactions</th><th>Refunds</th><th>Coaching</th></tr></thead>
                        <tbody>
                        {% for staff in snapshot.staff_performance %}
                            <tr>
                                <td>{{ staff.username }}</td>
                                <td>{{ staff.role }}</td>
                                <td>{{ staff.branch_name or "Unassigned" }}</td>
                                <td><span class="pill {{ 'healthy' if staff.score >= 85 else 'warning' if staff.score < 70 else '' }}">{{ staff.score }}</span></td>
                                <td>{{ staff.transactions }}</td>
                                <td>{{ staff.refunds }}</td>
                                <td>{{ staff.coaching|join("; ") }}</td>
                            </tr>
                        {% else %}
                            <tr><td colspan="7">No staff records available.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel">
                <h2>Operational Accountability Timeline</h2>
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>When</th><th>Action</th><th>Actor</th><th>Branch</th><th>Hash</th></tr></thead>
                        <tbody>
                        {% for event in snapshot.accountability %}
                            <tr>
                                <td>{{ event.created_at }}</td>
                                <td>{{ event.action }}</td>
                                <td>{{ event.username or event.actor_user_id or "System" }}</td>
                                <td>{{ event.branch_name or "All" }}</td>
                                <td><code>{{ (event.entry_hash or "")[:12] }}</code></td>
                            </tr>
                        {% else %}
                            <tr><td colspan="5">No accountability events yet.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <aside>
            <div class="panel">
                <h2>Role-Based Intelligence</h2>
                <div class="stack">
                    {% for role, profile in snapshot.roles.items() %}
                        <div class="line">
                            <span><strong>{{ role|title }}</strong><br><span class="muted">{{ profile.dashboard }}</span></span>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Operational Policies</h2>
                <div class="stack">
                    {% for policy in snapshot.policies %}
                        <div class="line">
                            <span><strong>{{ policy.policy_key }}</strong><br><span class="muted">{{ policy.action_type }} needs {{ policy.required_role }}</span></span>
                            <span class="pill {{ policy.severity }}">{{ policy.severity }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>

            {% if can_manage %}
            <div class="panel">
                <h2>Create Approval Request</h2>
                <div class="form-grid">
                    <label>Action Type<input id="approval-action" placeholder="refund"></label>
                    <label>Reason<input id="approval-reason" placeholder="Why approval is needed"></label>
                    <button class="primary" type="button" onclick="requestApproval()">Request</button>
                </div>
                <div id="approval-result" class="muted hil-inline-8a77e5a311"></div>
            </div>
            {% endif %}

            <div class="panel">
                <h2>Suspicious Activity Detection</h2>
                <div class="stack">
                    {% for finding in snapshot.suspicious_activity[:8] %}
                        <div class="line">
                            <span><strong>{{ finding.message }}</strong><br><span class="muted">{{ finding.username or "System" }} {{ finding.branch_name or "" }}</span></span>
                            <span class="pill {{ finding.severity }}">{{ finding.anomaly_score }}</span>
                        </div>
                    {% else %}
                        <div class="muted">No open suspicious activity findings.</div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Compliance</h2>
                <div class="stack">
                    {% for check in snapshot.compliance %}
                        <div class="line">
                            <span><strong>{{ check.check_type }}</strong><br><span class="muted">{{ check.message }}</span></span>
                            <span class="pill {{ check.status }}">{{ check.status }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Strategic Executive Intelligence</h2>
                <div class="stack">
                    {% for item in snapshot.strategic_intelligence.recommendations %}
                        <div class="line"><span>{{ item }}</span></div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Knowledge System</h2>
                <div class="stack">
                    {% for entry in snapshot.knowledge %}
                        <div class="line"><span><strong>{{ entry.title }}</strong><br><span class="muted">{{ entry.category }}</span></span></div>
                    {% else %}
                        <div class="muted">No knowledge entries yet.</div>
                    {% endfor %}
                </div>
                {% if can_manage %}
                <div class="hil-inline-de7015e40d">
                    <input id="knowledge-title" placeholder="Procedure title">
                    <textarea id="knowledge-body" placeholder="Procedure, policy, or recovery note"></textarea>
                    <button class="primary" type="button" onclick="addKnowledge()">Add Knowledge</button>
                </div>
                {% endif %}
            </div>
        </aside>
    </div>
</main>

<script>
async function postJson(url, payload) {
  const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
  const res = await fetch(url, {method: "POST", headers: {"Content-Type": "application/json", "X-CSRF-Token": token}, body: JSON.stringify(payload || {})});
  const data = await res.json();
  if (!res.ok || data.error || data.ok === false) throw new Error(data.error || "Request failed");
  return data;
}
async function decideApproval(id, decision) {
  await postJson("/api/organizational-governance/approvals/" + id + "/" + decision, {});
  location.reload();
}
async function requestApproval() {
  const result = document.getElementById("approval-result");
  try {
    const data = await postJson("/api/organizational-governance/approvals", {
      action_type: document.getElementById("approval-action").value,
      reason: document.getElementById("approval-reason").value,
      target_type: "manual_request"
    });
    result.textContent = "Approval #" + data.approval_id + " created.";
    setTimeout(() => location.reload(), 700);
  } catch (err) {
    result.textContent = err.message;
  }
}
async function addKnowledge() {
  await postJson("/api/organizational-governance/knowledge", {
    title: document.getElementById("knowledge-title").value,
    body: document.getElementById("knowledge-body").value,
    category: "procedure"
  });
  location.reload();
}
async function regenerateReports() {
  const data = await postJson("/api/organizational-governance/reports/regenerate", {});
  alert("Generated " + data.reports.length + " governance reports.");
}
</script>
{% endblock %}