<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site Admin - <%= current_website&.subdomain || 'PWB' %></title>
  <%= favicon_tags %>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <!-- Tailwind CSS (compiled) -->
  <%= stylesheet_link_tag "tailwind-default", "data-turbo-track": "reload" %>

  <!-- Alpine.js with Collapse plugin for mobile menu and collapsible nav -->
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

  <!-- Flowbite JS for interactive components -->
  <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>

  <!-- Chart.js for analytics dashboards -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>

  <!-- Ahoy.js for visitor tracking -->
  <script src="https://cdn.jsdelivr.net/npm/ahoy.js@0.4.2/dist/ahoy.min.js"></script>

  <!-- Shepherd.js for guided tours -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/11.2.0/css/shepherd.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/11.2.0/js/shepherd.min.js"></script>

  <!-- Leaflet.js for maps -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

  <!-- Stimulus.js via importmap -->
  <%= javascript_importmap_tags %>

  <style>
    /* Custom Shepherd.js styling to match site admin theme */
    .shepherd-element {
      max-width: 400px;
      z-index: 9999;
    }
    .shepherd-content {
      border-radius: 0.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    .shepherd-header {
      background: #1f2937;
      padding: 1rem;
      border-radius: 0.5rem 0.5rem 0 0;
    }
    .shepherd-title {
      color: white;
      font-weight: 600;
      font-size: 1.1rem;
    }
    .shepherd-cancel-icon {
      color: #9ca3af;
    }
    .shepherd-cancel-icon:hover {
      color: white;
    }
    .shepherd-text {
      padding: 1rem;
      color: #374151;
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .shepherd-footer {
      padding: 0.75rem 1rem;
      border-top: 1px solid #e5e7eb;
    }
    .shepherd-button {
      background: #2563eb;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      margin-right: 0.5rem;
    }
    .shepherd-button:hover {
      background: #1d4ed8;
    }
    .shepherd-button.shepherd-button-secondary {
      background: #f3f4f6;
      color: #374151;
    }
    .shepherd-button.shepherd-button-secondary:hover {
      background: #e5e7eb;
    }
    .shepherd-modal-overlay-container {
      z-index: 9998;
    }
    .shepherd-target-highlight {
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4);
      border-radius: 0.5rem;
    }
  </style>
</head>
<body class="bg-gray-50">
  <div x-data="{ sidebarOpen: false }" class="flex h-screen overflow-hidden">
    <!-- Mobile sidebar backdrop -->
    <div x-show="sidebarOpen"
         x-transition:enter="transition-opacity ease-linear duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-linear duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-gray-600 bg-opacity-75 z-20 md:hidden"
         @click="sidebarOpen = false">
    </div>

    <!-- Sidebar -->
    <%= render 'layouts/site_admin/navigation' %>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- Header -->
      <%= render 'layouts/site_admin/header' %>

      <!-- Content Area -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-4 md:p-6 pb-20 md:pb-6">
        <%= render 'layouts/site_admin/flash' %>
        <%= yield %>
      </main>
    </div>

    <!-- Mobile Bottom Navigation -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-40">
      <div class="flex justify-around items-center h-16">
        <%= link_to site_admin_root_path, class: "flex flex-col items-center justify-center flex-1 py-2 #{current_page?(site_admin_root_path) ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'}" do %>
          <svg class="w-6 h-6" 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>
          <span class="text-xs mt-1">Home</span>
        <% end %>

        <%= link_to site_admin_props_path, class: "flex flex-col items-center justify-center flex-1 py-2 #{current_page?(site_admin_props_path) ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'}" do %>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-xs mt-1">Properties</span>
        <% end %>

        <%= link_to site_admin_messages_path, class: "flex flex-col items-center justify-center flex-1 py-2 relative #{current_page?(site_admin_messages_path) ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'}" do %>
          <div class="relative">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
            <% if @unread_messages_count.to_i > 0 %>
              <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold leading-none text-white bg-red-500 rounded-full">
                <%= @unread_messages_count > 9 ? '9+' : @unread_messages_count %>
              </span>
            <% end %>
          </div>
          <span class="text-xs mt-1">Messages</span>
        <% end %>

        <%= link_to site_admin_pages_path, class: "flex flex-col items-center justify-center flex-1 py-2 #{current_page?(site_admin_pages_path) ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'}" do %>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-xs mt-1">Pages</span>
        <% end %>

        <button @click="sidebarOpen = true" class="flex flex-col items-center justify-center flex-1 py-2 text-gray-500 hover:text-gray-700">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          <span class="text-xs mt-1">More</span>
        </button>
      </div>
    </nav>

    <!-- Floating Action Button (Mobile) - Add New Property -->
    <div class="fixed right-4 bottom-20 md:hidden z-50" x-data="{ open: false }">
      <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute bottom-16 right-0 bg-white rounded-lg shadow-lg p-2 mb-2 min-w-max" @click.away="open = false">
        <%= link_to new_site_admin_prop_path, class: "flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg" do %>
          <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4z" clip-rule="evenodd"></path>
          </svg>
          <span>New Property</span>
        <% end %>
        <%= link_to site_admin_media_library_index_path, class: "flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg" do %>
          <svg class="w-5 h-5 mr-2 text-green-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>
          <span>Upload Media</span>
        <% end %>
        <%= link_to site_admin_pages_path, class: "flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg" do %>
          <svg class="w-5 h-5 mr-2 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
          </svg>
          <span>Edit Pages</span>
        <% end %>
      </div>
      <button @click="open = !open" class="w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-transform" :class="{ 'rotate-45': open }">
        <svg class="w-6 h-6" 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>
      </button>
    </div>
  </div>

  <!-- Site Admin Guided Tour -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Check if Shepherd is loaded
      if (typeof Shepherd === 'undefined') {
        console.warn('Shepherd.js not loaded - tour functionality disabled');
        return;
      }

      // Initialize Shepherd tour
      const tour = new Shepherd.Tour({
        useModalOverlay: true,
        defaultStepOptions: {
          cancelIcon: {
            enabled: true
          },
          classes: 'shadow-xl',
          scrollTo: { behavior: 'smooth', block: 'center' }
        }
      });

      // Tour steps configuration
      const tourSteps = [
        {
          id: 'welcome',
          title: 'Welcome to Site Admin!',
          text: 'Let me show you around your website management dashboard. This quick tour will help you get familiar with all the features.',
          buttons: [
            {
              text: 'Skip Tour',
              action: tour.cancel,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Let\'s Go!',
              action: tour.next
            }
          ]
        },
        {
          id: 'dashboard',
          attachTo: {
            element: '#tour-dashboard',
            on: 'right'
          },
          title: 'Dashboard',
          text: 'Your dashboard gives you a quick overview of your website\'s activity, including visitor stats, recent messages, and property listings.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'properties',
          attachTo: {
            element: '#tour-properties',
            on: 'right'
          },
          title: 'Properties',
          text: 'Manage all your property listings here. Add new properties, edit existing ones, upload photos, and control visibility.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'labels',
          attachTo: {
            element: '#tour-labels',
            on: 'right'
          },
          title: 'Labels',
          text: 'Customize property labels, categories, and field names. This helps organize your listings and match your local market terminology.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'pages',
          attachTo: {
            element: '#tour-pages',
            on: 'right'
          },
          title: 'Pages',
          text: 'Create and edit pages for your website like About Us, Services, Contact, and more. Build your site content with an easy-to-use editor.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'messages',
          attachTo: {
            element: '#tour-messages',
            on: 'right'
          },
          title: 'Messages',
          text: 'View and respond to inquiries from potential clients who have contacted you through your website\'s forms.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'contacts',
          attachTo: {
            element: '#tour-contacts',
            on: 'right'
          },
          title: 'Contacts',
          text: 'Manage your contact database. Keep track of leads and clients who have interacted with your website.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'users',
          attachTo: {
            element: '#tour-users',
            on: 'right'
          },
          title: 'Users',
          text: 'Manage team members and their access levels. Add colleagues, assign roles, and control who can edit what.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'settings',
          attachTo: {
            element: '#tour-settings',
            on: 'right'
          },
          title: 'Website Settings',
          text: 'Configure your website\'s core settings including name, logo, contact information, social media links, and SEO options.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'domain',
          attachTo: {
            element: '#tour-domain',
            on: 'right'
          },
          title: 'Domain',
          text: 'Set up your custom domain name. Connect your own domain to make your website truly yours.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'view-site',
          attachTo: {
            element: '#tour-view-site',
            on: 'right'
          },
          title: 'View Your Site',
          text: 'Click here anytime to preview your live website and see how it looks to your visitors.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Next',
              action: tour.next
            }
          ]
        },
        {
          id: 'tour-button',
          attachTo: {
            element: '#start-tour-btn',
            on: 'right'
          },
          title: 'Take the Tour Again',
          text: 'You can always restart this tour by clicking this button. That\'s it! You\'re ready to start building your website.',
          buttons: [
            {
              text: 'Back',
              action: tour.back,
              classes: 'shepherd-button-secondary'
            },
            {
              text: 'Finish Tour',
              action: function() {
                localStorage.setItem('siteAdminTourCompleted', 'true');
                // Also notify server of tour completion
                fetch('<%= site_admin_tour_complete_path %>', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                  }
                }).catch(err => console.log('Tour completion tracking error:', err));
                tour.complete();
              }
            }
          ]
        }
      ];

      // Add all steps to tour
      tourSteps.forEach(step => tour.addStep(step));

      // Start tour button click handler - tour only starts when user clicks the button
      const startTourBtn = document.getElementById('start-tour-btn');
      if (startTourBtn) {
        startTourBtn.addEventListener('click', function() {
          tour.start();
        });
      }
    });
  </script>
</body>
</html>
