at2-webapp-dicta2stream/static/dashboard.js

import { showToast } from "./toast.js";

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}
// dashboard.js — toggle guest vs. user dashboard and reposition streams link

// Logout function
let isLoggingOut = false;

async function handleLogout(event) {
  // Prevent multiple simultaneous logout attempts
  if (isLoggingOut) return;
  isLoggingOut = true;
  
  // Prevent default button behavior
  if (event) {
    event.preventDefault();
    event.stopPropagation();
  }
  
  try {
    console.log('[LOGOUT] Starting logout process');
    
    // Clear user data from localStorage
    localStorage.removeItem('uid');
    localStorage.removeItem('uid_time');
    localStorage.removeItem('confirmed_uid');
    localStorage.removeItem('last_page');
    
    // Clear cookie
    document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    
    // Update UI state immediately
    const userDashboard = document.getElementById('user-dashboard');
    const guestDashboard = document.getElementById('guest-dashboard');
    const logoutButton = document.getElementById('logout-button');
    const deleteAccountButton = document.getElementById('delete-account-button');
    
    if (userDashboard) userDashboard.style.display = 'none';
    if (guestDashboard) guestDashboard.style.display = 'block';
    if (logoutButton) logoutButton.style.display = 'none';
    if (deleteAccountButton) deleteAccountButton.style.display = 'none';
    
    // Show success message (only once)
    if (window.showToast) {
      showToast('Logged out successfully');
    } else {
      console.log('Logged out successfully');
    }
    
    // Navigate to register page
    if (window.showOnly) {
      window.showOnly('register-page');
    } else {
      // Fallback to URL change if showOnly isn't available
      window.location.href = '/#register-page';
    }
    
    console.log('[LOGOUT] Logout completed');
    
  } catch (error) {
    console.error('[LOGOUT] Logout failed:', error);
    if (window.showToast) {
      showToast('Logout failed. Please try again.');
    }
  } finally {
    isLoggingOut = false;
  }
}

// Delete account function
async function handleDeleteAccount() {
  try {
    const uid = localStorage.getItem('uid');
    if (!uid) {
      showToast('No user session found. Please log in again.');
      return;
    }

    // Show confirmation dialog
    const confirmed = confirm('⚠️ WARNING: This will permanently delete your account and all your data. This action cannot be undone.\n\nAre you sure you want to delete your account?');
    
    if (!confirmed) {
      return; // User cancelled the deletion
    }

    // Show loading state
    const deleteButton = document.getElementById('delete-account-button');
    const originalText = deleteButton.textContent;
    deleteButton.disabled = true;
    deleteButton.textContent = 'Deleting...';

    // Call the delete account endpoint
    const response = await fetch(`/api/delete-account`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ uid }),
    });

    const result = await response.json();

    if (response.ok) {
      showToast('Account deleted successfully');
      
      // Clear user data
      localStorage.removeItem('uid');
      localStorage.removeItem('uid_time');
      localStorage.removeItem('confirmed_uid');
      document.cookie = 'uid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
      
      // Redirect to home page
      setTimeout(() => {
        window.location.href = '/';
      }, 1000);
    } else {
      throw new Error(result.detail || 'Failed to delete account');
    }
  } catch (error) {
    console.error('Delete account failed:', error);
    showToast(`Failed to delete account: ${error.message}`);
    
    // Reset button state
    const deleteButton = document.getElementById('delete-account-button');
    if (deleteButton) {
      deleteButton.disabled = false;
      deleteButton.textContent = '🗑️ Delete Account';
    }
  }
}

