// SEO Page - Character counter and live preview

import type { ApiResponse } from '../types/api/ApiResponse';

interface SeoFormElement extends HTMLFormElement {
    dataset: {
        pageId?: string;
    };
}

interface PreviewElement extends HTMLElement {
    dataset: {
        defaultTitle?: string;
    };
}

const titleInput = document.getElementById('metaTitle') as HTMLInputElement | null;
const descInput = document.getElementById('metaDescription') as HTMLTextAreaElement | null;
const titleCount = document.getElementById('title-count');
const descCount = document.getElementById('desc-count');
const previewTitle = document.getElementById('preview-title') as PreviewElement | null;
const previewDesc = document.getElementById('preview-desc');
const seoForm = document.getElementById('seo-form') as SeoFormElement | null;

// Read default values from data attributes
const defaultTitle = previewTitle?.dataset.defaultTitle || '';
const pageId = seoForm?.dataset.pageId || '';

function updateCount(): void {
    if (titleInput && titleCount) {
        titleCount.textContent = `${titleInput.value.length}/60`;
    }
    if (descInput && descCount) {
        descCount.textContent = `${descInput.value.length}/160`;
    }
    if (previewTitle) {
        previewTitle.textContent = titleInput?.value || defaultTitle;
    }
    if (previewDesc) {
        previewDesc.textContent = descInput?.value || 'Aucune description';
    }
}

if (titleInput) {
    titleInput.addEventListener('input', updateCount);
}
if (descInput) {
    descInput.addEventListener('input', updateCount);
}

// Initial update
updateCount();

// Form submission
if (seoForm && pageId) {
    seoForm.addEventListener('submit', function(e: Event): void {
        e.preventDefault();

        if (!titleInput || !descInput) return;

        fetch(`/api/admin/seo/page/${pageId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                metaTitle: titleInput.value,
                metaDescription: descInput.value
            })
        })
        .then(response => response.json())
        .then((data: ApiResponse) => {
            if (data.success) {
                const status = document.getElementById('status') as HTMLElement | null;
                if (status) {
                    status.className = 'status success';
                    status.textContent = 'Meta tags enregistrés avec succès !';
                    setTimeout(() => status.style.display = 'none', 3000);
                }
            }
        });
    });
}