<template>
    <LayoutAuthenticated>
        <Head title="Edit dataset" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiImageText" title="Update dataset" main>
                <BaseButton
                    :route-name="stardust.route('dataset.list')"
                    :icon="mdiArrowLeftBoldOutline"
                    label="Back"
                    color="white"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>

            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                {{ flash.message }}
            </NotificationBar>
            <FormValidationErrors v-bind:errors="errors" />

            <!-- @auto-save="submitAlternative" -->
            <CardBox :form="true">
                <UnsavedChangesWarning
                    :show="hasUnsavedChanges"
                    :changes-summary="getChangesSummary()"
                    :show-details="true"
                    :show-actions="false"
                    :show-auto-save-progress="true"
                    :auto-save-delay="30"
                    @save="submitAlternative"
                />
                <div class="mb-4">
                    <div class="flex flex-col md:flex-row">
                        <!-- (1) language field -->
                        <FormField
                            label="Language *"
                            help="required: select dataset main language"
                            :class="{ 'text-red-400': form.errors.language }"
                            class="w-full flex-1"
                        >
                            <FormControl
                                required
                                v-model="form.language"
                                :type="'select'"
                                placeholder="[Enter Language]"
                                :errors="form.errors.language"
                                :options="{ de: 'de', en: 'en' }"
                            >
                                <div class="text-red-400 text-sm" v-if="form.errors.language">
                                    {{ form.errors.language.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <!-- (2) licenses -->
                    <FormField label="Licenses" wrap-body :class="{ 'text-red-400': form.errors.licenses }" class="mt-8 w-full mx-2 flex-1">
                        <FormCheckRadioGroup
                            type="radio"
                            v-model="form.licenses"
                            name="licenses"
                            is-column
                            :options="licenses"
                            :key="`licenses-${Date.now()}-${JSON.stringify(form.licenses)}`"
                        />
                    </FormField>
                    <!-- Add this temporarily near your licenses FormField for debugging -->
                    <!-- <div v-if="true" class="border p-2 mb-2 text-xs bg-gray-50">
                        <strong>Debug - Licenses:</strong><br />
                        Form licenses: {{ JSON.stringify(form.licenses) }}<br />
                        Original licenses: {{ JSON.stringify(originalDataset.licenses) }}<br />
                        License options: {{ JSON.stringify(Object.keys(licenses)) }}
                    </div> -->

                    <div class="flex flex-col md:flex-row">
                        <!-- (3) dataset_type -->
                        <FormField
                            label="Dataset Type *"
                            help="required: dataset type"
                            :class="{ 'text-red-400': form.errors.type }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl
                                required
                                v-model="form.type"
                                :type="'select'"
                                placeholder="-- select type --"
                                :errors="form.errors.type"
                                :options="doctypes"
                            >
                                <div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
                                    {{ form.errors.type.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <!-- (4) creating_corporation -->
                        <FormField
                            label="Creating Corporation *"
                            :class="{ 'text-red-400': form.errors.creating_corporation }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl
                                required
                                v-model="form.creating_corporation"
                                type="text"
                                placeholder="[enter creating corporation]"
                                :is-read-only="true"
                            >
                                <div
                                    class="text-red-400 text-sm"
                                    v-if="form.errors.creating_corporation && Array.isArray(form.errors.creating_corporation)"
                                >
                                    {{ form.errors.creating_corporation.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <BaseDivider />

                    <!-- (5) titles -->
                    <CardBox
                        class="mb-6 shadow"
                        :has-form-data="false"
                        title="Titles"
                        :icon="mdiFinance"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addTitle()"
                    >
                        <div class="flex flex-col md:flex-row">
                            <FormField
                                label="Main Title *"
                                help="required: main title"
                                :class="{ 'text-red-400': form.errors['titles.0.value'] }"
                                class="w-full mr-1 flex-1"
                            >
                                <FormControl
                                    required
                                    v-model="form.titles[0].value"
                                    type="textarea"
                                    placeholder="[enter main title]"
                                    :show-char-count="true"
                                    :max-input-length="255"
                                >
                                    <div
                                        class="text-red-400 text-sm"
                                        v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])"
                                    >
                                        {{ form.errors['titles.0.value'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                            <FormField
                                label="Main Title Language*"
                                help="required: main title language"
                                :class="{ 'text-red-400': form.errors['titles.0.language'] }"
                                class="w-full ml-1 flex-1"
                            >
                                <FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
                                    <div
                                        class="text-red-400 text-sm"
                                        v-if="form.errors['titles.0.language'] && Array.isArray(form.errors['titles.0.language'])"
                                    >
                                        {{ form.errors['titles.0.language'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                        </div>

                        <label v-if="form.titles.length > 1">additional titles </label>
                        <!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
                        <table>
                            <thead>
                                <tr>
                                    <!-- <th v-if="checkable" /> -->
                                    <th>Title Value</th>
                                    <th>Title Type</th>
                                    <th>Title Language</th>
                                    <th />
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(title, index) in form.titles" :key="index">
                                    <tr v-if="title.type != 'Main'">
                                        <!-- <td scope="row">{{ index + 1 }}</td> -->
                                        <td data-label="Title Value">
                                            <FormControl
                                                required
                                                v-model="form.titles[index].value"
                                                type="textarea"
                                                placeholder="[enter main title]"
                                            >
                                                <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
                                                    {{ form.errors[`titles.${index}.value`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Title Type">
                                            <FormControl
                                                required
                                                v-model="form.titles[index].type"
                                                type="select"
                                                :options="titletypes"
                                                placeholder="[select title type]"
                                            >
                                                <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`titles.${index}.type`])">
                                                    {{ form.errors[`titles.${index}.type`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Title Language">
                                            <FormControl
                                                required
                                                v-model="form.titles[index].language"
                                                type="select"
                                                :options="{ de: 'de', en: 'en' }"
                                                placeholder="[select title language]"
                                            >
                                                <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.language`]">
                                                    {{ form.errors[`titles.${index}.language`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td class="before:hidden lg:w-1 whitespace-nowrap">
                                            <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                                <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
                                                <BaseButton
                                                    color="danger"
                                                    :icon="mdiTrashCan"
                                                    small
                                                    v-if="title.id == undefined"
                                                    @click.prevent="removeTitle(index)"
                                                />
                                            </BaseButtons>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </CardBox>

                    <!-- (6) descriptions -->
                    <CardBox
                        class="mb-6 shadow"
                        :has-form-data="false"
                        title="Descriptions"
                        :icon="mdiFinance"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addDescription()"
                    >
                        <div class="flex flex-col md:flex-row">
                            <FormField
                                label="Main Abstract *"
                                help="required: main abstract"
                                :class="{ 'text-red-400': form.errors['descriptions.0.value'] }"
                                class="w-full mr-1 flex-1"
                            >
                                <FormControl
                                    required
                                    v-model="form.descriptions[0].value"
                                    type="textarea"
                                    placeholder="[enter main abstract]"
                                    :show-char-count="true"
                                    :max-input-length="2500"
                                >
                                    <div
                                        class="text-red-400 text-sm"
                                        v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])"
                                    >
                                        {{ form.errors['descriptions.0.value'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                            <FormField
                                label="Main Description Language*"
                                help="required: main abstract language"
                                :class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
                                class="w-full ml-1 flex-1"
                            >
                                <FormControl required v-model="form.descriptions[0].language" type="text" :is-read-only="true">
                                    <div
                                        class="text-red-400 text-sm"
                                        v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.language'])"
                                    >
                                        {{ form.errors['descriptions.0.language'].join(', ') }}
                                    </div>
                                </FormControl>
                            </FormField>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <!-- <th v-if="checkable" /> -->
                                    <th>Title Value</th>
                                    <th>Title Type</th>
                                    <th>Title Language</th>
                                    <th />
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, index) in form.descriptions" :key="index">
                                    <tr v-if="item.type != 'Abstract'">
                                        <!-- <td scope="row">{{ index + 1 }}</td> -->
                                        <td data-label="Description Value">
                                            <FormControl
                                                required
                                                v-model="form.descriptions[index].value"
                                                type="textarea"
                                                placeholder="[enter main title]"
                                            >
                                                <div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.value`]">
                                                    {{ form.errors[`descriptions.${index}.value`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Description Type">
                                            <FormControl
                                                required
                                                v-model="form.descriptions[index].type"
                                                type="select"
                                                :options="descriptiontypes"
                                                placeholder="[select title type]"
                                            >
                                                <div
                                                    class="text-red-400 text-sm"
                                                    v-if="Array.isArray(form.errors[`descriptions.${index}.type`])"
                                                >
                                                    {{ form.errors[`descriptions.${index}.type`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td data-label="Description Language">
                                            <FormControl
                                                required
                                                v-model="form.descriptions[index].language"
                                                type="select"
                                                :options="{ de: 'de', en: 'en' }"
                                                placeholder="[select title language]"
                                            >
                                                <div class="text-red-400 text-sm" v-if="form.errors[`descriptions.${index}.language`]">
                                                    {{ form.errors[`descriptions.${index}.language`].join(', ') }}
                                                </div>
                                            </FormControl>
                                        </td>
                                        <td class="before:hidden lg:w-1 whitespace-nowrap">
                                            <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                                <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
                                                <BaseButton
                                                    color="danger"
                                                    :icon="mdiTrashCan"
                                                    small
                                                    v-if="item.id == undefined"
                                                    @click.prevent="removeDescription(index)"
                                                />
                                            </BaseButtons>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </CardBox>

                    <!-- (7) authors -->
                    <CardBox
                        class="mb-6 shadow"
                        has-table
                        title="Creators"
                        :icon="mdiBookOpenPageVariant"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addNewAuthor()"
                    >
                        <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
                            <span>Add creators by searching existing persons or manually adding new ones.</span>
                            <BaseIcon
                                :path="mdiAlertBoxOutline"
                                class="text-blue-400"
                                title="You can add existing persons via search, or create new ones manually."
                            />
                        </div>
                        <div class="flex flex-col md:flex-row gap-4 mb-4">
                            <div class="flex-1">
                                <!-- <label class="block text-xs font-semibold mb-1">Find existing person</label> -->
                                <SearchAutocomplete
                                    source="/api/persons"
                                    :response-property="'first_name'"
                                    placeholder="Search for existing persons..."
                                    v-on:person="onAddAuthor"
                                />
                            </div>
                            <!-- <div class="flex-1 flex items-end">
                                <BaseButton
                                    :icon="mdiPlusCircle"
                                    @click.prevent="addNewAuthor"
                                    color="modern"
                                    rounded-full
                                    small
                                    title="Add new creator manually"
                                />
                            </div> -->
                        </div>
                        <TablePersons :persons="form.authors" v-if="form.authors.length > 0" :errors="form.errors" :relation="'authors'" />
                        <div class="text-red-400 text-sm" v-if="form.errors.authors && Array.isArray(form.errors.authors)">
                            {{ form.errors.authors.join(', ') }}
                        </div>
                    </CardBox>

                    <!-- (8) contributors -->
                    <CardBox
                        class="mb-6 shadow"
                        has-table
                        title="Contributors"
                        :icon="mdiBookOpenPageVariant"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addNewContributor()"
                    >
                    <div class="mb-2 text-gray-600 text-sm flex items-center gap-2">
                            <span>Add contributors by searching existing persons or manually adding new ones.</span>
                            <BaseIcon
                                :path="mdiAlertBoxOutline"
                                class="text-blue-400"
                                title="You can add existing persons via search, or create new ones manually."
                            />
                        </div>
                        <SearchAutocomplete
                            source="/api/persons"
                            :response-property="'first_name'"
                            placeholder="search in person table...."
                            v-on:person="onAddContributor"
                        >
                        </SearchAutocomplete>

                        <TablePersons
                            :persons="form.contributors"
                            v-if="form.contributors.length > 0"
                            :contributortypes="contributorTypes"
                            :errors="form.errors"
                            :relation="'contributors'"
                        />
                        <div class="text-red-400 text-sm" v-if="form.errors.contributors && Array.isArray(form.errors.contributors)">
                            {{ form.errors.contributors.join(', ') }}
                        </div>
                    </CardBox>

                    <div class="flex flex-col md:flex-row">
                        <!-- (9) project_id -->
                        <FormField
                            label="Project.."
                            help="project is optional"
                            :class="{ 'text-red-400': form.errors.project_id }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl
                                required
                                v-model="form.project_id"
                                :type="'select'"
                                placeholder="[Select Project]"
                                :errors="form.errors.project_id"
                                :options="projects"
                            >
                                <div class="text-red-400 text-sm" v-if="form.errors.project_id">
                                    {{ form.errors.project_id.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <!-- (10) embargo_date -->
                        <FormField
                            label="Embargo Date.."
                            help="embargo date is optional"
                            :class="{ 'text-red-400': form.errors.embargo_date }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl
                                v-model="form.embargo_date"
                                :type="'date'"
                                placeholder="date('y-m-d')"
                                :errors="form.errors.embargo_date"
                            >
                                <div class="text-red-400 text-sm" v-if="form.errors.embargo_date">
                                    {{ form.errors.embargo_date.join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <BaseDivider />

                    <MapComponent
                        v-if="form.coverage"
                        :mapOptions="mapOptions"
                        :baseMaps="baseMaps"
                        :fitBounds="fitBounds"
                        :coverage="form.coverage"
                        :mapId="mapId"
                        v-bind-event:onMapInitializedEvent="onMapInitialized"
                    >
                    </MapComponent>
                    <div class="flex flex-col md:flex-row">
                        <!-- x min and max -->
                        <FormField
                            label="Coverage X Min"
                            :class="{ 'text-red-400': form.errors['coverage.x_min'] }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl required v-model="form.coverage.x_min" type="text" placeholder="[enter x_min]">
                                <div
                                    class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.x_min'] && Array.isArray(form.errors['coverage.x_min'])"
                                >
                                    {{ form.errors['coverage.x_min'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <FormField
                            label="Coverage X Max"
                            :class="{ 'text-red-400': form.errors['coverage.x_max'] }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl required v-model="form.coverage.x_max" type="text" placeholder="[enter x_max]">
                                <div
                                    class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.x_max'] && Array.isArray(form.errors['coverage.x_max'])"
                                >
                                    {{ form.errors['coverage.x_max'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <!-- y min and max -->
                        <FormField
                            label="Coverage Y Min"
                            :class="{ 'text-red-400': form.errors['coverage.y_min'] }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl required v-model="form.coverage.y_min" type="text" placeholder="[enter y_min]">
                                <div
                                    class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.y_min'] && Array.isArray(form.errors['coverage.y_min'])"
                                >
                                    {{ form.errors['coverage.y_min'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                        <FormField
                            label="Coverage Y Max"
                            :class="{ 'text-red-400': form.errors['coverage.y_max'] }"
                            class="w-full mx-2 flex-1"
                        >
                            <FormControl required v-model="form.coverage.y_max" type="text" placeholder="[enter y_max]">
                                <div
                                    class="text-red-400 text-sm"
                                    v-if="form.errors['coverage.y_max'] && Array.isArray(form.errors['coverage.y_max'])"
                                >
                                    {{ form.errors['coverage.y_max'].join(', ') }}
                                </div>
                            </FormControl>
                        </FormField>
                    </div>

                    <CardBox
                        class="mb-6 shadow"
                        has-table
                        title="Dataset References"
                        :icon="mdiEarthPlus"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addReference"
                    >
                        <!-- Message when no references exist -->
                        <div v-if="form.references.length === 0" class="text-center py-4">
                            <p class="text-gray-600">No references added yet.</p>
                            <p class="text-gray-400">Click the plus icon above to add a new reference.</p>
                        </div>
                        <!-- Reference form -->
                        <table class="table-fixed border-green-900" v-if="form.references.length">
                            <thead>
                                <tr>
                                    <th class="w-4/12">Value</th>
                                    <th class="w-2/12">Type</th>
                                    <th class="w-3/12">Relation</th>
                                    <th class="w-2/12">Label</th>
                                    <th class="w-1/12"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in form.references">
                                    <td data-label="Reference Value">
                                        <!-- <input name="Reference Value" class="form-control"
                                                placeholder="[VALUE]" v-model="item.value" /> -->
                                        <FormControl
                                            required
                                            v-model="item.value"
                                            :type="'text'"
                                            placeholder="[VALUE]"
                                            :errors="form.errors.embargo_date"
                                        >
                                            <div
                                                class="text-red-400 text-sm"
                                                v-if="
                                                    form.errors[`references.${index}.value`] &&
                                                    Array.isArray(form.errors[`references.${index}.value`])
                                                "
                                            >
                                                {{ form.errors[`references.${index}.value`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>
                                    <td>
                                        <FormControl
                                            required
                                            v-model="form.references[index].type"
                                            type="select"
                                            :options="referenceIdentifierTypes"
                                            placeholder="[type]"
                                        >
                                            <div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`references.${index}.type`])">
                                                {{ form.errors[`references.${index}.type`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>

                                    <td>
                                        <FormControl
                                            required
                                            v-model="form.references[index].relation"
                                            type="select"
                                            :options="relationTypes"
                                            placeholder="[relation type]"
                                        >
                                            <div
                                                class="text-red-400 text-sm"
                                                v-if="Array.isArray(form.errors[`references.${index}.relation`])"
                                            >
                                                {{ form.errors[`references.${index}.relation`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>
                                    <td data-label="Reference Label">
                                        <!-- <input name="Reference Label" class="form-control" v-model="item.label" /> -->
                                        <FormControl
                                            required
                                            v-model="form.references[index].label"
                                            type="text"
                                            placeholder="[reference label]"
                                        >
                                            <div class="text-red-400 text-sm" v-if="form.errors[`references.${index}.label`]">
                                                {{ form.errors[`references.${index}.label`].join(', ') }}
                                            </div>
                                        </FormControl>
                                    </td>
                                    <td class="before:hidden lg:w-1 whitespace-nowrap">
                                        <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
                                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeReference(index)" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- References to delete section -->
                        <div v-if="form.referencesToDelete && form.referencesToDelete.length > 0" class="mt-8">
                            <h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">References To Delete</h1>
                            <ul class="flex flex-1 flex-wrap -m-1">
                                <li
                                    v-for="(element, index) in form.referencesToDelete"
                                    :key="index"
                                    class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-40"
                                >
                                    <article
                                        tabindex="0"
                                        class="bg-red-100 group w-full h-full rounded-md cursor-pointer relative shadow-sm overflow-hidden"
                                    >
                                        <section
                                            class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3"
                                        >
                                            <h1
                                                class="flex-1 text-gray-700 group-hover:text-blue-800 font-medium text-sm mb-1 truncate overflow-hidden whitespace-nowrap"
                                            >
                                                {{ element.value }}
                                            </h1>
                                            <div class="flex flex-col mt-auto">
                                                <p class="p-1 size text-xs text-gray-700">
                                                    <span class="font-semibold">Type:</span> {{ element.type }}
                                                </p>
                                                <p class="p-1 size text-xs text-gray-700">
                                                    <span class="font-semibold">Relation:</span> {{ element.relation }}
                                                </p>
                                                <div class="flex justify-end mt-1">
                                                    <button
                                                        class="restore ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800"
                                                        @click.prevent="restoreReference(index)"
                                                    >
                                                        <svg viewBox="0 0 24 24" class="w-5 h-5">
                                                            <path fill="currentColor" :d="mdiRestore"></path>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                        </section>
                                    </article>
                                </li>
                            </ul>
                        </div>
                    </CardBox>

                    <BaseDivider />

                    <CardBox
                        class="mb-6 shadow"
                        has-table
                        title="Dataset Keywords"
                        :icon="mdiEarthPlus"
                        :header-icon="mdiPlusCircle"
                        v-on:header-icon-click="addKeyword"
                    >
                        <TableKeywords
                            :keywords="form.subjects"
                            :errors="form.errors"
                            :subjectTypes="subjectTypes"
                            v-model:subjects-to-delete="form.subjectsToDelete"
                            v-if="form.subjects.length > 0"
                        />
                    </CardBox>
                </div>

                <div class="mb-4">
                    <!-- <label for="project" class="block text-gray-700 font-bold mb-2">Project:</label>
                    <select
                        id="project"
                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        v-model="dataset.project_id"
                    >
                        <option v-for="project in projects" :key="project.id" :value="project.id" class="block px-4 py-2 text-gray-700">
                            {{ project.label }}
                        </option>
                    </select> -->
                </div>

                <FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false">
                </FileUploadComponent>

                <div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
                    {{ form.errors['files'].join(', ') }}
                </div>

                <template #footer>
                    <BaseButtons>
                        <BaseButton
                            v-if="can.edit"
                            @click.stop="submitAlternative"
                            :disabled="form.processing"
                            label="Save"
                            color="info"
                            :icon="mdiDisc"
                            :class="{ 'opacity-25': form.processing }"
                            small
                        >
                        </BaseButton>
                        <BaseButton
                            v-if="can.edit"
                            :route-name="stardust.route('dataset.release', [dataset.id])"
                            color="info"
                            :icon="mdiLockOpen"
                            :label="'Release'"
                            small
                            :disabled="hasUnsavedChanges || form.processing"
                            :title="hasUnsavedChanges ? 'Please save your changes before releasing' : ''"
                        />
                    </BaseButtons>
                </template>
            </CardBox>
            <!-- Loading Spinner -->
            <div v-if="form.processing" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 z-50">
                <svg class="animate-spin h-12 w-12 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M12 2a10 10 0 0110 10h-4a6 6 0 00-6-6V2z"></path>
                </svg>
            </div>
        </SectionMain>
    </LayoutAuthenticated>
</template>

<script setup lang="ts">
// import EditComponent from "./../EditComponent";
// export default EditComponent;

import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import { useForm, Head, usePage } from '@inertiajs/vue3';
import { computed, ComputedRef, ref, watch } from 'vue';
import { Dataset, Title, Subject, TethysFile, Person, License } from '@/Dataset';
import { stardust } from '@eidellev/adonis-stardust/client';

import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import CardBox from '@/Components/CardBox.vue';
import MapComponent from '@/Components/Map/map.component.vue';
import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
import TablePersons from '@/Components/TablePersons.vue';
import TableKeywords from '@/Components/TableKeywords.vue';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
import FileUploadComponent from '@/Components/FileUpload.vue';
import { MapOptions } from '@/Components/Map/MapOptions';
import { LatLngBoundsExpression } from 'leaflet';
import { LayerOptions } from '@/Components/Map/LayerOptions';
import {
    mdiImageText,
    mdiArrowLeftBoldOutline,
    mdiPlusCircle,
    mdiFinance,
    mdiTrashCan,
    mdiBookOpenPageVariant,
    mdiEarthPlus,
    mdiAlertBoxOutline,
    mdiRestore,
    mdiLockOpen,
    mdiDisc,
} from '@mdi/js';
import { notify } from '@/notiwind';
import NotificationBar from '@/Components/NotificationBar.vue';
import UnsavedChangesWarning from '@/Components/UnsavedChangesWarning.vue';
// import { isEqual } from 'lodash';

const props = defineProps({
    licenses: {
        type: Object,
        default: () => ({}),
    },
    languages: {
        type: Object,
        default: () => ({}),
    },
    doctypes: {
        type: Object,
        default: () => ({}),
    },
    titletypes: {
        type: Object,
        default: () => ({}),
    },
    projects: {
        type: Object,
        default: () => ({}),
    },
    descriptiontypes: {
        type: Object,
        default: () => ({}),
    },
    contributorTypes: {
        type: Object,
        default: () => ({}),
    },
    subjectTypes: {
        type: Object,
        default: () => ({}),
    },
    referenceIdentifierTypes: {
        type: Object,
        default: () => ({}),
    },
    relationTypes: {
        type: Object,
        default: () => ({}),
    },
    dataset: {
        type: Object,
        default: () => ({}),
    },
    can: {
        type: Object,
        default: () => ({}),
    },
});
const flash: ComputedRef<any> = computed(() => {
    return usePage().props.flash;
});
const errors: ComputedRef<any> = computed(() => {
    return usePage().props.errors;
});

// Create a reactive copy of the original dataset
const originalDataset = ref(JSON.parse(JSON.stringify(props.dataset)));

const mapOptions: MapOptions = {
    center: [48.208174, 16.373819],
    zoom: 3,
    zoomControl: false,
    attributionControl: false,
};
const baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
const fitBounds: LatLngBoundsExpression = [
    [46.4318173285, 9.47996951665],
    [49.0390742051, 16.9796667823],
];
const mapId = 'test';

props.dataset.filesToDelete = [];
props.dataset.subjectsToDelete = [];
props.dataset.referencesToDelete = [];
let form = useForm<Dataset>(props.dataset as Dataset);

// Add this computed property to the script section
const hasUnsavedChanges = computed(() => {
    // Check if form is processing
    if (form.processing) return true;

    // Compare against the originalDataset ref instead of props.dataset
    const original = originalDataset.value;

    /// Basic properties
    if (form.language !== original.language) return true;
    if (form.type !== original.type) return true;
    if (form.creating_corporation !== original.creating_corporation) return true;
    if (Number(form.project_id) !== Number(original.project_id)) return true;
    if (form.embargo_date !== original.embargo_date) return true;

    // Check deletion arrays
    if (form.filesToDelete?.length > 0) return true;
    if (form.subjectsToDelete?.length > 0) return true;
    if (form.referencesToDelete?.length > 0) return true;

    // Licenses comparison (use original, not props.dataset)
    const originalLicenses = Array.isArray(original.licenses)
        ? original.licenses.map((l) => (typeof l === 'object' ? l.id.toString() : String(l))).sort()
        : [];
    const currentLicenses = Array.isArray(form.licenses)
        ? form.licenses.map((l) => (typeof l === 'object' ? l.id.toString() : String(l))).sort()
        : [];
    if (JSON.stringify(currentLicenses) !== JSON.stringify(originalLicenses)) return true;

    // Helper function to compare arrays with order sensitivity
    const compareArraysWithOrder = (current: any[], original: any[], compareKey?: string): boolean => {
        if (current.length !== original.length) return true;

        for (let i = 0; i < current.length; i++) {
            const currentItem = current[i];
            const originalItem = original[i];

            if (compareKey) {
                // For items with specific comparison keys (like sort_order)
                if (currentItem[compareKey] !== originalItem[compareKey]) return true;
            }

            // Deep comparison for the rest of the properties
            if (JSON.stringify(currentItem) !== JSON.stringify(originalItem)) return true;
        }

        return false;
    };

    // Helper function to normalize and compare arrays (order-insensitive for non-sortable items)
    const compareArraysContent = (current: any[], original: any[]): boolean => {
        if (current.length !== original.length) return true;

        // Create normalized versions for comparison
        const normalizedCurrent = current.map((item) => JSON.stringify(item)).sort();
        const normalizedOriginal = original.map((item) => JSON.stringify(item)).sort();

        return JSON.stringify(normalizedCurrent) !== JSON.stringify(normalizedOriginal);
    };

    // Files comparison - ORDER SENSITIVE (sorting affects display/processing order)
    const currentFiles = form.files || [];
    const originalFiles = original.files || [];

    // Check for new files first
    const newFiles = currentFiles.filter((f) => !f.id);
    if (newFiles.length > 0) return true;

    // Check for deleted files
    const originalFileIds = originalFiles.map((f) => f.id).filter(Boolean);
    const currentFileIds = currentFiles.map((f) => f.id).filter(Boolean);
    if (!originalFileIds.every((id) => currentFileIds.includes(id))) return true;

    // Check for file order changes (sort_order or position changes)
    if (compareArraysWithOrder(currentFiles, originalFiles, 'sort_order')) return true;

    // Authors comparison - ORDER SENSITIVE (order matters for citation/display)
    const currentAuthors = form.authors || [];
    const originalAuthors = original.authors || [];
    if (compareArraysWithOrder(currentAuthors, originalAuthors)) return true;

    // Contributors comparison - ORDER SENSITIVE (order matters for acknowledgments)
    const currentContributors = form.contributors || [];
    const originalContributors = original.contributors || [];
    if (compareArraysWithOrder(currentContributors, originalContributors)) return true;

    // Titles comparison - ORDER SENSITIVE (first title is main title, order matters)
    if (compareArraysWithOrder(form.titles, original.titles)) return true;

    // Descriptions comparison - ORDER SENSITIVE (first description is main abstract)
    if (compareArraysWithOrder(form.descriptions, original.descriptions)) return true;

    // Subjects/Keywords comparison - ORDER INSENSITIVE (keywords don't have meaningful order)
    if (compareArraysContent(form.subjects || [], original.subjects || [])) return true;

    // References comparison - ORDER INSENSITIVE (references don't have meaningful order typically)
    if (compareArraysContent(form.references || [], original.references || [])) return true;

    // Coverage comparison
    const currentCoverage = form.coverage || {};
    const originalCoverage = original.coverage || {};
    if (Number(currentCoverage.x_min) !== Number(originalCoverage.x_min)) return true;
    if (Number(currentCoverage.x_max) !== Number(originalCoverage.x_max)) return true;
    if (Number(currentCoverage.y_min) !== Number(originalCoverage.y_min)) return true;
    if (Number(currentCoverage.y_max) !== Number(originalCoverage.y_max)) return true;

    // // Files comparison (consolidated)
    // const originalFileIds = (original.files || []).map((f) => f.id).filter(Boolean);
    // const currentFileIds = (form.files || []).map((f) => f.id).filter(Boolean);
    // const newFiles = (form.files || []).filter((f) => !f.id);

    // if (originalFileIds.length !== currentFileIds.length) return true;
    // if (newFiles.length > 0) return true;
    // if (!originalFileIds.every((id) => currentFileIds.includes(id))) return true;

    // No changes detected
    return false;
});

// Alternative submit function that updates the original reference
const submitAlternative = async (): Promise<void> => {
    let route = stardust.route('dataset.update', [props.dataset.id]);

    let licenses = form.licenses.map((obj) => {
        if (hasIdAttribute(obj)) {
            return obj.id.toString();
        } else {
            return obj;
        }
    });

    const [fileUploads, fileInputs] = form.files?.reduce(
        ([fileUploads, fileInputs], obj) => {
            if (!obj.id) {
                // return MultipartFile for file upload
                const options: FilePropertyBag = {
                    type: obj.type,
                    lastModified: obj.lastModified,
                    sortOrder: obj.sort_order,
                };
                // const file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
                // const metadata = JSON.stringify({ sort_order: obj.sort_order });
                // const metadataBlob = new Blob([metadata + '\n'], { type: 'application/json' });
                const file = new File([obj.blob], `${obj.label}?sortorder=${obj.sort_order}`, options);

                // const file = new File([obj.blob], `${obj.label}`, options);

                // fileUploads[obj.sort_order] = file;
                fileUploads.push(file);
            } else {
                // return normal request input
                fileInputs.push(obj);
            }
            return [fileUploads, fileInputs];
        },
        [[], []] as [Array<File>, Array<TethysFile>],
    ) as [Array<File>, Array<TethysFile>];

    await form
        .transform((data) => ({
            ...data,
            licenses: licenses,
            files: fileUploads,
            fileInputs: fileInputs,
            rights: 'true',
        }))
        .put(route, {
            onSuccess: (page) => {
                // reset the form with the updated dataset from server
                // Get the updated dataset from the server response
                const updatedDataset = page.props.dataset || props.dataset;

                // Clear deletion arrays in the updated dataset
                updatedDataset.filesToDelete = [];
                updatedDataset.subjectsToDelete = [];
                updatedDataset.referencesToDelete = [];

                // // Ensure licenses are in the correct format for the form
                // if (updatedDataset.licenses) {
                //     // Normalize licenses to the expected format
                //     updatedDataset.licenses = updatedDataset.licenses.map((license) => {
                //         if (typeof license === 'object' && license.id) {
                //             return license.id;
                //         }
                //         return license;
                //     });
                // }

                // Reset the form with the updated dataset from server
                // form = useForm<Dataset>(updatedDataset as Dataset);

                // Instead of recreating the form, selectively update properties
                // Update all properties EXCEPT licenses to preserve reactivity
                Object.keys(updatedDataset).forEach((key) => {
                    if (key !== 'licenses' && key in form) {
                        form[key] = updatedDataset[key];
                    }
                });

                // Clear form errors
                form.clearErrors();

                // IMPORTANT: Normalize originalDataset to match form format
                // const normalizedDataset = JSON.parse(JSON.stringify(updatedDataset));

                // // Update the original dataset reference with the fresh server data
                // originalDataset.value = normalizedDataset;
                originalDataset.value = JSON.parse(JSON.stringify(updatedDataset));

                // // Or if server returns updated data, use that
                // if (page.props.dataset) {
                //     originalDataset.value = JSON.parse(JSON.stringify(page.props.dataset));
                // }

                notify(
                    {
                        type: 'success',
                        title: 'Success',
                        text: 'Dataset updated successfully',
                    },
                    4000,
                );
            },
        });
};

const submit = async (): Promise<void> => {
    let route = stardust.route('dataset.update', [props.dataset.id]);

    let licenses = form.licenses.map((obj) => {
        if (hasIdAttribute(obj)) {
            return obj.id.toString();
        } else {
            return obj;
        }
    });

    const [fileUploads, fileInputs] = form.files?.reduce(
        ([fileUploads, fileInputs], obj) => {
            if (!obj.id) {
                // return MultipartFile for file upload
                const options: FilePropertyBag = {
                    type: obj.type,
                    lastModified: obj.lastModified,
                    sortOrder: obj.sort_order,
                };
                // const file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
                // const metadata = JSON.stringify({ sort_order: obj.sort_order });
                // const metadataBlob = new Blob([metadata + '\n'], { type: 'application/json' });
                const file = new File([obj.blob], `${obj.label}?sortorder=${obj.sort_order}`, options);

                // const file = new File([obj.blob], `${obj.label}`, options);

                // fileUploads[obj.sort_order] = file;
                fileUploads.push(file);
            } else {
                // return normal request input
                fileInputs.push(obj);
            }
            return [fileUploads, fileInputs];
        },
        [[], []] as [Array<File>, Array<TethysFile>],
    ) as [Array<File>, Array<TethysFile>];

    await form
        .transform((data) => ({
            ...data,
            licenses: licenses,
            files: fileUploads,
            fileInputs: fileInputs,
            // files: form.files.map((obj) => {
            //     let file;
            //     if (!obj.id) {
            //         // return MultipartFile for file upload
            //         file = new File([obj.blob], obj.label, { type: obj.type, lastModified: obj.lastModified });
            //     } else {
            //         // return normal request input
            //         file = obj;
            //     }
            //     return file;
            // }),

            rights: 'true',
        }))
        // .put(route);
        .put(route, {
            onSuccess: () => {
                // console.log(form.data());
                // mainService.setDataset(form.data());
                // formStep.value++;
                // form.filesToDelete = [];
                // Clear the array using splice
                form.filesToDelete?.splice(0, form.filesToDelete.length);
                form.subjectsToDelete?.splice(0, form.subjectsToDelete.length);
                form.referencesToDelete?.splice(0, form.referencesToDelete.length);
            },
        });
};

const hasIdAttribute = (obj: License | number): obj is License => {
    return typeof obj === 'object' && 'id' in obj;
};

const addTitle = () => {
    let newTitle: Title = { value: '', language: '', type: '' };
    form.titles.push(newTitle);
};
const removeTitle = (key: any) => {
    form.titles.splice(key, 1);
};

const addDescription = () => {
    let newDescription = { value: '', language: '', type: '' };
    form.descriptions.push(newDescription);
};
const removeDescription = (key: any) => {
    form.descriptions.splice(key, 1);
};

const addNewAuthor = () => {
    let newAuthor = {
        status: false,
        first_name: '',
        last_name: '',
        email: '',
        academic_title: '',
        identifier_orcid: '',
        name_type: 'Personal',
    };
    form.authors.push(newAuthor);
};

const onAddAuthor = (person: Person) => {
    if (form.authors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
    } else if (form.contributors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' });
    } else {
        form.authors.push(person);
        notify({ type: 'info', text: 'person has been successfully added as author' });
    }
};

const addNewContributor = () => {
    let newContributor = {
        status: false,
        first_name: '',
        last_name: '',
        email: '',
        academic_title: '',
        identifier_orcid: '',
        name_type: 'Personal',
        pivot: { contributor_type: '' },
    };
    form.contributors.push(newContributor);
};

const onAddContributor = (person: Person) => {
    if (form.contributors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as contributor' }, 4000);
    } else if (form.authors.filter((e) => e.id === person.id).length > 0) {
        notify({ type: 'warning', title: 'Warning', text: 'person is already defined as author' }, 4000);
    } else {
        // person.pivot = { contributor_type: '' };
        // // person.pivot = { name_type: '', contributor_type: '' };
        form.contributors.push(person);
        notify({ type: 'info', text: 'person has been successfully added as contributor' }, 4000);
    }
};

const addKeyword = () => {
    let newSubject: Subject = { value: '', language: '', type: 'uncontrolled' };
    //this.dataset.files.push(uploadedFiles[i]);
    form.subjects.push(newSubject);
};

const addReference = () => {
    let newReference = { value: '', label: '', relation: '', type: '' };
    //this.dataset.files.push(uploadedFiles[i]);
    form.references.push(newReference);
};

const removeReference = (key: any) => {
    const reference = form.references[key];

    // If the reference has an ID, it exists in the database
    // and should be added to referencesToDelete
    if (reference.id) {
        // Initialize referencesToDelete array if it doesn't exist
        if (!form.referencesToDelete) {
            form.referencesToDelete = [];
        }

        // Add to referencesToDelete
        form.referencesToDelete.push(reference);
    }

    // Remove from form.references array
    form.references.splice(key, 1);
};

const restoreReference = (index: number) => {
    // Get the reference from referencesToDelete
    const reference = form.referencesToDelete[index];

    // Add it back to form.references
    form.references.push(reference);

    // Remove it from referencesToDelete
    form.referencesToDelete.splice(index, 1);
};

const onMapInitialized = (newItem: any) => {
    console.log(newItem);
};

// Add this method to generate change summaries
const getChangesSummary = () => {
    const changes = [];
    const original = originalDataset.value;

    // Basic property changes
    if (form.language !== original.language) changes.push('Language changed');
    if (form.type !== original.type) changes.push('Dataset type changed');
    if (form.creating_corporation !== original.creating_corporation) changes.push('Creating corporation changed');
    if (Number(form.project_id) !== Number(original.project_id)) changes.push('Project changed');
    if (form.embargo_date !== original.embargo_date) changes.push('Embargo date changed');

    // Deletion tracking
    if (form.filesToDelete?.length > 0) changes.push(`${form.filesToDelete.length} file(s) marked for deletion`);
    if (form.subjectsToDelete?.length > 0) changes.push(`${form.subjectsToDelete.length} keyword(s) marked for deletion`);
    if (form.referencesToDelete?.length > 0) changes.push(`${form.referencesToDelete.length} reference(s) marked for deletion`);

    // License changes
    const originalLicenses = Array.isArray(original.licenses)
        ? original.licenses.map((l) => (typeof l === 'object' ? l.id.toString() : String(l))).sort()
        : [];
    const currentLicenses = Array.isArray(form.licenses)
        ? form.licenses.map((l) => (typeof l === 'object' ? l.id.toString() : String(l))).sort()
        : [];
    if (JSON.stringify(currentLicenses) !== JSON.stringify(originalLicenses)) {
        changes.push('Licenses modified');
    }

    // Helper function to detect array changes and sorting
    const analyzeArrayChanges = (current: any[], original: any[], itemName: string): string[] => {
        const arrayChanges = [];

        // Check for count changes
        if (current.length !== original.length) {
            const diff = current.length - original.length;
            if (diff > 0) {
                arrayChanges.push(`${diff} ${itemName}(s) added`);
            } else {
                arrayChanges.push(`${Math.abs(diff)} ${itemName}(s) removed`);
            }
        }

        // Check for order changes (only if same count)
        if (current.length === original.length && current.length > 1) {
            const currentIds = current.map((item) => item.id).filter(Boolean);
            const originalIds = original.map((item) => item.id).filter(Boolean);

            // If we have IDs and they're in different order
            if (currentIds.length === originalIds.length && currentIds.length > 0) {
                const orderChanged = currentIds.some((id, index) => id !== originalIds[index]);
                if (orderChanged) {
                    arrayChanges.push(`${itemName} order changed`);
                }
            }
        }

        // Check for content changes (when count is same but content differs)
        if (current.length === original.length) {
            const contentChanged = JSON.stringify(current) !== JSON.stringify(original);
            const orderChanged = arrayChanges.some((change) => change.includes('order changed'));

            if (contentChanged && !orderChanged) {
                arrayChanges.push(`${itemName} content modified`);
            }
        }

        return arrayChanges;
    };

    // Files analysis with detailed logic for new files and reordering
    const currentFiles = form.files || [];
    const originalFiles = original.files || [];
    const newFiles = currentFiles.filter((f) => !f.id);

    if (newFiles.length > 0) {
        changes.push(`${newFiles.length} new file(s) added`);
    }

    // Check for file order changes specifically
    const existingCurrentFiles = currentFiles.filter((f) => f.id);
    const existingOriginalFiles = originalFiles.filter((f) => f.id);

    if (existingCurrentFiles.length === existingOriginalFiles.length && existingCurrentFiles.length > 1) {
        const currentOrder = existingCurrentFiles.map((f) => f.id);
        const originalOrder = existingOriginalFiles.map((f) => f.id);
        const orderChanged = currentOrder.some((id, index) => id !== originalOrder[index]);

        if (orderChanged) {
            changes.push('File order changed');
        }
    }

    // Authors analysis
    const authorChanges = analyzeArrayChanges(form.authors || [], original.authors || [], 'author');
    changes.push(...authorChanges);

    // Contributors analysis
    const contributorChanges = analyzeArrayChanges(form.contributors || [], original.contributors || [], 'contributor');
    changes.push(...contributorChanges);

    // Titles analysis (order-sensitive)
    if (JSON.stringify(form.titles) !== JSON.stringify(original.titles)) {
        if (form.titles.length !== original.titles.length) {
            const diff = form.titles.length - original.titles.length;
            changes.push(diff > 0 ? `${diff} title(s) added` : `${Math.abs(diff)} title(s) removed`);
        } else if (form.titles.length > 0) {
            // Check if main title changed
            if (form.titles[0]?.value !== original.titles[0]?.value) {
                changes.push('Main title changed');
            }
            // Check for other title changes
            const otherTitlesChanged = form.titles
                .slice(1)
                .some((title, index) => JSON.stringify(title) !== JSON.stringify(original.titles[index + 1]));
            if (otherTitlesChanged) {
                changes.push('Additional titles modified');
            }
        }
    }

    // Descriptions analysis (order-sensitive)
    if (JSON.stringify(form.descriptions) !== JSON.stringify(original.descriptions)) {
        if (form.descriptions.length !== original.descriptions.length) {
            const diff = form.descriptions.length - original.descriptions.length;
            changes.push(diff > 0 ? `${diff} description(s) added` : `${Math.abs(diff)} description(s) removed`);
        } else if (form.descriptions.length > 0) {
            // Check if main abstract changed
            if (form.descriptions[0]?.value !== original.descriptions[0]?.value) {
                changes.push('Main abstract changed');
            }
            // Check for other description changes
            const otherDescChanged = form.descriptions
                .slice(1)
                .some((desc, index) => JSON.stringify(desc) !== JSON.stringify(original.descriptions[index + 1]));
            if (otherDescChanged) {
                changes.push('Additional descriptions modified');
            }
        }
    }

    // Subjects/Keywords analysis (order-insensitive)
    const currentSubjects = form.subjects || [];
    const originalSubjects = original.subjects || [];
    if (currentSubjects.length !== originalSubjects.length) {
        const diff = currentSubjects.length - originalSubjects.length;
        changes.push(diff > 0 ? `${diff} keyword(s) added` : `${Math.abs(diff)} keyword(s) removed`);
    } else if (currentSubjects.length > 0) {
        // Check content changes without order sensitivity
        const currentSubjectsNormalized = currentSubjects.map((s) => JSON.stringify(s)).sort();
        const originalSubjectsNormalized = originalSubjects.map((s) => JSON.stringify(s)).sort();
        if (JSON.stringify(currentSubjectsNormalized) !== JSON.stringify(originalSubjectsNormalized)) {
            let test = JSON.stringify(currentSubjectsNormalized);
            let test2 = JSON.stringify(originalSubjectsNormalized);
            changes.push('Keywords modified');
        }
    }

    // References analysis (order-insensitive)
    const currentRefs = form.references || [];
    const originalRefs = original.references || [];
    if (currentRefs.length !== originalRefs.length) {
        const diff = currentRefs.length - originalRefs.length;
        changes.push(diff > 0 ? `${diff} reference(s) added` : `${Math.abs(diff)} reference(s) removed`);
    } else if (currentRefs.length > 0) {
        // Check content changes without order sensitivity
        const currentRefsNormalized = currentRefs.map((r) => JSON.stringify(r)).sort();
        const originalRefsNormalized = originalRefs.map((r) => JSON.stringify(r)).sort();
        if (JSON.stringify(currentRefsNormalized) !== JSON.stringify(originalRefsNormalized)) {
            changes.push('References modified');
        }
    }

    // Coverage changes
    const currentCoverage = form.coverage || {};
    const originalCoverage = original.coverage || {};
    const coverageFields = ['x_min', 'x_max', 'y_min', 'y_max'];
    const coverageChanged = coverageFields.some((field) => Number(currentCoverage[field]) !== Number(originalCoverage[field]));
    if (coverageChanged) {
        changes.push('Geographic coverage changed');
    }

    return changes;
};

// onMounted(() => {
//     window.addEventListener('beforeunload', handleBeforeUnload);
// });

// onUnmounted(() => {
//     window.removeEventListener('beforeunload', handleBeforeUnload);
// });

// Watch for when the component receives new props (e.g., after save)
// watch(
//     () => props.dataset,
//     (newDataset) => {
//         if (originalDataset) {
//             originalDataset.value = JSON.parse(JSON.stringify(newDataset));
//         }
//     },
//     { deep: true },
// );
</script>

<style scoped>
.max-w-2xl {
    max-width: 2xl;
}

.text-2xl {
    font-size: 2xl;
}

.font-bold {
    font-weight: bold;
}

.mb-4 {
    margin-bottom: 1rem;
}

.block {
    display: block;
}

.text-gray-700 {
    color: #4b5563;
}

.shadow {
    box-shadow:
        0 0 0 1px rgba(66, 72, 78, 0.05),
        0 1px 2px 0 rgba(66, 72, 78, 0.08),
        0 2px 4px 0 rgba(66, 72, 78, 0.12),
        0 4px 8px 0 rgba(66, 72, 78, 0.16);
}
</style>
