<template>
  <div :class="containerClass">
    <div class="border border-base-200 rounded-lg bg-base-100 shadow-sm">
      <div class="flex flex-wrap items-start justify-between gap-3 border-b border-base-200 px-4 py-3">
        <div class="flex-1 min-w-[220px] space-y-2">
          <label class="label">
            <span class="label-text text-xs font-semibold">
              {{ isRoot ? 'Famille de composant racine' : 'Famille de composant' }}
            </span>
          </label>
          <select
            v-model="node.typeComposantId"
            class="select select-bordered select-sm w-full"
            @change="handleComponentTypeSelect(node)"
          >
            <option value="">
              Sélectionner une famille de composant
            </option>
            <option
              v-for="type in componentTypes"
              :key="type.id"
              :value="type.id"
            >
              {{ formatComponentTypeOption(type) }}
            </option>
          </select>
          <p class="text-[11px] text-gray-500">
            {{ node.typeComposantId ? `Sélection : ${getComponentTypeLabel(node.typeComposantId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
          </p>
        </div>
        <button
          v-if="!isRoot"
          type="button"
          class="btn btn-error btn-xs btn-square"
          @click="emit('remove')"
        >
          <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
        </button>
      </div>

      <div class="px-4 py-4 space-y-5">
        <section class="space-y-3">
          <div class="flex items-center justify-between gap-2">
            <h4 :class="headingClass">
              {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
            </h4>
            <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
              Ajouter
            </button>
          </div>
          <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
            Aucun champ n'a encore été défini.
          </p>
          <div v-else class="space-y-2">
            <div
              v-for="(field, index) in node.customFields"
              :key="`field-${index}`"
              class="border border-base-200 rounded-md p-3 space-y-2"
            >
              <div class="flex items-start justify-between gap-2">
                <div class="flex-1 space-y-2">
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                    <input
                      v-model="field.name"
                      type="text"
                      class="input input-bordered input-xs"
                      placeholder="Nom du champ"
                    />
                    <select v-model="field.type" class="select select-bordered select-xs">
                      <option value="text">Texte</option>
                      <option value="number">Nombre</option>
                      <option value="select">Liste</option>
                      <option value="boolean">Oui/Non</option>
                      <option value="date">Date</option>
                    </select>
                  </div>
                  <div class="flex items-center gap-2 text-xs">
                    <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs" />
                    Obligatoire
                  </div>
                  <textarea
                    v-if="field.type === 'select'"
                    v-model="field.optionsText"
                    class="textarea textarea-bordered textarea-xs h-20"
                    placeholder="Option 1&#10;Option 2"
                  ></textarea>
                </div>
                <button
                  type="button"
                  class="btn btn-error btn-xs btn-square"
                  @click="removeCustomField(index)"
                >
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
        </section>

        <section class="space-y-3">
          <div class="flex items-center justify-between gap-2">
            <h4 :class="headingClass">
              {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
            </h4>
            <button type="button" class="btn btn-outline btn-xs" @click="addPiece">
              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
              Ajouter
            </button>
          </div>
          <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
            Aucune pièce définie.
          </p>
          <div v-else class="space-y-2">
            <div
              v-for="(piece, index) in node.pieces"
              :key="`piece-${index}`"
              class="border border-base-200 rounded-md p-3 space-y-3"
            >
              <div class="flex items-start justify-between gap-2">
                <div class="flex-1 space-y-3">
                  <div class="form-control">
                    <label class="label"><span class="label-text">Famille de pièce</span></label>
                    <div>
                      <select
                        v-model="piece.typePieceId"
                        class="select select-bordered select-xs"
                        @change="handlePieceTypeSelect(piece)"
                      >
                        <option value="">
                          Sélectionner une famille
                        </option>
                        <option
                          v-for="type in pieceTypes"
                          :key="type.id"
                          :value="type.id"
                        >
                          {{ formatPieceTypeOption(type) }}
                        </option>
                      </select>
                    </div>
                    <p class="mt-1 text-[11px] text-gray-500">
                      {{ piece.typePieceId ? `Sélection : ${getPieceTypeLabel(piece.typePieceId) || 'Inconnue'}` : 'Aucune famille sélectionnée' }}
                    </p>
                  </div>
                </div>
                <button type="button" class="btn btn-error btn-xs btn-square" @click="removePiece(index)">
                  <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
        </section>

        <section class="space-y-3">
          <div class="flex items-center justify-between gap-2">
            <h4 :class="headingClass">Sous-composants</h4>
            <button type="button" class="btn btn-outline btn-xs" @click="addSubComponent">
              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
              Ajouter
            </button>
          </div>
          <p v-if="!(node.subComponents?.length)" class="text-xs text-gray-500">
            Aucun sous-composant défini.
          </p>
          <div v-else class="space-y-3">
            <StructureNodeEditor
              v-for="(subComponent, index) in node.subComponents"
              :key="`sub-${index}`"
              :node="subComponent"
              :depth="depth + 1"
              :component-types="componentTypes"
              :piece-types="pieceTypes"
              @remove="removeSubComponent(index)"
            />
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import IconLucidePlus from '~icons/lucide/plus'
import IconLucideTrash from '~icons/lucide/trash'

defineOptions({ name: 'StructureNodeEditor' })

type ModelTypeOption = {
  id: string
  name: string
  code?: string | null
}

const props = withDefaults(defineProps<{
  node: Record<string, any>
  depth?: number
  componentTypes?: ModelTypeOption[]
  pieceTypes?: ModelTypeOption[]
  isRoot?: boolean
}>(), {
  depth: 0,
  componentTypes: () => [],
  pieceTypes: () => [],
  isRoot: false,
})

const emit = defineEmits(['remove'])

const componentTypes = computed(() => props.componentTypes ?? [])
const pieceTypes = computed(() => props.pieceTypes ?? [])

const depthClasses = ['', 'ml-4', 'ml-8', 'ml-12', 'ml-16', 'ml-20']
const containerClass = computed(() => {
  const level = Math.max(0, props.depth ?? 0)
  const index = Math.min(level, depthClasses.length - 1)
  return level === 0 ? 'space-y-4' : `${depthClasses[index]} space-y-4`
})

const headingClass = computed(() => (props.isRoot ? 'text-sm font-semibold' : 'text-xs font-semibold'))

const formatModelTypeOption = (type: ModelTypeOption | undefined | null) => {
  if (!type) return ''
  return type.code ? `${type.name} (${type.code})` : type.name
}

const componentTypeMap = computed(() => {
  const map = new Map<string, ModelTypeOption>()
  componentTypes.value.forEach((type) => {
    if (type && typeof type.id === 'string') {
      map.set(type.id, type)
    }
  })
  return map
})

const pieceTypeMap = computed(() => {
  const map = new Map<string, ModelTypeOption>()
  pieceTypes.value.forEach((type) => {
    if (type && typeof type.id === 'string') {
      map.set(type.id, type)
    }
  })
  return map
})

const getComponentTypeLabel = (id?: string) => {
  if (!id) return ''
  return formatModelTypeOption(componentTypeMap.value.get(id))
}

const getPieceTypeLabel = (id?: string) => {
  if (!id) return ''
  return formatModelTypeOption(pieceTypeMap.value.get(id))
}

const formatComponentTypeOption = (type: ModelTypeOption | undefined | null) =>
  formatModelTypeOption(type)

const formatPieceTypeOption = (type: ModelTypeOption | undefined | null) =>
  formatModelTypeOption(type)

const ensureArray = (key: 'customFields' | 'pieces' | 'subComponents') => {
  if (!Array.isArray(props.node[key])) {
    props.node[key] = []
  }
}

const syncComponentType = (component: any) => {
  if (!component) {
    return
  }
  const id = typeof component.typeComposantId === 'string'
    ? component.typeComposantId
    : ''

  if (!id) {
    component.typeComposantLabel = ''
    component.name = ''
    return
  }

  const option = componentTypeMap.value.get(id)
  if (!option) {
    component.typeComposantLabel = ''
    component.name = ''
    return
  }

  component.typeComposantLabel = formatModelTypeOption(option)
  component.name = option.name || component.typeComposantLabel
}

const updatePieceTypeLabel = (piece: any) => {
  if (!piece) return

  if (piece.typePieceId) {
    const option = pieceTypeMap.value.get(piece.typePieceId)
    if (option) {
      piece.typePieceLabel = formatPieceTypeOption(option)
      piece.name = option.name || formatPieceTypeOption(option)
      return
    }
  }

  if (piece.typePieceLabel) {
    const normalized = piece.typePieceLabel.trim().toLowerCase()
    if (normalized) {
      const match = pieceTypes.value.find((type) => {
        const formatted = formatPieceTypeOption(type).toLowerCase()
        const name = (type?.name ?? '').toLowerCase()
        const code = (type?.code ?? '').toLowerCase()
        return formatted === normalized || name === normalized || (!!code && code === normalized)
      })
      if (match) {
        piece.typePieceId = match.id
        piece.typePieceLabel = formatPieceTypeOption(match)
        piece.name = match.name || formatPieceTypeOption(match)
        return
      }
    }
  }

  if (!piece.name) {
    piece.name = piece.typePieceLabel || ''
  }
}

const syncPieceLabels = (pieces?: any[]) => {
  if (!Array.isArray(pieces)) {
    return
  }
  pieces.forEach((piece) => {
    updatePieceTypeLabel(piece)
  })
}

const handleComponentTypeSelect = (component: any) => {
  syncComponentType(component)
}

const handlePieceTypeSelect = (piece: any) => {
  if (!piece) {
    return
  }
  const id = typeof piece.typePieceId === 'string' ? piece.typePieceId : ''
  if (!id) {
    piece.typePieceLabel = ''
    piece.name = ''
    return
  }
  const option = pieceTypeMap.value.get(id)
  if (!option) {
    piece.typePieceId = ''
    piece.typePieceLabel = ''
    piece.name = ''
    return
  }
  piece.typePieceLabel = formatPieceTypeOption(option)
  piece.name = option.name || piece.typePieceLabel
}

const addCustomField = () => {
  ensureArray('customFields')
  props.node.customFields.push({
    name: '',
    type: 'text',
    required: false,
    optionsText: '',
    options: [],
  })
}

const removeCustomField = (index: number) => {
  if (!Array.isArray(props.node.customFields)) return
  props.node.customFields.splice(index, 1)
}

const addPiece = () => {
  ensureArray('pieces')
  props.node.pieces.push({
    name: '',
    typePieceId: '',
    typePieceLabel: '',
  })
}

const removePiece = (index: number) => {
  if (!Array.isArray(props.node.pieces)) return
  props.node.pieces.splice(index, 1)
}

const addSubComponent = () => {
  ensureArray('subComponents')
  props.node.subComponents.push({
    name: '',
    typeComposantId: '',
    typeComposantLabel: '',
    customFields: [],
    pieces: [],
    subComponents: [],
  })
}

const removeSubComponent = (index: number) => {
  if (!Array.isArray(props.node.subComponents)) return
  props.node.subComponents.splice(index, 1)
}

watch(componentTypes, () => {
  syncComponentType(props.node)
}, { deep: true, immediate: true })

watch(
  () => props.node.typeComposantId,
  () => {
    syncComponentType(props.node)
  },
)

watch(pieceTypes, () => {
  syncPieceLabels(props.node?.pieces)
}, { deep: true, immediate: true })

watch(
  () => props.node.pieces,
  (value) => {
    syncPieceLabels(value)
  },
  { deep: true }
)
</script>
