"use strict";

import { ERROR_SERVER, NO_PRODUCTS_IN_THIS_CATEGORY } from './constants.js';
import { showErrorMessage } from './utils.js';

/* =====================================
   ЗАЩИТА ШАБЛОНА brand.html
   ===================================== */
(function () {
    const path = window.location.pathname;

    if (path !== '/brand.html') return;

    const params = new URLSearchParams(window.location.search);
    const brand = params.get('brand');

    if (!brand) {
        const meta = document.createElement('meta');
        meta.name = 'robots';
        meta.content = 'noindex, nofollow';
        document.head.appendChild(meta);

        window.location.replace('/');
    }
})();

/* =====================================
   ОСНОВНОЙ КОД
   ===================================== */

document.addEventListener('DOMContentLoaded', () => {
    const cardsContainer = document.querySelector('.cards');
    const brandTitle = document.getElementById('brand-name');
    const errorContainer = document.querySelector('.error-message');

    const getBrandFromURL = () => {
        const params = new URLSearchParams(window.location.search);
        return params.get('brand');
    };

    const loadProducts = async () => {
        try {
            const response = await fetch('/data/products.json');
            if (!response.ok) throw new Error(ERROR_SERVER);

            const products = await response.json();
            const brand = getBrandFromURL();

            if (!brand) return;

            const decodedBrand = decodeURIComponent(brand);

            setCanonicalForBrand(decodedBrand);
            optimizeBrandSEO(decodedBrand);

            brandTitle.textContent = decodedBrand;

            const filteredProducts = products.filter(
                product => product.fabric === decodedBrand
            );

            if (!filteredProducts.length) {
                showErrorMessage(NO_PRODUCTS_IN_THIS_CATEGORY, errorContainer);
                return;
            }

            renderProducts(filteredProducts);

        } catch (error) {
            showErrorMessage(ERROR_SERVER, errorContainer);
            console.error(error);
        }
    };

    const renderProducts = (products) => {
        cardsContainer.innerHTML = products.map(product => `
            <div class="card" data-product-id="${product.id}">
                <div class="card__top">
                    <a href="/card.html?id=${product.id}" class="card__image">
                        <img src="${product.img}" alt="${product.title}">
                    </a>
                    ${product.discount > 0
                        ? `<div class="card__label">-${product.discount}%</div>`
                        : ''}
                </div>
                <div class="card__bottom">
                    <div class="card__prices">
                        <div class="card__price card__price--discount">
                            ${(product.price * (1 - product.discount / 100)).toFixed(0)} ₽
                        </div>
                        ${product.discount > 0
                            ? `<div class="card__price card__price--common">${product.price.toFixed(0)} ₽</div>`
                            : ''}
                    </div>
                    <a href="/card.html?id=${product.id}" class="card__title">
                        ${product.title}
                    </a>
                    <button class="card__add">В корзину</button>
                </div>
            </div>
        `).join('');
    };

    loadProducts();
});

/* =====================================
   SEO
   ===================================== */

function setCanonicalForBrand(brand) {
    const baseUrl = `${location.protocol}//${location.host}${location.pathname}`;
    const canonicalUrl = `${baseUrl}?brand=${encodeURIComponent(brand)}`;

    let link = document.querySelector('link[rel="canonical"]');
    if (!link) {
        link = document.createElement('link');
        link.rel = 'canonical';
        document.head.appendChild(link);
    }

    link.href = canonicalUrl;
}

function optimizeBrandSEO(brand) {
    document.title = `Плитка ${brand} — купить в Москве | Ceramogranit Studio`;

    let meta = document.querySelector('meta[name="description"]');
    if (!meta) {
        meta = document.createElement('meta');
        meta.name = 'description';
        document.head.appendChild(meta);
    }

    meta.content = `Каталог плитки ${brand}. Актуальные коллекции, цены, фото. Купить плитку ${brand} в Ceramogranit Studio.`;
}