// This code provides a foundation for a website that allows anyone to generate a personalized "TV" page by supplying:
// - A YouTube Playlist ID
// - A name (used to generate {name}TV)
// - A description
//
// ✅ Users receive a **shareable link** to their generated page in the format: https://agedaily.com/{username}TV
// ✅ No user registration or login is required.

// -------------------------
// Frontend Code
// -------------------------

// Handle form submission to generate the custom TV page
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('channel-form');

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const username = document.getElementById('username').value.trim();
        const playlistId = document.getElementById('playlistId').value.trim();
        const description = document.getElementById('description').value.trim();

        if (!username || !playlistId || !description) {
            alert('Please fill in all fields.');
            return;
        }

        const channelSlug = `${username}TV`.replace(/\s+/g, '');
        const generatedURL = `${window.location.origin}/${channelSlug}?playlistId=${encodeURIComponent(playlistId)}&description=${encodeURIComponent(description)}`;

        // Display the shareable link
        document.getElementById('shareable-link').innerHTML = `
            <p style="color: green; font-weight: bold;">Your TV page is ready!</p>
            <a href="${generatedURL}" target="_blank" style="font-size: 18px; color: blue; text-decoration: underline;">${generatedURL}</a>
        `;
    });
});

// -------------------------
// Channel Page Code (channel.html)
// -------------------------
// This code should be placed on the channel page template (e.g., channel.html) to render the user's TV page.

// Function to get URL parameters
function getURLParameter(name) {
    return new URLSearchParams(window.location.search).get(name);
}

// Generate the custom channel page based on URL parameters
function generateChannelPageFromURL() {
    const urlParts = window.location.pathname.split('/');
    const usernameSlug = urlParts[urlParts.length - 1].replace('TV', '');
    const playlistId = getURLParameter('playlistId');
    const description = getURLParameter('description');

    if (!usernameSlug || !playlistId || !description) {
        document.body.innerHTML = '<p style="color: red; text-align: center; font-size: 20px;">Invalid or missing data. Please go back and create your TV page.</p>';
        return;
    }

    document.body.innerHTML = `
        <div id="channel-info" style="text-align: center; margin-top: 20px;">
            <h1 id="channel-name" style="color: red; font-size: 32px;">${usernameSlug}TV</h1>
            <p id="channel-description" style="font-size: 18px; color: red;">${decodeURIComponent(description)}</p>
        </div>
        <div id="youtube-player" style="margin-top: 30px;"></div>
        <script src="https://www.youtube.com/iframe_api"></script>
    `;

    window.onYouTubeIframeAPIReady = function () {
        new YT.Player("youtube-player", {
            height: "100%",
            width: "100%",
            playerVars: {
                autoplay: 1,
                mute: 1,
                controls: 0,
                modestbranding: 1,
                loop: 1,
                playlist: playlistId
            },
            events: {
                onReady: (event) => event.target.playVideo(),
                onStateChange: (event) => {
                    if (event.data === YT.PlayerState.ENDED) {
                        event.target.nextVideo();
                    }
                }
            }
        });
    };
}

// Call the function if on a channel page
if (window.location.pathname.includes('TV')) {
    generateChannelPageFromURL();
}

// -------------------------
// HTML Structure (index.html)
// -------------------------
// <div id="form-container" style="text-align: center; margin-top: 50px;">
//     <h2>Create Your TV Page</h2>
//     <form id="channel-form" style="max-width: 400px; margin: 0 auto;">
//         <label for="username">Name:</label><br>
//         <input type="text" id="username" name="username" placeholder="Enter your name" required><br><br>
//         <label for="playlistId">YouTube Playlist ID:</label><br>
//         <input type="text" id="playlistId" name="playlistId" placeholder="Enter playlist ID" required><br><br>
//         <label for="description">Description:</label><br>
//         <textarea id="description" name="description" placeholder="Enter description" rows="4" required></textarea><br><br>
//         <button type="submit">Generate TV Page</button>
//     </form>
//     <div id="shareable-link" style="margin-top: 20px;"></div>
// </div>
// <script src="https://agedaily.com/vidscript.js"></script>

// -------------------------
// How It Works:
// -------------------------
// ✅ Users fill out the form with their name, playlist ID, and description.
// ✅ On submission, a **shareable link** (https://agedaily.com/{username}TV) with embedded URL parameters is generated.
// ✅ The generated page reads the parameters to display the personalized channel.
// ✅ No backend required—fully client-side solution.

// -------------------------
// Deployment Instructions:
// -------------------------
// ✅ Deploy both index.html and channel.html on agedaily.com.
// ✅ Ensure your hosting platform (Netlify, Vercel, etc.) has clean URL routing enabled.
// ✅ Example URL: https://agedaily.com/BriannaTV?playlistId=PLABC1234567890&description=Welcome%20to%20my%20channel!

// ✅ Users can share their generated links easily.
// ✅ No sign-up or login necessary—instant TV pages for everyone!