async function initDashboard() {
  console.log('[DASHBOARD] Initializing dashboard...');
  
  // Get all dashboard elements
  const guestDashboard = document.getElementById('guest-dashboard');
  const userDashboard = document.getElementById('user-dashboard');
  const userUpload = document.getElementById('user-upload-area');
  const logoutButton = document.getElementById('logout-button');
  const deleteAccountButton = document.getElementById('delete-account-button');
  
  console.log('[DASHBOARD] Elements found:', {
    guestDashboard: !!guestDashboard,
    userDashboard: !!userDashboard,
    userUpload: !!userUpload,
    logoutButton: !!logoutButton,
    deleteAccountButton: !!deleteAccountButton
  });
  
  // Add click event listeners for logout and delete account buttons
  if (logoutButton) {
    console.log('[DASHBOARD] Adding logout button handler');
    logoutButton.addEventListener('click', handleLogout);
  }
  
  if (deleteAccountButton) {
    console.log('[DASHBOARD] Adding delete account button handler');
    deleteAccountButton.addEventListener('click', (e) => {
      e.preventDefault();
      handleDeleteAccount();
    });
  }

  const uid = getCookie('uid');
  console.log('[DASHBOARD] UID from cookie:', uid);
  
  // Guest view
  if (!uid) {
    console.log('[DASHBOARD] No UID found, showing guest dashboard');
    if (guestDashboard) guestDashboard.style.display = 'block';
    if (userDashboard) userDashboard.style.display = 'none';
    if (userUpload) userUpload.style.display = 'none';
    if (logoutButton) logoutButton.style.display = 'none';
    if (deleteAccountButton) deleteAccountButton.style.display = 'none';
    const mePage = document.getElementById('me-page');
    if (mePage) mePage.style.display = 'none';
    return;
  }
  
  // Logged-in view - show user dashboard by default
  console.log('[DASHBOARD] User is logged in, showing user dashboard');
  
  // Log current display states
  console.log('[DASHBOARD] Current display states:', {
    guestDashboard: guestDashboard ? window.getComputedStyle(guestDashboard).display : 'not found',
    userDashboard: userDashboard ? window.getComputedStyle(userDashboard).display : 'not found',
    userUpload: userUpload ? window.getComputedStyle(userUpload).display : 'not found',
    logoutButton: logoutButton ? window.getComputedStyle(logoutButton).display : 'not found',
    deleteAccountButton: deleteAccountButton ? window.getComputedStyle(deleteAccountButton).display : 'not found'
  });
  
  // Show delete account button for logged-in users
  if (deleteAccountButton) {
    deleteAccountButton.style.display = 'block';
    console.log('[DASHBOARD] Showing delete account button');
  }
  
  // Hide guest dashboard
  if (guestDashboard) {
    console.log('[DASHBOARD] Hiding guest dashboard');
    guestDashboard.style.display = 'none';
  }
  
  // Show user dashboard
  if (userDashboard) {
    console.log('[DASHBOARD] Showing user dashboard');
    userDashboard.style.display = 'block';
    userDashboard.style.visibility = 'visible';
    userDashboard.hidden = false;
    
    // Debug: Check if the element is actually in the DOM
    console.log('[DASHBOARD] User dashboard parent:', userDashboard.parentElement);
    console.log('[DASHBOARD] User dashboard computed display:', window.getComputedStyle(userDashboard).display);
  } else {
    console.error('[DASHBOARD] userDashboard element not found!');
  }
  
  // Show essential elements for logged-in users
  const linksSection = document.getElementById('links');
  if (linksSection) {
    console.log('[DASHBOARD] Showing links section');
    linksSection.style.display = 'block';
  }
  
  const showMeLink = document.getElementById('show-me');
  if (showMeLink && showMeLink.parentElement) {
    console.log('[DASHBOARD] Showing show-me link');
    showMeLink.parentElement.style.display = 'block';
  }
  
  // Show me-page for logged-in users
  const mePage = document.getElementById('me-page');
  if (mePage) {
    console.log('[DASHBOARD] Showing me-page');
    mePage.style.display = 'block';
  }

  try {
    console.log(`[DEBUG] Fetching user data for UID: ${uid}`);
    const res = await fetch(`/me/${uid}`);
    if (!res.ok) {
      const errorText = await res.text();
      console.error(`[ERROR] Failed to fetch user data: ${res.status} ${res.statusText}`, errorText);
      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    }
    const data = await res.json();
    console.log('[DEBUG] User data loaded:', data);
    
    // Ensure upload area is visible if last_page was me-page
    if (userUpload && localStorage.getItem('last_page') === 'me-page') {
      // userUpload visibility is now only controlled by nav.js SPA logic
    }

    // Remove guest warning if present
    const guestMsg = document.getElementById('guest-warning-msg');
    if (guestMsg && guestMsg.parentNode) guestMsg.parentNode.removeChild(guestMsg);
    // Show user dashboard and logout button
    if (userDashboard) userDashboard.style.display = '';
    if (logoutButton) {
      logoutButton.style.display = 'block';
      logoutButton.onclick = handleLogout;
    }

    // Set audio source
    const meAudio = document.getElementById('me-audio');
    if (meAudio && data && data.username) {
      // Use username instead of UID for the audio file path
      meAudio.src = `/audio/${encodeURIComponent(data.username)}/stream.opus?t=${Date.now()}`;
      console.log('Setting audio source to:', meAudio.src);
    } else if (meAudio && uid) {
      // Fallback to UID if username is not available
      meAudio.src = `/audio/${encodeURIComponent(uid)}/stream.opus?t=${Date.now()}`;
      console.warn('Using UID fallback for audio source:', meAudio.src);
    }

    // Update quota and ensure quota meter is visible
    const quotaMeter = document.getElementById('quota-meter');
    const quotaBar = document.getElementById('quota-bar');
    const quotaText = document.getElementById('quota-text');
    if (quotaBar) quotaBar.value = data.quota;
    if (quotaText) quotaText.textContent = `${data.quota} MB used`;
    if (quotaMeter) {
      quotaMeter.hidden = false;
      quotaMeter.style.display = 'block'; // Ensure it's not hidden by display:none
    }
    
    // Fetch and display the list of uploaded files if the function is available
    if (window.fetchAndDisplayFiles) {
      window.fetchAndDisplayFiles(uid);
    }

    // Ensure Streams link remains in nav, not moved
    // (No action needed if static)
  } catch (e) {
    console.warn('Dashboard init error, treating as guest:', e);
    
    userUpload.style.display = '';
    userDashboard.style.display = 'none';
    const registerLink = document.getElementById('guest-login');
    const streamsLink = document.getElementById('guest-streams');
    if (registerLink && streamsLink) {
      registerLink.parentElement.insertAdjacentElement('afterend', streamsLink.parentElement);
    }
  }
}

