<template>
  <div class="manager-page">
    <h1>Openings Manager</h1>
    <p class="subtitle">Manage anime openings database</p>

    <!-- Header Actions -->
    <div class="header-actions">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="Search by anime name..."
        class="search-input"
      />
      <button class="btn-primary" @click="openCreateModal">+ Add Opening</button>
    </div>

    <!-- Stats -->
    <div class="stats-bar">
      <div class="stat-item">
        <span class="stat-value">{{ total }}</span>
        <span class="stat-label">Total Openings</span>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
      <span>Loading openings...</span>
    </div>

    <!-- Empty State -->
    <div v-else-if="openings.length === 0" class="empty-state">
      <span class="empty-icon">🎵</span>
      <p>No openings found</p>
      <button class="btn-primary" @click="openCreateModal">Add your first opening</button>
    </div>

    <!-- Openings Grid -->
    <div v-else class="openings-grid">
      <div v-for="opening in openings" :key="opening.id" class="opening-card">
        <div class="opening-poster">
          <img
            v-if="getDefaultPoster(opening)"
            :src="'/api/media/posters/' + getDefaultPoster(opening)"
            :alt="opening.anime_name"
            @error="handleImageError"
          />
          <div v-else class="no-poster">No Poster</div>
        </div>
        <div class="opening-info">
          <h3 class="anime-name">{{ opening.anime_name }}</h3>
          <div class="op-number">{{ opening.op_number }}</div>
          <div v-if="opening.song_name" class="song-name">{{ opening.song_name }}</div>
          <div class="audio-file">{{ opening.audio_file }}</div>
          <div class="poster-count">{{ opening.posters.length }} poster(s)</div>
          <div class="last-usage" v-if="opening.last_usage">
            Last used: {{ formatDate(opening.last_usage) }}
          </div>
          <div class="last-usage never-used" v-else>Never used</div>
        </div>
        <div class="opening-actions">
          <button class="btn-icon" @click="openEditModal(opening)" title="Edit">✏️</button>
          <button class="btn-icon" @click="openPostersModal(opening)" title="Manage Posters">🖼️</button>
          <button class="btn-icon btn-delete" @click="confirmDelete(opening)" title="Delete">🗑️</button>
        </div>
      </div>
    </div>

    <!-- Create/Edit Modal -->
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal">
        <div class="modal-header">
          <h2>{{ editingOpening ? 'Edit Opening' : 'Add Opening' }}</h2>
          <button class="modal-close" @click="closeModal">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Anime Name *</label>
            <input type="text" v-model="form.anime_name" placeholder="e.g., One Piece" />
          </div>
          <div class="form-group">
            <label>OP Number *</label>
            <input type="text" v-model="form.op_number" placeholder="e.g., OP1, ED2" />
          </div>
          <div class="form-group">
            <label>Song Name</label>
            <input type="text" v-model="form.song_name" placeholder="e.g., We Are!" />
          </div>
          <div class="form-group">
            <label>Audio File (S3 key) *</label>
            <select v-model="form.audio_file">
              <option value="">Select audio file...</option>
              <option v-for="file in audioFiles" :key="file" :value="file">{{ file }}</option>
            </select>
          </div>
          <div v-if="!editingOpening" class="form-group">
            <label>Posters (S3 keys)</label>
            <div class="poster-select-grid">
              <label
                v-for="poster in posterFiles"
                :key="poster"
                class="poster-checkbox"
                :class="{ selected: form.poster_files.includes(poster) }"
              >
                <input type="checkbox" :value="poster" v-model="form.poster_files" />
                <img :src="'/api/media/posters/' + poster" :alt="poster" @error="handleImageError" />
                <span class="poster-name">{{ poster }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeModal">Cancel</button>
          <button class="btn-primary" @click="saveOpening" :disabled="saving">
            {{ saving ? 'Saving...' : (editingOpening ? 'Update' : 'Create') }}
          </button>
        </div>
      </div>
    </div>

    <!-- Posters Management Modal -->
    <div v-if="showPostersModal" class="modal-overlay" @click.self="closePostersModal">
      <div class="modal">
        <div class="modal-header">
          <h2>Manage Posters - {{ selectedOpening?.anime_name }}</h2>
          <button class="modal-close" @click="closePostersModal">×</button>
        </div>
        <div class="modal-body">
          <!-- Current Posters -->
          <h3>Current Posters</h3>
          <div v-if="selectedOpening?.posters.length === 0" class="empty-posters">
            No posters attached
          </div>
          <div v-else class="posters-list">
            <div
              v-for="poster in selectedOpening?.posters"
              :key="poster.id"
              class="poster-item"
              :class="{ 'is-default': poster.is_default }"
            >
              <img :src="'/api/media/posters/' + poster.poster_file" :alt="poster.poster_file" @error="handleImageError" />
              <div class="poster-info">
                <span class="poster-filename">{{ poster.poster_file }}</span>
                <span v-if="poster.is_default" class="default-badge">Default</span>
              </div>
              <div class="poster-actions">
                <button
                  v-if="!poster.is_default"
                  class="btn-small"
                  @click="setDefaultPoster(poster.id)"
                >
                  Set Default
                </button>
                <button class="btn-small btn-delete" @click="removePoster(poster.id)">Remove</button>
              </div>
            </div>
          </div>

          <!-- Add New Poster -->
          <h3>Add Poster</h3>
          <div class="add-poster-section">
            <select v-model="newPosterFile">
              <option value="">Select poster...</option>
              <option v-for="poster in availablePosters" :key="poster" :value="poster">{{ poster }}</option>
            </select>
            <button class="btn-primary" @click="addPoster" :disabled="!newPosterFile">Add</button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-primary" @click="closePostersModal">Done</button>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
      <div class="delete-modal">
        <h3>Confirm Delete</h3>
        <p>Are you sure you want to delete this opening?</p>
        <div class="delete-preview">
          <strong>{{ deletingOpening?.anime_name }}</strong> - {{ deletingOpening?.op_number }}
        </div>
        <div class="modal-actions">
          <button class="btn-cancel" @click="showDeleteModal = false">Cancel</button>
          <button class="btn-delete-confirm" @click="executeDelete">Delete</button>
        </div>
      </div>
    </div>

    <!-- 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, watch } from 'vue'

