<div class="max-w-7xl mx-auto">
  <div class="mb-4 md:mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tenant Admin Dashboard</h1>
    <p class="mt-1 md:mt-2 text-sm md:text-base text-gray-600">
      Cross-tenant management and overview
    </p>
  </div>

  <!-- Statistics Cards -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-6 md:mb-8">
    <!-- Total Websites -->
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs md:text-sm font-medium text-gray-600">Total Websites</p>
          <p class="text-2xl md:text-3xl font-bold text-gray-900 mt-1 md:mt-2"><%= @total_websites %></p>
        </div>
        <div class="bg-blue-100 rounded-full p-2 md:p-3 hidden sm:block">
          <svg class="w-6 h-6 md:w-8 md:h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
      <%= link_to 'View All Websites', tenant_admin_websites_path, class: 'text-blue-600 hover:text-blue-800 text-xs md:text-sm mt-2 md:mt-4 inline-block' %>
    </div>

    <!-- Total Users -->
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs md:text-sm font-medium text-gray-600">Total Users</p>
          <p class="text-2xl md:text-3xl font-bold text-gray-900 mt-1 md:mt-2"><%= @total_users %></p>
        </div>
        <div class="bg-green-100 rounded-full p-2 md:p-3 hidden sm:block">
          <svg class="w-6 h-6 md:w-8 md:h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
          </svg>
        </div>
      </div>
      <%= link_to 'View All Users', tenant_admin_users_path, class: 'text-blue-600 hover:text-blue-800 text-xs md:text-sm mt-2 md:mt-4 inline-block' %>
    </div>

    <!-- Total Properties -->
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs md:text-sm font-medium text-gray-600">Total Properties</p>
          <p class="text-2xl md:text-3xl font-bold text-gray-900 mt-1 md:mt-2"><%= @total_properties %></p>
        </div>
        <div class="bg-purple-100 rounded-full p-2 md:p-3 hidden sm:block">
          <svg class="w-6 h-6 md:w-8 md:h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
          </svg>
        </div>
      </div>
      <%= link_to 'View All Properties', tenant_admin_props_path, class: 'text-blue-600 hover:text-blue-800 text-xs md:text-sm mt-2 md:mt-4 inline-block' %>
    </div>

    <!-- Active Tenants -->
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs md:text-sm font-medium text-gray-600">Active Tenants (30d)</p>
          <p class="text-2xl md:text-3xl font-bold text-gray-900 mt-1 md:mt-2"><%= @active_tenants %></p>
        </div>
        <div class="bg-yellow-100 rounded-full p-2 md:p-3 hidden sm:block">
          <svg class="w-6 h-6 md:w-8 md:h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M12 1.586l-4 4v12.828l4-4V1.586zM3.707 3.293A1 1 0 002 4v10a1 1 0 00.293.707L6 18.414V5.586L3.707 3.293zM17.707 5.293L14 1.586v12.828l2.293 2.293A1 1 0 0018 16V6a1 1 0 00-.293-.707z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
      <span class="text-gray-500 text-xs md:text-sm mt-2 md:mt-4 inline-block">Last 30 days activity</span>
    </div>
  </div>

  <!-- Subscription Overview -->
  <div class="bg-white rounded-lg shadow p-4 md:p-6 mb-6 md:mb-8">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-base md:text-lg font-semibold text-gray-900">Subscription Overview</h3>
      <%= link_to "Manage Subscriptions", tenant_admin_subscriptions_path, class: "text-xs md:text-sm font-medium text-blue-600 hover:underline" %>
    </div>
    
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
      <!-- Total Subscriptions -->
      <div class="bg-gray-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-gray-900"><%= @subscription_stats[:total] %></p>
        <p class="text-xs text-gray-600 mt-1">Total</p>
      </div>
      
      <!-- Active -->
      <div class="bg-green-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-green-700"><%= @subscription_stats[:active] %></p>
        <p class="text-xs text-green-600 mt-1">Active</p>
      </div>
      
      <!-- Trialing -->
      <div class="bg-blue-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-blue-700"><%= @subscription_stats[:trialing] %></p>
        <p class="text-xs text-blue-600 mt-1">Trialing</p>
      </div>
      
      <!-- Past Due -->
      <div class="bg-orange-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-orange-700"><%= @subscription_stats[:past_due] %></p>
        <p class="text-xs text-orange-600 mt-1">Past Due</p>
      </div>
      
      <!-- Canceled -->
      <div class="bg-red-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-red-700"><%= @subscription_stats[:canceled] %></p>
        <p class="text-xs text-red-600 mt-1">Canceled</p>
      </div>
      
      <!-- Expiring Soon -->
      <div class="bg-yellow-50 rounded-lg p-3 md:p-4 text-center">
        <p class="text-xl md:text-2xl font-bold text-yellow-700"><%= @subscription_stats[:expiring_soon] %></p>
        <p class="text-xs text-yellow-600 mt-1">Expiring (7d)</p>
      </div>
    </div>

    <!-- Plans Summary -->
    <div class="mt-4 pt-4 border-t border-gray-200">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <span class="text-sm text-gray-600">
            <strong><%= @plan_stats[:active] %></strong> active plans of <strong><%= @plan_stats[:total] %></strong> total
          </span>
        </div>
        <%= link_to "Manage Plans", tenant_admin_plans_path, class: "text-xs md:text-sm font-medium text-blue-600 hover:underline" %>
      </div>
    </div>
  </div>

  <!-- Trials Expiring Soon Alert -->
  <% if @expiring_trials.any? %>
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 md:mb-8 rounded-r-lg">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <h3 class="text-sm font-medium text-yellow-800">Trials Expiring Soon</h3>
          <div class="mt-2 text-sm text-yellow-700">
            <ul class="list-disc list-inside space-y-1">
              <% @expiring_trials.each do |subscription| %>
                <li>
                  <%= link_to subscription.website.subdomain, tenant_admin_subscription_path(subscription), class: "font-medium hover:underline" %>
                  (<%= subscription.plan.display_name %>) - 
                  <span class="font-semibold">
                    <% if subscription.trial_days_remaining == 0 %>
                      Expires today
                    <% elsif subscription.trial_days_remaining == 1 %>
                      1 day remaining
                    <% else %>
                      <%= subscription.trial_days_remaining %> days remaining
                    <% end %>
                  </span>
                </li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <!-- Quick Actions -->
  <div class="bg-white rounded-lg shadow p-4 md:p-6 mb-6 md:mb-8">
    <h3 class="text-base md:text-lg font-semibold text-gray-900 mb-3 md:mb-4">Quick Actions</h3>
    <div class="flex flex-col sm:flex-row flex-wrap gap-2 md:gap-3">
      <%= link_to "Create New Website", new_tenant_admin_website_path, class: "text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs md:text-sm px-4 md:px-5 py-2 md:py-2.5 text-center" %>
      <%= link_to "Add New User", new_tenant_admin_user_path, class: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs md:text-sm px-4 md:px-5 py-2 md:py-2.5 text-center" %>
      <%= link_to "View All Tenants", tenant_admin_websites_path, class: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs md:text-sm px-4 md:px-5 py-2 md:py-2.5 text-center" %>
      <%= link_to "Manage Subscriptions", tenant_admin_subscriptions_path, class: "text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs md:text-sm px-4 md:px-5 py-2 md:py-2.5 text-center" %>
    </div>
  </div>

  <!-- Recent Activity -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
    <!-- Recent Websites -->
    <div class="bg-white rounded-lg shadow">
      <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-200 flex justify-between items-center">
        <h2 class="text-base md:text-lg font-semibold text-gray-900">Recent Websites</h2>
        <%= link_to "View all", tenant_admin_websites_path, class: "text-xs md:text-sm font-medium text-blue-600 hover:underline" %>
      </div>
      <div class="p-4 md:p-6">
        <% if @recent_websites.any? %>
          <div class="space-y-3">
            <% @recent_websites.each do |website| %>
              <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                <div>
                  <p class="font-medium text-gray-900">
                    <%= link_to website.subdomain || "(No subdomain)", tenant_admin_website_path(website), class: "hover:underline" %>
                  </p>
                  <p class="text-sm text-gray-500">
                    <%= website.company_display_name || "N/A" %>
                  </p>
                </div>
                <div class="text-xs text-gray-500">
                  <%= time_ago_in_words(website.created_at) %> ago
                </div>
              </div>
            <% end %>
          </div>
        <% else %>
          <p class="text-gray-500 text-center py-4">No websites yet</p>
        <% end %>
      </div>
    </div>

    <!-- Recent Users -->
    <div class="bg-white rounded-lg shadow">
      <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-200 flex justify-between items-center">
        <h2 class="text-base md:text-lg font-semibold text-gray-900">Recent Users</h2>
        <%= link_to "View all", tenant_admin_users_path, class: "text-xs md:text-sm font-medium text-blue-600 hover:underline" %>
      </div>
      <div class="p-4 md:p-6">
        <% if @recent_users.any? %>
          <div class="space-y-3">
            <% @recent_users.first(5).each do |user| %>
              <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                <div class="flex items-center space-x-3">
                  <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-semibold">
                    <%= user.email[0].upcase %>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900">
                      <%= link_to user.email, tenant_admin_user_path(user), class: "hover:underline" %>
                    </p>
                    <% if user.respond_to?(:admin) && user.admin %>
                      <p class="text-xs text-blue-600 font-medium">Admin</p>
                    <% end %>
                  </div>
                </div>
                <div class="text-xs text-gray-500">
                  <%= time_ago_in_words(user.created_at) %> ago
                </div>
              </div>
            <% end %>
          </div>
        <% else %>
          <p class="text-gray-500 text-center py-4">No users yet</p>
        <% end %>
      </div>
    </div>
  </div>
</div>
