@extends('layouts.app')

@section('title', 'Veriqo - New Strategic Analysis')

@section('content')

    <main class="page-content">

        <!-- page banner -->
        <section class="page_banner animate__animated animate__fadeInLeft animate__delay-0.5s">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <div class="page_banner_content">
                            <h1>New Strategic Analysis</h1>
                            <p>Frame your decision with precision. Select perspectives, upload context, and get board-level insights.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Free trial -->
         <section class="free_trial page_sec animate-on-scroll" data-animation="fadeInRight">
            <div class="container">
                <div class="trial_content">
                    <form action="javascript:void(0);" method="post" id="analysisForm">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="insight">Describe Your Strategic Decision</label>
                                    <textarea name="" rows="4" class="form-control" id="insight" placeholder="e.g., Should we acquire TechCorp's AI division for $127M? What are the financial, legal, and operational implications?"></textarea>
                                    <!-- <input type="text" class="form-control" id="insight" placeholder="Try: "How should we respond to competitor X?""> -->
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6">
                                <div class="attach_file">
                                    <label for='input-file'>
                                      <img src="./assets/image/attach.png" width="12" alt="Attach file" srcset="">
                                      Attach context (PDF, DOC, TXT)
                                    </label>
                                    <input id='input-file' type='file' />
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group up_arrow_btn">
                                    <button type="button" class="btn primary_btn w-100" id="analyzeBtn">Analyze Decision from Board Perspectives  <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                                            <path d="M342.6 81.4C330.1 68.9 309.8 68.9 297.3 81.4L137.3 241.4C124.8 253.9 124.8 274.2 137.3 286.7C149.8 299.2 170.1 299.2 182.6 286.7L288 181.3L288 552C288 569.7 302.3 584 320 584C337.7 584 352 569.7 352 552L352 181.3L457.4 286.7C469.9 299.2 490.2 299.2 502.7 286.7C515.2 274.2 515.2 253.9 502.7 241.4L342.7 81.4z"/>
                                        </svg>
                                    </span></button>
                                   
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group text-center">
                                    <button id="moreOptionsBtn" class="btn option_btn">
                                        <img src="./assets/image/plus.png" width="20" alt="" srcset="">
                                        More Options
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
         </section>

         <!-- options -->
        <section id="optionsSection" class="options">
            <div class="container">
                <div class="option_list">
                    <ul>
                        <li>
                            <p>Deep Research</p>
                        </li>
                        <li>
                            <p>Strategic Canvas</p>
                        </li>
                        <li>
                            <p>Visual Analysis</p>
                        </li>
                        <li>
                            <p>Executive Learning</p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

