document.addEventListener("DOMContentLoaded", function () {
    const astroCircle = document.getElementById("astroCircle");

    const segmentNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];


    const circleSize = astroCircle.offsetWidth;
    const centerX = circleSize / 2;
    const centerY = circleSize / 2;
    const radius = circleSize / 2;

    const numberRadius = radius + (circleSize < 400 ? 18 : 28);
    const signRadius = radius * 0.84;
    const planetRadius = radius * 0.66;

    for (let i = 0; i < 12; i++) {
        const angleDeg = i * 30;

        // segment divider
        const line = document.createElement("div");
        line.classList.add("segment-line");
        line.style.transform = `translateX(-50%) rotate(${angleDeg}deg)`;
        astroCircle.appendChild(line);

        // middle of segment
        const midAngle = angleDeg + 15;
        const midRad = (midAngle - 90) * Math.PI / 180;

        // outside segment number
        const numberX = centerX + numberRadius * Math.cos(midRad);
        const numberY = centerY + numberRadius * Math.sin(midRad);

        const number = document.createElement("div");
        number.classList.add("segment-number");
        number.innerText = segmentNumbers[i];
        number.style.left = `${numberX}px`;
        number.style.top = `${numberY}px`;
        astroCircle.appendChild(number);

        // inside sign label
        const signX = centerX + signRadius * Math.cos(midRad);
        const signY = centerY + signRadius * Math.sin(midRad);

        const sign = document.createElement("div");
        sign.classList.add("sign-label");
        sign.innerText = signNames[i];
        sign.style.left = `${signX}px`;
        sign.style.top = `${signY}px`;
        astroCircle.appendChild(sign);
    }

    if (typeof samplePlanets !== "undefined" && Array.isArray(samplePlanets)) {
        placeSamplePlanets(astroCircle, samplePlanets, centerX, centerY, planetRadius);
    }
});

function placeSamplePlanets(astroCircle, planets, centerX, centerY, planetRadius) {
    const groupedByHouse = {};

    planets.forEach(planet => {
        if (!groupedByHouse[planet.house]) {
            groupedByHouse[planet.house] = [];
        }
        groupedByHouse[planet.house].push(planet);
    });

    Object.keys(groupedByHouse).forEach(houseKey => {
        const houseNumber = parseInt(houseKey, 10);
        const housePlanets = groupedByHouse[houseNumber];

        const segmentStartAngle = (houseNumber - 1) * 30;
        const segmentMidAngle = segmentStartAngle + 15;
        const segmentMidRad = (segmentMidAngle - 90) * Math.PI / 180;

        const baseX = centerX + planetRadius * Math.cos(segmentMidRad);
        const baseY = centerY + planetRadius * Math.sin(segmentMidRad);

        housePlanets.forEach((planet, index) => {
            const planetEl = document.createElement("div");
            planetEl.classList.add("planet-tag");
            planetEl.innerText = planet.short;
            planetEl.title = planet.name + " | Segment " + planet.house + " | " + planet.sign;

            const verticalOffset = index * 24;
            planetEl.style.left = `${baseX}px`;
            planetEl.style.top = `${baseY + verticalOffset}px`;

            astroCircle.appendChild(planetEl);
        });
    });
}