{% extends "base.html" %}
{% block title %}Platform Admin — Tenants{% endblock %}
{% block content %}
<div class="p-3 sm:p-6">

  {# ── Header ── #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">admin_panel_settings</span>
      Platform Admin — All Tenants
    </h2>
    <div class="flex items-center gap-2 flex-wrap">
      <a href="{{ url_for('admin.billing_overview') }}"
         class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">receipt_long</span>
        Billing
      </a>
      <a href="{{ url_for('admin.ai_usage') }}"
         class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">psychology</span>
        AI Usage
      </a>
      <a href="{{ url_for('admin.security') }}"
         class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">shield</span>
        Security
      </a>
      <a href="{{ url_for('admin.health') }}"
         class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">monitor_heart</span>
        System Health
      </a>
    </div>
  </div>

  {# ── Tenant table ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          <th class="px-4 py-3">ID</th>
          <th class="px-4 py-3">Name</th>
          <th class="px-4 py-3">Slug</th>
          <th class="px-4 py-3">Plan</th>
          <th class="px-4 py-3 text-right">Users</th>
          <th class="px-4 py-3 text-center">Onboarded</th>
          <th class="px-4 py-3 text-center">Status</th>
          <th class="px-4 py-3">Created</th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        {% for org in orgs %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors {{ 'bg-red-50 dark:bg-red-500/10' if org.is_suspended else '' }}">
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 tabular-nums">{{ org.id }}</td>
          <td class="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">{{ org.name }}</td>
          <td class="px-4 py-3">
            <code class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-1.5 py-0.5 rounded">{{ org.slug }}</code>
          </td>
          <td class="px-4 py-3">
            {% if org.plan == 'pro' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800 dark:bg-violet-500/20 dark:text-violet-300">pro</span>
            {% elif org.plan == 'basic' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300">basic</span>
            {% elif org.plan == 'internal' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-600 dark:text-gray-300">internal</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">free</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-right tabular-nums text-gray-700 dark:text-gray-300">{{ org.user_count }}</td>
          <td class="px-4 py-3 text-center">
            {% if org.onboarding_complete %}
              <span class="material-symbols-outlined text-green-500 dark:text-green-400 text-base">check_circle</span>
            {% else %}
              <span class="material-symbols-outlined text-gray-300 dark:text-gray-600 text-base">radio_button_unchecked</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-center">
            {% if org.is_suspended %}
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
                <span class="material-symbols-outlined text-xs">block</span>
                Suspended
              </span>
            {% else %}
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400">
                <span class="material-symbols-outlined text-xs">check</span>
                Active
              </span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 tabular-nums whitespace-nowrap">
            {{ org.created_at.strftime('%Y-%m-%d') if org.created_at else '—' }}
          </td>
          <td class="px-4 py-3">
            <a href="{{ url_for('admin.org_detail', org_id=org.id) }}"
               class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors whitespace-nowrap">
              View
              <span class="material-symbols-outlined text-xs">chevron_right</span>
            </a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="9" class="px-4 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
            <span class="material-symbols-outlined text-3xl block mb-2 text-gray-300 dark:text-gray-600">business</span>
            No tenants found.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}