<template>
  <section class="settings-section">
    <h2>Réglage des pages</h2>

    <div class="field">
      <label for="page-format">Format d'impression</label>
      <select id="page-format" v-model="pageFormat">
        <option value="A4">A4</option>
        <option value="A5">A5</option>
        <option value="A3">A3</option>
        <option value="letter">Letter</option>
        <option value="legal">Legal</option>
      </select>
    </div>

    <div class="field">
      <label for="page-width">Largeur</label>
      <input
        id="page-width"
        type="text"
        :value="pageWidth"
        disabled
      />
    </div>

    <div class="field">
      <label for="page-height">Hauteur</label>
      <input
        id="page-height"
        type="text"
        :value="pageHeight"
        disabled
      />
    </div>

    <div class="subsection">
      <h3>Marges</h3>

      <div class="field">
        <label for="margin-top">Haut</label>
        <div class="field-with-unit">
          <input
            id="margin-top"
            type="number"
            v-model.number="margins.top.value"
            min="0"
          />
          <div class="unit-toggle">
            <button
              type="button"
              :class="{ active: margins.top.unit === 'mm' }"
              @click="margins.top.unit = 'mm'"
            >
              mm
            </button>
            <button
              type="button"
              :class="{ active: margins.top.unit === 'px' }"
              @click="margins.top.unit = 'px'"
            >
              px
            </button>
          </div>
        </div>
      </div>

      <div class="field">
        <label for="margin-bottom">Bas</label>
        <div class="field-with-unit">
          <input
            id="margin-bottom"
            type="number"
            v-model.number="margins.bottom.value"
            min="0"
          />
          <div class="unit-toggle">
            <button
              type="button"
              :class="{ active: margins.bottom.unit === 'mm' }"
              @click="margins.bottom.unit = 'mm'"
            >
              mm
            </button>
            <button
              type="button"
              :class="{ active: margins.bottom.unit === 'px' }"
              @click="margins.bottom.unit = 'px'"
            >
              px
            </button>
          </div>
        </div>
      </div>

      <div class="field">
        <label for="margin-left">Gauche</label>
        <div class="field-with-unit">
          <input
            id="margin-left"
            type="number"
            v-model.number="margins.left.value"
            min="0"
          />
          <div class="unit-toggle">
            <button
              type="button"
              :class="{ active: margins.left.unit === 'mm' }"
              @click="margins.left.unit = 'mm'"
            >
              mm
            </button>
            <button
              type="button"
              :class="{ active: margins.left.unit === 'px' }"
              @click="margins.left.unit = 'px'"
            >
              px
            </button>
          </div>
        </div>
      </div>

      <div class="field">
        <label for="margin-right">Droite</label>
        <div class="field-with-unit">
          <input
            id="margin-right"
            type="number"
            v-model.number="margins.right.value"
            min="0"
          />
          <div class="unit-toggle">
            <button
              type="button"
              :class="{ active: margins.right.unit === 'mm' }"
              @click="margins.right.unit = 'mm'"
            >
              mm
            </button>
            <button
              type="button"
              :class="{ active: margins.right.unit === 'px' }"
              @click="margins.right.unit = 'px'"
            >
              px
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="field">
      <label for="background">Arrière-plan</label>
      <div class="field-with-unit">
        <input
          id="background"
          type="text"
          v-model="background.value"
        />
        <div class="unit-toggle">
          <button
            type="button"
            :class="{ active: background.format === 'rgb' }"
            @click="background.format = 'rgb'"
          >
            rgb
          </button>
          <button
            type="button"
            :class="{ active: background.format === 'hex' }"
            @click="background.format = 'hex'"
          >
            hex
          </button>
        </div>
      </div>
    </div>

    <div class="field">
      <label for="pattern">Motif</label>
      <select id="pattern" v-model="pattern">
        <option value="">Choisissez</option>
        <option value="dots">Points</option>
        <option value="lines">Lignes</option>
        <option value="grid">Grille</option>
      </select>
    </div>

    <div class="field checkbox-field">
      <input
        id="page-numbers"
        type="checkbox"
        v-model="pageNumbers"
      />
      <label for="page-numbers">Numéro de page</label>
    </div>

    <div class="field checkbox-field">
      <input
        id="running-title"
        type="checkbox"
        v-model="runningTitle"
      />
      <label for="running-title">Titre courant</label>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useStylesheetStore } from '../../stores/stylesheet';

