<template>
  <div class="admin-page">
    <h1>Media Manager</h1>
    <p class="subtitle">Upload and manage media files in S3 storage</p>

    <!-- Stats Bar -->
    <div class="stats-bar">
      <div class="stat-item">
        <span class="stat-icon">🎵</span>
        <div class="stat-info">
          <span class="stat-value">{{ content.audio_files.length }}</span>
          <span class="stat-label">Audio Files</span>
        </div>
      </div>
      <div class="stat-item">
        <span class="stat-icon">🖼️</span>
        <div class="stat-info">
          <span class="stat-value">{{ content.posters.length }}</span>
          <span class="stat-label">Posters</span>
        </div>
      </div>
      <div class="stat-item">
        <span class="stat-icon">🎬</span>
        <div class="stat-info">
          <span class="stat-value">{{ content.background_videos.length }}</span>
          <span class="stat-label">Backgrounds</span>
        </div>
      </div>
      <div class="stat-item">
        <span class="stat-icon">🔔</span>
        <div class="stat-info">
          <span class="stat-value">{{ content.transition_sounds.length }}</span>
          <span class="stat-label">Transitions</span>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div class="tabs">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-btn"
        :class="{ active: activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        <span class="tab-icon">{{ tab.icon }}</span>
        <span>{{ tab.label }}</span>
        <span class="tab-count">{{ getTabCount(tab.id) }}</span>
      </button>
    </div>

    <!-- Audio Section -->
    <div v-if="activeTab === 'audio'" class="section">
      <div class="section-header">
        <div>
          <h2>Audio Files</h2>
          <p class="section-hint">Format: anime_name_opX_song_name.mp3</p>
        </div>
        <div class="section-actions">
          <input
            type="text"
            v-model="searchAudio"
            placeholder="Search audio..."
            class="search-input"
          />
          <label class="btn-upload">
            <input type="file" multiple accept=".mp3,.wav,.ogg,.m4a" @change="handleUpload($event, 'audio')" />
            <span>+ Upload Audio</span>
          </label>
        </div>
      </div>

      <div
        class="drop-zone"
        :class="{ 'drag-active': dragTarget === 'audio' }"
        @dragover.prevent="dragTarget = 'audio'"
        @dragleave="dragTarget = null"
        @drop.prevent="handleDrop($event, 'audio')"
      >
        <div class="drop-zone-content">
          <span class="drop-icon">🎵</span>
          <p>Drag & drop audio files here</p>
          <span class="drop-formats">MP3, WAV, OGG, M4A</span>
        </div>
      </div>

      <div v-if="uploading.audio" class="upload-status">
        <div class="upload-spinner"></div>
        <span>Uploading audio files...</span>
      </div>

      <div v-if="filteredAudio.length === 0" class="empty-state">
        <span class="empty-icon">🎵</span>
        <p>No audio files found</p>
      </div>

      <div class="file-grid audio-grid">
        <div v-for="file in filteredAudio" :key="file" class="file-card audio-card">
          <div class="file-icon">🎵</div>
          <div class="file-info">
            <div class="file-name" :title="file">{{ file }}</div>
            <div class="file-meta">{{ parseAudioFilename(file).animeName }} - {{ parseAudioFilename(file).opNumber }}</div>
          </div>
          <div class="file-actions">
            <button class="btn-play" @click="playAudio(file)" :title="playingAudio === file ? 'Stop' : 'Play'">
              {{ playingAudio === file ? '⏹️' : '▶️' }}
            </button>
            <button class="btn-delete" @click="confirmDelete('audio', file)">🗑️</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Posters Section -->
    <div v-if="activeTab === 'posters'" class="section">
      <div class="section-header">
        <div>
          <h2>Poster Images</h2>
          <p class="section-hint">Name should match anime name for auto-matching</p>
        </div>
        <div class="section-actions">
          <input
            type="text"
            v-model="searchPosters"
            placeholder="Search posters..."
            class="search-input"
          />
          <label class="btn-upload">
            <input type="file" multiple accept=".jpg,.jpeg,.png,.webp" @change="handleUpload($event, 'posters')" />
            <span>+ Upload Posters</span>
          </label>
        </div>
      </div>

      <div
        class="drop-zone"
        :class="{ 'drag-active': dragTarget === 'posters' }"
        @dragover.prevent="dragTarget = 'posters'"
        @dragleave="dragTarget = null"
        @drop.prevent="handleDrop($event, 'posters')"
      >
        <div class="drop-zone-content">
          <span class="drop-icon">🖼️</span>
          <p>Drag & drop images here</p>
          <span class="drop-formats">JPG, PNG, WebP</span>
        </div>
      </div>

      <div v-if="uploading.posters" class="upload-status">
        <div class="upload-spinner"></div>
        <span>Uploading poster images...</span>
      </div>

      <div v-if="filteredPosters.length === 0" class="empty-state">
        <span class="empty-icon">🖼️</span>
        <p>No posters found</p>
      </div>

      <div class="poster-grid">
        <div v-for="file in filteredPosters" :key="file" class="poster-card">
          <div class="poster-image">
            <img :src="'/api/media/posters/' + file" :alt="file" @error="handleImageError" />
          </div>
          <div class="poster-overlay">
            <div class="poster-name">{{ file }}</div>
            <button class="btn-delete-poster" @click="confirmDelete('posters', file)">🗑️ Delete</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Backgrounds Section -->
    <div v-if="activeTab === 'backgrounds'" class="section">
      <div class="section-header">
        <div>
          <h2>Background Videos</h2>
          <p class="section-hint">MP4 videos (5-10 sec loops recommended)</p>
        </div>
        <div class="section-actions">
          <input
            type="text"
            v-model="searchBackgrounds"
            placeholder="Search backgrounds..."
            class="search-input"
          />
          <label class="btn-upload">
            <input type="file" multiple accept=".mp4,.mov,.avi" @change="handleUpload($event, 'backgrounds')" />
            <span>+ Upload Videos</span>
          </label>
        </div>
      </div>

      <div
        class="drop-zone"
        :class="{ 'drag-active': dragTarget === 'backgrounds' }"
        @dragover.prevent="dragTarget = 'backgrounds'"
        @dragleave="dragTarget = null"
        @drop.prevent="handleDrop($event, 'backgrounds')"
      >
        <div class="drop-zone-content">
          <span class="drop-icon">🎬</span>
          <p>Drag & drop videos here</p>
          <span class="drop-formats">MP4, MOV, AVI</span>
        </div>
      </div>

      <div v-if="uploading.backgrounds" class="upload-status">
        <div class="upload-spinner"></div>
        <span>Uploading background videos...</span>
      </div>

      <div v-if="filteredBackgrounds.length === 0" class="empty-state">
        <span class="empty-icon">🎬</span>
        <p>No background videos found</p>
      </div>

      <div class="file-grid">
        <div v-for="file in filteredBackgrounds" :key="file" class="file-card video-card">
          <div class="file-icon">🎬</div>
          <div class="file-info">
            <div class="file-name" :title="file">{{ file }}</div>
          </div>
          <div class="file-actions">
            <button class="btn-delete" @click="confirmDelete('backgrounds', file)">🗑️</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Transitions Section -->
    <div v-if="activeTab === 'transitions'" class="section">
      <div class="section-header">
        <div>
          <h2>Transition Sounds</h2>
          <p class="section-hint">Sound effects for answer reveals</p>
        </div>
        <div class="section-actions">
          <input
            type="text"
            v-model="searchTransitions"
            placeholder="Search transitions..."
            class="search-input"
          />
          <label class="btn-upload">
            <input type="file" multiple accept=".mp3,.wav,.ogg" @change="handleUpload($event, 'transitions')" />
            <span>+ Upload Sounds</span>
          </label>
        </div>
      </div>

      <div
        class="drop-zone"
        :class="{ 'drag-active': dragTarget === 'transitions' }"
        @dragover.prevent="dragTarget = 'transitions'"
        @dragleave="dragTarget = null"
        @drop.prevent="handleDrop($event, 'transitions')"
      >
        <div class="drop-zone-content">
          <span class="drop-icon">🔔</span>
          <p>Drag & drop sound files here</p>
          <span class="drop-formats">MP3, WAV, OGG</span>
        </div>
      </div>

      <div v-if="uploading.transitions" class="upload-status">
        <div class="upload-spinner"></div>
        <span>Uploading transition sounds...</span>
      </div>

      <div v-if="filteredTransitions.length === 0" class="empty-state">
        <span class="empty-icon">🔔</span>
        <p>No transition sounds found</p>
      </div>

      <div class="file-grid">
        <div v-for="file in filteredTransitions" :key="file" class="file-card">
          <div class="file-icon">🔔</div>
          <div class="file-info">
            <div class="file-name" :title="file">{{ file }}</div>
          </div>
          <div class="file-actions">
            <button class="btn-play" @click="playTransition(file)" :title="playingTransition === file ? 'Stop' : 'Play'">
              {{ playingTransition === file ? '⏹️' : '▶️' }}
            </button>
            <button class="btn-delete" @click="confirmDelete('transitions', file)">🗑️</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="deleteModal.show" class="modal-overlay" @click.self="deleteModal.show = false">
      <div class="delete-modal">
        <h3>Confirm Delete</h3>
        <p>Are you sure you want to delete this file?</p>
        <div class="delete-file-preview">
          <span class="delete-file-icon">{{ getTypeIcon(deleteModal.type) }}</span>
          <span class="delete-file-name">{{ deleteModal.filename }}</span>
        </div>
        <div class="modal-actions">
          <button class="btn-cancel" @click="deleteModal.show = false">Cancel</button>
          <button class="btn-confirm-delete" @click="executeDelete">Delete</button>
        </div>
      </div>
    </div>

    <!-- Audio Player (hidden) -->
    <audio ref="audioPlayer" @ended="playingAudio = null"></audio>
    <audio ref="transitionPlayer" @ended="playingTransition = null"></audio>

    <!-- Toast Notifications -->
    <div class="toast-container">
      <div
        v-for="(t, index) in toasts"
        :key="index"
        class="toast"
        :class="t.type"
      >
        {{ t.message }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'

export default {
  name: 'AdminPage',
  setup() {
    const content = reactive({
      audio_files: [],
      background_videos: [],
      posters: [],
      transition_sounds: []
    })

    const uploading = reactive({
      audio: false,
      posters: false,
      backgrounds: false,
      transitions: false
    })

    const activeTab = ref('audio')
    const dragTarget = ref(null)
    const toasts = ref([])

    // Search
    const searchAudio = ref('')
    const searchPosters = ref('')
    const searchBackgrounds = ref('')
    const searchTransitions = ref('')

    // Audio playback
    const audioPlayer = ref(null)
    const transitionPlayer = ref(null)
    const playingAudio = ref(null)
    const playingTransition = ref(null)

    // Delete modal
    const deleteModal = reactive({
      show: false,
      type: '',
      filename: ''
    })

    const tabs = [
      { id: 'audio', label: 'Audio', icon: '🎵' },
      { id: 'posters', label: 'Posters', icon: '🖼️' },
      { id: 'backgrounds', label: 'Backgrounds', icon: '🎬' },
      { id: 'transitions', label: 'Transitions', icon: '🔔' }
    ]

    const getTabCount = (tabId) => {
      switch(tabId) {
        case 'audio': return content.audio_files.length
        case 'posters': return content.posters.length
        case 'backgrounds': return content.background_videos.length
        case 'transitions': return content.transition_sounds.length
        default: return 0
      }
    }

    const getTypeIcon = (type) => {
      switch(type) {
        case 'audio': return '🎵'
        case 'posters': return '🖼️'
        case 'backgrounds': return '🎬'
        case 'transitions': return '🔔'
        default: return '📁'
      }
    }

    // Filtered lists
    const filteredAudio = computed(() => {
      if (!searchAudio.value) return content.audio_files
      const q = searchAudio.value.toLowerCase()
      return content.audio_files.filter(f => f.toLowerCase().includes(q))
    })

    const filteredPosters = computed(() => {
      if (!searchPosters.value) return content.posters
      const q = searchPosters.value.toLowerCase()
      return content.posters.filter(f => f.toLowerCase().includes(q))
    })

    const filteredBackgrounds = computed(() => {
      if (!searchBackgrounds.value) return content.background_videos
      const q = searchBackgrounds.value.toLowerCase()
      return content.background_videos.filter(f => f.toLowerCase().includes(q))
    })

    const filteredTransitions = computed(() => {
      if (!searchTransitions.value) return content.transition_sounds
      const q = searchTransitions.value.toLowerCase()
      return content.transition_sounds.filter(f => f.toLowerCase().includes(q))
    })

    const showToast = (message, type = 'success') => {
      const toast = { message, type }
      toasts.value.push(toast)
      setTimeout(() => {
        const idx = toasts.value.indexOf(toast)
        if (idx > -1) toasts.value.splice(idx, 1)
      }, 3000)
    }

    const parseAudioFilename = (filename) => {
      const nameWithoutExt = filename.replace(/\.[^/.]+$/, '')
      const parts = nameWithoutExt.split('_')
      if (parts.length >= 2) {
        return {
          animeName: parts[0],
          opNumber: parts[1] || 'OP',
          songName: parts.slice(2).join(' ') || ''
        }
      }
      return { animeName: nameWithoutExt, opNumber: 'OP', songName: '' }
    }

    const fetchContent = async () => {
      try {
        const response = await fetch('/api/content')
        const data = await response.json()
        content.audio_files = data.audio_files || []
        content.background_videos = data.background_videos || []
        content.posters = data.posters || []
        content.transition_sounds = data.transition_sounds || []
      } catch (e) {
        showToast('Failed to fetch content', 'error')
      }
    }

    const handleUpload = async (event, type) => {
      const files = event.target.files
      if (files.length > 0) {
        await uploadFiles(type, files)
      }
      event.target.value = ''
    }

    const handleDrop = async (event, type) => {
      dragTarget.value = null
      const files = event.dataTransfer.files
      if (files.length > 0) {
        await uploadFiles(type, files)
      }
    }

    const uploadFiles = async (type, files) => {
      uploading[type] = true
      const formData = new FormData()
      for (const file of files) {
        formData.append('files', file)
      }

      try {
        const response = await fetch(`/api/upload/${type}`, {
          method: 'POST',
          body: formData
        })
        const data = await response.json()
        const successCount = data.results.filter(r => r.success).length
        const failCount = data.results.filter(r => !r.success).length

        if (successCount > 0) {
          showToast(`Uploaded ${successCount} file(s)`, 'success')
          await fetchContent()
        }
        if (failCount > 0) {
          showToast(`Failed to upload ${failCount} file(s)`, 'error')
        }
      } catch (e) {
        showToast('Upload failed: ' + e.message, 'error')
      } finally {
        uploading[type] = false
      }
    }

    const confirmDelete = (type, filename) => {
      deleteModal.type = type
      deleteModal.filename = filename
      deleteModal.show = true
    }

    const executeDelete = async () => {
      const { type, filename } = deleteModal
      deleteModal.show = false

      try {
        const response = await fetch(`/api/media/${type}/${filename}`, {
          method: 'DELETE'
        })
        if (response.ok) {
          showToast('File deleted', 'success')
          await fetchContent()
        } else {
          showToast('Failed to delete file', 'error')
        }
      } catch (e) {
        showToast('Delete failed: ' + e.message, 'error')
      }
    }

    const playAudio = (file) => {
      if (playingAudio.value === file) {
        audioPlayer.value.pause()
        playingAudio.value = null
      } else {
        // Stop any playing transition
        if (playingTransition.value) {
          transitionPlayer.value.pause()
          playingTransition.value = null
        }
        audioPlayer.value.src = `/api/media/audio/${file}`
        audioPlayer.value.play()
        playingAudio.value = file
      }
    }

    const playTransition = (file) => {
      if (playingTransition.value === file) {
        transitionPlayer.value.pause()
        playingTransition.value = null
      } else {
        // Stop any playing audio
        if (playingAudio.value) {
          audioPlayer.value.pause()
          playingAudio.value = null
        }
        transitionPlayer.value.src = `/api/media/transitions/${file}`
        transitionPlayer.value.play()
        playingTransition.value = file
      }
    }

    const handleImageError = (e) => {
      e.target.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23333" width="100" height="100"/><text x="50%" y="50%" fill="%23666" text-anchor="middle" dy=".3em">No Image</text></svg>'
    }

    onMounted(() => {
      fetchContent()
    })

    return {
      content,
      uploading,
      activeTab,
      dragTarget,
      toasts,
      tabs,
      searchAudio,
      searchPosters,
      searchBackgrounds,
      searchTransitions,
      filteredAudio,
      filteredPosters,
      filteredBackgrounds,
      filteredTransitions,
      deleteModal,
      audioPlayer,
      transitionPlayer,
      playingAudio,
      playingTransition,
      getTabCount,
      getTypeIcon,
      parseAudioFilename,
      handleUpload,
      handleDrop,
      confirmDelete,
      executeDelete,
      playAudio,
      playTransition,
      handleImageError
    }
  }
}
</script>

<style scoped>
.admin-page {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-page h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  text-align: center;
  color: #888;
  margin-bottom: 2rem;
}

/* Stats Bar */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-icon {
  font-size: 2rem;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00d4ff;
}

.stat-label {
  font-size: 0.85rem;
  color: #888;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #888;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  border-color: #00d4ff;
  color: #fff;
}

.tab-btn.active {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.2), rgba(123, 44, 191, 0.2));
  border-color: #00d4ff;
  color: #fff;
}

