/**
 * Example FurryPlace Plugin - Info Modal Customization
 *
 * This demonstrates how to add custom sections to the info modal
 * (the one that shows rules, YouTube video, etc.)
 *
 * To use this plugin, add it to your HTML:
 * <script src="/plugins/example-info-modal.js"></script>
 */

(function() {
  'use strict';

  // Set this to true to disable this example plugin (for reference only)
  const EXAMPLE_DISABLED = true;

  // Wait for SDK to be available
  function waitForSDK(callback) {
    if (window.FurryPlaceSDK) {
      callback();
    } else {
      setTimeout(() => waitForSDK(callback), 100);
    }
  }

  // Example 1: Simple text section
  function addWelcomeSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'custom-welcome',
      title: '👋 Welcome!',
      position: 'top',
      content: `
        <p class="text-sm">
          Welcome to our custom FurryPlace server! This is a demonstration of how plugins
          can add custom content to the info modal.
        </p>
      `
    });
  }

  // Example 2: Section with interactive content
  function addStatsSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'server-stats',
      title: '📊 Server Statistics',
      position: 'after-video',
      content: () => {
        const div = document.createElement('div');
        div.className = 'text-sm space-y-2';

        const stats = [
          { label: 'Total Players', value: '10,000+' },
          { label: 'Pixels Painted', value: '5,000,000+' },
          { label: 'Active Alliances', value: '250' }
        ];

        stats.forEach(stat => {
          const statDiv = document.createElement('div');
          statDiv.className = 'flex justify-between items-center p-2 bg-base-200 rounded';
          statDiv.innerHTML = `
            <span class="font-medium">${stat.label}:</span>
            <span class="text-primary font-bold">${stat.value}</span>
          `;
          div.appendChild(statDiv);
        });

        return div;
      }
    });
  }

  // Example 3: Custom links section
  function addLinksSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'custom-links',
      title: '🔗 Useful Links',
      position: 'bottom',
      content: `
        <div class="flex flex-wrap gap-2">
          <a href="https://github.com/yourserver/wiki" target="_blank" class="btn btn-sm btn-outline">
            📚 Wiki
          </a>
          <a href="https://discord.gg/yourserver" target="_blank" class="btn btn-sm btn-outline">
            💬 Discord
          </a>
          <a href="https://twitter.com/yourserver" target="_blank" class="btn btn-sm btn-outline">
            🐦 Twitter
          </a>
        </div>
      `
    });
  }

  // Example 4: Dynamic content with user state
  function addUserInfoSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'user-quick-info',
      title: '👤 Your Info',
      position: 'after-video',
      content: () => {
        const div = document.createElement('div');
        div.className = 'text-sm';

        // Check if user is logged in
        if (!window.FurryPlaceSDK.isLoggedIn()) {
          div.innerHTML = '<p class="text-warning">Please log in to see your stats</p>';
          return div;
        }

        const droplets = window.FurryPlaceSDK.getDroplets();
        const level = window.FurryPlaceSDK.getLevel();
        const charges = window.FurryPlaceSDK.getCharges();

        div.innerHTML = `
          <div class="grid grid-cols-2 gap-2">
            <div class="bg-base-200 p-2 rounded">
              <div class="text-xs opacity-70">Level</div>
              <div class="text-lg font-bold text-primary">${level}</div>
            </div>
            <div class="bg-base-200 p-2 rounded">
              <div class="text-xs opacity-70">Droplets</div>
              <div class="text-lg font-bold text-primary">${droplets}</div>
            </div>
            <div class="bg-base-200 p-2 rounded col-span-2">
              <div class="text-xs opacity-70">Paint Charges</div>
              <div class="text-lg font-bold text-primary">${charges.current}/${charges.max}</div>
              <div class="w-full bg-base-300 rounded-full h-1.5 mt-1">
                <div class="bg-primary h-1.5 rounded-full" style="width: ${charges.percentage}%"></div>
              </div>
            </div>
          </div>
        `;

        return div;
      }
    });
  }

  // Example 5: Announcement section
  function addAnnouncementSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'announcements',
      title: '📢 Announcements',
      position: 'top',
      className: 'bg-primary/10 p-4 rounded-lg',
      content: `
        <div class="text-sm space-y-2">
          <div class="alert alert-info py-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5">
              <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>
            <span><strong>New Event:</strong> Double droplets weekend starts Friday!</span>
          </div>
          <div class="alert alert-success py-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Server maintenance completed successfully</span>
          </div>
        </div>
      `
    });
  }

  // Example 6: Tips & Tricks section
  function addTipsSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'tips-tricks',
      title: '💡 Tips & Tricks',
      position: 'bottom',
      content: `
        <ul class="text-sm list-disc list-inside space-y-1">
          <li>Join an alliance to collaborate with other players</li>
          <li>Paint in your flag's region for 10% charge discount</li>
          <li>Level up to increase your max paint charges</li>
          <li>Use keyboard shortcuts for faster painting</li>
        </ul>
      `
    });
  }

  // Example 7: Changelog section
  function addChangelogSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'changelog',
      title: '📝 Recent Updates',
      position: 'bottom',
      content: `
        <div class="text-sm">
          <div class="space-y-2">
            <details class="collapse collapse-arrow bg-base-200">
              <summary class="collapse-title text-sm font-medium">v2.0.0 - Latest</summary>
              <div class="collapse-content text-xs">
                <ul class="list-disc list-inside mt-2">
                  <li>Added plugin system</li>
                  <li>Improved performance</li>
                  <li>Bug fixes</li>
                </ul>
              </div>
            </details>
            <details class="collapse collapse-arrow bg-base-200">
              <summary class="collapse-title text-sm font-medium">v1.9.0</summary>
              <div class="collapse-content text-xs">
                <ul class="list-disc list-inside mt-2">
                  <li>Alliance system improvements</li>
                  <li>New color palette</li>
                </ul>
              </div>
            </details>
          </div>
        </div>
      `
    });
  }

  // Example 8: Embed section with custom styling
  function addFeaturedArtSection() {
    window.FurryPlaceSDK.addInfoSection({
      id: 'featured-art',
      title: '🎨 Featured Artwork',
      position: 'after-video',
      content: `
        <div class="text-sm">
          <div class="bg-base-200 rounded-lg p-3">
            <p class="mb-2">Check out this amazing artwork created by our community!</p>
            <div class="flex gap-2 overflow-x-auto">
              <div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
                🖼️
              </div>
              <div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
                🎭
              </div>
              <div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
                🌈
              </div>
            </div>
          </div>
        </div>
      `
    });
  }

  // Initialize plugin
  waitForSDK(() => {
    if (EXAMPLE_DISABLED) {
      console.log('[Info Modal Plugin] Disabled - set EXAMPLE_DISABLED to false to enable');
      return;
    }

    console.log('[Info Modal Plugin] Initializing...');

    // Register all example sections
    // Comment out the ones you don't want to use
    addWelcomeSection();
    addAnnouncementSection();
    addStatsSection();
    addUserInfoSection();
    addTipsSection();
    addLinksSection();
    addFeaturedArtSection();
    addChangelogSection();

    console.log('[Info Modal Plugin] Loaded successfully!');
    console.log('[Info Modal Plugin] Registered sections:', window.FurryPlaceSDK.getInfoSections());
  });
})();