document.addEventListener('DOMContentLoaded', initDashboard);

// Registration form handler for guests
// Handles the submit event on #register-form, sends data to /register, and alerts the user with the result

document.addEventListener('DOMContentLoaded', () => {
  const regForm = document.getElementById('register-form');
  if (regForm) {
    regForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(regForm);
      try {
        const res = await fetch('/register', {
          method: 'POST',
          body: formData
        });
        let data;
        const contentType = res.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
          data = await res.json();
        } else {
          data = { detail: await res.text() };
        }
        if (res.ok) {
          showToast('Confirmation sent! Check your email.');
        } else {
          showToast('Registration failed: ' + (data.detail || res.status));
        }
      } catch (err) {
        showToast('Network error: ' + err);
      }
    });
  }
});


// Connect Login or Register link to register form

document.addEventListener('DOMContentLoaded', () => {
  // Login/Register (guest)
  const loginLink = document.getElementById('guest-login');
  if (loginLink) {
    loginLink.addEventListener('click', (e) => {
      e.preventDefault();
      document.querySelectorAll('main > section').forEach(sec => {
        sec.hidden = sec.id !== 'register-page';
      });
      const reg = document.getElementById('register-page');
      if (reg) reg.hidden = false;
      reg.scrollIntoView({behavior:'smooth'});
    });
  }
  // Terms of Service (all dashboards)
  const termsLinks = [
    document.getElementById('guest-terms'),
    document.getElementById('user-terms')
  ];
  termsLinks.forEach(link => {
    if (link) {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelectorAll('main > section').forEach(sec => {
          sec.hidden = sec.id !== 'terms-page';
        });
        const terms = document.getElementById('terms-page');
        if (terms) terms.hidden = false;
        terms.scrollIntoView({behavior:'smooth'});
      });
    }
  });

  // Imprint (all dashboards)
  const imprintLinks = [
    document.getElementById('guest-imprint'),
    document.getElementById('user-imprint')
  ];
  imprintLinks.forEach(link => {
    if (link) {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelectorAll('main > section').forEach(sec => {
          sec.hidden = sec.id !== 'imprint-page';
        });
        const imprint = document.getElementById('imprint-page');
        if (imprint) imprint.hidden = false;
        imprint.scrollIntoView({behavior:'smooth'});
      });
    }
  });

  // Privacy Policy (all dashboards)
  const privacyLinks = [
    document.getElementById('guest-privacy'),
    document.getElementById('user-privacy')
  ];
  privacyLinks.forEach(link => {
    if (link) {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelectorAll('main > section').forEach(sec => {
          sec.hidden = sec.id !== 'privacy-page';
        });
        const privacy = document.getElementById('privacy-page');
        if (privacy) privacy.hidden = false;
        privacy.scrollIntoView({behavior:'smooth'});
      });
    }
  });
});