<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title"><%= title %></h2>
      <div class="text-secondary mt-1">REST API reference for Flutter integration · Base URL: <code><%= docs.baseUrl %></code></div>
    </div>
    <div class="col-auto ms-auto d-print-none">
      <a href="/admin/api-docs/export.json" class="btn btn-primary" download="qeem-api-docs.json">
        <i class="ti ti-download me-1"></i> Export JSON
      </a>
    </div>
  </div>
</div>

<div class="row api-docs-layout">
  <div class="col-lg-3 api-docs-toc-col">
    <div class="card api-docs-toc">
      <div class="card-header"><h3 class="card-title">Contents</h3></div>
      <div class="list-group list-group-flush">
        <a href="#errors" class="list-group-item list-group-item-action">Error Codes</a>
        <a href="#flutter" class="list-group-item list-group-item-action">Flutter Setup</a>
        <% docs.sections.forEach(function(section) { %>
        <a href="#<%= section.id %>" class="list-group-item list-group-item-action"><%= section.title %></a>
        <% }); %>
      </div>
    </div>
  </div>

  <div class="col-lg-9">
    <div class="card mb-4" id="errors">
      <div class="card-header"><h3 class="card-title">HTTP Error Codes</h3></div>
      <div class="table-responsive">
        <table class="table table-vcenter card-table">
          <thead><tr><th>Code</th><th>Meaning</th><th>When</th><th>Example</th></tr></thead>
          <tbody>
            <% docs.errorCodes.forEach(function(err) { %>
            <tr>
              <td><span class="badge bg-<%= err.code < 400 ? 'success' : err.code < 500 ? 'warning' : 'danger' %>"><%= err.code %></span></td>
              <td><%= err.meaning %></td>
              <td class="text-secondary"><%= err.when %></td>
              <td><% if (err.example) { %><pre class="api-code mb-0"><%= JSON.stringify(err.example, null, 2) %></pre><% } else { %>—<% } %></td>
            </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card mb-4" id="flutter">
      <div class="card-header"><h3 class="card-title">Flutter Implementation</h3></div>
      <div class="card-body">
        <div class="alert alert-info">
          Export JSON is restricted to <strong>super_admin</strong> only. Use the button above while logged in, or call
          <code>/api/v1/docs.json</code> with <code>Authorization: Bearer &lt;token&gt;</code> from
          <code>POST /api/auth/login</code>. All exports are audit-logged.
        </div>
        <h4>1. Add dependencies (pubspec.yaml)</h4>
        <pre class="api-code"><%= docs.flutterSetup.packages %></pre>

        <h4 class="mt-4">2. API config</h4>
        <pre class="api-code"><%= docs.flutterSetup.baseConfig %></pre>

        <h4 class="mt-4">3. Auth header (protected routes)</h4>
        <pre class="api-code"><%= docs.flutterSetup.authHeader %></pre>

        <h4 class="mt-4">4. GET request example</h4>
        <pre class="api-code"><%= docs.flutterSetup.getExample %></pre>

        <h4 class="mt-4">5. Multipart upload (deals/flyers)</h4>
        <pre class="api-code"><%= docs.flutterSetup.postMultipart %></pre>

        <div class="alert alert-info mt-3 mb-0">
          Image and file URLs in responses are relative (e.g. <code>/uploads/deals/abc.jpg</code>). Prepend <code>serverUrl</code> before passing to <code>Image.network()</code>.
        </div>
      </div>
    </div>

    <% docs.sections.forEach(function(section) { %>
    <div class="card mb-4" id="<%= section.id %>">
      <div class="card-header"><h3 class="card-title"><%= section.title %></h3></div>
      <div class="card-body p-0">
        <% section.endpoints.forEach(function(ep, idx) { %>
        <div class="api-endpoint <%= idx > 0 ? 'border-top' : '' %> p-4">
          <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
            <span class="badge bg-<%= ep.method === 'GET' ? 'success' : ep.method === 'POST' ? 'primary' : ep.method === 'PUT' ? 'warning' : 'danger' %>"><%= ep.method %></span>
            <code class="fs-4"><%= docs.baseUrl %><%= ep.path %></code>
            <% if (ep.auth) { %><span class="badge bg-secondary">JWT Required</span><% } else { %><span class="badge bg-azure">Public</span><% } %>
          </div>
          <% if (ep.description) { %><p class="text-secondary mb-3"><%= ep.description %></p><% } %>
          <% if (ep.query) { %><div class="mb-2"><strong>Query:</strong> <code><%= ep.query %></code></div><% } %>

          <% if (ep.request) { %>
          <div class="mb-3">
            <strong>Sample Request</strong>
            <pre class="api-code"><%= JSON.stringify(ep.request, null, 2) %></pre>
          </div>
          <% } %>

          <% if (ep.response) { %>
          <div class="mb-3">
            <strong>Sample Response</strong>
            <pre class="api-code"><%= JSON.stringify(ep.response, null, 2) %></pre>
          </div>
          <% } %>

          <% if (ep.flutter) { %>
          <div class="mb-3">
            <strong>Flutter Example</strong>
            <pre class="api-code"><%= ep.flutter %></pre>
          </div>
          <% } %>

          <% if (ep.errors && ep.errors.length) { %>
          <div>
            <strong>Possible Errors:</strong>
            <% ep.errors.forEach(function(code) { %>
            <span class="badge bg-secondary ms-1"><%= code %></span>
            <% }); %>
          </div>
          <% } %>
        </div>
        <% }); %>
      </div>
    </div>
    <% }); %>
  </div>
</div>

<script src="/js/api-docs-toc.js"></script>
