<template>
  <view class="page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-btn" @click="goBack">
        <text class="nav-icon">←</text>
      </view>
      <text class="nav-title">书籍详情</text>
      <view class="nav-btn" @click="showRenameBookModal = true" v-if="book">
        <text class="nav-icon">✏️</text>
      </view>
    </view>

    <!-- 骨架屏加载状态 -->
    <view v-if="loading && !book" class="skeleton-container">
      <view class="skeleton-cover"></view>
      <view class="skeleton-info">
        <view class="skeleton-title"></view>
        <view class="skeleton-desc"></view>
      </view>
    </view>

    <!-- 书籍信息 -->
    <view v-else-if="book" class="album-header">
      <view class="album-cover" :style="{ background: getCoverGradient() }">
        <text class="cover-letter">{{ getTitleLetter(book?.title || '') }}</text>
        <text class="cover-title-small">{{ book?.title }}</text>
      </view>
      <view class="album-info">
        <text class="album-title">{{ book.title }}</text>
        <text class="album-meta">{{ book.totalChapters }}章 · {{ completedChapters }}章已完成</text>
        <text class="album-desc">{{ book.description || '暂无描述' }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="book" class="action-bar">
      <button class="action-btn" :class="{ subscribed: isFavorited }" @click="toggleFavorite">
        <text>{{ isFavorited ? '已收藏' : '收藏' }}</text>
      </button>
      <button class="action-btn primary" @click="playAll">
        <text>播放全部</text>
      </button>
    </view>

    <!-- 章节列表 -->
    <view v-if="!loading" class="audio-section">
      <text class="section-title">章节列表</text>
      <view v-if="chapters.length === 0" class="empty">
        <text class="empty-icon">📖</text>
        <text class="empty-text">暂无章节</text>
      </view>
      <view v-else class="audio-list">
        <view
          v-for="(item, index) in chapters"
          :key="item.id"
          :class="['audio-item', { 'has-audio': item.audioUrl, 'has-video': item.videoUrl }]"
          :style="{ animationDelay: (index * 0.04) + 's' }"
          @click="playChapter(item, index)"
          @longpress="showChapterMenu(item)"
        >
          <view class="audio-index">{{ index + 1 }}</view>
          <view class="audio-content">
            <text class="audio-title">{{ item.title }}</text>
            <text class="audio-meta">
              {{ item.audioUrl ? formatDuration(item.audioDuration) + ' · ' : '' }}
              {{ item.wordCount || 0 }}字
              <span v-if="item.audioUrl" class="audio-tag">🎵</span>
              <span v-if="item.videoUrl" class="video-tag">🎬</span>
            </text>
          </view>
          <view class="audio-actions">
            <!-- 视频播放按钮 -->
            <view v-if="item.videoUrl" class="video-play-btn" @click.stop="playVideo(item)">
              <text class="video-play-icon">▶</text>
            </view>
            <!-- 音频播放按钮 -->
            <view class="audio-play">
              <text class="play-icon">▶</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 视频播放弹窗 -->
    <view v-if="showVideoModal" class="video-modal">
      <view class="video-modal-mask" @click="closeVideoModal"></view>
      <view class="video-modal-content">
        <view class="video-modal-header">
          <text class="video-modal-title">{{ videoTitle }}</text>
          <view class="video-modal-close" @click="closeVideoModal">×</view>
        </view>
        <video
          :src="videoUrl"
          class="video-player"
          controls
          autoplay
          show-fullscreen-btn
          show-play-btn
          enable-progress-gesture
        ></video>
      </view>
    </view>

    <!-- 章节操作菜单 -->
    <view v-if="showChapterMenuModal" class="modal">
      <view class="modal-mask" @click="showChapterMenuModal = false"></view>
      <view class="modal-content menu-content">
        <view class="modal-header">
          <text class="modal-title">章节操作</text>
        </view>
        <view class="menu-list">
          <view class="menu-item" @click="showRenameChapterModal = true; showChapterMenuModal = false">
            <text class="menu-icon">✏️</text>
            <text class="menu-text">重命名</text>
          </view>
          <view class="menu-item" @click="showMoveChapterModal = true; showChapterMenuModal = false">
            <text class="menu-icon">📦</text>
            <text class="menu-text">移动到专辑</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="showChapterMenuModal = false">
            <text>取消</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 重命名专辑弹窗 -->
    <view v-if="showRenameBookModal" class="modal">
      <view class="modal-mask" @click="showRenameBookModal = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">重命名专辑</text>
        </view>
        <view class="modal-body">
          <input
            v-model="newBookTitle"
            class="input"
            placeholder="请输入新专辑名称"
            maxlength="50"
          />
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="showRenameBookModal = false">
            <text>取消</text>
          </view>
          <view class="modal-btn confirm" @click="renameBook" :disabled="!newBookTitle.trim()">
            <text>确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 重命名章节弹窗 -->
    <view v-if="showRenameChapterModal" class="modal">
      <view class="modal-mask" @click="showRenameChapterModal = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">重命名章节</text>
        </view>
        <view class="modal-body">
          <input
            v-model="newChapterTitle"
            class="input"
            placeholder="请输入新章节名称"
            maxlength="50"
          />
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="showRenameChapterModal = false">
            <text>取消</text>
          </view>
          <view class="modal-btn confirm" @click="renameChapter" :disabled="!newChapterTitle.trim()">
            <text>确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 移动章节弹窗 -->
    <view v-if="showMoveChapterModal" class="modal">
      <view class="modal-mask" @click="showMoveChapterModal = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">移动到专辑</text>
        </view>
        <view class="modal-body">
          <view class="album-select-list">
            <view
              v-for="album in albumList"
              :key="album.id"
              class="album-select-item"
              :class="{ selected: selectedAlbumId === album.id }"
              @click="selectedAlbumId = album.id"
            >
              <text>{{ album.title }}</text>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="showMoveChapterModal = false">
            <text>取消</text>
          </view>
          <view class="modal-btn confirm" @click="moveChapter" :disabled="!selectedAlbumId">
            <text>确定</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useAudioStore } from '../../store/audio';
