script.js

const API_KEY = '443a2d95';
const BASE_URL = 'https://www.omdbapi.com/';

// State
const state = {
    user: null,
    isSignUp: false,
    columns: [
        { title: "Trending Now", query: "Avengers" },
        { title: "Top Rated", query: "Inception" },
        { title: "Action Thrillers", query: "Mission Impossible" },
        { title: "Comedy Hits", query: "Hangover" },
        { title: "Sci-Fi & Fantasy", query: "Star Wars" },
        { title: "Animation", query: "Toy Story" }
    ]
};

// DOM Elements
const loginForm = document.getElementById('login-form');
const landingView = document.getElementById('landing-view');
const browseView = document.getElementById('browse-view');
const userDisplay = document.getElementById('user-display');
const authBtn = document.getElementById('auth-btn');
const rowsContainer = document.querySelector('.rows-container');
const modal = document.getElementById('movie-modal');
const closeModal = document.querySelector('.close-modal');
const signupLink = document.getElementById('signup-link');
const authToggleText = document.getElementById('auth-toggle-text');
const formTitle = document.querySelector('.login-box h2');
const submitBtn = document.querySelector('.login-box button[type=submit]');

// Event Listeners
document.addEventListener('DOMContentLoaded', () => {
    checkAuth();
});

signupLink.addEventListener('click', (e) => {
    e.preventDefault();
    toggleAuthMode();
});

loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const name = document.getElementById('name').value;
    const mobile = document.getElementById('mobile').value;
    const confirmPassword = document.getElementById('confirm-password').value;

    if (state.isSignUp) {
        if (!name || !mobile || !email || !password || !confirmPassword) {
            alert('Please fill in all fields.');
            return;
        }
        if (password !== confirmPassword) {
            alert('Passwords do not match! Please try again.');
            return;
        }

        // Check if user already exists
        const users = JSON.parse(localStorage.getItem('movieadda_users') || '[]');
        if (users.find(u => u.email === email)) {
            alert('User already exists! Please login.');
            toggleAuthMode();
            return;
        }

        // Register new user
        const newUser = { name, mobile, email, password };
        users.push(newUser);
        localStorage.setItem('movieadda_users', JSON.stringify(users));

        alert(`Account created for ${name}! Please Login.`);
        toggleAuthMode(); // Switch back to login
    } else {
        if (email && password) {
            // Verify credentials
            const users = JSON.parse(localStorage.getItem('movieadda_users') || '[]');
            const validUser = users.find(u => u.email === email && u.password === password);

            if (validUser) {
                login(validUser);
            } else {
                alert('Invalid email or password! Please sign up if you are new.');
            }
        }
    }
});

authBtn.addEventListener('click', () => {
    if (state.user) {
        logout();
    } else {
        // Toggle view if needed, but usually button is just there
    }
});

closeModal.addEventListener('click', () => {
    modal.classList.add('hidden');
});

window.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.classList.add('hidden');
    }
});

// Auth Functions
function toggleAuthMode() {
    state.isSignUp = !state.isSignUp;
    const signupFields = document.querySelectorAll('.signup-only');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');

    if (state.isSignUp) {
        formTitle.textContent = 'Sign Up';
        submitBtn.textContent = 'Sign Up';

        // Show signup fields
        signupFields.forEach(field => field.classList.remove('hidden'));

        // Update placeholders
        document.getElementById('name').placeholder = "Enter your name";
        document.getElementById('mobile').placeholder = "Mobile number";
        emailInput.placeholder = "Enter your gmail";
        passwordInput.placeholder = "Enter your password";

        authToggleText.innerHTML = 'Already have an account? <a href="#" id="signin-link">Login now</a>.';
        document.getElementById('signin-link').addEventListener('click', (e) => {
            e.preventDefault();
            toggleAuthMode();
        });
    } else {
        formTitle.textContent = 'Login';
        submitBtn.textContent = 'Login';

        // Hide signup fields
        signupFields.forEach(field => field.classList.add('hidden'));

        // Reset placeholders
        emailInput.placeholder = "Email or mobile number";
        passwordInput.placeholder = "Password";

        authToggleText.innerHTML = 'New to MoVIE AddA? <a href="#" id="signup-link">Sign up now</a>.';
        document.getElementById('signup-link').addEventListener('click', (e) => {
            e.preventDefault();
            toggleAuthMode();
        });
    }
}

function login(user) {
    state.user = user;
    localStorage.setItem('movieadda_user', JSON.stringify(state.user));
    updateUI();
    loadContent();
}

