<template>
  <div>
    <div
      v-for="(mapping, mapIndex) in localMappings"
      :key="mapIndex"
      class="card"
      style="border: 1px solid var(--bulma-grey-90)"
    >
      <div class="card-content p-4">
        <div class="block is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
          <h5 class="fs-17 font-semibold">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
          <button
            class="button is-danger is-light"
            @click="removeMapping(mapIndex)"
          >
            <span class="icon">
              <Icon
                name="material-symbols:delete-outline-rounded"
                :size="18"
              />
            </span>
          </button>
        </div>
        <div class="fixed-grid">
          <div class="grid">
            <div class="cell">
              <label class="label">Alias</label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  v-model="mapping.alias"
                  @input="update"
                />
              </div>
            </div>
            <div class="cell">
              <label class="label">Model</label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  v-model="mapping.model"
                  @input="update"
                  placeholder="e.g., app.Transaction"
                />
              </div>
            </div>
            <div class="cell">
              <label class="label">Lookup Field</label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  v-model="mapping.lookup_field"
                  @input="update"
                  placeholder="e.g., id"
                />
              </div>
            </div>
            <div class="cell">
              <label class="label">Lookup Value From</label>
              <div class="control">
                <input
                  class="input"
                  type="text"
                  v-model="mapping.lookup_value_from"
                  @input="update"
                  placeholder="e.g., transaction_id or transaction.customer.id"
                />
              </div>
            </div>
            <div class="cell">
              <label class="label">Type</label>
              <div class="control">
                <div class="select is-fullwidth">
                  <select
                    v-model="mapping.type"
                    @change="update"
                  >
                    <option value="object">Object</option>
                    <option value="list">List</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="cell">
              <label class="label">Is Trigger Object?</label>
              <div class="control">
                <label class="checkbox">
                  <input
                    type="checkbox"
                    v-model="mapping.is_trigger_object"
                    @change="update"
                  />
                  Yes
                </label>
              </div>
            </div>
          </div>
        </div>
        <hr />
        <p class="label">Fields</p>
        <div
          v-for="(field, fieldIndex) in mapping.fields"
          :key="fieldIndex"
          class="field has-addons"
        >
          <div class="control">
            <input
              class="input"
              type="text"
              v-model="field.placeholder"
              @input="update"
              placeholder="[placeholder]"
            />
          </div>
          <div class="control is-expanded">
            <input
              class="input"
              type="text"
              v-model="field.source"
              @input="update"
              placeholder="source.field.name"
            />
          </div>
          <div class="control">
            <button
              class="button is-danger is-light"
              @click="removeField(mapIndex, fieldIndex as number)"
            >
              <span class="icon">
                <Icon
                  name="material-symbols:delete-outline-rounded"
                  :size="20"
                />
              </span>
            </button>
          </div>
        </div>
        <button
          class="button is-small is-light"
          @click="addField(mapIndex)"
        >
          <span class="icon is-small">+</span>
          <span>Add Field</span>
        </button>
      </div>
    </div>

    <button
      class="button is-primary"
      @click="addMapping"
    >
      <span class="icon">
        <Icon
          name="material-symbols:add-rounded"
          :size="18"
        />
      </span>
      <span>Add Mapping</span>
    </button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  mappings: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:mappings"]);

// Use a local ref to manage mappings to handle the object-to-array transformation for fields
const localMappings = ref<any[]>([]);

// Helper to transform fields object to array for v-for
const transformMappings = (sourceMappings: any[]) => {
  return sourceMappings.map((m) => ({
    ...m,
    fields: m.fields
      ? Object.entries(m.fields).map(([placeholder, source]) => ({
          placeholder,
          source: typeof source === "object" ? JSON.stringify(source) : source,
        }))
      : [],
  }));
};

// Helper to transform fields array back to object for emission
const reformatMappingsForEmit = () => {
  return localMappings.value.map((m) => {
    const newFields = m.fields.reduce((obj: any, item: any) => {
      try {
        // Attempt to parse if it's a JSON string for format objects
        obj[item.placeholder] = JSON.parse(item.source);
      } catch (e) {
        obj[item.placeholder] = item.source;
      }
      return obj;
    }, {});
    return { ...m, fields: newFields };
  });
};

watch(
  () => props.mappings,
  (newMappings) => {
    localMappings.value = transformMappings(newMappings || []);
  },
  { immediate: true, deep: true },
);

const addMapping = () => {
  localMappings.value.push({
    alias: "",
    model: "",
    lookup_field: "id",
    lookup_value_from: "",
    type: "object",
    is_trigger_object: false,
    fields: [],
  });
  update();
};

const removeMapping = (index: number) => {
  localMappings.value.splice(index, 1);
  update();
};

const addField = (mapIndex: number) => {
  if (!localMappings.value[mapIndex].fields) {
    localMappings.value[mapIndex].fields = [];
  }
  localMappings.value[mapIndex].fields.push({ placeholder: "", source: "" });
  update();
};

const removeField = (mapIndex: number, fieldIndex: number) => {
  localMappings.value[mapIndex].fields.splice(fieldIndex, 1);
  update();
};

const update = () => {
  emit("update:mappings", reformatMappingsForEmit());
};
</script>