import * as bookApi from '../../utils/book-generator-api';
import type { Book, Chapter } from '../../utils/book-generator-api';
import { get, put } from '../../utils/request';
import { getBookGradient, getTitleLetter } from '../../composables/useCoverStyle';

const audioStore = useAudioStore();

const bookId = ref('');
const book = ref<Book | null>(null);
const chapters = ref<Chapter[]>([]);
const loading = ref(false);
const isFavorited = ref(false);

// 弹窗状态
const showVideoModal = ref(false);
const showChapterMenuModal = ref(false);
const showRenameBookModal = ref(false);
const showRenameChapterModal = ref(false);
const showMoveChapterModal = ref(false);

// 表单数据
const selectedChapter = ref<Chapter | null>(null);
const newBookTitle = ref('');
const newChapterTitle = ref('');
const selectedAlbumId = ref<number | null>(null);
const albumList = ref<any[]>([]);

const userId = 1;

// 已完成章节数
const completedChapters = computed(() => {
  return chapters.value.filter((c) => c.status === 'completed').length;
});

// 获取封面渐变色
function getCoverGradient(): string {
  return getBookGradient(Number(book.value?.id) || 1);
}

// 格式化时长
function formatDuration(seconds: number): string {
  if (!seconds) return '0:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 返回
function goBack() {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({ url: '/pages/index/index' });
  }
}

