<template>
  <a-modal
    v-model:open="visible"
    :title="`Gestionar Procesos - ${areaNombre}`"
    :confirm-loading="loading"
    width="800px"
    :footer="null"
    @cancel="handleCancel"
    class="process-modal"
  >
    <div class="search-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="Buscar procesos..."
        style="width: 300px; margin-bottom: 16px"
        @search="handleSearch"
      >
        <template #enterButton>
          <SearchOutlined />
        </template>
      </a-input-search>
    </div>

    <div class="processes-container">
      <a-spin :spinning="loading">
        <div v-if="procesosDisponibles.length === 0 && !loading" class="empty-state">
          <a-empty description="No hay procesos disponibles" />
        </div>
        <div v-else class="processes-list">
          <div
            v-for="proceso in filteredProcesos"
            :key="proceso.id"
            :class="[
              'process-item',
              { 'process-selected': isProcesoSelected(proceso.id) }
            ]"
            @click="toggleProceso(proceso.id)"
          >
            <div class="process-info">
              <div class="process-header">
                <span class="process-codigo">{{ proceso.codigo || 'N/A' }}</span>
                <a-tag :color="isProcesoSelected(proceso.id) ? 'green' : 'default'">
                  {{ isProcesoSelected(proceso.id) ? 'Agregado' : 'No agregado' }}
                </a-tag>
              </div>
              <h4 class="process-nombre">{{ proceso.nombre }}</h4>
              <div v-if="proceso.tipo_proceso" class="process-tipo">
                <a-tag size="small">{{ proceso.tipo_proceso }}</a-tag>
              </div>
            </div>

            <div class="process-actions">
              <a-button
                :type="isProcesoSelected(proceso.id) ? 'danger' : 'primary'"
                size="small"
                @click.stop="toggleProceso(proceso.id)"
              >
                <template #icon>
                  <CheckOutlined v-if="isProcesoSelected(proceso.id)" />
                  <PlusOutlined v-else />
                </template>
                {{ isProcesoSelected(proceso.id) ? 'Quitar' : 'Agregar' }}
              </a-button>
            </div>
          </div>
        </div>
      </a-spin>
    </div>


    <div class="summary-section">
      <a-alert
        :message="`${selectedProcesosCount} procesos seleccionados de ${procesosDisponibles.length} disponibles`"
        type="info"
        show-icon
      />
    </div>

    <div class="modal-footer">
      <a-button @click="handleCancel">Cancelar</a-button>
      <a-button type="primary" @click="handleSave" :loading="loading">
        Guardar cambios
      </a-button>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined, PlusOutlined, CheckOutlined } from '@ant-design/icons-vue'
import { useAreaStore } from '../../../store/area.store'

const props = defineProps({
  areaId: {
    type: Number,
    required: true
  },
  areaNombre: {
    type: String,
    default: ''
  },
  open: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:open', 'procesos-updated'])

const visible = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value)
})

const areaStore = useAreaStore()

const searchText = ref('')
const selectedProcesos = ref([])

const loading = computed(() => areaStore.loading)
const procesosDisponibles = computed(() => areaStore.procesosDisponibles || [])
const procesosVinculados = computed(() => areaStore.procesosVinculados || [])

const filteredProcesos = computed(() => {
  if (!searchText.value) return procesosDisponibles.value

  const search = searchText.value.toLowerCase()
  return procesosDisponibles.value.filter(p =>
    p.nombre.toLowerCase().includes(search) ||
    (p.codigo || '').toLowerCase().includes(search) ||
    (p.tipo_proceso || '').toLowerCase().includes(search)
  )
})

const selectedProcesosCount = computed(() => selectedProcesos.value.length)

const isProcesoSelected = (id) => {
  return selectedProcesos.value.includes(id)
}

const toggleProceso = (id) => {
  const index = selectedProcesos.value.indexOf(id)
  index > -1
    ? selectedProcesos.value.splice(index, 1)
    : selectedProcesos.value.push(id)
}

const handleCancel = () => {
  visible.value = false
  resetModal()
}

const handleSave = async () => {
  try {
    const result = await areaStore.vincularProcesos(props.areaId, selectedProcesos.value)
    if (result) {
      message.success('Procesos actualizados correctamente')
      emit('procesos-updated')
      handleCancel()
    } else {
      message.error(areaStore.error || 'Error al guardar procesos')
    }
  } catch (error) {
    message.error('Error al guardar procesos')
  }
}

const handleSearch = () => {

}

const loadProcesos = async () => {
  if (props.areaId) {
    await areaStore.fetchProcesosPorArea(props.areaId)
    selectedProcesos.value = [...areaStore.procesosVinculados]
  }
}

const resetModal = () => {
  searchText.value = ''
  selectedProcesos.value = []
}

watch(() => props.open, async (open) => {
  if (open && props.areaId) {
    await nextTick()
    await loadProcesos()
  }
})

watch(() => props.areaId, async (id) => {
  if (props.open && id) {
    await loadProcesos()
  }
})

onMounted(() => {
  if (props.open && props.areaId) {
    loadProcesos()
  }
})

watch(() => props.open, (newVal) => {
  if (!newVal) {
    setTimeout(() => {
      resetModal()
    }, 300)
  }
})
</script>

<style scoped>
.process-modal :deep(.ant-modal-body) {
  padding: 20px;
}

.processes-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 8px;
}

.processes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.process-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.process-item:hover {
  background: #fafafa;
}

.process-selected {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.process-info {
  flex: 1;
}

.process-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.process-codigo {
  font-weight: 600;
  color: #1890ff;
  font-size: 14px;
}

.process-nombre {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.process-tipo {
  margin-top: 4px;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>