.tab-icon {
  font-size: 1.1rem;
}

.tab-count {
  background: rgba(0, 212, 255, 0.3);
  color: #00d4ff;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Section */
.section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header h2 {
  color: #00d4ff;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.section-hint {
  color: #666;
  font-size: 0.85rem;
}

.section-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.9rem;
  min-width: 200px;
}

.search-input:focus {
  outline: none;
  border-color: #00d4ff;
}

.search-input::placeholder {
  color: #666;
}

.btn-upload {
  padding: 0.6rem 1.25rem;
  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-upload:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-upload input {
  display: none;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.drop-zone:hover,
.drop-zone.drag-active {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.05);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.drop-icon {
  font-size: 2.5rem;
}

.drop-zone p {
  color: #888;
  margin: 0;
}

.drop-formats {
  color: #666;
  font-size: 0.8rem;
}

/* Upload Status */
.upload-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  color: #00d4ff;
}

.upload-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* File Grid */
.file-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.file-card:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.file-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.15rem;
}

.file-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-play,
.btn-delete {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.btn-play {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.btn-play:hover {
  background: rgba(0, 212, 255, 0.3);
}

.btn-delete {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
}

.btn-delete:hover {
  background: rgba(255, 68, 68, 0.3);
}

/* Poster Grid */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.poster-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.poster-card:hover {
  border-color: #00d4ff;
  transform: translateY(-4px);
}

.poster-image {
  width: 100%;
  height: 100%;
}

.poster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poster-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
  padding: 2rem 0.75rem 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poster-card:hover .poster-overlay {
  opacity: 1;
}

.poster-name {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-delete-poster {
  padding: 0.4rem 0.75rem;
  background: rgba(255, 68, 68, 0.8);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete-poster:hover {
  background: #ff4444;
}

/* Delete Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.delete-modal {
  background: #1a1a2e;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.delete-modal h3 {
  color: #ff4444;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.delete-modal p {
  color: #888;
  margin-bottom: 1.5rem;
}

.delete-file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.delete-file-icon {
  font-size: 1.5rem;
}

.delete-file-name {
  font-size: 0.9rem;
  word-break: break-all;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-cancel {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-confirm-delete {
  padding: 0.75rem 1.5rem;
  background: #ff4444;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-confirm-delete:hover {
  background: #ff2222;
}

/* Toast Container */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1001;
}

.toast {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast.success {
  background: linear-gradient(90deg, #00d4ff, #00a8cc);
}

.toast.error {
  background: linear-gradient(90deg, #ff4444, #cc2222);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .admin-page {
    padding: 1rem;
  }

  .admin-page h1 {
    font-size: 1.75rem;
  }

  .stats-bar {
    gap: 1rem;
  }

  .stat-item {
    padding: 0.75rem 1rem;
  }

  .section-header {
    flex-direction: column;
  }

  .section-actions {
    width: 100%;
  }

  .search-input {
    flex: 1;
    min-width: 0;
  }

  .poster-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .tabs {
    gap: 0.25rem;
  }

  .tab-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .tab-btn span:not(.tab-icon):not(.tab-count) {
    display: none;
  }
}
</style>
