<script setup lang="ts">
import ProtectedAdminRoute from "@/components/ProtectedAdminRoute.vue";
import ImportCard from "./admin-import/ImportCard.vue";
import CsvSplitter from "./admin-import/CsvSplitter.vue";
import { CHUNK_SIZE } from "./admin-import/helpers";
</script>

<template>
  <ProtectedAdminRoute>
    <div class="min-h-screen bg-background">
      <div class="container max-w-3xl py-12 space-y-8">
        <div>
          <h1 class="font-display text-3xl font-bold">Import de données</h1>
          <p class="text-muted-foreground mt-2">
            Importez les fichiers CSV d'adresses CTOP et de disponibilité fibre.
            Les fichiers sont traités par lots de {{ CHUNK_SIZE.toLocaleString("fr-CA") }} lignes.
          </p>
          <div class="mt-3 p-3 bg-accent/50 rounded-lg text-sm text-muted-foreground">
            <strong>Important :</strong> Importez d'abord les adresses, puis la fibre (dépendance FK).
            Supporte CSV (virgule) et TSV (tabulation). Les doublons sont mis à jour automatiquement (upsert).
          </div>
        </div>

        <div class="space-y-6">
          <ImportCard
            type="addresses"
            label="1. Adresses CTOP"
            description="Fichier CSV/TSV des adresses du Québec (identifiant_unique_adresse, adresse_formatee, etc.)"
          />
          <ImportCard
            type="fiber"
            label="2. Disponibilité fibre"
            description="Fichier CSV/TSV de couverture fibre (uuidadresse, zone_tarifaire, max_speed, etc.)"
          />
        </div>

        <div class="border-t border-border pt-6">
          <h2 class="text-xl font-semibold mb-4">Outils</h2>
          <CsvSplitter />
        </div>
      </div>
    </div>
  </ProtectedAdminRoute>
</template>
