<template>
  <div class="max-w-6xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Mes tickets</h1>
      <p class="text-lg text-gray-600">Suivez vos demandes et signalements</p>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
      <div class="bg-white rounded-lg shadow p-4 text-center">
        <div class="text-2xl font-bold text-blue-600">{{ ticketStats.open }}</div>
        <div class="text-sm text-gray-600">Ouverts</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4 text-center">
        <div class="text-2xl font-bold text-yellow-600">{{ ticketStats.in_progress }}</div>
        <div class="text-sm text-gray-600">En cours</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4 text-center">
        <div class="text-2xl font-bold text-green-600">{{ ticketStats.closed }}</div>
        <div class="text-sm text-gray-600">Fermés</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4 text-center">
        <div class="text-2xl font-bold text-gray-600">{{ ticketStats.total }}</div>
        <div class="text-sm text-gray-600">Total</div>
      </div>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap gap-2 justify-center mb-6">
      <button
        @click="selectedStatus = null"
        :class="[
          'px-4 py-2 rounded-full text-sm font-medium transition-colors',
          selectedStatus === null
            ? 'bg-primary-600 text-white'
            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
        ]"
      >
        Tous
      </button>
      <button
        v-for="status in availableStatuses"
        :key="status"
        @click="selectedStatus = status"
        :class="[
          'px-4 py-2 rounded-full text-sm font-medium transition-colors',
          selectedStatus === status
            ? 'bg-primary-600 text-white'
            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
        ]"
      >
        {{ getStatusLabel(status) }}
      </button>
    </div>

          <!-- Loading State -->
      <div v-if="loading" class="text-center py-12">
        <LoadingLogo size="large" text="Chargement de vos tickets..." />
      </div>

    <!-- No Tickets -->
    <div v-else-if="filteredTickets.length === 0" class="text-center py-12">
      <div class="text-gray-400 mb-4">
        <svg class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      </div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun ticket</h3>
      <p class="text-gray-600">
        {{ selectedStatus ? `Aucun ticket avec le statut "${getStatusLabel(selectedStatus)}"` : 'Vous n\'avez pas encore créé de ticket' }}
      </p>
    </div>

    <!-- Tickets List -->
    <div v-else class="space-y-4">
      <div
        v-for="ticket in filteredTickets"
        :key="ticket.id"
        class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
      >
        <!-- Header -->
        <div class="flex items-start justify-between mb-4">
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-2">
              <span
                :class="[
                  'px-3 py-1 rounded-full text-xs font-medium',
                  getTypeBadgeClass(ticket.ticket_type)
                ]"
              >
                {{ getTypeLabel(ticket.ticket_type) }}
              </span>
              <span
                :class="[
                  'px-3 py-1 rounded-full text-xs font-medium',
                  getStatusBadgeClass(ticket.status)
                ]"
              >
                {{ getStatusLabel(ticket.status) }}
              </span>
              <span
                :class="[
                  'px-3 py-1 rounded-full text-xs font-medium',
                  getPriorityBadgeClass(ticket.priority)
                ]"
              >
                {{ getPriorityLabel(ticket.priority) }}
              </span>
              <span class="text-sm text-gray-500">
                {{ formatDate(ticket.created_at) }}
              </span>
            </div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">{{ ticket.title }}</h2>
          </div>
          <div class="flex space-x-2">
            <button
              @click="editTicket(ticket)"
              class="text-blue-600 hover:text-blue-800 text-sm font-medium"
            >
              Modifier
            </button>
            <button
              @click="deleteTicket(ticket.id)"
              class="text-red-600 hover:text-red-800 text-sm font-medium"
            >
              Supprimer
            </button>
          </div>
        </div>

        <!-- Content -->
        <div class="prose prose-gray max-w-none mb-4">
          <div class="whitespace-pre-wrap text-gray-700 leading-relaxed">{{ ticket.description }}</div>
        </div>

        <!-- Screenshot -->
        <div v-if="ticket.screenshot_path" class="mb-4">
          <h4 class="text-sm font-medium text-gray-700 mb-2">Screenshot :</h4>
          <img
            :src="getMediaUrl(ticket.screenshot_path)"
            :alt="ticket.title"
            class="max-w-md rounded-lg border border-gray-200 cursor-pointer hover:opacity-90 transition-opacity"
            @click="viewScreenshot(ticket.screenshot_path)"
          >
        </div>

        <!-- Admin Notes -->
        <div v-if="ticket.admin_notes" class="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
          <h4 class="text-sm font-medium text-blue-800 mb-2">Réponse de l'équipe :</h4>
          <div class="text-sm text-blue-700 whitespace-pre-wrap">{{ ticket.admin_notes }}</div>
        </div>

        <!-- Footer -->
        <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm text-gray-500">
          <span>Mis à jour le {{ formatDate(ticket.updated_at) }}</span>
          <span v-if="ticket.assigned_admin_name" class="text-blue-600">
            Assigné à {{ ticket.assigned_admin_name }}
          </span>
        </div>
      </div>
    </div>

    <!-- Ticket Modal -->
    <transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="showTicketModal"
        class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
      >
        <div class="bg-white rounded-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-semibold">
              {{ editingTicket ? 'Modifier le ticket' : 'Nouveau ticket' }}
            </h2>
            <button
              @click="showTicketModal = false"
              class="text-gray-400 hover:text-gray-600"
            >
              <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <form @submit.prevent="saveTicket" class="space-y-6">
            <!-- Title -->
            <div>
              <label class="label">Titre *</label>
              <input
                v-model="ticketForm.title"
                type="text"
                class="input"
                required
                maxlength="200"
                placeholder="Titre de votre ticket"
              >
            </div>
            
            <!-- Type -->
            <div>
              <label class="label">Type</label>
              <select v-model="ticketForm.ticket_type" class="input">
                <option value="bug">🐛 Bug</option>
                <option value="feature_request">💡 Demande de fonctionnalité</option>
                <option value="improvement">✨ Amélioration</option>
                <option value="support">❓ Support</option>
                <option value="other">📝 Autre</option>
              </select>
            </div>
            
            <!-- Priority -->
            <div>
              <label class="label">Priorité</label>
              <select v-model="ticketForm.priority" class="input">
                <option value="low">🟢 Faible</option>
                <option value="medium">🟡 Moyenne</option>
                <option value="high">🟠 Élevée</option>
                <option value="urgent">🔴 Urgente</option>
              </select>
            </div>
            
            <!-- Description -->
            <div>
              <label class="label">Description *</label>
              <textarea
                v-model="ticketForm.description"
                class="input resize-none"
                rows="6"
                required
                placeholder="Décrivez votre problème ou votre demande en détail..."
              ></textarea>
            </div>
            
            <!-- Screenshot -->
            <div>
              <label class="label">Screenshot (optionnel)</label>
              <input
                ref="screenshotInput"
                type="file"
                accept="image/*"
                class="input"
                @change="handleScreenshotChange"
              >
              <div class="mt-1 text-sm text-gray-600">
                Formats acceptés : JPG, PNG, GIF, WebP (max 5MB)
              </div>
            </div>
            
            <!-- Actions -->
            <div class="flex gap-3 pt-4">
              <button
                type="button"
                @click="showTicketModal = false"
                class="flex-1 btn-secondary"
              >
                Annuler
              </button>
              <button
                type="submit"
                class="flex-1 btn-primary"
                :disabled="savingTicket"
              >
                <Save class="w-4 h-4 mr-2" />
                {{ savingTicket ? 'Sauvegarde...' : 'Sauvegarder' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </transition>

    <!-- Screenshot Viewer Modal -->
    <transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="showScreenshotModal"
        class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
        @click="showScreenshotModal = false"
      >
        <div class="max-w-4xl max-h-[90vh] overflow-auto">
          <img
            :src="selectedScreenshot"
            alt="Screenshot"
            class="max-w-full h-auto rounded-lg"
            @click.stop
          >
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useToast } from 'vue-toastification'
import { formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale'
import { Save } from 'lucide-vue-next'
import axios from '@/utils/axios'
import { getMediaUrl } from '@/utils/axios'
import LoadingLogo from '@/components/LoadingLogo.vue'

const toast = useToast()

// State
const tickets = ref([])
const loading = ref(true)
const selectedStatus = ref(null)
const showTicketModal = ref(false)
const editingTicket = ref(null)
const savingTicket = ref(false)
const showScreenshotModal = ref(false)
const selectedScreenshot = ref('')
const screenshotInput = ref(null)

const ticketForm = ref({
  title: '',
  description: '',
  ticket_type: 'other',
  priority: 'medium'
})

// Computed
const availableStatuses = computed(() => {
  const statuses = [...new Set(tickets.value.map(ticket => ticket.status))]
  return statuses.sort()
})

const filteredTickets = computed(() => {
  if (!selectedStatus.value) {
    return tickets.value
  }
  return tickets.value.filter(ticket => ticket.status === selectedStatus.value)
})

const ticketStats = computed(() => {
  const stats = {
    open: tickets.value.filter(t => t.status === 'open').length,
    in_progress: tickets.value.filter(t => t.status === 'in_progress').length,
    closed: tickets.value.filter(t => t.status === 'closed').length,
    total: tickets.value.length
  }
  return stats
})

// Methods
function getTypeLabel(type) {
  const labels = {
    'bug': 'Bug',
    'feature_request': 'Fonctionnalité',
    'improvement': 'Amélioration',
    'support': 'Support',
    'other': 'Autre'
  }
  return labels[type] || type
}

function getStatusLabel(status) {
  const labels = {
    'open': 'Ouvert',
    'in_progress': 'En cours',
    'closed': 'Fermé'
  }
  return labels[status] || status
}

function getPriorityLabel(priority) {
  const labels = {
    'low': 'Faible',
    'medium': 'Moyenne',
    'high': 'Élevée',
    'urgent': 'Urgente'
  }
  return labels[priority] || priority
}

function getTypeBadgeClass(type) {
  const classes = {
    'bug': 'bg-red-100 text-red-800',
    'feature_request': 'bg-blue-100 text-blue-800',
    'improvement': 'bg-green-100 text-green-800',
    'support': 'bg-yellow-100 text-yellow-800',
    'other': 'bg-gray-100 text-gray-800'
  }
  return classes[type] || 'bg-gray-100 text-gray-800'
}

function getStatusBadgeClass(status) {
  const classes = {
    'open': 'bg-blue-100 text-blue-800',
    'in_progress': 'bg-yellow-100 text-yellow-800',

    'closed': 'bg-gray-100 text-gray-800'
  }
  return classes[status] || 'bg-gray-100 text-gray-800'
}

function getPriorityBadgeClass(priority) {
  const classes = {
    'low': 'bg-green-100 text-green-800',
    'medium': 'bg-yellow-100 text-yellow-800',
    'high': 'bg-orange-100 text-orange-800',
    'urgent': 'bg-red-100 text-red-800'
  }
  return classes[priority] || 'bg-gray-100 text-gray-800'
}

function formatDate(date) {
  return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
}

function resetTicketForm() {
  ticketForm.value = {
    title: '',
    description: '',
    ticket_type: 'other',
    priority: 'medium'
  }
  editingTicket.value = null
  if (screenshotInput.value) {
    screenshotInput.value.value = ''
  }
}

function editTicket(ticket) {
  editingTicket.value = ticket
  ticketForm.value = {
    title: ticket.title,
    description: ticket.description,
    ticket_type: ticket.ticket_type,
    priority: ticket.priority
  }
  showTicketModal.value = true
}

function handleScreenshotChange(event) {
  const file = event.target.files[0]
  if (file && file.size > 5 * 1024 * 1024) {
    toast.error('Le fichier est trop volumineux (max 5MB)')
    event.target.value = ''
  }
}

function viewScreenshot(screenshotPath) {
  selectedScreenshot.value = getMediaUrl(screenshotPath)
  showScreenshotModal.value = true
}

async function saveTicket() {
  savingTicket.value = true
  try {
    const formData = new FormData()
    formData.append('title', ticketForm.value.title)
    formData.append('description', ticketForm.value.description)
    formData.append('ticket_type', ticketForm.value.ticket_type)
    formData.append('priority', ticketForm.value.priority)
    
    if (screenshotInput.value && screenshotInput.value.files[0]) {
      formData.append('screenshot', screenshotInput.value.files[0])
    }
    
    if (editingTicket.value) {
      // Update existing ticket
      await axios.put(`/api/tickets/${editingTicket.value.id}`, ticketForm.value)
      toast.success('Ticket mis à jour')
    } else {
      // Create new ticket
      await axios.post('/api/tickets/', formData)
      toast.success('Ticket créé avec succès')
    }
    
    await fetchTickets()
    showTicketModal.value = false
    resetTicketForm()
  } catch (error) {
    toast.error('Erreur lors de la sauvegarde')
    console.error('Error saving ticket:', error)
  } finally {
    savingTicket.value = false
  }
}

async function deleteTicket(ticketId) {
  if (!confirm('Êtes-vous sûr de vouloir supprimer ce ticket ? Cette action est irréversible.')) return
  
  try {
    await axios.delete(`/api/tickets/${ticketId}`)
    await fetchTickets()
    toast.success('Ticket supprimé')
  } catch (error) {
    toast.error('Erreur lors de la suppression')
    console.error('Error deleting ticket:', error)
  }
}

async function fetchTickets() {
  try {
    loading.value = true
    const response = await axios.get('/api/tickets/')
    tickets.value = response.data
  } catch (error) {
    console.error('Error fetching tickets:', error)
    toast.error('Erreur lors du chargement des tickets')
  } finally {
    loading.value = false
  }
}

// Lifecycle
onMounted(() => {
  fetchTickets()
})
</script>
