<template>
  <PagePanel :width="420" class="ivyforms-p-20">
    <div
      class="ivyforms-entry-page-section-title header-with-actions ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-width-100 ivyforms-gap-8"
    >
      <span class="medium-18">
        {{ getLabel('general_details') }}
      </span>
      <IvyTooltip :content="getLabel('actions')" placement="top">
        <IvyButtonAction
          ref="actionButtonRef"
          icon-only
          icon-start="context-menu-dot"
          size="s"
          type="ghost"
          priority="tertiary"
          icon-start-type="outline"
          @click="openActions"
        />
      </IvyTooltip>
    </div>

    <div class="ivyforms-entry-page-section-content">
      <table class="ivyforms-entry-details-table ivyforms-width-100">
        <tbody>
          <tr v-for="detail in formattedEntryDetails" :key="detail.key">
            <td class="ivyforms-key-column medium-14 ivyforms-px-8">{{ detail.label }}</td>
            <td class="ivyforms-value-column ivyforms-width-100 ivyforms-px-8 regular-14">
              <template v-if="detail.label === getLabel('status')">
                <div
                  class="ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between"
                >
                  <span>{{
                    entry[detail.key].charAt(0).toUpperCase() + entry[detail.key].slice(1)
                  }}</span>
                  <IvyButtonAction
                    icon-only
                    :icon-start="entry[detail.key] === 'read' ? 'read' : 'unread'"
                    size="s"
                    type="ghost"
                    priority="tertiary"
                    icon-start-type="outline"
                    @click="updateEntryStatus(entry[detail.key])"
                  />
                </div>
              </template>
              <template v-else-if="detail.label === getLabel('submitted_on')">
                {{ UtilDateFormatter.formatWPDate(entry[detail.key]) }}
              </template>
              <template v-else-if="detail.key === 'sourceURL'">
                <IvyLink :href="entry[detail.key]" target="_blank" size="s" rel="noreferrer">
                  {{ entry[detail.key] }}
                </IvyLink>
              </template>
              <template v-else-if="detail.key === 'author'">
                <template v-if="entry.userId === null || entry.userId === undefined">
                  {{ getLabel('guest') }}
                </template>
                <template v-else>
                  <IvyLink
                    :href="`${wordPressAdminUrl}user-edit.php?user_id=${entry.userId}`"
                    target="_blank"
                    size="s"
                    rel="noreferrer"
                  >
                    {{ entry[detail.key] }}
                  </IvyLink>
                </template>
              </template>
              <template v-else>
                {{ entry[detail.key] }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </PagePanel>
</template>

<script setup lang="ts">
import { computed, inject, type Ref, ref } from 'vue'
import {
  applyEntryContextMenuActionsFilter,
  createEditEntryContextMenuAction,
} from '@/utils/entryActions.ts'
import { useProFeatures } from '@/composables/useProFeatures.ts'
import { useAllEntries } from '@/stores/useAllEntries.ts'
import { useLabels } from '@/composables/useLabels.ts'
import { useFormBuilder } from '@/stores/useFormBuilder.ts'
import { useRoute, useRouter } from 'vue-router'
import { entryDetails } from '@/constants/generalEntryDetails.ts'
import {
  IVYFORMS_RESULTS_ENTRY_DETAILS,
  IVYFORMS_ENTRIES,
  IVYFORMS_ENTRY_DETAILS,
  IVYFORMS_FORM_RESULTS,
} from '@/constants/pages.ts'
import type { Entry } from '@/types/entry'
import UtilDateFormatter from '@/utils/utilDateFormatter.ts'
import { useContextMenuStore } from '@/stores/contextMenuStore.ts'
import {
  ContextMenuActionType,
  createContextMenuAction,
} from '@/views/_components/context-menu/kit/ContextMenuActionType.ts'
import type { ContextMenuAction } from '@/views/_components/context-menu/context-menu-action'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import { useActionEntityStore } from '@/stores/actionEntityStore'
import { useEntry } from '@/stores/useEntry.ts'
import { useProAccess } from '@/composables/useProAccess'
import { useProFeatureUpgrade } from '@/composables/useProFeatureUpgrade'
import { ADD_ENTRY_FEATURE, ADD_ENTRY_REQUIRED_PLAN } from '@/constants/addEntryFeature.ts'

const route = useRoute()
const router = useRouter()
const allEntriesStore = useAllEntries()
const entryStore = useEntry()
const formBuilderStore = useFormBuilder()
const { getLabel } = useLabels()
const entry = inject<Ref<Entry>>('entry')
const pro = useProFeatures()
const contextMenuStore = useContextMenuStore()
const actionEntityStore = useActionEntityStore()
const { canUseFeature, isProInstalled } = useProAccess()
const { showUpgradeDialog } = useProFeatureUpgrade()
const deleteLoading = ref(false)
const actionButtonRef = ref<InstanceType<typeof IvyButtonAction> | HTMLElement | null>(null)
const onEntryCreated = inject<(entryId: number) => void | Promise<void>>('onEntryCreated', () => {})

const canAddEntry = computed(() => canUseFeature(ADD_ENTRY_FEATURE))

const entryFormId = computed((): number | string | null => {
  if (route.name === IVYFORMS_RESULTS_ENTRY_DETAILS) {
    const formId = route.params.formId
    return Array.isArray(formId) ? formId[0] : formId
  }
  return entry?.value?.formId ?? formBuilderStore.formId
})

const formattedEntryDetails = computed(() => {
  return entryDetails.filter(
    (detail) => entry?.value && Object.prototype.hasOwnProperty.call(entry.value, detail.key),
  )
})

const wordPressAdminUrl = computed(() => {
  return window.IvyForms?.adminUrl || getAdminUrl()
})

/**
 * Get WordPress admin URL
 * Uses window.IvyForms.adminUrl if available, otherwise constructs from window.location
 */
const getAdminUrl = (): string => {
  try {
    // Try to get from admin_url endpoint via REST API root
    if (window.IvyForms?.useApiClient) {
      const apiClient = window.IvyForms.useApiClient()
      if (apiClient?.root) {
        // Extract admin URL from REST API root
        const match = apiClient.root.match(/(.+?)\/wp-json\/?/)
        if (match) {
          return match[1] + '/wp-admin/'
        }
      }
    }
    // Fallback: construct from current location pathname
    // Extract base path from current URL (handles subdirectory installations)
    const pathname = window.location.pathname
    const wpAdminIndex = pathname.indexOf('/wp-admin/')
    if (wpAdminIndex !== -1) {
      const basePath = pathname.substring(0, wpAdminIndex)
      return window.location.origin + basePath + '/wp-admin/'
    }
    // Final fallback if wp-admin not found in path
    return window.location.origin + '/wp-admin/'
  } catch {
    // Absolute final fallback
    return '/wp-admin/'
  }
}

const getCurrentEntryId = () => {
  if (route.name === IVYFORMS_RESULTS_ENTRY_DETAILS) {
    return route.params.entryId
  }
  return route.params.id
}

const updateEntryStatus = async (oldStatus: string) => {
  try {
    const newStatus = oldStatus === 'read' ? 'unread' : 'read'
    const currentEntryId = getCurrentEntryId()
    await allEntriesStore.updateStatus(Number(currentEntryId), newStatus)
    if (entry?.value) {
      entry.value.status = newStatus
    }
    // Redirect if status changed from read to unread
    if (oldStatus === 'read' && newStatus === 'unread') {
      if (route.name === IVYFORMS_RESULTS_ENTRY_DETAILS) {
        await router.push({
          name: IVYFORMS_FORM_RESULTS,
          params: { id: route.params.formId },
          query: route.query,
        })
      } else if (route.name === IVYFORMS_ENTRY_DETAILS || route.name === IVYFORMS_ENTRIES) {
        formBuilderStore.formId = null
        allEntriesStore.reset()
        await router.push({ name: IVYFORMS_ENTRIES, query: route.query })
      }
    }
  } catch (error) {
    console.error(getLabel('failed_to_update_entry_status'), error)
  }
}

const openActions = () => {
  if (contextMenuStore.isOpen) {
    contextMenuStore.closeContextMenu()
    return
  }

  const id = Number(getCurrentEntryId())
  if (!id) return

  const btnRef = actionButtonRef.value
  if (!btnRef) return

  // Extract HTMLElement from component instance
  const buttonElement =
    btnRef && '$el' in btnRef && btnRef.$el instanceof HTMLElement
      ? btnRef.$el
      : btnRef instanceof HTMLElement
        ? btnRef
        : null

  if (!buttonElement) return

  const baseActions = [
    createEditEntryContextMenuAction(
      () => {
        contextMenuStore.closeContextMenu()
      },
      { locked: () => !pro.hasFeature('edit_entries') },
    ),
    ...buildEntryActions(id),
    createContextMenuAction(ContextMenuActionType.Delete, {
      handler: async () => {
        contextMenuStore.closeContextMenu()
        await actionEntityStore.handleActionClick(id, null, 'entry', 'delete', {
          setLoading: (isLoading) => {
            deleteLoading.value = isLoading
          },
          onSuccess: async () => {
            if (route.name === IVYFORMS_RESULTS_ENTRY_DETAILS) {
              await router.push({
                name: IVYFORMS_FORM_RESULTS,
                params: { id: route.params.formId },
                query: route.query,
              })
            } else {
              formBuilderStore.formId = null
              allEntriesStore.reset()
              await router.push({ name: IVYFORMS_ENTRIES, query: route.query })
            }
          },
        })
      },
    }),
  ]

  contextMenuStore.openContextMenu({
    actions: applyEntryContextMenuActionsFilter(baseActions, {
      entryId: id,
      formId: entry?.value?.formId ?? null,
      onDetailPage: true,
    }),
    contextMenuButtonRef: buttonElement,
  })
}

/**
 * Build the "Add entry" / "Duplicate" context-menu actions.
 *
 * These are Pro-only capabilities. When Pro is not installed nothing is shown. When Pro is
 * installed but the feature is unavailable, locked placeholders open the upgrade prompt. When
 * licensed, Pro injects the real behavior via `ivyforms/entry/detail_actions`.
 */
const buildEntryActions = (id: number): ContextMenuAction[] => {
  if (!isProInstalled.value) {
    return []
  }

  if (!canAddEntry.value) {
    const openUpgrade = () => {
      contextMenuStore.closeContextMenu()
      showUpgradeDialog(ADD_ENTRY_REQUIRED_PLAN)
    }
    return [
      createContextMenuAction(ContextMenuActionType.Save, {
        label: getLabel('add_entry'),
        icon: 'plus',
        pro: true,
        handler: openUpgrade,
      }),
      createContextMenuAction(ContextMenuActionType.Duplicate, {
        label: getLabel('duplicate_entry'),
        pro: true,
        handler: openUpgrade,
      }),
    ]
  }

  const ctx = {
    entryId: id,
    formId: Number(entryFormId.value),
    entry: entry?.value ?? null,
    entryFields: entryStore.entryFields || [],
    formFields: formBuilderStore.fields || [],
    createAction: createContextMenuAction,
    actionTypes: ContextMenuActionType,
    closeMenu: () => contextMenuStore.closeContextMenu(),
    onCreated: onEntryCreated,
  }

  const actions = window.IvyForms?.hooks?.applyFilters?.(
    'ivyforms/entry/detail_actions',
    [] as ContextMenuAction[],
    ctx,
  )
  return Array.isArray(actions) ? (actions as ContextMenuAction[]) : []
}
</script>

<style scoped lang="scss">
.ivyforms-page-panel {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;

  .ivyforms-entry-page-section-content {
    width: 100%;

    .ivyforms-entry-details-table {
      td {
        text-align: left;
        border-bottom: 1px solid var(--map-divider);
        height: 48px;
        color: var(--map-base-text-0);
      }

      .ivyforms-key-column {
        min-width: 104px;
        box-sizing: border-box;
      }

      .ivyforms-value-column {
        max-width: none;
        overflow-wrap: break-word;
        word-break: break-all;
        white-space: normal;
        display: table-cell;

        // Override IvyLink centering
        ::v-deep(.ivyforms-link) {
          text-align: left;
          display: block;
        }
        ::v-deep(.ivyforms-link .el-link__inner) {
          text-align: left;
          display: block;
        }
      }
    }
  }
}
</style>
