// 图书列表页面脚本
$(document).ready(function() {
  // 自定义下拉列表处理
  const filterHeaders = document.querySelectorAll('.filter-header');

  filterHeaders.forEach(header => {
    header.addEventListener('click', function() {
      // 切换当前下拉列表
      const dropdown = this.nextElementSibling;
      const isOpen = dropdown.classList.contains('show');

      // 关闭所有下拉列表
      document.querySelectorAll('.dropdown-options').forEach(el => {
        el.classList.remove('show');
      });
      document.querySelectorAll('.filter-header').forEach(el => {
        el.classList.remove('open');
      });

      // 如果当前不是打开状态，则打开它
      if(!isOpen) {
        dropdown.classList.add('show');
        this.classList.add('open');
      }
    });
  });

  // 点击选项时更新并提交表单
  const optionItems = document.querySelectorAll('.option-item');
  optionItems.forEach(item => {
    item.addEventListener('click', function() {
      const container = this.closest('.custom-select-container');
      const header = container.querySelector('.filter-header .filter-title');
      const dropdown = this.closest('.dropdown-options');
      const hiddenInput = container.querySelector('input[type="hidden"]');

      // 移除之前的选中项
      dropdown.querySelectorAll('.option-item').forEach(opt => {
        opt.classList.remove('selected');
      });

      // 设置新的选中项
      this.classList.add('selected');

      // 更新隐藏输入值
      const value = this.getAttribute('data-value');
      hiddenInput.value = value;

      // 更新显示的文本和图标
      const icon = this.querySelector('i').cloneNode(true);
      const text = this.querySelector('span').textContent;

      header.innerHTML = '';
      header.appendChild(icon);
      const span = document.createElement('span');
      span.textContent = text;
      header.appendChild(span);

      // 关闭下拉列表
      dropdown.classList.remove('show');
      container.querySelector('.filter-header').classList.remove('open');

      // 提交表单
      document.getElementById('filter-form').submit();
    });
  });

  // 点击页面其他地方关闭下拉列表
  document.addEventListener('click', function(e) {
    if(!e.target.closest('.custom-select-container')) {
      document.querySelectorAll('.dropdown-options').forEach(el => {
        el.classList.remove('show');
      });
      document.querySelectorAll('.filter-header').forEach(el => {
        el.classList.remove('open');
      });
    }
  });

  // 处理删除图书
  let bookIdToDelete = null;

  $('.delete-book').click(function(e) {
    e.preventDefault();
    bookIdToDelete = $(this).data('id');
    const bookTitle = $(this).data('title');
    $('#deleteBookTitle').text(bookTitle);
    $('#deleteModal').modal('show');
  });

  $('#confirmDelete').click(function() {
    if (!bookIdToDelete) return;

    $.ajax({
      url: `/book/delete/${bookIdToDelete}`,
      type: 'POST',
      success: function(response) {
        if (response.success) {
          $('#deleteModal').modal('hide');
          // 显示成功消息
          showNotification(response.message, 'success');
          // 移除图书卡片
          $(`.book-card[data-id="${bookIdToDelete}"]`).fadeOut(300, function() {
            $(this).remove();
          });
          setTimeout(() => {
            if ($('.book-card').length === 0) {
              location.reload(); // 如果没有图书了，刷新页面显示"无图书"提示
            }
          }, 500);
        } else {
          $('#deleteModal').modal('hide');
          showNotification(response.message, 'error');
        }
      },
      error: function() {
        $('#deleteModal').modal('hide');
        showNotification('删除操作失败，请稍后重试', 'error');
      }
    });
  });

  // 处理借阅图书
  $('.borrow-book').click(function(e) {
    e.preventDefault();
    const bookId = $(this).data('id');

    $.ajax({
      url: `/borrow/add/${bookId}`,
      type: 'POST',
      success: function(response) {
        if (response.success) {
          showNotification(response.message, 'success');
          // 可以更新UI显示，比如更新库存或禁用借阅按钮
          setTimeout(() => {
            location.reload();
          }, 800);
        } else {
          showNotification(response.message, 'error');
        }
      },
      error: function() {
        showNotification('借阅操作失败，请稍后重试', 'error');
      }
    });
  });

  // 显示通知
  function showNotification(message, type) {
    // 移除可能存在的旧通知
    $('.notification-alert').remove();

    const alertClass = type === 'success' ? 'notification-success' : 'notification-error';
    const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

    const notification = `
      <div class="notification-alert ${alertClass}">
        <div class="notification-icon">
          <i class="fas ${iconClass}"></i>
        </div>
        <div class="notification-message">${message}</div>
        <button class="notification-close">
          <i class="fas fa-times"></i>
        </button>
      </div>
    `;

    $('body').append(notification);

    // 显示通知
    setTimeout(() => {
      $('.notification-alert').addClass('show');
    }, 10);

    // 通知自动关闭
    setTimeout(() => {
      $('.notification-alert').removeClass('show');
      setTimeout(() => {
        $('.notification-alert').remove();
      }, 300);
    }, 4000);

    // 点击关闭按钮
    $('.notification-close').click(function() {
      $(this).closest('.notification-alert').removeClass('show');
      setTimeout(() => {
        $(this).closest('.notification-alert').remove();
      }, 300);
    });
  }

  // 添加通知样式
  const notificationCSS = `
    .notification-alert {
      position: fixed;
      top: 20px;
      right: 20px;
      min-width: 280px;
      max-width: 350px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      padding: 15px;
      transform: translateX(calc(100% + 20px));
      transition: transform 0.3s ease;
      z-index: 9999;
    }
    
    .notification-alert.show {
      transform: translateX(0);
    }
    
    .notification-success {
      border-left: 4px solid var(--success-color);
    }
    
    .notification-error {
      border-left: 4px solid var(--danger-color);
    }
    
    .notification-icon {
      margin-right: 15px;
      font-size: 24px;
    }
    
    .notification-success .notification-icon {
      color: var(--success-color);
    }
    
    .notification-error .notification-icon {
      color: var(--danger-color);
    }
    
    .notification-message {
      flex: 1;
      font-size: 0.95rem;
      color: var(--text-color);
    }
    
    .notification-close {
      background: none;
      border: none;
      color: var(--text-lighter);
      cursor: pointer;
      padding: 5px;
      margin-left: 10px;
      font-size: 0.8rem;
    }
    
    .notification-close:hover {
      color: var(--text-color);
    }
    
    @media (max-width: 576px) {
      .notification-alert {
        top: auto;
        bottom: 20px;
        left: 20px;
        right: 20px;
        min-width: auto;
        max-width: none;
        transform: translateY(calc(100% + 20px));
      }
      
      .notification-alert.show {
        transform: translateY(0);
      }
    }
  `;

  // 将通知样式添加到头部
  $('<style>').text(notificationCSS).appendTo('head');

  // 修复图书卡片布局的高度问题
  function adjustCardHeights() {
    // 重置所有卡片高度
    $('.book-card').css('height', 'auto');

    // 在大屏幕上应用等高布局
    if (window.innerWidth >= 768) {
      // 分组按行
      const rows = {};
      $('.book-card').each(function() {
        const offsetTop = $(this).offset().top;
        if (!rows[offsetTop]) {
          rows[offsetTop] = [];
        }
        rows[offsetTop].push($(this));
      });

      // 为每行设置相同高度
      Object.keys(rows).forEach(offsetTop => {
        const cards = rows[offsetTop];
        let maxHeight = 0;

        // 找出最大高度
        cards.forEach(card => {
          const height = card.outerHeight();
          if (height > maxHeight) {
            maxHeight = height;
          }
        });

        // 应用最大高度
        cards.forEach(card => {
          card.css('height', maxHeight + 'px');
        });
      });
    }
  }

  // 初始调整高度
  $(window).on('load', adjustCardHeights);

  // 窗口大小变化时调整高度
  $(window).on('resize', adjustCardHeights);

  // 为封面图片添加加载错误处理
  $('.book-cover img').on('error', function() {
    const $this = $(this);
    const bookTitle = $this.attr('alt') || '图书';
    const $cover = $this.closest('.book-cover');

    // 替换为无封面显示
    $cover.html(`
      <div class="no-cover">
        <i class="fas fa-book"></i>
        <span>无封面</span>
      </div>
      <div class="cover-title-bar">${bookTitle}</div>
    `);
  });

  // 添加初始动画效果
  $('.book-card').each(function(index) {
    $(this).css({
      'opacity': '0',
      'transform': 'translateY(20px)'
    });

    setTimeout(() => {
      $(this).css({
        'opacity': '1',
        'transform': 'translateY(0)',
        'transition': 'opacity 0.5s ease, transform 0.5s ease'
      });
    }, 50 * index);
  });
});