@endsection

  <!-- Confirmation Modal -->
  <div id="confirmationModal" class="confirmation-modal" style="display: none;">
    <div class="modal-content">
      <p class="confirmation-message" id="confirmationMessage"></p>
      <div class="confirmation-buttons">
        <button id="confirmationYesBtn" class="btn-confirm-yes">Yes</button>
        <button id="confirmationNoBtn" class="btn-confirm-no">No</button>
      </div>
    </div>
  </div>

  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script>
    // Backend API base URL - Update this when deploying to production
    // const API_BASE_URL = 'http://192.168.1.145:8000';
    const API_BASE_URL = 'https://veriqo.xceltec.in';
    
    $(document).ready(function() {
      var accessToken = localStorage.getItem('access_token');
      // Check authentication status and show/hide profile or sign in button
      function checkAuthAndUpdateUI() {
        // alert("HII");
        
        if (accessToken) {
          // User is logged in - show profile, hide sign in button
          $('#profileSection').show();
          $('#signInButton').hide();
          // Update profile initial
          updateProfileInitial();
        } else {
          // User is not logged in - show sign in button, hide profile
          $('#profileSection').hide();
          $('#signInButton').show();
        }
      }

      // Prevent form submission
      $('#analysisForm').on('submit', function (e) {
        console.log('Form submit event intercepted');
        e.preventDefault();
        e.stopPropagation();
        return false;
      });

      // Handle button click
      $('#analyzeBtn').on('click', function (e) {
        console.log('Analyze button clicked');
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        var question = $('#insight').val().trim();
        var submitBtn = $('#analyzeBtn');

        console.log('Question:', question);

        // Validate question
        if (question.length < 10) {
          alert('Please enter at least 10 characters for your strategic decision.');
          return false;
        }

        // Disable button and show loading state
        submitBtn.prop('disabled', true).text('Analyzing...');

        console.log('Making API call to /api/shadow-board/analyze');

        // Call API
        $.ajax({
          url: API_BASE_URL + '/api/shadow-board/analyze',
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + accessToken,
            'Content-Type': 'application/json'
          },
          data: JSON.stringify({
            question: question,
            category: 'General'  // Default category
          }),
          success: function (response) {
            console.log('API call successful:', response);

            // Store analysis_id for future use
            localStorage.setItem('last_analysis_id', response.analysis_id);

            // Redirect to analysis detail page
            window.location.href = './analysis-detail.html?analysis_id=' + response.analysis_id;
          },
          error: function (xhr) {
            console.error('API call failed:', xhr);
            // Re-enable button
            submitBtn.prop('disabled', false).text('Analyze Decision from Board Perspectives');

            if (xhr.status === 401) {
              alert('Session expired. Please login again.');
              localStorage.removeItem('access_token');
              localStorage.removeItem('refresh_token');
              localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
              sessionStorage.removeItem('access_token');
              sessionStorage.removeItem('refresh_token');
              window.location.href = './index.html';
            } else if (xhr.status === 400 || xhr.status === 422) {
              var errorMsg = 'Validation Error: ';
              if (xhr.responseJSON && xhr.responseJSON.detail) {
                if (Array.isArray(xhr.responseJSON.detail)) {
                  errorMsg += xhr.responseJSON.detail.map(function (d) { return d.msg; }).join(', ');
                } else {
                  errorMsg += xhr.responseJSON.detail;
                }
              } else {
                errorMsg += 'Please check your input and try again.';
              }
              alert(errorMsg);
            } else {
              var errorMsg = 'Error: ';
              if (xhr.responseJSON && xhr.responseJSON.detail) {
                errorMsg += xhr.responseJSON.detail;
              } else {
                errorMsg += 'Failed to start analysis. Please try again later.';
              }
              alert(errorMsg);
            }
          }
        });

        return false;
      });

      // Additional safety: prevent any button inside form from submitting
      $('#analysisForm button').on('click', function (e) {
        if ($(this).attr('id') !== 'moreOptionsBtn') {
          e.preventDefault();
          e.stopPropagation();
        }
      });
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
          // Replace all profile images with initial div
          $('#profileSection img[src*="/profile.png"]').each(function() {
            $(this).replaceWith('<div class="profile-initial">' + firstLetter + '</div>');
          });
          
          // Add click handler for profile initial to toggle dropdown
          $('.profile-initial').on('click', function(e) {
            e.stopPropagation();
            // Get the closest profile container and find its dropdown
            var $profileContainer = $(this).closest('.profile');
            var $dropdown = $profileContainer.find('.profile_dropdown');
            // Toggle the dropdown with slide animation (same as custom.js)
            $dropdown.slideToggle(200);
          });
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Close dropdown when clicking outside
      $(document).on('click', function(e) {
        if (!$(e.target).closest('.profile').length) {
          $('.profile_dropdown').slideUp(200);
        }
      });
      
      // Confirmation Modal Function
      function showConfirmationModal(message, onConfirm, onCancel) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').fadeIn(300);
        
        // Remove any existing handlers to prevent duplicates
        $('#confirmationYesBtn, #confirmationNoBtn').off('click');
        
        // Yes button handler
        $('#confirmationYesBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onConfirm) {
            onConfirm();
          }
        });
        
        // No button handler
        $('#confirmationNoBtn').on('click', function() {
          $('#confirmationModal').fadeOut(300);
          if (onCancel) {
            onCancel();
          }
        });
        
        // Close on overlay click (optional - you can remove this if you don't want it)
        $('#confirmationModal').on('click', function(e) {
          if ($(e.target).hasClass('confirmation-modal')) {
            $('#confirmationModal').fadeOut(300);
            if (onCancel) {
              onCancel();
            }
          }
        });
      }
      
      // Logout functionality
      function handleLogout() {
        showConfirmationModal('Are you sure you want to logout?', function() {
          // User confirmed - proceed with logout
          // Clear all authentication data from localStorage and sessionStorage
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');
          
          // Note: We keep remembered_email and remembered_password in localStorage
          // so they persist after logout (only cleared if Remember Me was unchecked)
          
          // Redirect to index.html (refresh page to show sign in button)
          window.location.href = './index.html';
        });
      }
      
      // Delete account functionality
      function handleDeleteAccount() {
        showConfirmationModal('Are you sure you want to delete your account? This action cannot be undone.', function() {
          // User confirmed - proceed with account deletion
          // Get access token from localStorage
          var accessToken = localStorage.getItem('access_token');
          
          if (!accessToken) {
            alert('You are not logged in. Please log in again.');
            window.location.href = './index.html';
            return;
          }
          
          // Call backend API to delete account
          $.ajax({
            url: API_BASE_URL + '/api/auth/delete-account',
            method: 'DELETE',
            headers: {
              'Authorization': 'Bearer ' + accessToken,
              'Content-Type': 'application/json'
            },
            success: function(response) {
              // Clear all authentication data from localStorage and sessionStorage
              localStorage.removeItem('access_token');
              localStorage.removeItem('user');
              localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
              sessionStorage.removeItem('access_token');
              sessionStorage.removeItem('user');
              
              // Clear remembered credentials on account deletion (account no longer exists)
              localStorage.removeItem('remembered_email');
              localStorage.removeItem('remembered_password');
              
              // Redirect to index.html
              // alert('Your account has been deleted successfully.');
              window.location.href = './index.html';
            },
            error: function(xhr) {
              console.error('Delete account error:', xhr.responseJSON);
              var errorMsg = xhr.responseJSON?.detail || 'An error occurred while deleting your account. Please try again.';
              
              // If token is invalid/expired, clear localStorage and sessionStorage and redirect
              if (xhr.status === 401) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');
                alert('Your session has expired. Please log in again.');
                window.location.href = './index.html';
              } else {
                alert('Error: ' + errorMsg);
              }
            }
          });
        });
      }
      
      // Attach logout handler
      $('#logoutBtn, .logout-btn').on('click', function(e) {
        e.preventDefault();
        handleLogout();
      });
      
      // Attach delete account handler
      $('#deleteAccountBtn, .delete-account-btn').on('click', function(e) {
        e.preventDefault();
        handleDeleteAccount();
      });
      
      // Check authentication on page load
      checkAuthAndUpdateUI();
      
      // Handle click on "Experience the Executive AI Shadow LLM" button
      $('#experienceBtn').on('click', function() {
        // Check if user is authenticated by checking for access token in localStorage
        var accessToken = localStorage.getItem('access_token');
        
        if (accessToken) {
          // User is authenticated - redirect to strategic analysis page
          window.location.href = './strategic-analysis.html';
        } else {
          // User is not authenticated - redirect to sign-in page
          window.location.href = './sign-in.html';
        }
      });
    });
  </script>
</body>
</html>