<% if (!firm) { %>
  <h1>Firm</h1>
  <div class="alert alert-danger"><%= error || 'Firm not found or access denied.' %></div>
<% } else { %>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
  <h1 style="margin:0"><%= firm.name %></h1>
  <% const badgeClass = { active: 'badge-ok', pending_review: 'badge-warn', suspended: 'badge-danger', offboarding: 'badge-warn', deleted: 'badge-danger' }[firm.status] || ''; %>
  <span class="badge <%= badgeClass %>"><%= firm.status %></span>
</div>

<% if (typeof error !== 'undefined' && error) { %><div class="alert alert-danger"><%= error %></div><% } %>
<% if (firm.status_reason) { %><div class="alert alert-danger">Reason: <%= firm.status_reason %> (by <%= firm.status_changed_by %>, <%= firm.status_changed_at ? new Date(firm.status_changed_at).toLocaleString() : '' %>)</div><% } %>
<% if (firm.grace_period_ends_at) { %><div class="alert alert-danger">Grace period ends <%= new Date(firm.grace_period_ends_at).toLocaleString() %></div><% } %>

<div class="card">
  <h2 style="font-size:15px;margin-top:0">Lifecycle</h2>
  <p style="color:var(--muted);font-size:12px">Users: <%= userCount %> · Plan: <%= firm.plan_tier %> · Residency: <%= firm.data_residency %></p>
  <div style="display:flex;gap:8px;flex-wrap:wrap">
    <% if (firm.status === 'pending_review') { %>
      <form method="post" action="/tenants/<%= firm.id %>/action/approve"><button class="btn" type="submit">Approve</button></form>
      <form method="post" action="/tenants/<%= firm.id %>/action/reject" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><button class="btn btn-danger" type="submit">Reject</button></form>
    <% } %>
    <% if (firm.status === 'active') { %>
      <form method="post" action="/tenants/<%= firm.id %>/action/suspend" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><button class="btn btn-danger" type="submit">Suspend</button></form>
      <form method="post" action="/tenants/<%= firm.id %>/action/start-offboarding" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><button class="btn btn-danger" type="submit">Start Offboarding</button></form>
    <% } %>
    <% if (firm.status === 'suspended') { %>
      <form method="post" action="/tenants/<%= firm.id %>/action/reactivate"><button class="btn" type="submit">Reactivate</button></form>
      <form method="post" action="/tenants/<%= firm.id %>/action/start-offboarding" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><button class="btn btn-danger" type="submit">Start Offboarding</button></form>
    <% } %>
    <% if (firm.status === 'offboarding') { %>
      <form method="post" action="/tenants/<%= firm.id %>/action/reactivate"><button class="btn" type="submit">Cancel Offboarding</button></form>
      <form method="post" action="/tenants/<%= firm.id %>/action/finalize-deletion"><button class="btn btn-danger" type="submit">Finalize Deletion</button></form>
    <% } %>
  </div>
  <p style="margin-top:12px"><a href="/tenants/<%= firm.id %>/export" target="_blank">Export firm data (JSON)</a></p>
</div>

<div class="card" style="max-width:420px">
  <h2 style="font-size:15px;margin-top:0">Metadata</h2>
  <form method="post" action="/tenants/<%= firm.id %>/metadata">
    <label>Plan Tier</label>
    <select name="planTier">
      <% for (const t of ['trial','starter','professional','enterprise']) { %>
      <option value="<%= t %>" <%= firm.plan_tier === t ? 'selected' : '' %>><%= t %></option>
      <% } %>
    </select>
    <label>Data Residency</label>
    <input type="text" name="dataResidency" value="<%= firm.data_residency %>" maxlength="10">
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Save</button>
  </form>
</div>

<div class="card" style="max-width:420px">
  <h2 style="font-size:15px;margin-top:0">UI Theme Override</h2>
  <p style="color:var(--muted);font-size:12px">
    Locks this specific firm to a base template regardless of its own Settings choice or the platform default
    (§28.7 layer 1 — the highest-precedence override). The firm's own Appearance setting becomes read-only while
    this is set. Intended for support/bug-mitigation scenarios, not routine use.
  </p>
  <p style="font-size:13px;margin:8px 0">
    Currently: <strong><%= firm.ui_theme_admin_override || 'not locked' %></strong>
    (own choice: <%= firm.ui_theme || 'none set' %>)
  </p>
  <form method="post" action="/tenants/<%= firm.id %>/metadata" style="display:flex;gap:8px;align-items:center">
    <select name="uiThemeAdminOverride">
      <option value=""        <%= !firm.ui_theme_admin_override ? 'selected' : '' %>>Not locked</option>
      <option value="phoenix" <%= firm.ui_theme_admin_override === 'phoenix' ? 'selected' : '' %>>Lock to Phoenix</option>
      <option value="dason"   <%= firm.ui_theme_admin_override === 'dason'   ? 'selected' : '' %>>Lock to Dason</option>
    </select>
    <button class="btn btn-danger" type="submit">Save</button>
  </form>
</div>

<div class="card" style="max-width:520px">
  <h2 style="font-size:15px;margin-top:0">Feature Flags</h2>
  <p style="color:var(--muted);font-size:12px">A module with no row below is enabled by default.</p>
  <table>
    <tbody>
      <% for (const f of featureFlags) { %>
      <tr>
        <td><%= f.flag_key %></td>
        <td><span class="badge <%= f.enabled ? 'badge-ok' : 'badge-danger' %>"><%= f.enabled ? 'Enabled' : 'Disabled' %></span></td>
        <td>
          <form method="post" action="/tenants/<%= firm.id %>/feature-flags" style="display:inline">
            <input type="hidden" name="flagKey" value="<%= f.flag_key %>">
            <input type="hidden" name="enabled" value="<%= f.enabled ? 'false' : 'true' %>">
            <button class="link-btn" type="submit">Toggle</button>
          </form>
        </td>
      </tr>
      <% } %>
    </tbody>
  </table>
  <form method="post" action="/tenants/<%= firm.id %>/feature-flags" style="display:flex;gap:8px;margin-top:8px">
    <input type="text" name="flagKey" placeholder="e.g. litigation_tracking" style="flex:1">
    <select name="enabled"><option value="true">Enable</option><option value="false">Disable</option></select>
    <button class="btn" type="submit">Set</button>
  </form>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Impersonate</h2>
  <p style="color:var(--muted);font-size:12px">Time-boxed (60s to start), fully audit-logged, only available while the firm is active. Requires a fresh re-auth if your session is more than 15 minutes old.</p>
  <% if (firm.status === 'active' && users.length) { %>
  <form method="post" action="/tenants/<%= firm.id %>/impersonate">
    <label>User</label>
    <select name="targetUserId" required>
      <% for (const u of users) { %><option value="<%= u.id %>"><%= u.first_name %> <%= u.last_name %> — <%= u.email %> (<%= u.role %>)</option><% } %>
    </select>
    <label>Reason (required, audit-logged)</label>
    <input type="text" name="reason" required placeholder="e.g. support ticket #1234">
    <button class="btn btn-danger" type="submit" style="width:100%;margin-top:16px">Start Impersonation Session</button>
  </form>
  <% } else { %>
    <p style="color:var(--muted)">Not available — firm must be active and have at least one eligible user.</p>
  <% } %>
</div>

<script>
function fillReason(form) {
  const reason = prompt('Reason for this action (required, will be audit-logged):');
  if (!reason) return false;
  form.reason.value = reason;
  return true;
}
</script>

<% } %>
