<template>
  <div>
    <!-- En-tête -->
    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="flex items-center justify-center h-9 w-9 bg-green-100 dark:bg-green-900/40">
            <CheckCircleIcon class="h-5 w-5 text-green-600" />
          </div>
          <div>
            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">Import terminé</h3>
            <p class="text-xs text-gray-500 dark:text-gray-400">Voici le résumé de votre session d'import</p>
          </div>
        </div>
        <div class="flex items-center gap-6 text-center">
          <div>
            <div class="text-xl font-bold text-green-600">{{ importedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Importés</div>
          </div>
          <div>
            <div class="text-xl font-bold text-red-600">{{ errorCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Erreurs</div>
          </div>
          <div>
            <div class="text-xl font-bold text-gray-600 dark:text-gray-300">{{ totalCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Fichiers importés -->
    <section v-if="importedFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
        Importés ({{ importedFiles.length }})
      </h2>
      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
        <div
          v-for="file in importedFiles"
          :key="file.id"
          class="flex items-center gap-2 py-2.5 text-sm"
        >
          <CheckCircleIcon class="flex-shrink-0 h-4 w-4 text-green-400" />
          <span class="text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</span>
          <span v-if="file.selectedManga" class="text-gray-400 dark:text-gray-500 shrink-0">→ {{ file.selectedManga.title }}</span>
        </div>
      </div>
    </section>

    <!-- Fichiers en erreur -->
    <section v-if="errorFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
        Erreurs ({{ errorFiles.length }})
      </h2>
      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
        <div
          v-for="file in errorFiles"
          :key="file.id"
          class="flex items-start gap-2 py-2.5 text-sm"
        >
          <XCircleIcon class="flex-shrink-0 h-4 w-4 text-red-400 mt-0.5" />
          <div>
            <div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
            <div class="text-red-600 dark:text-red-400 text-xs mt-0.5">{{ file.errorMessage }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Actions -->
    <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
      <div class="flex gap-3">
        <button
          @click="startNewImport"
          class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 text-sm font-medium"
        >
          Nouvel import
        </button>
        <button
          @click="goToLibrary"
          class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 text-sm font-medium"
        >
          Aller à la bibliothèque
        </button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useNewImportStore } from '../../application/store/newImportStore';

const router = useRouter();
const store = useNewImportStore();

const importedFiles = computed(() => store.importedFiles);
const errorFiles = computed(() => store.errorFiles);
const importedCount = computed(() => store.importedCount);
const errorCount = computed(() => store.errorCount);
const totalCount = computed(() => store.totalFiles);

const startNewImport = () => {
  store.clearFiles();
};

const goToLibrary = () => {
  router.push({ name: 'manga-collection' });
};
</script>