const stylesheetStore = useStylesheetStore();

let isUpdatingFromStore = false;
let updateTimer = null;

const pageFormat = ref('A4');

const pageFormats = {
  A4: { width: '210mm', height: '297mm' },
  A5: { width: '148mm', height: '210mm' },
  A3: { width: '297mm', height: '420mm' },
  letter: { width: '8.5in', height: '11in' },
  legal: { width: '8.5in', height: '14in' }
};

const pageWidth = computed(() => pageFormats[pageFormat.value].width);
const pageHeight = computed(() => pageFormats[pageFormat.value].height);

const margins = ref({
  top: { value: 20, unit: 'mm' },
  bottom: { value: 20, unit: 'mm' },
  left: { value: 20, unit: 'mm' },
  right: { value: 20, unit: 'mm' }
});

const background = ref({
  value: '',
  format: 'hex'
});

const pattern = ref('');
const pageNumbers = ref(false);
const runningTitle = ref(false);

const debouncedUpdate = (callback) => {
  clearTimeout(updateTimer);
  updateTimer = setTimeout(callback, 1000);
};

watch(pageFormat, (newFormat) => {
  if (isUpdatingFromStore) return;

  debouncedUpdate(() => {
    stylesheetStore.updateProperty('@page', 'size', newFormat, '');
  });
});

watch(margins, (newMargins) => {
  if (isUpdatingFromStore) return;

  debouncedUpdate(() => {
    const marginValue = `${newMargins.top.value}${newMargins.top.unit} ${newMargins.right.value}${newMargins.right.unit} ${newMargins.bottom.value}${newMargins.bottom.unit} ${newMargins.left.value}${newMargins.left.unit}`;

    const currentBlock = stylesheetStore.extractBlock('@page');
    const updatedBlock = currentBlock.replace(
      /(margin:\s*)[^;]+/,
      `$1${marginValue}`
    );

    stylesheetStore.content = stylesheetStore.content.replace(currentBlock, updatedBlock);
  });
}, { deep: true });

watch(background, (newBg) => {
  if (!newBg.value) return;
  if (isUpdatingFromStore) return;

  debouncedUpdate(() => {
    const currentBlock = stylesheetStore.extractBlock('@page');

    if (currentBlock.includes('background:')) {
      const updatedBlock = currentBlock.replace(
        /(background:\s*)[^;]+/,
        `$1${newBg.value}`
      );
      stylesheetStore.content = stylesheetStore.content.replace(currentBlock, updatedBlock);
    } else {
      const updatedBlock = currentBlock.replace(
        /(\s*})$/,
        `  background: ${newBg.value};\n$1`
      );
      stylesheetStore.content = stylesheetStore.content.replace(currentBlock, updatedBlock);
    }
  });
}, { deep: true });

watch(pattern, (newPattern) => {
  if (!newPattern || isUpdatingFromStore) return;

  debouncedUpdate(() => {
    // TODO: implement pattern application
  });
});

watch(pageNumbers, (enabled) => {
  if (isUpdatingFromStore) return;

  debouncedUpdate(() => {
    // TODO: implement page numbers toggle
  });
});

watch(runningTitle, (enabled) => {
  if (isUpdatingFromStore) return;

  debouncedUpdate(() => {
    // TODO: implement running title toggle
  });
});

const syncFromStore = () => {
  isUpdatingFromStore = true;

  try {
    const pageBlock = stylesheetStore.extractBlock('@page');

    const sizeMatch = pageBlock.match(/size:\s*([A-Za-z0-9]+)/);
    if (sizeMatch) {
      pageFormat.value = sizeMatch[1];
    }

    const marginMatch = pageBlock.match(/margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i);
    if (marginMatch) {
      margins.value.top = { value: parseFloat(marginMatch[1]), unit: marginMatch[2] };
      margins.value.right = { value: parseFloat(marginMatch[3]), unit: marginMatch[4] };
      margins.value.bottom = { value: parseFloat(marginMatch[5]), unit: marginMatch[6] };
      margins.value.left = { value: parseFloat(marginMatch[7]), unit: marginMatch[8] };
    }

    const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
    if (bgMatch) {
      background.value.value = bgMatch[1].trim();
    }
  } finally {
    isUpdatingFromStore = false;
  }
};

watch(() => stylesheetStore.content, () => {
  if (!isUpdatingFromStore) {
    syncFromStore();
  }
});

onMounted(() => {
  syncFromStore();
});
</script>
