<template>
    <div class="py-3">

        <!-- Row principal : icône, nom, statut, actions -->
        <div class="flex items-center gap-3">
            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-center shrink-0">
                <DocumentIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
            </div>

            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ file.getFormattedSize() }} · {{ file.getFileExtension().toUpperCase() }}
                    <span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-green-600 dark:text-green-400">
                        Ch. {{ file.getExtractedChapterNumber() }}
                    </span>
                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-green-600 dark:text-green-400">
                        Vol. {{ file.getExtractedVolumeNumber() }}
                    </span>
                </p>
            </div>

            <div class="flex items-center gap-2 shrink-0">
                <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />

                <button
                    v-if="file.isReadyForImport()"
                    @click="$emit('import-file')"
                    :disabled="isImporting"
                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium transition-colors"
                >
                    <ArrowUpTrayIcon class="w-3.5 h-3.5" />
                    Importer
                </button>

                <button
                    v-if="file.hasError()"
                    @click="$emit('retry-file')"
                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium transition-colors"
                >
                    Réessayer
                </button>

                <button
                    @click="$emit('remove-file')"
                    class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                    title="Supprimer"
                >
                    <XMarkIcon class="w-4 h-4" />
                </button>
            </div>
        </div>

        <!-- Message d'erreur -->
        <div v-if="file.hasError()" class="mt-2 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-3 py-2">
            <ExclamationCircleIcon class="w-4 h-4 shrink-0 mt-0.5" />
            {{ file.errorMessage }}
        </div>

        <!-- Aucun manga trouvé -->
        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-2 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-2">
            <ExclamationTriangleIcon class="w-4 h-4 shrink-0 mt-0.5" />
            Aucun manga correspondant trouvé. Vérifiez le nom du fichier.
        </div>

        <!-- Sélection du manga -->
        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-3 space-y-3">
            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                {{ file.getMatches().length }} correspondance(s)
            </p>

            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
                <MangaMatchCard
                    v-for="match in sortedMatches"
                    :key="match.id"
                    :match="match"
                    :is-selected="file.selectedManga?.id === match.id"
                    @select-match="handleMangaSelection"
                />
            </div>
        </div>

        <!-- Numéros de chapitre / volume -->
        <div v-if="file.selectedManga" class="mt-3 grid grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Chapitre</label>
                <input
                    type="number"
                    step="0.5"
                    :value="file.selectedChapterNumber ?? ''"
                    @input="handleChapterNumberInput"
                    :disabled="file.selectedVolumeNumber !== null"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
                    placeholder="Ex: 1, 1.5..."
                />
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label>
                <input
                    type="number"
                    step="0.5"
                    :value="file.selectedVolumeNumber ?? ''"
                    @input="handleVolumeNumberInput"
                    :disabled="file.selectedChapterNumber !== null"
                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
                    placeholder="Ex: 1, 1.5..."
                />
            </div>
        </div>

    </div>
</template>

<script setup>
import { ArrowUpTrayIcon, DocumentIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
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',
]);

const sortedMatches = computed(() =>
    [...props.file.getMatches()].sort((a, b) => b.matchScore - a.matchScore)
);

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

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

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