<template>
  <div class="bg-white rounded-lg shadow-sm border p-6">
    <div class="flex items-start space-x-4">
      <!-- File Icon and Info -->
      <div class="flex-shrink-0">
        <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <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>
      </div>

      <!-- File Details -->
      <div class="flex-1 min-w-0">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-medium text-gray-900 truncate">
            {{ file.filename }}
          </h3>

          <!-- Status Badge -->
          <div class="flex-shrink-0 ml-4">
            <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
          </div>
        </div>

        <p class="text-sm text-gray-500 mt-1">
          {{ file.getFormattedSize() }} • {{ file.getFileExtension().toUpperCase() }}
        </p>

        <!-- Extracted Info -->
        <div v-if="file.isAnalyzed()" class="mt-2 flex gap-3 text-sm">
          <span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 text-blue-700">
            Chapitre {{ file.getExtractedChapterNumber() }}
          </span>
          <span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 text-purple-700">
            Volume {{ file.getExtractedVolumeNumber() }}
          </span>
        </div>

        <!-- Error Display -->
        <div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
          <div class="flex">
            <svg class="flex-shrink-0 h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">Erreur</h3>
              <div class="mt-2 text-sm text-red-700">{{ file.errorMessage }}</div>
            </div>
          </div>
        </div>

        <!-- Manga Selection -->
        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3">
              Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
            </label>

            <!-- Matches Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              <MangaMatchCard
                v-for="match in sortedMatches"
                :key="match.id"
                :match="match"
                :is-selected="file.selectedManga?.id === match.id"
                @select-match="handleMangaSelection"
              />
            </div>
          </div>

          <!-- Selected Manga Preview -->
          <div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 border border-blue-200 rounded-md">
            <img
              v-if="file.selectedManga.thumbnailUrl"
              :src="file.selectedManga.thumbnailUrl"
              :alt="file.selectedManga.title"
              class="w-12 h-16 object-cover rounded"
            />
            <div class="flex-1">
              <p class="font-medium text-gray-900">{{ file.selectedManga.title }}</p>
              <p class="text-sm text-gray-500">{{ file.selectedManga.slug }}</p>
              <p class="text-xs text-blue-600 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
            </div>
          </div>

          <!-- Chapter/Volume Number Inputs -->
          <div v-if="file.selectedManga" class="grid grid-cols-2 gap-3">
            <!-- Chapter Number -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                Numéro de chapitre
              </label>
              <input
                type="number"
                step="0.5"
                :value="file.selectedChapterNumber ?? ''"
                @input="handleChapterNumberInput"
                :disabled="file.selectedVolumeNumber !== null"
                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100"
                placeholder="Ex: 1, 1.5, 2..."
              />
            </div>

            <!-- Volume Number -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">
                Numéro de volume
              </label>
              <input
                type="number"
                step="0.5"
                :value="file.selectedVolumeNumber ?? ''"
                @input="handleVolumeNumberInput"
                :disabled="file.selectedChapterNumber !== null"
                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100"
                placeholder="Ex: 1, 1.5, 2..."
              />
            </div>
          </div>
        </div>

        <!-- No Matches Message -->
        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
          <div class="flex">
            <svg class="flex-shrink-0 h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-yellow-800">Aucun manga trouvé</h3>
              <div class="mt-2 text-sm text-yellow-700">
                Aucun manga ne correspond à ce fichier. Vérifiez le nom du fichier.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="mt-6 flex justify-between items-center">
      <div class="flex space-x-3">
        <!-- Import Button -->
        <button
          v-if="file.isReadyForImport()"
          @click="$emit('import-file')"
          :disabled="isImporting"
          class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"
        >
          <svg v-if="isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          {{ isImporting ? 'Import en cours...' : 'Importer' }}
        </button>

        <!-- Retry Button -->
        <button
          v-if="file.hasError()"
          @click="$emit('retry-file')"
          class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
        >
          Réessayer
        </button>
      </div>

      <!-- Remove Button -->
      <button
        @click="$emit('remove-file')"
        class="text-red-600 hover:text-red-700 text-sm font-medium"
      >
        Supprimer
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import MangaMatchCard from './MangaMatchCard.vue';
import StatusBadge from './StatusBadge.vue';

const props = defineProps({
  file: {
    type: Object,
    required: true
  },
  isAnalyzing: {
    type: Boolean,
    default: false
  },
  isImporting: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  'manga-selected',
  'chapter-number-selected',
  'volume-number-selected',
  'import-file',
  'retry-file',
  'remove-file'
]);

// Computed property to get sorted matches
const sortedMatches = computed(() => {
  const matches = props.file.getMatches();
  return matches.sort((a, b) => b.matchScore - a.matchScore);
});

const handleMangaSelection = (selectedManga) => {
  emit('manga-selected', selectedManga);
};

const handleChapterNumberInput = (event) => {
  const value = event.target.value;
  const chapterNumber = value ? parseFloat(value) : null;
  emit('chapter-number-selected', chapterNumber);
};

const handleVolumeNumberInput = (event) => {
  const value = event.target.value;
  const volumeNumber = value ? parseFloat(value) : null;
  emit('volume-number-selected', volumeNumber);
};
</script>
