<template>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
    <div class="text-center mb-6">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/40 mb-4">
        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Import terminé</h3>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Voici le résumé de votre session d'import
      </p>
    </div>

    <!-- Statistics -->
    <div class="grid grid-cols-3 gap-4 mb-6">
      <div class="text-center">
        <div class="text-2xl font-bold text-green-600">{{ importedCount }}</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Importés</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold text-red-600">{{ errorCount }}</div>
        <div class="text-sm text-gray-500">Erreurs</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold text-gray-600">{{ totalCount }}</div>
        <div class="text-sm text-gray-500">Total</div>
      </div>
    </div>

    <!-- Success Files List -->
    <div v-if="importedFiles.length > 0" class="mb-6">
      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
        Fichiers importés avec succès ({{ importedFiles.length }})
      </h4>
      <ul class="space-y-2">
        <li
          v-for="file in importedFiles"
          :key="file.id"
          class="flex items-center text-sm"
        >
          <svg class="flex-shrink-0 h-4 w-4 text-green-400 mr-2" 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>
          <span class="text-gray-900 dark:text-gray-100">{{ file.filename }}</span>
          <span v-if="file.selectedManga" class="ml-2 text-gray-500 dark:text-gray-400">
            → {{ file.selectedManga.title }}
          </span>
        </li>
      </ul>
    </div>

    <!-- Error Files List -->
    <div v-if="errorFiles.length > 0" class="mb-6">
      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
        Fichiers en erreur ({{ errorFiles.length }})
      </h4>
      <ul class="space-y-2">
        <li
          v-for="file in errorFiles"
          :key="file.id"
          class="flex items-start text-sm"
        >
          <svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2 mt-0.5" 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>
            <div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
            <div class="text-red-600 dark:text-red-400 text-xs mt-1">{{ file.errorMessage }}</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- Actions -->
    <div class="flex justify-center space-x-4 pt-6 border-t dark:border-gray-700">
      <button
        @click="startNewImport"
        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
      >
        Nouvel import
      </button>
      <button
        @click="goToLibrary"
        class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
      >
        Aller à la bibliothèque
      </button>
    </div>
  </div>
</template>

<script setup>
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>
