<template>
  <div v-if="isOpen" class="ipd-overlay" @mousedown.self="$emit('close')">
    <div class="ipd-dialog" @keydown.escape="$emit('close')">
      <div class="ipd-dialog__header">{{ t('dialogs.imagePosition.title') }}</div>

      <div class="ipd-dialog__body">
        <!-- Horizontal -->
        <fieldset class="ipd-fieldset">
          <legend class="ipd-legend">{{ t('dialogs.imagePosition.horizontal') }}</legend>
          <div class="ipd-row">
            <label class="ipd-label">Mode</label>
            <select v-model="hMode" class="ipd-select">
              <option value="align">{{ t('dialogs.imagePosition.alignment') }}</option>
              <option value="offset">{{ t('dialogs.imagePosition.offset') }}</option>
            </select>
          </div>
          <div v-if="hMode === 'align'" class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.align') }}</label>
            <select v-model="hAlign" class="ipd-select">
              <option value="left">{{ t('dialogs.imagePosition.alignOptions.left') }}</option>
              <option value="center">{{ t('dialogs.imagePosition.alignOptions.center') }}</option>
              <option value="right">{{ t('dialogs.imagePosition.alignOptions.right') }}</option>
            </select>
          </div>
          <div v-else class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.offsetPx') }}</label>
            <input v-model.number="hOffset" type="number" class="ipd-input" />
          </div>
          <div class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.relativeTo') }}</label>
            <select v-model="hRelativeTo" class="ipd-select">
              <option value="page">{{ t('dialogs.imagePosition.relativeOptions.page') }}</option>
              <option value="column">{{ t('dialogs.imagePosition.relativeOptions.column') }}</option>
              <option value="margin">{{ t('dialogs.imagePosition.relativeOptions.margin') }}</option>
              <option value="character">{{ t('dialogs.imagePosition.relativeOptions.character') }}</option>
            </select>
          </div>
        </fieldset>

        <!-- Vertical -->
        <fieldset class="ipd-fieldset">
          <legend class="ipd-legend">{{ t('dialogs.imagePosition.vertical') }}</legend>
          <div class="ipd-row">
            <label class="ipd-label">Mode</label>
            <select v-model="vMode" class="ipd-select">
              <option value="align">{{ t('dialogs.imagePosition.alignment') }}</option>
              <option value="offset">{{ t('dialogs.imagePosition.offset') }}</option>
            </select>
          </div>
          <div v-if="vMode === 'align'" class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.align') }}</label>
            <select v-model="vAlign" class="ipd-select">
              <option value="top">{{ t('dialogs.imagePosition.alignOptions.top') }}</option>
              <option value="center">{{ t('dialogs.imagePosition.alignOptions.center') }}</option>
              <option value="bottom">{{ t('dialogs.imagePosition.alignOptions.bottom') }}</option>
            </select>
          </div>
          <div v-else class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.offsetPx') }}</label>
            <input v-model.number="vOffset" type="number" class="ipd-input" />
          </div>
          <div class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.relativeTo') }}</label>
            <select v-model="vRelativeTo" class="ipd-select">
              <option value="page">{{ t('dialogs.imagePosition.relativeOptions.page') }}</option>
              <option value="margin">{{ t('dialogs.imagePosition.relativeOptions.margin') }}</option>
              <option value="paragraph">{{ t('dialogs.imagePosition.relativeOptions.paragraph') }}</option>
              <option value="line">{{ t('dialogs.imagePosition.relativeOptions.line') }}</option>
            </select>
          </div>
        </fieldset>

        <!-- Distance from text -->
        <fieldset class="ipd-fieldset">
          <legend class="ipd-legend">Distance from text (px)</legend>
          <div class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.alignOptions.top') }}</label>
            <input v-model.number="distTop" type="number" class="ipd-input" min="0" />
            <label class="ipd-label" style="width:60px">{{ t('dialogs.imagePosition.alignOptions.bottom') }}</label>
            <input v-model.number="distBottom" type="number" class="ipd-input" min="0" />
          </div>
          <div class="ipd-row">
            <label class="ipd-label">{{ t('dialogs.imagePosition.alignOptions.left') }}</label>
            <input v-model.number="distLeft" type="number" class="ipd-input" min="0" />
            <label class="ipd-label" style="width:60px">{{ t('dialogs.imagePosition.alignOptions.right') }}</label>
            <input v-model.number="distRight" type="number" class="ipd-input" min="0" />
          </div>
        </fieldset>
      </div>

      <div class="ipd-dialog__footer">
        <button class="ipd-btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
        <button class="ipd-btn ipd-btn--primary" @click="apply">{{ t('common.apply') }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useTranslation } from '../../i18n';