function logout() {
    state.user = null;
    localStorage.removeItem('movieadda_user');
    updateUI();
}

function checkAuth() {
    const storedUser = localStorage.getItem('movieadda_user');
    if (storedUser) {
        state.user = JSON.parse(storedUser);
        updateUI();
        loadContent();
    } else {
        updateUI();
    }
}

function updateUI() {
    if (state.user) {
        landingView.classList.remove('active');
        landingView.classList.add('hidden'); // Hide landing
        browseView.classList.remove('hidden');
        browseView.classList.add('active'); // Show browse

        userDisplay.textContent = state.user.name || state.user.email;
        userDisplay.classList.remove('hidden');
        authBtn.textContent = 'Sign Out';
        authBtn.classList.remove('btn-primary');
        authBtn.classList.add('btn-light');
    } else {
        landingView.classList.remove('hidden');
        landingView.classList.add('active'); // Show landing
        browseView.classList.remove('active');
        browseView.classList.add('hidden'); // Hide browse

        userDisplay.textContent = '';
        userDisplay.classList.add('hidden');
        authBtn.textContent = 'Login';
        authBtn.classList.add('btn-primary');
        authBtn.classList.remove('btn-light');

        // Clear content
        rowsContainer.innerHTML = '';
    }
}

// Data Functions
async function fetchMovies(query) {
    try {
        const response = await fetch(`${BASE_URL}?apikey=${API_KEY}&s=${query}&type=movie`);
        const data = await response.json();
        return data.Search || [];
    } catch (error) {
        console.error("Failed to fetch movies", error);
        return [];
    }
}

async function fetchMovieDetails(id) {
    try {
        const response = await fetch(`${BASE_URL}?apikey=${API_KEY}&i=${id}&plot=full`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Failed to fetch movie details", error);
        return null;
    }
}

async function loadContent() {
    // Clear previous
    rowsContainer.innerHTML = '';

    // Load Banner (Random from first category)
    const bannerMovies = await fetchMovies(state.columns[0].query);
    if (bannerMovies.length > 0) {
        const randomMovie = bannerMovies[Math.floor(Math.random() * bannerMovies.length)];
        // Get full details for banner to show description
        const details = await fetchMovieDetails(randomMovie.imdbID);
        setupBanner(details);
    }

    // Load Rows
    for (const col of state.columns) {
        const movies = await fetchMovies(col.query);
        createRow(col.title, movies);
    }
}

function setupBanner(movie) {
    if (!movie) return;

    const banner = document.querySelector('.banner');
    const title = document.querySelector('.banner-title');
    const desc = document.querySelector('.banner-desc');

    title.textContent = movie.Title;
    desc.textContent = truncate(movie.Plot, 150);

    // Use high res poster if available or fallback
    banner.style.backgroundImage = `url(${movie.Poster})`;
    // Note: OMDB posters are small, in a real app we'd use TMDB for high-res backdrops
}

function createRow(title, movies) {
    if (!movies || movies.length === 0) return;

    const row = document.createElement('div');
    row.className = 'row';

    const header = document.createElement('h2');
    header.textContent = title;
    row.appendChild(header);

    const matchPosters = document.createElement('div');
    matchPosters.className = 'row-posters';

    movies.forEach(movie => {
        if (movie.Poster && movie.Poster !== 'N/A') {
            const img = document.createElement('img');
            img.className = 'row-poster';
            img.src = movie.Poster;
            img.alt = movie.Title;
            img.addEventListener('click', () => openModal(movie.imdbID));
            matchPosters.appendChild(img);
        }
    });

    row.appendChild(matchPosters);
    rowsContainer.appendChild(row);
}

async function openModal(id) {
    const movie = await fetchMovieDetails(id);
    if (!movie) return;

    document.getElementById('modal-poster').src = movie.Poster;
    document.getElementById('modal-title').textContent = movie.Title;
    document.getElementById('modal-year').textContent = movie.Year;
    document.getElementById('modal-rating').textContent = movie.Rated;
    document.getElementById('modal-runtime').textContent = movie.Runtime;
    document.getElementById('modal-plot').textContent = movie.Plot;
    document.getElementById('modal-director').textContent = movie.Director;
    document.getElementById('modal-actors').textContent = movie.Actors;
    document.getElementById('modal-genre').textContent = movie.Genre;

    modal.classList.remove('hidden');
}

function truncate(str, n) {
    return str?.length > n ? str.substr(0, n - 1) + "..." : str;
}