<template>
  <div>
    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
  </div>
  <v-container class="fill-height d-flex align-center justify-center">
    <v-card class="pa-6" max-width="600" elevation="4">
      <v-card-title class="text-h5 font-weight-bold text-center">
        🔄 Sincronización de Clientes
      </v-card-title>

      <v-card-text>
        <p>
          Esta acción sincronizará los <strong>clientes</strong> desde el sistema
          <strong>Tryton</strong> hacia la plataforma.
        </p>
        <v-alert type="warning" dense border="start" border-color="warning">
          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
          y reemplazar datos existentes en la plataforma.  
          Asegúrese de que la información en Tryton esté actualizada antes de
          continuar.
        </v-alert>
        <p class="mt-4">
          Durante la sincronización, no se podrán modificar productos en la
          plataforma para evitar conflictos.
        </p>
      </v-card-text>

      <v-card-actions class="justify-center">
        <v-btn color="primary" @click="startSync">
          Iniciar Sincronización
        </v-btn>
        <v-btn text @click="$router.push('/')">
          Cancelar
        </v-btn>
      </v-card-actions>
    </v-card>


    <v-data-table :items="checked_tryton_parties"></v-data-table>
    <v-data-table :items="created_customers"></v-data-table>
    <v-data-table :items="failed_parties"></v-data-table>
    <v-data-table :items="untouched_customers"></v-data-table>
  </v-container>
</template>

<script>
  import CodeDialog from '../components/CodeDialog.vue'
  import { inject } from 'vue';

  export default {
    name: 'CustomersFromTryton',
    data() {
      return {
        api: inject('api'),
        checked_tryton_parties: [],
        created_customers: [],
        failed_parties: [],
        untouched_customers: [],
        updated_customers: [],
      }
    },
    methods: {
      startSync() {
        this.api.getCustomersFromTryton()
          .then(response => {
            // Manejar la respuesta exitosa
            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
            this.created_customers = response.created_customers.map(id => ({ id }));
            this.failed_parties = response.failed_parties.map(id => ({ id }));
            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
          })
          .catch(error => {
            // Manejar el error
            console.error("Error al sincronizar clientes:", error);
          });
      }
    }
  }
 </script>
