{% comment %} 
  Social Share Buttons Component
  Supports: Twitter (X), Facebook, LinkedIn, Copy Link
  
  Usage:
    {% include 'post/extras/social_share.html' with title=post.title url=request.build_absolute_uri %}
    {% include 'post/extras/social_share.html' with title=post.title url=post.get_absolute_url label="分享到" copy_text="链接已复制!" %}
  
  Variables:
    - title: The page title to share (required)
    - url: The URL to share (required, defaults to current page if empty)
    - label: Optional label text (default: "分享")
    - copy_text: Optional "copied" feedback text (default: "已复制")
{% endcomment %}

<div class="social-share" data-url="{{ url }}" data-title="{{ title }}">
  <div class="flex flex-wrap gap-3 items-center">
    {% comment %} Label {% endcomment %}
    <span class="text-sm font-medium text-gray-500 dark:text-gray-400 mr-1">
      {% if label %}{{ label }}{% else %}分享{% endif %}
    </span>

    {% comment %} Twitter/X {% endcomment %}
    <a href="https://twitter.com/intent/tweet?text={{ title|urlencode }}&url={{ url|urlencode }}"
       target="_blank"
       rel="noopener noreferrer"
       class="share-btn share-twitter"
       aria-label="分享到 Twitter">
      <i class="fa-brands fa-x-twitter"></i>
    </a>

    {% comment %} Facebook {% endcomment %}
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url|urlencode }}"
       target="_blank"
       rel="noopener noreferrer"
       class="share-btn share-facebook"
       aria-label="分享到 Facebook">
      <i class="fa-brands fa-facebook-f"></i>
    </a>

    {% comment %} LinkedIn {% endcomment %}
    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url|urlencode }}&title={{ title|urlencode }}"
       target="_blank"
       rel="noopener noreferrer"
       class="share-btn share-linkedin"
       aria-label="分享到 LinkedIn">
      <i class="fa-brands fa-linkedin-in"></i>
    </a>

    {% comment %} Copy Link {% endcomment %}
    <button type="button"
            class="share-btn share-copy"
            aria-label="复制链接"
            data-copy-text="{% if copy_text %}{{ copy_text }}{% else %}已复制{% endif %}">
      <i class="fa-solid fa-link"></i>
    </button>
  </div>

  {% comment %} Copy Success Feedback Toast {% endcomment %}
  <div class="copy-toast" aria-live="polite">
    <span class="toast-text">{% if copy_text %}{{ copy_text }}{% else %}已复制{% endif %}</span>
  </div>

  {% comment %} Styles - Using Tailwind CSS {% endcomment %}
  <style>
    .social-share {
      display: inline-flex;
    }

    .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      font-size: 18px;
      text-decoration: none;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      color: #475569;
    }

    .dark .share-btn {
      background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
      color: #a1a1aa;
    }

    .share-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .dark .share-btn:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    /* Twitter/X - Black/Dark */
    .share-twitter:hover {
      background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
      color: #ffffff;
    }

    /* Facebook - Blue */
    .share-facebook:hover {
      background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
      color: #ffffff;
    }

    /* LinkedIn - Blue */
    .share-linkedin:hover {
      background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
      color: #ffffff;
    }

    /* Copy Link - Green success */
    .share-copy:hover {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: #ffffff;
    }

    .share-copy.copied {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: #ffffff;
    }

    /* Toast notification */
    .copy-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
      color: #ffffff;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 9999;
    }

    .copy-toast.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .copy-toast .toast-text {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .copy-toast .toast-text::before {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      color: #22c55e;
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .share-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
      }

      .social-share .flex {
        gap: 2;
      }
    }
  </style>

  {% comment %} JavaScript for Copy Link functionality {% endcomment %}
  <script>
    (function() {
      'use strict';

      const socialShare = document.querySelector('.social-share');
      if (!socialShare) return;

      const copyBtn = socialShare.querySelector('.share-copy');
      const toast = socialShare.querySelector('.copy-toast');
      const url = socialShare.dataset.url || window.location.href;

      if (copyBtn && toast) {
        let toastTimeout;

        copyBtn.addEventListener('click', async function() {
          const btn = this;
          const originalText = btn.querySelector('i').className;
          const copyText = btn.dataset.copyText || '已复制';

          try {
            // Use Clipboard API
            await navigator.clipboard.writeText(url);

            // Show success state
            btn.classList.add('copied');
            btn.querySelector('i').className = 'fa-solid fa-check';

            // Show toast
            toast.querySelector('.toast-text').textContent = copyText;
            toast.classList.add('show');

            // Clear previous timeout
            if (toastTimeout) clearTimeout(toastTimeout);

            // Hide toast after 2 seconds
            toastTimeout = setTimeout(function() {
              toast.classList.remove('show');
              btn.classList.remove('copied');
              btn.querySelector('i').className = originalText;
            }, 2000);

          } catch (err) {
            // Fallback for older browsers
            try {
              const textArea = document.createElement('textarea');
              textArea.value = url;
              textArea.style.position = 'fixed';
              textArea.style.left = '-9999px';
              document.body.appendChild(textArea);
              textArea.select();
              document.execCommand('copy');
              document.body.removeChild(textArea);

              // Show success
              btn.classList.add('copied');
              toast.querySelector('.toast-text').textContent = copyText;
              toast.classList.add('show');

              if (toastTimeout) clearTimeout(toastTimeout);
              toastTimeout = setTimeout(function() {
                toast.classList.remove('show');
                btn.classList.remove('copied');
              }, 2000);

            } catch (fallbackErr) {
              console.error('Copy failed:', fallbackErr);
              alert('复制链接失败，请手动复制');
            }
          }
        });
      }
    })();
  </script>
</div>