<template>
  <Transition name="modal-fade">
    <div v-if="isOpen" class="modal-overlay" @click.self="closeModal">
      <div class="modal-container">
        <div class="modal-content">
          <!-- Close Button -->
          <button @click="closeModal" class="absolute top-4 right-4 text-white/60 hover:text-white transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>

          <!-- Header with Content Info -->
          <div class="flex gap-6 mb-8">
            <img
              v-if="content?.thumbnail"
              :src="content.thumbnail"
              :alt="content.title"
              class="w-32 h-48 object-cover rounded-lg"
            />
            <div class="flex-1">
              <h2 class="text-2xl font-bold text-white mb-2">{{ content?.title }}</h2>
              <p class="text-white/60 text-sm mb-4 line-clamp-3">{{ content?.description }}</p>
              
              <div class="flex items-center gap-4 text-sm text-white/80">
                <span v-if="content?.releaseYear">{{ content.releaseYear }}</span>
                <span v-if="content?.duration">{{ formatDuration(content.duration) }}</span>
                <span v-if="content?.rating">{{ content.rating }}</span>
              </div>
            </div>
          </div>

          <!-- Rental Info -->
          <div class="bg-white/5 rounded-xl p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
              <div>
                <h3 class="text-xl font-bold text-white mb-1">Rental Details</h3>
                <p class="text-white/60 text-sm">48-hour viewing period</p>
              </div>
              <div class="text-right">
                <div class="text-3xl font-bold text-white">${{ content?.rentalPrice || '4.99' }}</div>
                <div class="text-white/60 text-sm">One-time payment</div>
              </div>
            </div>

            <ul class="space-y-2 text-sm text-white/80">
              <li class="flex items-center gap-2">
                <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                Watch for 48 hours from purchase
              </li>
              <li class="flex items-center gap-2">
                <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                HD streaming quality
              </li>
              <li class="flex items-center gap-2">
                <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                Stream on any device
              </li>
            </ul>
          </div>

          <!-- Error Message -->
          <div v-if="errorMessage" class="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/30 text-red-400 text-sm">
            {{ errorMessage }}
          </div>

          <!-- Rent Button -->
          <button
            @click="handleRent"
            :disabled="isLoading"
            class="hero-play-button w-full flex items-center justify-center mb-4"
          >
            <span v-if="!isLoading">Rent for ${{ content?.rentalPrice || '4.99' }}</span>
            <span v-else>Processing...</span>
          </button>

          <!-- Subscribe Alternative -->
          <div class="text-center">
            <p class="text-white/60 text-sm mb-2">Or get unlimited access with a subscription</p>
            <button
              @click="$emit('openSubscription')"
              class="text-orange-500 hover:text-orange-400 font-medium text-sm transition-colors"
            >
              View subscription plans →
            </button>
          </div>

          <p class="text-center text-xs text-white/40 mt-6">
            Rental starts immediately after payment. No refunds.
          </p>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { libraryService } from '../services/library.service'
import type { Content } from '../types/content'

interface Props {
  isOpen: boolean
  content: Content | null
}

interface Emits {
  (e: 'close'): void
  (e: 'success'): void
  (e: 'openSubscription'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const isLoading = ref(false)
const errorMessage = ref<string | null>(null)

function closeModal() {
  emit('close')
  errorMessage.value = null
}

function formatDuration(minutes: number): string {
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`
}

async function handleRent() {
  if (!props.content) return

  isLoading.value = true
  errorMessage.value = null

  try {
    // Check if we're in development mode
    const useMockData = import.meta.env.VITE_USE_MOCK_DATA === 'true' || import.meta.env.DEV
    
    if (useMockData) {
      // Mock rental for development
      console.log('🔧 Development mode: Mock rental successful')
      await new Promise(resolve => setTimeout(resolve, 500))
      
      emit('success')
      closeModal()
      return
    }
    
    // Real API call
    await libraryService.rentContent(props.content.id)
    emit('success')
    closeModal()
  } catch (error: any) {
    errorMessage.value = error.message || 'Rental failed. Please try again.'
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-container {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content {
  position: relative;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 32px;
}

/* Modal Transitions */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active .modal-content {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-fade-enter-from .modal-content {
  transform: scale(0.95);
  opacity: 0;
}
</style>