const { t } = useTranslation();

export interface ImagePositionData {
  horizontal?: { relativeTo?: string; posOffset?: number; align?: string };
  vertical?: { relativeTo?: string; posOffset?: number; align?: string };
  distTop?: number;
  distBottom?: number;
  distLeft?: number;
  distRight?: number;
}

const props = defineProps<{
  isOpen: boolean;
  currentData?: ImagePositionData;
}>();

const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'apply', data: ImagePositionData): void;
}>();

const hMode = ref<'align' | 'offset'>('align');
const hAlign = ref('left');
const hOffset = ref(0);
const hRelativeTo = ref('column');
const vMode = ref<'align' | 'offset'>('align');
const vAlign = ref('top');
const vOffset = ref(0);
const vRelativeTo = ref('paragraph');
const distTop = ref(0);
const distBottom = ref(0);
const distLeft = ref(0);
const distRight = ref(0);

watch(() => props.isOpen, (open) => {
  if (!open) return;
  const d = props.currentData;
  if (d?.horizontal?.align) { hMode.value = 'align'; hAlign.value = d.horizontal.align; }
  else if (d?.horizontal?.posOffset != null) { hMode.value = 'offset'; hOffset.value = d.horizontal.posOffset; }
  hRelativeTo.value = d?.horizontal?.relativeTo ?? 'column';
  if (d?.vertical?.align) { vMode.value = 'align'; vAlign.value = d.vertical.align; }
  else if (d?.vertical?.posOffset != null) { vMode.value = 'offset'; vOffset.value = d.vertical.posOffset; }
  vRelativeTo.value = d?.vertical?.relativeTo ?? 'paragraph';
  distTop.value = d?.distTop ?? 0;
  distBottom.value = d?.distBottom ?? 0;
  distLeft.value = d?.distLeft ?? 0;
  distRight.value = d?.distRight ?? 0;
});

function apply() {
  const data: ImagePositionData = {
    horizontal: {
      relativeTo: hRelativeTo.value,
      ...(hMode.value === 'align' ? { align: hAlign.value } : { posOffset: hOffset.value }),
    },
    vertical: {
      relativeTo: vRelativeTo.value,
      ...(vMode.value === 'align' ? { align: vAlign.value } : { posOffset: vOffset.value }),
    },
    distTop: distTop.value,
    distBottom: distBottom.value,
    distLeft: distLeft.value,
    distRight: distRight.value,
  };
  emit('apply', data);
  emit('close');
}
</script>

<style scoped>
.ipd-overlay { position: fixed; inset: 0; background: var(--doc-overlay); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.ipd-dialog { background: var(--doc-surface); border-radius: 8px; box-shadow: 0 4px 20px var(--doc-shadow); width: 420px; max-width: 90vw; }
.ipd-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid var(--doc-border); font-size: 16px; font-weight: 600; color: var(--doc-text); }
.ipd-dialog__body { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.ipd-dialog__footer { padding: 12px 20px 16px; border-top: 1px solid var(--doc-border); display: flex; justify-content: flex-end; gap: 8px; }
.ipd-fieldset { border: 1px solid var(--doc-border); border-radius: 6px; padding: 10px 12px; margin: 0; }
.ipd-legend { font-size: 12px; font-weight: 600; color: var(--doc-text-muted); padding: 0 4px; }
.ipd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ipd-row:last-child { margin-bottom: 0; }
.ipd-label { width: 70px; font-size: 13px; color: var(--doc-text-muted); flex-shrink: 0; }
.ipd-input, .ipd-select { flex: 1; padding: 5px 8px; border: 1px solid var(--doc-border-dark); border-radius: 4px; font-size: 13px; }
.ipd-btn { padding: 6px 16px; font-size: 13px; border: 1px solid var(--doc-border-dark); border-radius: 4px; cursor: pointer; background: var(--doc-surface); }
.ipd-btn--primary { background: var(--doc-primary); color: var(--doc-on-primary); border-color: var(--doc-primary); }
</style>
