<template>
  <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)" position="right" full-height>
    <q-card style="width:600px;max-width:90vw" class="column no-wrap">
      <!-- Header -->
      <q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)">
        <div class="col">
          <div class="text-subtitle1 text-weight-bold">
            <slot name="title-prefix" />
            {{ title }}
          </div>
          <div class="text-caption text-grey-6">
            {{ docName }}
            <slot name="title-suffix" />
          </div>
        </div>
        <slot name="header-actions" />
        <q-btn flat round dense icon="open_in_new" @click="openExternal(erpLinkUrl)" class="q-mr-xs" />
        <q-btn flat round dense icon="close" @click="$emit('update:open', false)" />
      </q-card-section>

      <!-- Loading -->
      <q-card-section v-if="loading" class="flex flex-center" style="min-height:200px">
        <q-spinner size="32px" color="indigo-6" />
      </q-card-section>

      <!-- Content -->
      <q-card-section v-else-if="doc" class="col q-pt-sm" style="overflow-y:auto">
        <component :is="sectionComponent" v-if="sectionComponent"
          :doc="doc" :doc-name="docName" :title="title"
          :comments="comments" :comms="comms" :files="files"
          :dispatch-jobs="dispatchJobs"
          @navigate="(...a) => $emit('navigate', ...a)"
          @reply-sent="(...a) => $emit('reply-sent', ...a)"
          @save-field="(...a) => $emit('save-field', ...a)"
          @toggle-recurring="(...a) => $emit('toggle-recurring', ...a)"
          @dispatch-created="(...a) => $emit('dispatch-created', ...a)"
          @dispatch-deleted="(...a) => $emit('dispatch-deleted', ...a)"
          @dispatch-updated="(...a) => $emit('dispatch-updated', ...a)"
          @contract-terminated="(...a) => $emit('contract-terminated', ...a)"
          @deleted="onDeleted"
          @open-pdf="(...a) => $emit('open-pdf', ...a)"
        />

        <!-- Generic fallback -->
        <template v-else>
          <div class="modal-field-grid">
            <div v-for="(val, key) in docFields" :key="key" class="mf">
              <span class="mf-label">{{ key }}</span>
              <span v-if="typeof val === 'number'">{{ val }}</span>
              <span v-else>{{ val || '---' }}</span>
            </div>
          </div>
        </template>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { erpLink } from 'src/composables/useFormatters'

import InvoiceDetail from './detail-sections/InvoiceDetail.vue'
import IssueDetail from './detail-sections/IssueDetail.vue'
import PaymentDetail from './detail-sections/PaymentDetail.vue'
import SubscriptionDetail from './detail-sections/SubscriptionDetail.vue'
import EquipmentDetail from './detail-sections/EquipmentDetail.vue'
import ServiceContractDetail from './detail-sections/ServiceContractDetail.vue'

const SECTION_MAP = {
  'Sales Invoice': InvoiceDetail,
  'Issue': IssueDetail,
  'Payment Entry': PaymentDetail,
  'Subscription': SubscriptionDetail,
  'Service Subscription': SubscriptionDetail,
  'Service Equipment': EquipmentDetail,
  'Service Contract': ServiceContractDetail,
}

const props = defineProps({
  open: Boolean,
  loading: Boolean,
  doctype: String,
  docName: String,
  title: String,
  doc: Object,
  comments: { type: Array, default: () => [] },
  comms: { type: Array, default: () => [] },
  files: { type: Array, default: () => [] },
  docFields: { type: Object, default: () => ({}) },
  dispatchJobs: { type: Array, default: () => [] },
})

const emit = defineEmits(['update:open', 'navigate', 'open-pdf', 'save-field', 'toggle-recurring', 'reply-sent', 'dispatch-created', 'dispatch-deleted', 'dispatch-updated', 'deleted', 'contract-terminated'])

function onDeleted (docName) {
  emit('update:open', false)
  emit('deleted', docName)
}

const erpLinkUrl = computed(() => erpLink(props.doctype, props.docName))
const sectionComponent = computed(() => SECTION_MAP[props.doctype] || null)

function openExternal (url) { window.open(url, '_blank') }
</script>

<style scoped>
.modal-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.mf { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 0.875rem; border-bottom: 1px solid #f1f5f9; }
.mf-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; min-width: 80px; flex-shrink: 0; }
.info-block-title { font-size: 0.75rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.modal-desc { font-size: 0.85rem; line-height: 1.5; background: #f8fafc; border-radius: 8px; padding: 10px 12px; max-height: 300px; overflow-y: auto; }
.info-row { display: flex; align-items: center; gap: 8px; }
.comm-row { padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.comm-row:last-child { border-bottom: none; }
.thread-msg { border-left: 3px solid #e2e8f0; padding: 8px 0 8px 12px; margin-bottom: 2px; }
.thread-msg:hover { border-left-color: #6366f1; }
.thread-header { display: flex; align-items: center; font-size: 0.78rem; color: #374151; margin-bottom: 4px; }
.thread-body { font-size: 0.84rem; line-height: 1.5; color: #1f2937; }
.thread-body :deep(p) { margin: 0 0 4px; }
.thread-body :deep(hr) { border: none; border-top: 1px solid #e5e7eb; margin: 6px 0; }
.thread-body :deep(br + br) { display: none; }
.reply-box { border-top: 1px solid #e2e8f0; padding-top: 12px; }
</style>
