Inventory_frontend/app/pages/machine/[id].vue

<template>
  <main class="container mx-auto px-6 py-8">
    <!-- Loading State -->
    <div v-if="loading" class="flex justify-center items-center py-12">
      <span class="loading loading-spinner loading-lg"></span>
    </div>

    <!-- Machine Details -->
    <div v-else-if="machine" class="space-y-8">
      <!-- Header with Edit Button -->
      <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold">Détails de la machine</h1>
        <button 
          @click="toggleEditMode" 
          class="btn btn-primary"
          :class="{ 'btn-outline': isEditMode }"
        >
          <svg v-if="!isEditMode" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
          </svg>
          <svg v-else class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
          </svg>
          {{ isEditMode ? 'Voir détails' : 'Modifier' }}
        </button>
      </div>

      <!-- Debug info -->
      <div v-if="debug" class="bg-yellow-100 p-4 rounded-lg">
        <p>Debug: Machine trouvée - {{ machine.name }}</p>
        <p>Components count: {{ components.length }}</p>
        <p>Pieces count: {{ pieces.length }}</p>
      </div>
      
      <!-- Header -->
      <div class="hero bg-gradient-to-r from-primary to-secondary min-h-[20vh] rounded-lg">
        <div class="hero-content text-center text-neutral-content">
          <div class="max-w-md">
            <h1 class="mb-5 text-4xl font-bold">{{ machine.name }}</h1>
            <p class="mb-5">{{ machine.description || machine.typeMachine?.description }}</p>
            <div class="flex justify-center gap-4">
              <div class="badge badge-outline">{{ machine.typeMachine?.category || 'N/A' }}</div>
              <div class="badge badge-outline">{{ machine.site?.name }}</div>
              <div v-if="machine.reference" class="badge badge-outline">{{ machine.reference }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Machine Info Card -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h2 class="card-title">Informations de la machine</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Nom</span>
              </label>
              <input 
                v-if="isEditMode"
                :id="getMachineFieldId('name')"
                v-model="machineName" 
                type="text" 
                class="input input-bordered"
                @blur="updateMachineInfo"
              />
              <div v-else class="input input-bordered bg-base-200">
                {{ machineName }}
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Référence</span>
              </label>
              <input 
                v-if="isEditMode"
                :id="getMachineFieldId('reference')"
                v-model="machineReference" 
                type="text" 
                class="input input-bordered"
                @blur="updateMachineInfo"
              />
              <div v-else class="input input-bordered bg-base-200">
                {{ machineReference || 'Non définie' }}
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Emplacement</span>
              </label>
              <input 
                v-if="isEditMode"
                :id="getMachineFieldId('emplacement')"
                v-model="machineEmplacement" 
                type="text" 
                class="input input-bordered"
                @blur="updateMachineInfo"
              />
              <div v-else class="input input-bordered bg-base-200">
                {{ machineEmplacement || 'Non défini' }}
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">Prestataire</span>
              </label>
              <input 
                v-if="isEditMode"
                :id="getMachineFieldId('prestataire')"
                v-model="machinePrestataire" 
                type="text" 
                class="input input-bordered"
                @blur="updateMachineInfo"
              />
              <div v-else class="input input-bordered bg-base-200">
                {{ machinePrestataire || 'Non défini' }}
              </div>
            </div>
          </div>
          
          <!-- Champs personnalisés de la machine -->
          <div v-if="machine && machine.customFieldValues && machine.customFieldValues.length > 0" class="mt-6 pt-4 border-t border-gray-200">
            <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div 
                v-for="fieldValue in machine.customFieldValues" 
                :key="fieldValue.id"
                class="form-control"
              >
                <label class="label">
                  <span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
                  <span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
                </label>
                
                <!-- Mode édition -->
                <template v-if="isEditMode">
                  <!-- Champ de type TEXT -->
                  <input 
                    v-if="fieldValue.customField.type === 'text'"
                    :value="fieldValue.value"
                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
                    type="text"
                    :placeholder="fieldValue.customField.defaultValue || ''"
                    class="input input-bordered input-sm"
                    :required="fieldValue.customField.required"
                    @blur="updateMachineCustomField(fieldValue.id)"
                  />
                  
                  <!-- Champ de type NUMBER -->
                  <input 
                    v-else-if="fieldValue.customField.type === 'number'"
                    :value="fieldValue.value"
                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
                    type="number"
                    :placeholder="fieldValue.customField.defaultValue || ''"
                    class="input input-bordered input-sm"
                    :required="fieldValue.customField.required"
                    @blur="updateMachineCustomField(fieldValue.id)"
                  />
                  
                  <!-- Champ de type SELECT -->
                  <select 
                    v-else-if="fieldValue.customField.type === 'select'"
                    :value="fieldValue.value"
                    @change="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
                    class="select select-bordered select-sm"
                    :required="fieldValue.customField.required"
                    @blur="updateMachineCustomField(fieldValue.id)"
                  >
                    <option value="">{{ fieldValue.customField.defaultValue || 'Sélectionner...' }}</option>
                    <option 
                      v-for="option in fieldValue.customField.options" 
                      :key="option" 
                      :value="option"
                    >
                      {{ option }}
                    </option>
                  </select>
                  
                  <!-- Champ de type BOOLEAN -->
                  <div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
                    <input 
                      :value="fieldValue.value"
                      @change="setMachineCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
                      type="checkbox"
                      class="checkbox checkbox-sm"
                      :checked="fieldValue.value === 'true'"
                      @blur="updateMachineCustomField(fieldValue.id)"
                    />
                    <span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
                  </div>
                  
                  <!-- Champ de type DATE -->
                  <input 
                    v-else-if="fieldValue.customField.type === 'date'"
                    :value="fieldValue.value"
                    @input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
                    type="date"
                    :placeholder="fieldValue.customField.defaultValue || ''"
                    class="input input-bordered input-sm"
                    :required="fieldValue.customField.required"
                    @blur="updateMachineCustomField(fieldValue.id)"
                  />
                </template>
                
                <!-- Mode lecture seule -->
                <template v-else>
                  <div class="input input-bordered input-sm bg-base-200">
                    {{ fieldValue.value || fieldValue.customField.defaultValue || 'Non défini' }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Components Section -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <h2 class="card-title">Composants</h2>
          </div>

          <!-- Components Tree -->
          <ComponentHierarchy 
            :components="components"
            :is-edit-mode="isEditMode"
            @update="updateComponent"
            @edit-piece="updatePieceFromComponent"
          />
        </div>
      </div>

      <!-- Machine Pieces Section -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <h2 class="card-title">Pièces de la machine</h2>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <PieceItem 
              v-for="piece in machinePieces" 
              :key="piece.id"
              :piece="piece"
              :is-edit-mode="isEditMode"
              @update="updatePieceInfo"
              @edit="editPiece"
              @custom-field-update="updatePieceCustomField"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Error State -->
    <div v-else class="text-center py-12">
      <div class="max-w-md mx-auto">
        <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33"></path>
        </svg>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
        <p class="text-gray-500 mb-4">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
        <NuxtLink to="/machines" class="btn btn-primary">
          Retour aux machines
        </NuxtLink>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useMachines } from '~/composables/useMachines'
import { useComposants } from '~/composables/useComposants'
import { usePieces } from '~/composables/usePieces'
import { useCustomFields } from '~/composables/useCustomFields'
import { useApi } from '~/composables/useApi'
import { useToast } from '~/composables/useToast'
import ComponentHierarchy from '~/components/ComponentHierarchy.vue'

const route = useRoute()
const machineId = route.params.id

// Vérifier que l'ID est valide
if (!machineId) {
  console.error('ID de machine manquant')
}

// Composables
const { updateMachine: updateMachineApi } = useMachines()
const { 
  getComposantsByMachine, 
  updateComposant: updateComposantApi 
} = useComposants()
const { 
  getPiecesByMachine, 
  updatePiece: updatePieceApi 
} = usePieces()

const { upsertCustomFieldValue } = useCustomFields()

// Data
const loading = ref(true)
const machine = ref(null)
const components = ref([])
const pieces = ref([])

// Champs de la machine
const machineName = ref('')
const machineReference = ref('')
const machineEmplacement = ref('')
const machinePrestataire = ref('')

// Valeurs des champs personnalisés de la machine
const machineCustomFieldValues = reactive({})

// Mode d'édition
const isEditMode = ref(false)
const debug = ref(false) // Ajout de debug pour afficher les infos de debug

// Méthodes pour initialiser les champs
const initMachineFields = () => {
  if (machine.value) {
    machineName.value = machine.value.name || ''
    machineReference.value = machine.value.reference || ''
    machineEmplacement.value = machine.value.emplacement || ''
    machinePrestataire.value = machine.value.prestataire || ''
  }
}

// Fonctions pour générer des IDs uniques
const getMachineFieldId = (fieldName) => {
  return machine.value ? `machine-${fieldName}-${machine.value.id}` : `machine-${fieldName}`
}

// Computed
const machinePieces = computed(() => {
  const filteredPieces = pieces.value.filter(piece => !piece.composantId)
  console.log('machinePieces computed:', filteredPieces)
  return filteredPieces
})

const allComponents = computed(() => {
  return components.value
})

const subComponents = (parentId) => {
  return components.value.filter(comp => comp.parentComposantId === parentId)
}

const componentPieces = (composantId) => {
  return pieces.value.filter(piece => piece.composantId === composantId)
}

// Transform custom field values to custom fields format
const transformCustomFields = (pieces) => {
  return pieces.map(piece => {
    const customFields = piece.customFieldValues?.map(cfv => ({
      id: cfv.customField.id,
      name: cfv.customField.name,
      type: cfv.customField.type,
      required: cfv.customField.required,
      defaultValue: cfv.customField.defaultValue,
      options: cfv.customField.options || [],
      value: cfv.value
    })) || []
    
    return {
      ...piece,
      customFields
    }
  })
}

// Transform custom fields for components (now handles nested structure)
const transformComponentCustomFields = (componentsData) => {
  console.log('transformComponentCustomFields called with:', componentsData)
  
  return componentsData.map(component => {
    console.log('Processing component:', component.name, 'with sousComposants:', component.sousComposants?.length || 0)
    
    // Transform custom fields for the current component
    const customFields = component.customFieldValues?.map(cfv => ({
      id: cfv.customField.id,
      name: cfv.customField.name,
      type: cfv.customField.type,
      required: cfv.customField.required,
      defaultValue: cfv.customField.defaultValue,
      options: cfv.customField.options || [],
      value: cfv.value
    })) || [];
    
    // Transform pieces for the current component
    const pieces = component.pieces ? transformCustomFields(component.pieces) : [];
    
    // Recursively transform sub-components (using 'sousComposants' from backend)
    const subComponents = component.sousComposants ? transformComponentCustomFields(component.sousComposants) : [];
    
    const result = {
      ...component,
      customFields, // Use customFields for frontend display
      pieces,
      subComponents // Use the transformed sousComposants as subComponents
    };
    
    console.log('Transformed component:', result.name, 'with subComponents:', result.subComponents?.length || 0)
    return result;
  });
};

// Methods
const loadMachineData = async () => {
  loading.value = true
  try {
    console.log('Début du chargement des données pour machineId:', machineId)
    
    // Load specific machine directly from API
    const { apiCall } = useApi()
    console.log('Appel API pour machine:', machineId)
    const machineResult = await apiCall(`/machines/${machineId}`, { method: 'GET' })
    console.log('Résultat machine complet:', machineResult)
    console.log('machineResult.success:', machineResult.success)
    console.log('machineResult.data:', machineResult.data)
    console.log('machineResult.error:', machineResult.error)
    console.log('Machine customFieldValues:', machineResult.data?.customFieldValues)
    console.log('Nombre de champs personnalisés:', machineResult.data?.customFieldValues?.length)
    
    if (machineResult.success) {
      machine.value = machineResult.data
      console.log('Machine trouvée et assignée:', machine.value)
    } else {
      console.error('Machine non trouvée:', machineId)
      console.error('Erreur API:', machineResult.error)
      loading.value = false
      return
    }
    
    // Initialize machine fields
    initMachineFields()
    console.log('Champs machine initialisés')
    console.log('Machine après initialisation:', machine.value)
    console.log('Machine name:', machineName.value)
    console.log('Machine reference:', machineReference.value)
    
    // Load components with hierarchy
    console.log('Chargement des composants avec hiérarchie...')
    const componentsResult = await apiCall(`/composants/hierarchy/${machineId}`, { method: 'GET' })
    console.log('Résultat composants:', componentsResult)
    console.log('Structure des données reçues:', JSON.stringify(componentsResult.data, null, 2))
    if (componentsResult.success) {
      console.log('Transformation des composants...')
      components.value = transformComponentCustomFields(componentsResult.data)
      console.log('Composants chargés:', components.value.length)
      console.log('Composants transformés:', components.value)
      
      // Debug: afficher la hiérarchie
      console.log('=== HIÉRARCHIE DES COMPOSANTS ===')
      components.value.forEach(comp => {
        console.log(`Composant: ${comp.name} (ID: ${comp.id}, Parent: ${comp.parentComposantId})`)
        if (comp.subComponents && comp.subComponents.length > 0) {
          console.log(`  Sous-composants: ${comp.subComponents.map(sc => sc.name).join(', ')}`)
        }
      })
      console.log('=== FIN HIÉRARCHIE ===')
    } else {
      console.error('Erreur lors du chargement des composants:', componentsResult.error)
    }
    
    // Load pieces from machine response instead of separate API call
    if (machine.value && machine.value.pieces) {
      // Transformer les champs personnalisés
      pieces.value = transformCustomFields(machine.value.pieces)
      console.log('Pièces transformées:', pieces.value)
      console.log('Pièces chargées:', pieces.value.length)
    } else {
      console.log('Aucune pièce trouvée dans la réponse de la machine')
    }
    
    console.log('Chargement terminé avec succès')
  } catch (error) {
    console.error('Erreur lors du chargement des données:', error)
  } finally {
    loading.value = false
    console.log('Loading terminé, loading.value =', loading.value)
  }
}

const updateMachineInfo = async () => {
  if (!machine.value) return
  
  try {
    const result = await updateMachineApi(machine.value.id, {
      name: machineName.value,
      reference: machineReference.value,
      emplacement: machineEmplacement.value,
      prestataire: machinePrestataire.value
    })
    if (result.success) {
      // Machine updated successfully
    }
  } catch (error) {
    console.error('Erreur lors de la mise à jour de la machine:', error)
  }
}

const updateComponent = async (updatedComponent) => {
  try {
    const prixValue = updatedComponent.prix
    const result = await updateComposantApi(updatedComponent.id, {
      name: updatedComponent.name,
      reference: updatedComponent.reference,
      prestataire: updatedComponent.prestataire,
      emplacement: updatedComponent.emplacement,
      prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
    })
    if (result.success) {
      // Component updated successfully
    }
  } catch (error) {
    console.error('Erreur lors de la mise à jour du composant:', error)
  }
}

const updatePieceFromComponent = async (updatedPiece) => {
  try {
    const result = await updatePieceApi(updatedPiece.id, {
      name: updatedPiece.name,
      reference: updatedPiece.reference,
      prestataire: updatedPiece.prestataire,
      emplacement: updatedPiece.emplacement,
      prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
    })
    if (result.success) {
      // Piece updated successfully
      
      // Si la pièce a des champs personnalisés mis à jour, les traiter
      if (updatedPiece.customFields) {
        for (const field of updatedPiece.customFields) {
          if (field.value !== undefined) {
            await upsertCustomFieldValue(
              field.id,
              'piece',
              updatedPiece.id,
              field.value
            )
          }
        }
      }
    }
  } catch (error) {
    console.error('Erreur lors de la mise à jour de la pièce:', error)
  }
}

const updatePieceInfo = async (updatedPiece) => {
  try {
    const result = await updatePieceApi(updatedPiece.id, {
      name: updatedPiece.name,
      reference: updatedPiece.reference,
      prestataire: updatedPiece.prestataire,
      emplacement: updatedPiece.emplacement,
      prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
    })
    if (result.success) {
      // Piece updated successfully
    }
  } catch (error) {
    console.error('Erreur lors de la mise à jour de la pièce:', error)
  }
}

// Méthodes pour les champs personnalisés de la machine
const setMachineCustomFieldValue = (fieldValueId, value) => {
  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
  if (fieldValue) {
    fieldValue.value = value
  }
}

const updateMachineCustomField = async (fieldValueId) => {
  const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
  if (fieldValue) {
    const { updateCustomFieldValue } = useCustomFields()
    const { showSuccess, showError } = useToast()
    
    const result = await updateCustomFieldValue(fieldValueId, { value: fieldValue.value })
    if (result.success) {
      showSuccess(`Champ "${fieldValue.customField.name}" de la machine mis à jour avec succès`)
    } else {
      showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
    }
  }
}

const updatePieceCustomField = async (fieldUpdate) => {
  const { showSuccess, showError } = useToast()
  
  try {
    const result = await upsertCustomFieldValue(
      fieldUpdate.fieldId,
      'piece',
      fieldUpdate.pieceId,
      fieldUpdate.value
    )
    if (result.success) {
      showSuccess(`Champ personnalisé mis à jour avec succès`)
    } else {
      showError(`Erreur lors de la mise à jour du champ personnalisé`)
    }
  } catch (error) {
    showError(`Erreur lors de la mise à jour du champ personnalisé`)
    console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
  }
}

const editComponent = (component) => {
  // TODO: Implement edit modal
  console.log('Edit component:', component)
}

const editPiece = (piece) => {
  // TODO: Implement edit modal
  console.log('Edit piece:', piece)
}

const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
  debug.value = !debug.value // Inversez la valeur de debug
}

// Lifecycle
onMounted(() => {
  loadMachineData()
  
  // Vérifier si on doit activer le mode édition depuis l'URL
  const route = useRoute()
  if (route.query.edit === 'true') {
    isEditMode.value = true
    console.log('Mode édition activé depuis l\'URL')
  }
})
</script>