<%- include('../shared/_head', { title: title, portalCss: '/platform/merchant/css/portal.css', bodyClass: 'merchant-portal dashboard-page' }) %>

<div class="dashboard-shell">
  <header class="dashboard-header">
    <div class="dashboard-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--merchant">Merchant</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/merchant/dashboard" class="nav-link">Dashboard</a>
      <a href="/merchant/organization" class="nav-link nav-link--active">Organization</a>
      <a href="/merchant/checkouts" class="nav-link">Requests</a>
      <a href="/merchant/pos" class="nav-link">POS Charge</a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= merchantUser.fullName %></span>
      <form method="POST" action="/merchant/logout" style="display:inline">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="btn-link">Sign out</button>
      </form>
    </nav>
  </header>

  <main class="dashboard-main">
    <%- include('../shared/_flash') %>

    <div class="page-header">
      <div>
        <h1><%= org.name %></h1>
        <p class="text-muted">
          Slug: <span class="mono"><%= org.slug %></span>
          <% if (org.website) { %>· <a href="<%= org.website %>" target="_blank" rel="noopener"><%= org.website %></a><% } %>
        </p>
      </div>
      <span class="status-pill-lg status-pill--<%= org.status %>"><%= org.status %></span>
    </div>

    <!-- ── Locations ──────────────────────────────────────────────────── -->
    <section class="org-section">
      <div class="section-header">
        <h2>Locations</h2>
        <% if (['owner', 'admin'].includes(membership.role)) { %>
        <a href="/merchant/organization/location/new" class="btn btn-secondary btn--sm">Add location</a>
        <% } %>
      </div>

      <% if (!locations.length) { %>
      <div class="empty-state">
        <p>No locations yet. Add your first store or service location.</p>
        <% if (['owner', 'admin'].includes(membership.role)) { %>
        <a href="/merchant/organization/location/new" class="btn btn-primary btn--sm">Add location</a>
        <% } %>
      </div>
      <% } else { %>
      <div class="data-table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Code</th>
              <th>City</th>
              <th>Status</th>
              <% if (['owner', 'admin'].includes(membership.role)) { %><th></th><% } %>
            </tr>
          </thead>
          <tbody>
            <% for (const loc of locations) { %>
            <tr class="<%= loc.isActive ? '' : 'row--inactive' %>">
              <td><strong><%= loc.name %></strong></td>
              <td><span class="mono"><%= loc.locationCode %></span></td>
              <td><%= loc.addressCity || '—' %></td>
              <td>
                <span class="status-pill <%= loc.isActive ? '' : 'status-pill--inactive' %>">
                  <%= loc.isActive ? 'active' : 'inactive' %>
                </span>
              </td>
              <% if (['owner', 'admin'].includes(membership.role)) { %>
              <td>
                <form method="POST" action="/merchant/organization/location/<%= loc.id %>/toggle" style="display:inline">
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                  <button type="submit" class="btn-link btn-link--<%= loc.isActive ? 'warn' : 'muted' %>">
                    <%= loc.isActive ? 'Deactivate' : 'Activate' %>
                  </button>
                </form>
              </td>
              <% } %>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
      <% } %>
    </section>

    <!-- ── Team ──────────────────────────────────────────────────────── -->
    <section class="org-section">
      <div class="section-header">
        <h2>Team</h2>
      </div>

      <div class="data-table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
              <th>Status</th>
              <% if (['owner', 'admin'].includes(membership.role)) { %><th></th><% } %>
            </tr>
          </thead>
          <tbody>
            <% for (const member of members) { %>
            <tr>
              <td><strong><%= member.fullName %></strong></td>
              <td><%= member.email %></td>
              <td><span class="role-badge role-badge--<%= member.role %>"><%= member.role %></span></td>
              <td>
                <% if (member.acceptedAt) { %>
                <span class="status-pill">active</span>
                <% } else { %>
                <span class="status-pill status-pill--pending">invited</span>
                <% } %>
              </td>
              <% if (['owner', 'admin'].includes(membership.role)) { %>
              <td>
                <% const isSelf = member.userId === merchantUser.id; %>
                <% const isOwner = member.role === 'owner'; %>
                <% if (!isSelf && !isOwner) { %>
                <form method="POST" action="/merchant/organization/member/<%= member.id %>/remove" style="display:inline">
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                  <button type="submit" class="btn-link btn-link--warn"
                          onclick="return confirm('Remove <%= member.fullName %> from the organization?')">
                    Remove
                  </button>
                </form>
                <% } %>
              </td>
              <% } %>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>

      <!-- Invite form — owners and admins only -->
      <% if (['owner', 'admin'].includes(membership.role)) { %>
      <div class="invite-form-wrap">
        <h3>Invite a team member</h3>
        <p class="text-muted">They must already have a BeezifiPay merchant account.</p>

        <%- include('../shared/_errors', { errors: inviteErrors }) %>

        <form method="POST" action="/merchant/organization/invite" class="invite-form">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <div class="invite-row">
            <div class="field field--inline">
              <label for="invite-email">Email address</label>
              <input type="email" id="invite-email" name="email"
                     value="<%= typeof inviteValues.email !== 'undefined' ? inviteValues.email : '' %>"
                     placeholder="colleague@example.com" required>
            </div>
            <div class="field field--inline">
              <label for="invite-role">Role</label>
              <select id="invite-role" name="role">
                <option value="staff" <%= (inviteValues.role === 'staff' || !inviteValues.role) ? 'selected' : '' %>>Staff</option>
                <option value="admin" <%= inviteValues.role === 'admin' ? 'selected' : '' %>>Admin</option>
              </select>
            </div>
            <button type="submit" class="btn btn-primary btn--sm invite-submit">Send invite</button>
          </div>
        </form>
      </div>
      <% } %>
    </section>

    <!-- ── Developer tools ─────────────────────────────────────────── -->
    <% if (['owner', 'admin'].includes(membership.role)) { %>
    <section class="org-section">
      <div class="section-header">
        <h2>Developer tools</h2>
      </div>
      <div style="display:flex;gap:var(--space-4);flex-wrap:wrap">
        <a href="/merchant/organization/api-keys" class="btn btn-secondary btn--sm">API Keys</a>
        <a href="/merchant/organization/webhooks" class="btn btn-secondary btn--sm">Webhooks</a>
        <a href="/merchant/organization/developer" class="btn btn-secondary btn--sm">API Docs</a>
      </div>
    </section>
    <% } %>
  </main>
</div>

<%- include('../shared/_foot') %>