// 加载书籍详情
async function fetchBookDetail() {
  loading.value = true;
  try {
    // 调用专辑章节接口，返回章(level=1)列表，每个章包含小节音频
    const data = await get(`/book-generator/albums/${bookId.value}/chapters`);
    chapters.value = data?.chapters || [];
    // 如果需要书籍基本信息，再调用getBook
    if (chapters.value.length > 0) {
      book.value = { title: '书籍详情' } as any;
    }
  } catch (error) {
    console.error('获取书籍详情失败:', error);
    uni.showToast({ title: '获取书籍详情失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
}

// 加载专辑列表（用于移动章节）
async function fetchAlbumList() {
  try {
    const data = await get('/book-generator/albums');
    albumList.value = data?.albums?.filter((a: any) => a.id !== parseInt(bookId.value)) || [];
  } catch (error) {
    console.error('获取专辑列表失败:', error);
  }
}

// 切换收藏状态
async function toggleFavorite() {
  try {
    if (isFavorited.value) {
      isFavorited.value = false;
      uni.showToast({ title: '已取消收藏', icon: 'success' });
    } else {
      isFavorited.value = true;
      uni.showToast({ title: '收藏成功', icon: 'success' });
    }
  } catch (error) {
    console.error('收藏操作失败:', error);
    uni.showToast({ title: '操作失败', icon: 'none' });
  }
}

// 播放全部
function playAll() {
  const audioChapters = chapters.value.filter((c) => c.audioUrl);
  if (audioChapters.length > 0) {
    const playlist = audioChapters.map((c) => ({
      id: parseInt(c.id),
      title: c.title,
      audioDuration: c.audioDuration || 0,
      wordCount: c.wordCount || 0,
      audioUrl: c.audioUrl,
    }));
    audioStore.setPlaylist(playlist as any, 0, true);
    playChapter(audioChapters[0], 0);
  } else {
    uni.showToast({ title: '暂无音频可播放', icon: 'none' });
  }
}

// 播放章节
function playChapter(item: Chapter, index: number) {
  if (!item.audioUrl) {
    uni.showToast({ title: '该章节暂无音频', icon: 'none' });
    return;
  }
  const audioChapters = chapters.value.filter((c) => c.audioUrl);
  const playlist = audioChapters.map((c) => ({
    id: parseInt(c.id),
    title: c.title,
    audioDuration: c.audioDuration || 0,
    wordCount: c.wordCount || 0,
    audioUrl: c.audioUrl,
  }));
  const playIndex = audioChapters.findIndex((c) => c.id === item.id);
  audioStore.setPlaylist(playlist as any, playIndex >= 0 ? playIndex : 0, true);
  audioStore.play({
    id: parseInt(item.id),
    title: item.title,
    audioDuration: item.audioDuration || 0,
    wordCount: item.wordCount || 0,
    audioUrl: item.audioUrl,
  } as any);
  uni.navigateTo({ url: `/pages/player/index?id=${item.id}` });
}

// 显示章节菜单
function showChapterMenu(item: Chapter) {
  selectedChapter.value = item;
  newChapterTitle.value = item.title;
  selectedAlbumId.value = null;
  showChapterMenuModal.value = true;
}

// 重命名专辑
async function renameBook() {
  if (!newBookTitle.value.trim() || !book.value) return;

  try {
    await put(`/book-generator/album/${book.value.id}/rename`, {
      title: newBookTitle.value.trim(),
    });
    book.value.title = newBookTitle.value.trim();
    uni.showToast({ title: '重命名成功', icon: 'success' });
    showRenameBookModal.value = false;
    newBookTitle.value = '';
  } catch (error) {
    uni.showToast({ title: '重命名失败', icon: 'none' });
  }
}

// 重命名章节
async function renameChapter() {
  if (!newChapterTitle.value.trim() || !selectedChapter.value || !book.value) return;

  try {
    await put(`/book-generator/album/${book.value.id}/chapters/${selectedChapter.value.id}/rename`, {
      title: newChapterTitle.value.trim(),
    });
    selectedChapter.value.title = newChapterTitle.value.trim();
    uni.showToast({ title: '重命名成功', icon: 'success' });
    showRenameChapterModal.value = false;
    newChapterTitle.value = '';
  } catch (error) {
    uni.showToast({ title: '重命名失败', icon: 'none' });
  }
}

// 移动章节
async function moveChapter() {
  if (!selectedAlbumId.value || !selectedChapter.value || !book.value) return;

  try {
    await put(`/book-generator/album/${book.value.id}/chapters/${selectedChapter.value.id}/move`, {
      newNumber: 1,
    });
    uni.showToast({ title: '移动成功', icon: 'success' });
    showMoveChapterModal.value = false;
    selectedAlbumId.value = null;
    await fetchBookDetail();
  } catch (error) {
    uni.showToast({ title: '移动失败', icon: 'none' });
  }
}

// 播放视频
const videoUrl = ref('');
const videoTitle = ref('');

function playVideo(item: Chapter) {
  if (!item.videoUrl) {
    uni.showToast({ title: '该章节暂无视频', icon: 'none' });
    return;
  }
  videoUrl.value = item.videoUrl.startsWith('http') ? item.videoUrl : item.videoUrl;
  videoTitle.value = item.title;
  showVideoModal.value = true;
}

function closeVideoModal() {
  showVideoModal.value = false;
  videoUrl.value = '';
  videoTitle.value = '';
}

// 页面加载
onLoad(async (options: any) => {
  bookId.value = options?.id || '';
  if (bookId.value) {
    await Promise.all([fetchBookDetail(), fetchAlbumList()]);
  }
});

onMounted(() => {
  if (!bookId.value) {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1] as any;
    // #ifdef APP-PLUS
    bookId.value = currentPage?.$page?.options?.id || '';
    // #endif
    // #ifndef APP-PLUS
    bookId.value = currentPage?.options?.id || '';
    // #endif
    if (bookId.value) {
      Promise.all([fetchBookDetail(), fetchAlbumList()]);
    }
  }
});
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 32rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44rpx 32rpx 24rpx;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 骨架屏 */
.skeleton-container {
  padding: 32rpx;
}

.skeleton-cover {
  width: 240rpx;
  height: 240rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 16rpx;
  margin: 0 auto 32rpx;
}

.skeleton-info {
  text-align: center;
}

.skeleton-title {
  height: 40rpx;
  width: 60%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8rpx;
  margin: 0 auto 16rpx;
}

.skeleton-desc {
  height: 24rpx;
  width: 80%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8rpx;
  margin: 0 auto;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 书籍信息 */
.album-header {
  padding: 32rpx;
  background: #ffffff;
  display: flex;
  gap: 32rpx;
}

.album-cover {
  width: 240rpx;
  height: 240rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.cover-icon {
  font-size: 80rpx;
  opacity: 0.6;
}

/* 文字海报风格封面 */
.cover-letter {
  position: absolute;
  top: -20rpx;
  left: 12rpx;
  font-size: 160rpx;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  pointer-events: none;
}

.cover-title-small {
  position: absolute;
  bottom: 50rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.album-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-meta {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.album-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 操作按钮 */
.action-bar {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx;
  background: #ffffff;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 40rpx;
  border: none;
  font-size: 28rpx;
  color: #333;
  transition: transform 0.1s ease;
}

.action-btn:active {
  transform: scale(0.96);
}

.action-btn.primary {
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  color: #ffffff;
}

.action-btn.subscribed {
  background: #f0f0f0;
  color: #999;
}

.action-btn::after {
  border: none;
}

/* 章节列表 */
.audio-section {
  margin-top: 16rpx;
  padding: 24rpx 32rpx;
  background: #ffffff;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.audio-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.audio-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  animation: listItemIn 0.4s ease-out forwards;
  opacity: 0;
}

@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.audio-item.has-audio,
.audio-item.has-video {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.audio-item.has-video {
  background: #fdf4ff;
  border: 1px solid #e9d5ff;
}

.audio-index {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  border-radius: 50%;
  font-size: 24rpx;
  color: #666;
  flex-shrink: 0;
}

.audio-item.has-audio .audio-index {
  background: #10b981;
  color: #ffffff;
}

.audio-content {
  flex: 1;
  min-width: 0;
}

.audio-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8rpx;
}

.audio-meta {
  font-size: 22rpx;
  color: #999;
}

.audio-tag {
  margin-left: 12rpx;
  color: #059669;
}

.audio-play {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.play-icon {
  font-size: 24rpx;
  color: #ffffff;
  margin-left: 4rpx;
}

/* 章节操作按钮 */
.audio-actions {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.video-tag {
  margin-left: 8rpx;
}

/* 视频播放按钮 */
.video-play-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.video-play-icon {
  font-size: 22rpx;
  color: #ffffff;
  margin-left: 4rpx;
}

/* 视频播放弹窗 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 800rpx;
  background: #1a1a1a;
  border-radius: 24rpx;
  overflow: hidden;
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #2a2a2a;
}

.video-modal-title {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #999;
  margin-left: 16rpx;
}

.video-player {
  width: 100%;
  display: block;
}

/* 弹窗 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  width: 85%;
  max-width: 600rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
}

.menu-content {
  max-width: 500rpx;
}

.modal-header {
  padding: 32rpx;
  border-bottom: 1rpx solid #f3f4f6;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
}

.modal-body {
  padding: 32rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
}

.menu-icon {
  font-size: 32rpx;
}

.menu-text {
  font-size: 28rpx;
  color: #1f2937;
}

.album-select-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  max-height: 500rpx;
  overflow-y: auto;
}

.album-select-item {
  padding: 20rpx 24rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #374151;
}

.album-select-item.selected {
  background: #eff6ff;
  border: 2rpx solid #4f46e5;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f3f4f6;
}

.modal-btn {
  flex: 1;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.modal-btn.cancel {
  color: #6b7280;
  border-right: 1rpx solid #f3f4f6;
}

.modal-btn.confirm {
  color: #4f46e5;
  font-weight: 600;
}

.modal-btn.confirm[disabled] {
  opacity: 0.5;
}
</style>
