// Debug script to inspect login page structure and Tailwind CSS
// Run this by visiting http://localhost:3000/auth/login in a browser and using DevTools

console.log('=== DEBUGGING LOGIN PAGE STRUCTURE ===');

// This will be run in browser console after navigating to http://localhost:3000/auth/login

// 1. Check if page loads properly
console.log('1. Checking page load...');
console.log('Page title:', document.title);

// 2. Check main container elements
console.log('\n2. Checking main containers:');
const mainDivs = document.querySelectorAll('div');
console.log('Total divs found:', mainDivs.length);

// Find key containers
const body = document.body;
console.log('Body class attribute:', body.className);

// 3. Check for login-specific elements
console.log('\n3. Checking login elements:');
const h1Elements = document.querySelectorAll('h1');
console.log('H1 elements count:', h1Elements.length);
h1Elements.forEach((el, i) => {
    console.log(`  H1 ${i+1}: "${el.textContent}"`);
});

// 4. Check for form elements
console.log('\n4. Checking form structure:');
const forms = document.querySelectorAll('form');
console.log('Forms found:', forms.length);

// 5. Check for Tailwind classes in key areas
console.log('\n5. Checking for Tailwind classes in main container:');
const mainContainer = document.querySelector('div.min-h-screen.bg-gray-50');
if (mainContainer) {
    console.log('✓ Main container with Tailwind classes found');
    console.log('Main container classes:', mainContainer.className);
} else {
    console.log('✗ Main container not found with exact classes');
}

console.log('\n6. Looking for form container:');
const formContainer = document.querySelector('div.bg-white.rounded-xl.shadow-lg.p-8');
if (formContainer) {
    console.log('✓ Form container found with Tailwind classes');
    console.log('Form container classes:', formContainer.className);
} else {
    console.log('✗ Form container not found with exact classes');
    // Try to find similar containers
    const containers = document.querySelectorAll('div.bg-white');
    console.log('Containers with bg-white class:', containers.length);
}

// 7. Check for inputs and buttons
console.log('\n7. Checking form elements:');
const inputs = document.querySelectorAll('input');
console.log('Inputs found:', inputs.length);
inputs.forEach((input, i) => {
    if (input.type === 'email' || input.type === 'password') {
        console.log(`  Input ${i+1}: type=${input.type}, name=${input.name}`);
        console.log(`    Classes: ${input.className}`);
    }
});

const buttons = document.querySelectorAll('button');
console.log('Buttons found:', buttons.length);
buttons.forEach((btn, i) => {
    console.log(`  Button ${i+1}: type=${btn.type}, text="${btn.textContent.substring(0, 30)}..."`);
});

// 8. Check for expected text content
console.log('\n8. Checking for expected text:');
const paragraphs = document.querySelectorAll('p');
console.log('Paragraphs found:', paragraphs.length);

paragraphs.forEach((p, i) => {
    const text = p.textContent.trim();
    if (text.includes('Sign in to your account')) {
        console.log('✓ Found "Sign in to your account" paragraph');
    }
    if (text.includes('Welcome back! Please enter your details')) {
        console.log('✓ Found "Welcome back! Please enter your details" paragraph');
    }
});

console.log('\n=== DEBUG COMPLETE ===');