export default {
  name: 'OpeningsManager',
  setup() {
    const openings = ref([])
    const total = ref(0)
    const loading = ref(true)
    const saving = ref(false)
    const searchQuery = ref('')
    const toasts = ref([])

    // Modal states
    const showModal = ref(false)
    const showPostersModal = ref(false)
    const showDeleteModal = ref(false)
    const editingOpening = ref(null)
    const selectedOpening = ref(null)
    const deletingOpening = ref(null)

    // Form data
    const form = reactive({
      anime_name: '',
      op_number: '',
      song_name: '',
      audio_file: '',
      poster_files: []
    })

    // Available files from S3
    const audioFiles = ref([])
    const posterFiles = ref([])
    const newPosterFile = ref('')

    const availablePosters = computed(() => {
      if (!selectedOpening.value) return posterFiles.value
      const usedPosters = selectedOpening.value.posters.map(p => p.poster_file)
      return posterFiles.value.filter(p => !usedPosters.includes(p))
    })

    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 fetchOpenings = async () => {
      loading.value = true
      try {
        const params = new URLSearchParams()
        if (searchQuery.value) params.append('search', searchQuery.value)

        const response = await fetch(`/api/api/openings?${params}`)
        const data = await response.json()
        openings.value = data.openings
        total.value = data.total
      } catch (e) {
        showToast('Failed to fetch openings', 'error')
      } finally {
        loading.value = false
      }
    }

    const fetchContent = async () => {
      try {
        const response = await fetch('/api/content')
        const data = await response.json()
        audioFiles.value = data.audio_files || []
        posterFiles.value = data.posters || []
      } catch (e) {
        console.error('Failed to fetch content:', e)
      }
    }

    const getDefaultPoster = (opening) => {
      const defaultPoster = opening.posters.find(p => p.is_default)
      if (defaultPoster) return defaultPoster.poster_file
      if (opening.posters.length > 0) return opening.posters[0].poster_file
      return null
    }

    const openCreateModal = () => {
      editingOpening.value = null
      form.anime_name = ''
      form.op_number = ''
      form.song_name = ''
      form.audio_file = ''
      form.poster_files = []
      showModal.value = true
    }

    const openEditModal = (opening) => {
      editingOpening.value = opening
      form.anime_name = opening.anime_name
      form.op_number = opening.op_number
      form.song_name = opening.song_name || ''
      form.audio_file = opening.audio_file
      form.poster_files = []
      showModal.value = true
    }

    const closeModal = () => {
      showModal.value = false
      editingOpening.value = null
    }

    const saveOpening = async () => {
      if (!form.anime_name || !form.op_number || !form.audio_file) {
        showToast('Please fill all required fields', 'error')
        return
      }

      saving.value = true
      try {
        const payload = {
          anime_name: form.anime_name,
          op_number: form.op_number,
          song_name: form.song_name || null,
          audio_file: form.audio_file,
        }

        if (editingOpening.value) {
          // Update
          await fetch(`/api/api/openings/${editingOpening.value.id}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          })
          showToast('Opening updated')
        } else {
          // Create
          payload.poster_files = form.poster_files
          await fetch('/api/api/openings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          })
          showToast('Opening created')
        }

        closeModal()
        await fetchOpenings()
      } catch (e) {
        showToast('Failed to save opening', 'error')
      } finally {
        saving.value = false
      }
    }

    const openPostersModal = (opening) => {
      selectedOpening.value = opening
      newPosterFile.value = ''
      showPostersModal.value = true
    }

    const closePostersModal = () => {
      showPostersModal.value = false
      selectedOpening.value = null
    }

    const addPoster = async () => {
      if (!newPosterFile.value || !selectedOpening.value) return

      try {
        await fetch(`/api/api/openings/${selectedOpening.value.id}/posters`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            poster_file: newPosterFile.value,
            is_default: selectedOpening.value.posters.length === 0
          })
        })
        showToast('Poster added')
        await fetchOpenings()

        // Refresh selected opening
        const updated = openings.value.find(o => o.id === selectedOpening.value.id)
        if (updated) selectedOpening.value = updated

        newPosterFile.value = ''
      } catch (e) {
        showToast('Failed to add poster', 'error')
      }
    }

    const removePoster = async (posterId) => {
      if (!selectedOpening.value) return

      try {
        await fetch(`/api/api/openings/${selectedOpening.value.id}/posters/${posterId}`, {
          method: 'DELETE'
        })
        showToast('Poster removed')
        await fetchOpenings()

        // Refresh selected opening
        const updated = openings.value.find(o => o.id === selectedOpening.value.id)
        if (updated) selectedOpening.value = updated
      } catch (e) {
        showToast('Failed to remove poster', 'error')
      }
    }

    const setDefaultPoster = async (posterId) => {
      if (!selectedOpening.value) return

      try {
        await fetch(`/api/api/openings/${selectedOpening.value.id}/posters/${posterId}/set-default`, {
          method: 'POST'
        })
        showToast('Default poster set')
        await fetchOpenings()

        // Refresh selected opening
        const updated = openings.value.find(o => o.id === selectedOpening.value.id)
        if (updated) selectedOpening.value = updated
      } catch (e) {
        showToast('Failed to set default poster', 'error')
      }
    }

    const confirmDelete = (opening) => {
      deletingOpening.value = opening
      showDeleteModal.value = true
    }

    const executeDelete = async () => {
      if (!deletingOpening.value) return

      try {
        await fetch(`/api/api/openings/${deletingOpening.value.id}`, {
          method: 'DELETE'
        })
        showToast('Opening deleted')
        showDeleteModal.value = false
        deletingOpening.value = null
        await fetchOpenings()
      } catch (e) {
        showToast('Failed to delete opening', 'error')
      }
    }

    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>'
    }

    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      const now = new Date()
      const diffMs = now - date
      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))

      if (diffDays === 0) {
        const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
        if (diffHours === 0) {
          const diffMins = Math.floor(diffMs / (1000 * 60))
          return diffMins <= 1 ? 'just now' : `${diffMins} min ago`
        }
        return diffHours === 1 ? '1 hour ago' : `${diffHours} hours ago`
      }
      if (diffDays === 1) return 'yesterday'
      if (diffDays < 7) return `${diffDays} days ago`

      return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      })
    }

    // Search debounce
    let searchTimeout
    watch(searchQuery, () => {
      clearTimeout(searchTimeout)
      searchTimeout = setTimeout(fetchOpenings, 300)
    })

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

    return {
      openings,
      total,
      loading,
      saving,
      searchQuery,
      toasts,
      showModal,
      showPostersModal,
      showDeleteModal,
      editingOpening,
      selectedOpening,
      deletingOpening,
      form,
      audioFiles,
      posterFiles,
      newPosterFile,
      availablePosters,
      getDefaultPoster,
      openCreateModal,
      openEditModal,
      closeModal,
      saveOpening,
      openPostersModal,
      closePostersModal,
      addPoster,
      removePoster,
      setDefaultPoster,
      confirmDelete,
      executeDelete,
      handleImageError,
      formatDate
    }
  }
}
</script>

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

.manager-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;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  max-width: 400px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1rem;
}

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

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

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

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stats-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 2rem;
  border-radius: 12px;
}

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

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

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  color: #888;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px 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 {
  text-align: center;
  padding: 4rem;
  color: #666;
}

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

.empty-state p {
  margin-bottom: 1.5rem;
}

/* Openings Grid */
.openings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.opening-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

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

.opening-poster {
  height: 180px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.no-poster {
  color: #666;
  font-size: 0.9rem;
}

.opening-info {
  padding: 1rem;
}

.anime-name {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.op-number {
  color: #00d4ff;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.song-name {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.audio-file {
  color: #666;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.poster-count {
  color: #888;
  font-size: 0.8rem;
}

.last-usage {
  color: #00d4ff;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.last-usage.never-used {
  color: #666;
  font-style: italic;
}

.opening-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

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

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

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

/* 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;
  padding: 1rem;
}

.modal {
  background: #1a1a2e;
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  color: #00d4ff;
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-body h3 {
  color: #00d4ff;
  font-size: 1rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

.modal-body h3:first-child {
  margin-top: 0;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ccc;
  font-size: 0.9rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.95rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #00d4ff;
}

.poster-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
}

.poster-checkbox {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.poster-checkbox.selected {
  border-color: #00d4ff;
}

.poster-checkbox input {
  display: none;
}

.poster-checkbox img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.poster-checkbox .poster-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.25rem;
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.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;
}

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

/* Posters Modal */
.empty-posters {
  color: #666;
  padding: 1rem;
  text-align: center;
}

.posters-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.poster-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.poster-item.is-default {
  border-color: #00d4ff;
}

.poster-item img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

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

.poster-filename {
  font-size: 0.85rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.default-badge {
  display: inline-block;
  background: #00d4ff;
  color: #000;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.poster-actions {
  display: flex;
  gap: 0.5rem;
}

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

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

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

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

.add-poster-section {
  display: flex;
  gap: 1rem;
}

.add-poster-section select {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

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

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

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

.delete-preview {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

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

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

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

/* Toast */
.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;
}

.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; }
}

@media (max-width: 768px) {
  .manager-page {
    padding: 1rem;
  }

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

  .search-input {
    max-width: 100%;
  }

  .openings-grid {
    grid-template-columns: 1fr;
  }
}
</style>
