---
import Layout from '../layouts/Layout.astro';
import '../styles/apply.scss';
---

<Layout title="Registration | UP IECEP">
  <section class="registration-section">
    <div class="form-container">
      <h1>Registration Portal</h1>
      
      <!-- LOADING SCREEN -->
      <div id="loading-status" class="status-panel">
        <div class="spinner"></div>
        <p>Checking registration status...</p>
      </div>

      <!-- CLOSED SCREEN (Hidden by default) -->
      <div id="closed-message" class="status-panel" style="display: none;">
        <h3>Registration is Currently Closed</h3>
        <p>Thank you for your interest! Please follow our social media pages for updates on our next application period.</p>
      </div>

      <!-- THE ENTIRE FORM WRAPPER (Hidden by default) -->
      <div id="registration-content" style="display: none;">
        
        <div class="description-text">
          <p>UP IECEP is an organization based in the University of the Philippines College of Engineering, catering specifically to <strong>BS Electronics Engineering students</strong>. It is a student chapter affiliated with the Institute of Electronics Engineers of the Philippines NCR North-East Chapter.</p>
          <p class="privacy-notice">In accordance with the Data Privacy Act of 2012, all information you provide will be kept confidential and used exclusively for the organization's internal purposes.</p>
        </div>

        <!-- ELIGIBILITY CHECK -->
        <div id="eligibility-section" class="eligibility-card">
          <h3>Eligibility Check</h3>
          <p>Before proceeding, please answer the following questions to confirm your eligibility:</p>
          
          <div class="radio-group">
            <p>Are you currently a BS Electronics Engineering student?</p>
            <label><input type="radio" name="isBSECE" value="yes" /> Yes</label>
            <label><input type="radio" name="isBSECE" value="no" /> No</label>
          </div>

          <div class="radio-group">
            <p>Are you graduating this semester?</p>
            <label><input type="radio" name="isGraduating" value="yes" /> Yes</label>
            <label><input type="radio" name="isGraduating" value="no" /> No</label>
          </div>

          <button type="button" id="check-eligibility-btn" class="submit-btn">Continue</button>
        </div>

        <!-- INELIGIBLE MESSAGE -->
        <div id="ineligible-message" class="hidden-message">
          <p>Unfortunately, you are ineligible to join UP IECEP.</p>
          <p>We sincerely thank you for your interest in our organization and wish you the best in your academic journey ahead.</p>
        </div>

        <!-- THE ACTUAL FORM -->
        <form id="apply-form" class="hidden-form">
          <h3>Applicant Details</h3>
          
          <div class="input-group">
            <label for="fullName">Name <span>(Format: DELA CRUZ, Juan M.)</span></label>
            <input type="text" id="fullName" name="fullName" title="Please follow the format: LASTNAME, First Name M." required placeholder="DELA CRUZ, Juan M." />
          </div>

          <div class="input-group">
            <label for="nickname">Nickname</label>
            <input type="text" id="nickname" name="nickname" title="Please enter your preferred nickname" required placeholder="Juan" />
          </div>

          <div class="input-group">
            <label for="studentNumber">Student Number <span>(Format: 20XX-XXXXX)</span></label>
            <input type="text" id="studentNumber" name="studentNumber" pattern="20[0-9]{2}-[0-9]{5}" title="Please include the dash (e.g., 2022-12345)" required placeholder="202X-XXXXX" />
            <span class="realtime-error" id="sn-error">Format must be exactly 20XX-XXXXX (Don't forget the dash!)</span>
          </div>

          <div class="input-group">
            <label for="yearStanding">Year Standing</label>
            <select id="yearStanding" name="yearStanding" title="Please select your current year standing" required>
              <option value="" disabled selected>Select your year standing</option>
              <option value="I">I</option>
              <option value="II">II</option>
              <option value="III">III</option>
              <option value="IV">IV</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="input-group">
            <label for="mobileNumber">Mobile Number <span>(Format: 09XXXXXXXXX)</span></label>
            <input type="tel" id="mobileNumber" name="mobileNumber" pattern="09[0-9]{9}" title="Please enter an 11-digit mobile number starting with 09" required placeholder="09XXXXXXXXX" />
            <span class="realtime-error" id="mn-error">Must be an 11-digit number starting with 09</span>
          </div>

          <div class="input-group">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" title="Please enter a valid email address" required placeholder="jdelacruz@up.edu.ph" />
          </div>

          <div class="input-group">
            <label for="facebookLink">Facebook Profile Link <span>(Format: facebook.com/username)</span></label>
            <input type="text" id="facebookLink" name="facebookLink" title="Please provide a link to your Facebook profile" required placeholder="facebook.com/IECEPUPD" />
          </div>

          <div class="input-group">
            <label for="source">How did you learn about UP IECEP?</label>
            <select id="source" name="source" title="Please select how you found out about our organization" required>
              <option value="" disabled selected>Select an option</option>
              <option value="Family">Family</option>
              <option value="Friends">Friends</option>
              <option value="Social Media">Social Media</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="input-group">
            <label for="funActivities">Do you have activities in mind that would add more fun to your application process?</label>
            <textarea id="funActivities" name="funActivities" rows="4" title="We would love to hear your ideas!" placeholder="Share your ideas here!"></textarea>
          </div>

          <button type="submit" id="submit-btn" class="submit-btn">Submit Application</button>
          <p id="loading-msg" style="display:none; text-align:center; margin-top:1rem;">Sending application...</p>
        </form>
        
        <!-- SUCCESS MESSAGE -->
        <div id="success-message" class="hidden-message success">
          <h3>Application Submitted!</h3>
          <p>Thank you for applying to UP IECEP. We have received your details and will be in touch soon.</p>
        </div>

      </div> <!-- End of Registration Content Wrapper -->
    </div>
  </section>
</Layout>

<script>
  // === PASTE YOUR GOOGLE SCRIPT URL HERE ONCE ===
  const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycby_xG6EGVuLXvgs9ro20rMkK2zSyElPCHeMU_2F2Q_0WE08gtCNzrO-SEyjDAqS46Hr/exec';

  // --- ELEMENTS ---
  const loadingStatus = document.getElementById('loading-status');
  const closedMessage = document.getElementById('closed-message');
  const registrationContent = document.getElementById('registration-content');
  
  const eligibilitySection = document.getElementById('eligibility-section');
  const checkBtn = document.getElementById('check-eligibility-btn');
  const ineligibleMsg = document.getElementById('ineligible-message');
  const mainForm = document.getElementById('apply-form') as HTMLFormElement;
  const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
  const loadingMsg = document.getElementById('loading-msg');
  const successMsg = document.getElementById('success-message');

  // --- STEP 1: CHECK GOOGLE SHEET STATUS ---
  fetch(SCRIPT_URL)
    .then(response => response.json())
    .then(data => {
      loadingStatus.style.display = 'none'; // Hide the spinner
      
      // Look at the B1 cell value from the Google Sheet
      if (data.status === 'OPEN') {
        registrationContent.style.display = 'block'; // Reveal the portal!
      } else {
        closedMessage.style.display = 'block'; // Show the closed message
      }
    })
    .catch(error => {
      // If the internet is down or script fails, fail gracefully by showing closed
      loadingStatus.style.display = 'none';
      closedMessage.style.display = 'block';
    });


  // --- ELIGIBILITY LOGIC ---
  if (checkBtn && eligibilitySection && ineligibleMsg && mainForm) {
    checkBtn.addEventListener('click', () => {
      const isBSECENode = document.querySelector('input[name="isBSECE"]:checked') as HTMLInputElement;
      const isGraduatingNode = document.querySelector('input[name="isGraduating"]:checked') as HTMLInputElement;

      if (!isBSECENode || !isGraduatingNode) {
        alert("Please answer both eligibility questions to proceed.");
        return;
      }

      const isBSECE = isBSECENode.value;
      const isGraduating = isGraduatingNode.value;

      eligibilitySection.style.display = 'none';

      if (isBSECE === 'yes' && isGraduating === 'no') {
        mainForm.style.display = 'block'; 
      } else {
        ineligibleMsg.style.display = 'block'; 
      }
    });
  }

  // --- REAL-TIME VALIDATION LOGIC ---
  const setupLiveValidation = (inputId: string, errorId: string) => {
    const input = document.getElementById(inputId) as HTMLInputElement;
    const errorSpan = document.getElementById(errorId);

    if (input && errorSpan) {
      input.addEventListener('input', () => {
        if (input.value.length > 0) {
          if (input.checkValidity()) {
            errorSpan.style.display = 'none';
            input.classList.remove('invalid-live');
          } else {
            errorSpan.style.display = 'block';
            input.classList.add('invalid-live');
          }
        } else {
          errorSpan.style.display = 'none';
          input.classList.remove('invalid-live');
        }
      });
    }
  };

  setupLiveValidation('studentNumber', 'sn-error');
  setupLiveValidation('mobileNumber', 'mn-error');

  // --- FORM SUBMISSION LOGIC ---
  if (mainForm) {
    mainForm.addEventListener('submit', (e) => {
      e.preventDefault(); 
      
      submitBtn.disabled = true;
      submitBtn.style.display = 'none';
      if(loadingMsg) loadingMsg.style.display = 'block';

      fetch(SCRIPT_URL, {
        method: 'POST',
        body: new FormData(mainForm)
      })
      .then(response => response.json())
      .then(data => {
        if(data.result === 'success') {
          mainForm.style.display = 'none'; 
          if(successMsg) successMsg.style.display = 'block'; 
        } else {
          alert('There was an error submitting your form. Please try again.');
          submitBtn.disabled = false;
          submitBtn.style.display = 'block';
          if(loadingMsg) loadingMsg.style.display = 'none';
        }
      })
      .catch(error => {
        alert('A network error occurred. Please try again.');
        submitBtn.disabled = false;
        submitBtn.style.display = 'block';
        if(loadingMsg) loadingMsg.style.display = 'none';
      });
    });
  }
</script>