import qrcode from 'node_modules/qrcode/build/qrcode?raw';
import { getLocalStorage } from '~/lib/persistence';
import closeIcon from './icons/close.svg?raw';
import copyIcon from './icons/copy.svg?raw';
import shareIcon from './icons/share.svg?raw';
import twitterIcon from './icons/twitter.svg?raw';
import wechatIcon from './icons/wechat.svg?raw';
import weiboIcon from './icons/weibo.svg?raw';

export function UPageShare() {
  const recommend = getLocalStorage('recommend');

  const styles = `
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

    /* 分享按钮样式 */
    .upage-share-btn {
      position: fixed;
      bottom: 70px;
      right: 20px;
      display: flex;
      align-items: center;
      padding: 8px 12px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 30px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size: 14px;
      color: #333;
      z-index: 9999;
      transition: all 0.3s ease;
      animation: fadeIn 0.5s ease-in-out;
      cursor: pointer;
    }

    .upage-share-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    .upage-share-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .upage-ripple {
      position: absolute;
      border-radius: 50%;
      background-color: rgba(0, 62, 183, 0.2);
      transform: scale(0);
      animation: ripple 0.6s linear;
      pointer-events: none;
    }

    .upage-text {
      margin: 0;
      font-weight: 500;
      font-size: 12px;
      white-space: nowrap;
    }

    /* 分享对话框样式 */
    .upage-share-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .upage-share-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .upage-share-content {
      width: 90%;
      max-width: 500px;
      background-color: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      transform: scale(0.9);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .upage-share-modal.active .upage-share-content {
      transform: scale(1);
      opacity: 1;
    }

    .upage-share-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .upage-share-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }

    .upage-share-close {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
      border: none;
      outline: none;
      padding: 2px;
    }

    .upage-share-close:hover {
      background-color: #e0e0e0;
    }

    .upage-share-preview {
      width: 100%;
      height: 200px;
      border-radius: 8px;
      background-color: #f5f5f5;
      margin-bottom: 16px;
      overflow: hidden;
      position: relative;
    }

    .upage-share-preview-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upage-share-options {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }

    .upage-share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.2s ease;
      width: 60px;
    }

    .upage-share-option:hover {
      transform: translateY(-3px);
    }

    .upage-share-option-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .upage-share-option-icon svg {
      width: 20px;
      height: 20px;
    }

    .upage-share-option-name {
      font-size: 12px;
      color: #666;
      text-align: center;
    }

    .upage-share-success {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      z-index: 10001;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .upage-share-success.active {
      opacity: 1;
      visibility: visible;
    }

    /* 微信分享二维码弹窗样式 */
    .upage-wechat-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10001;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .upage-wechat-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .upage-wechat-content {
      width: 90%;
      max-width: 320px;
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      transform: scale(0.9);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      text-align: center;
    }

    .upage-wechat-modal.active .upage-wechat-content {
      transform: scale(1);
      opacity: 1;
    }

    .upage-wechat-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 15px 0;
    }

    .upage-wechat-subtitle {
      font-size: 14px;
      color: #666;
      margin: 0 0 20px 0;
    }

    .upage-wechat-qrcode {
      width: 200px;
      height: 200px;
      margin: 0 auto 15px;
      background-color: #f5f5f5;
      border-radius: 8px;
      overflow: hidden;
    }

    .upage-wechat-qrcode img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .upage-wechat-tip {
      font-size: 13px;
      color: #888;
      margin: 0 0 20px 0;
    }

    .upage-wechat-actions {
      display: flex;
      justify-content: space-between;
    }

    .upage-wechat-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .upage-wechat-btn-cancel {
      background-color: #f0f0f0;
      color: #666;
      margin-right: 10px;
    }

    .upage-wechat-btn-cancel:hover {
      background-color: #e0e0e0;
    }

    .upage-wechat-btn-save {
      background-color: #07C160;
      color: white;
    }

    .upage-wechat-btn-save:hover {
      background-color: #06AD56;
    }
  `;

  const script = `
    (function() {
      document.addEventListener('DOMContentLoaded', function() {
        var shareBtn = document.querySelector('.upage-share-btn');
        var shareModal = document.querySelector('.upage-share-modal');
        var closeBtn = document.querySelector('.upage-share-close');
        var shareSuccess = document.querySelector('.upage-share-success');
        var wechatModal = document.querySelector('#wechatModal');
        var wechatQrcode = document.querySelector('#wechatQrcode');
        var wechatCancel = document.querySelector('#wechatCancel');
        var wechatSave = document.querySelector('#wechatSave');

        if (shareBtn && shareModal) {
          shareBtn.addEventListener('click', function(e) {
            var ripple = document.createElement('span');
            ripple.classList.add('upage-ripple');

            var rect = shareBtn.getBoundingClientRect();
            var x = e.clientX - rect.left;
            var y = e.clientY - rect.top;

            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';

            shareBtn.appendChild(ripple);

            setTimeout(function() {
              ripple.remove();
            }, 600);

            shareModal.classList.add('active');
          });
        }

        if (closeBtn && shareModal) {
          closeBtn.addEventListener('click', function() {
            shareModal.classList.remove('active');
          });
        }

        if (shareModal) {
          shareModal.addEventListener('click', function(e) {
            if (e.target === shareModal) {
              shareModal.classList.remove('active');
            }
          });
        }

        if (wechatCancel && wechatModal) {
          wechatCancel.addEventListener('click', function() {
            wechatModal.classList.remove('active');
          });
        }

        if (wechatModal) {
          wechatModal.addEventListener('click', function(e) {
            if (e.target === wechatModal) {
              wechatModal.classList.remove('active');
            }
          });
        }

        if (wechatSave) {
          wechatSave.addEventListener('click', function() {
            var img = wechatQrcode.querySelector('img');
            if (img) {
              var a = document.createElement('a');
              a.href = img.src;
              a.download = '微信分享二维码.png';
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);

              showSuccessMessage('二维码已保存');
            } else {
              showSuccessMessage('保存失败，请重试');
            }
          });
        }

        var shareOptions = document.querySelectorAll('.upage-share-option');
        if (shareOptions && shareOptions.length > 0) {
          shareOptions.forEach(function(option) {
            option.addEventListener('click', function() {
              var platform = this.getAttribute('data-platform');
              var url = encodeURIComponent(window.location.href);
              var shareText = '我刚刚用 UPage发布了一个页面，快来看看吧：' + window.location.href + '${recommend ? `\\n\\n注册凌霞账户，限免体验中：https://www.lxware.cn?code=${recommend}` : ''}';
              switch(platform) {
                case 'copy':
                  navigator.clipboard.writeText(shareText).then(function() {
                    showSuccessMessage('链接已复制到剪贴板');
                  }).catch(function() {
                    var tempInput = document.createElement('input');
                    document.body.appendChild(tempInput);
                    tempInput.value = shareText;
                    tempInput.select();
                    document.execCommand('copy');
                    document.body.removeChild(tempInput);
                    showSuccessMessage('链接已复制到剪贴板');
                  });
                  break;
                case 'wechat':
                  generateWechatQrCode(window.location.href);
                  break;
                case 'weibo':
                  openShareWindow('http://service.weibo.com/share/share.php?url=' + url + '&title=' + encodeURIComponent(shareText));
                  break;
                case 'twitter':
                  openShareWindow('https://twitter.com/intent/tweet?text=' + encodeURIComponent(shareText));
                  break;
                default:
                  break;
              }

              if (shareModal && platform !== 'wechat') {
                setTimeout(function() {
                  shareModal.classList.remove('active');
                }, 500);
              }
            });
          });
        }

        function generateWechatQrCode(url) {
          if (!wechatQrcode || !wechatModal) return;

          wechatQrcode.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">生成中...</div>';

          try {
            if (window.QRCode && typeof window.QRCode.toDataURL === 'function') {
              window.QRCode.toDataURL(url, {
                errorCorrectionLevel: 'H',
                margin: 1,
                width: 200,
                color: {
                  dark: '#000000',
                  light: '#ffffff'
                }
              }, function(err, dataURL) {
                if (err || !dataURL) {
                  fallbackToApiQrCode(url);
                  return;
                }

                var qrcodeImage = document.createElement('img');
                qrcodeImage.src = dataURL;

                qrcodeImage.onload = function() {
                  wechatQrcode.innerHTML = '';
                  wechatQrcode.appendChild(qrcodeImage);
                  shareModal.classList.remove('active');
                  wechatModal.classList.add('active');
                };

                qrcodeImage.onerror = function() {
                  fallbackToApiQrCode(url);
                };
              });
            } else {
              fallbackToApiQrCode(url);
            }
          } catch (e) {
            console.error('QR code generation error:', e);
            fallbackToApiQrCode(url);
          }
        }

        function fallbackToApiQrCode(url) {
          var qrcodeImage = document.createElement('img');
          qrcodeImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(url);

          qrcodeImage.onload = function() {
            wechatQrcode.innerHTML = '';
            wechatQrcode.appendChild(qrcodeImage);
            shareModal.classList.remove('active');
            wechatModal.classList.add('active');
          };

          qrcodeImage.onerror = function() {
            wechatQrcode.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:red;">生成失败</div>';
            showSuccessMessage('二维码生成失败，请重试');
          };
        }

        function showSuccessMessage(message) {
          if (shareSuccess) {
            shareSuccess.textContent = message;
            shareSuccess.classList.add('active');

            setTimeout(function() {
              shareSuccess.classList.remove('active');
            }, 2000);
          }
        }

        function openShareWindow(url) {
          window.open(url, '_blank', 'width=600,height=500,toolbar=no,menubar=no,scrollbars=yes,resizable=yes');
        }
      });
    })();
  `;

  return (
    <>
      <script dangerouslySetInnerHTML={{ __html: qrcode }} />
      <script dangerouslySetInnerHTML={{ __html: script }} />
      <style dangerouslySetInnerHTML={{ __html: styles }} />

      <div className="upage-share-btn">
        <div className="upage-share-icon" dangerouslySetInnerHTML={{ __html: shareIcon }}></div>
        <span className="upage-text">分享</span>
      </div>

      <div className="upage-share-modal">
        <div className="upage-share-content">
          <div className="upage-share-header">
            <h3 className="upage-share-title">分享页面</h3>
            <button className="upage-share-close" dangerouslySetInnerHTML={{ __html: closeIcon }}></button>
          </div>

          <div className="upage-share-options">
            <div className="upage-share-option" data-platform="copy">
              <div className="upage-share-option-icon" dangerouslySetInnerHTML={{ __html: copyIcon }}></div>
              <span className="upage-share-option-name">复制链接</span>
            </div>

            <div className="upage-share-option" data-platform="wechat">
              <div className="upage-share-option-icon" dangerouslySetInnerHTML={{ __html: wechatIcon }}></div>
              <span className="upage-share-option-name">微信</span>
            </div>

            <div className="upage-share-option" data-platform="weibo">
              <div className="upage-share-option-icon" dangerouslySetInnerHTML={{ __html: weiboIcon }}></div>
              <span className="upage-share-option-name">微博</span>
            </div>

            <div className="upage-share-option" data-platform="twitter">
              <div className="upage-share-option-icon" dangerouslySetInnerHTML={{ __html: twitterIcon }}></div>
              <span className="upage-share-option-name">Twitter</span>
            </div>
          </div>
        </div>
      </div>

      <div className="upage-wechat-modal" id="wechatModal">
        <div className="upage-wechat-content">
          <h3 className="upage-wechat-title">微信分享</h3>
          <p className="upage-wechat-subtitle">请扫描二维码或长按识别</p>
          <div className="upage-wechat-qrcode" id="wechatQrcode"></div>
          <p className="upage-wechat-tip">长按二维码可保存或识别</p>
          <div className="upage-wechat-actions">
            <button className="upage-wechat-btn upage-wechat-btn-cancel" id="wechatCancel">
              取消
            </button>
            <button className="upage-wechat-btn upage-wechat-btn-save" id="wechatSave">
              保存到相册
            </button>
          </div>
        </div>
      </div>

      <div className="upage-share-success"></div>
    </>
  );
}