<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-900">Email Templates</h1>
    <p class="mt-2 text-gray-600">Manage email templates across all websites</p>
  </div>

  <% if @website %>
    <!-- Website-specific view -->
    <div class="mb-6">
      <%= link_to tenant_admin_email_templates_path, class: "text-blue-600 hover:text-blue-800 flex items-center text-sm" do %>
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
        Back to All Websites
      <% end %>
    </div>

    <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-lg font-semibold text-blue-900">
            Templates for: <span class="font-mono"><%= @website.subdomain %></span>
          </h2>
          <p class="text-sm text-blue-700">Customize the emails sent from this website</p>
        </div>
        <%= link_to tenant_admin_website_path(@website), class: "text-blue-600 hover:text-blue-800 text-sm" do %>
          View Website Details
        <% end %>
      </div>
    </div>

    <!-- Info Banner -->
    <div class="mb-6 bg-gray-50 border border-gray-200 rounded-lg p-4">
      <div class="flex">
        <svg class="w-5 h-5 text-gray-600 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <h3 class="text-sm font-medium text-gray-800">How it works</h3>
          <p class="mt-1 text-sm text-gray-700">
            Each email type has a default template. You can customize any template by clicking "Customize".
            Use variables like <code class="bg-gray-200 px-1 rounded">{{ visitor_name }}</code> to personalize emails.
          </p>
        </div>
      </div>
    </div>

    <!-- Template Categories -->
    <div class="space-y-8">
      <% categories = @template_keys.group_by { |key, _| key.split('.').first } %>

      <% categories.each do |category, templates| %>
        <div class="bg-white rounded-lg shadow overflow-hidden">
          <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900 capitalize"><%= category.gsub('_', ' ') %> Emails</h2>
          </div>

          <div class="divide-y divide-gray-100">
            <% templates.each do |template_key, template_name| %>
              <% custom_template = @custom_templates[template_key] %>
              <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-4 <%= custom_template ? 'bg-green-100' : 'bg-gray-100' %>">
                    <svg class="w-5 h-5 <%= custom_template ? 'text-green-600' : 'text-gray-500' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                  <div>
                    <h3 class="text-sm font-medium text-gray-900"><%= template_name %></h3>
                    <p class="text-xs text-gray-500">
                      <% if custom_template %>
                        <span class="text-green-600">Customized</span>
                        <% if !custom_template.active? %>
                          <span class="text-orange-600 ml-2">(Inactive - using default)</span>
                        <% end %>
                      <% else %>
                        Using default template
                      <% end %>
                    </p>
                  </div>
                </div>

                <div class="flex items-center space-x-3">
                  <% if custom_template %>
                    <%= link_to preview_tenant_admin_email_template_path(custom_template),
                                class: 'inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800' do %>
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                      </svg>
                      Preview
                    <% end %>
                    <%= link_to edit_tenant_admin_email_template_path(custom_template),
                                class: 'inline-flex items-center px-3 py-1.5 border border-blue-600 text-blue-600 text-sm rounded hover:bg-blue-50' do %>
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                      </svg>
                      Edit
                    <% end %>
                  <% else %>
                    <%= link_to preview_default_tenant_admin_email_templates_path(template_key: template_key, website_id: @website.id),
                                class: 'inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800' do %>
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                      </svg>
                      Preview Default
                    <% end %>
                    <%= link_to new_tenant_admin_email_template_path(template_key: template_key, website_id: @website.id),
                                class: 'inline-flex items-center px-3 py-1.5 border border-green-600 text-green-600 text-sm rounded hover:bg-green-50' do %>
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                      </svg>
                      Customize
                    <% end %>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>

  <% else %>
    <!-- All websites overview -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Select a Website</h2>
        <p class="text-sm text-gray-500">Choose a website to manage its email templates</p>
      </div>

      <div class="divide-y divide-gray-100">
        <% @websites.each do |website| %>
          <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-4">
                <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-1.5A1.5 1.5 0 008.5 13v-1a1.5 1.5 0 00-1.5-1.5H5.691a4.002 4.002 0 01-1.359-2.973z" clip-rule="evenodd"></path>
                </svg>
              </div>
              <div>
                <h3 class="text-sm font-medium text-gray-900 font-mono"><%= website.subdomain %></h3>
                <p class="text-xs text-gray-500">
                  <% count = @template_counts[website.id] || 0 %>
                  <% if count > 0 %>
                    <span class="text-green-600"><%= count %> custom template<%= count == 1 ? '' : 's' %></span>
                  <% else %>
                    Using all default templates
                  <% end %>
                </p>
              </div>
            </div>

            <%= link_to tenant_admin_email_templates_path(website_id: website.id),
                        class: 'inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 text-sm rounded hover:bg-blue-50' do %>
              Manage Templates
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
