<?php defined('ABSPATH') || die('Cheatin\' uh?'); ?>


<div class="main-container">
  <div class="onboarding-wrapper">

    <div style="position: relative; width: 100%;width:25vw; border-radius: 5px; overflow: hidden; font-family: 'Segoe UI', sans-serif;">
      <img id="image-logo" src="https://storage.googleapis.com/prod_perf/back.png" style="width: 100%; height: 28vw; object-fit: cover; display: block;" alt="Product Feed Background" />
      <div class="image-text">
        <h2 style="font-weight: 600; margin-bottom: 0.5vw;font-size:1.2;">Simplified Sales Expansion</h2>
        <p style="font-size: 0.8vw; line-height: 1vw; margin: 0;color: #e0e0e0;">
          Smarter feeds. More visibility. Less manual work.<br />
          <strong>AI-powered optimization</strong> enhances your product data and pushes it to top platforms like <strong>Google Shopping</strong>, <strong>Facebook Ads</strong>, and <strong>TikTok</strong> — all in just a few clicks.
        </p>
      </div>
    </div>

    <div class="onboarding-container">
      <div class="tabs">
        <div class="tab active" data-step="1">1</div>
        <div class="tab" data-step="2">2</div>
        <div class="tab" data-step="3">3</div>
      </div>

      <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
      </div>

      <div class="step active" data-step="1">
        <h2>Connect Your Store</h2>
        <p>Enter your AI token. We’ll use this to verify your store identity and generate your feed.</p>
        <input type="text" placeholder="Api key"  required  id="domain" required/>
        <small style="margin-top:1vw;" class="hint">Need help? <a href="#">Read guide</a></small>
        <button class="save-api-key" style="width:8vw;margin-top:-0.5vw;">Next</button>
      </div>

      <div class="step" style="font-size:0.9vw;height:17vw;margin-top:-2vw;" data-step="2">
        <h2>Your Business Context</h2>
        <p>This helps us customize your feed descriptions and category mapping.</p>

        <div>Business Overview</div>
        <textarea id="business" style="height:7vw;" rows="3" placeholder="e.g. We sell eco-friendly cookware for campers."></textarea>

        <div style="margin-top:1vw;">Ideal Customers</div>
        <input type="text" id="customers" placeholder="e.g. Outdoor enthusiasts, eco-conscious families" />

        <div class="step-nav">
          <button class="back-btn">Back</button>
          <button class="next-btn">Next</button>
        </div>
      </div>

      <div class="step" data-step="3">
        <h2>Add Product Keywords</h2>
        <p>These keywords help structure and enrich product titles and metadata for Google.</p>
        
        <input type="text" id="keywordBox" placeholder="Type keyword and press Enter" />
        <div id="tags"></div>
        <small class="hint">Examples: organic, BPA-free, travel cookware, cast iron</small>

        <div class="step-nav">
          <button class="back-btn">Back</button>
          <button id="submitBtn" style="width:8vw;">Finish</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  body {
    font-family: 'Inter', sans-serif;
    background: #f5f7fa;
    margin: 0;
  }

  .main-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vw;
    min-height: 100vh;
  }

  .onboarding-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height:28vw;
    max-width:70vw;
    background: #fff;
    border-radius: 0.5vw;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .onboarding-container {
    flex: 1;
    padding: 3vw 2.5vw;
    background: #fff;
    display: flex;
    flex-direction: column;
  }

  .tabs {
    display: flex;
    gap:2vw;
  }

  .tab {
    width: 2.5vw;
    height: 2.5vw;
    background: #e0e0e0;
    border-radius: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight: 500;
    font-size:1vw;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .tab.active {
    background: #00b383;
    color: #fff;
  }

  .progress-container {
    height: 0.2vw;
    background: #eee;
    border-radius: 0.2vw;
    margin-top:1vw;
    margin-bottom:2vw;
  }

  .progress-bar {
    background: #00b383;
    width: 0%;
    transition: width 0.4s ease;
  }

  .step {
    display: none;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
  }

  .step.active {
    display: flex;
  }

  .step h2{
    font-size:1.4vw;
    font-weight:500;
  }
  .step p{
    font-size:0.9vw;
    margin-top:-0.5vw;
    color:grey;
  }

  .step input{
    height:2vw;
    font-size:0.9vw;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  input, textarea {
    padding: 0.75rem 1rem;
    width: 100%;
    font-size: 1vw;
    border: 1px solid #ccc;
    border-radius: 0.5vw;
    transition: border 0.2s, box-shadow 0.2s;
  }

  input:focus, textarea:focus {
    outline: none;
    border-color: #00b383;
    box-shadow: 0 0 0 3px rgba(0, 179, 131, 0.15);
  }

  button {
    background: #ff9900;
    color: #fff;
    border: none;
    border-radius: 0.5vw;
    font-weight: 500;
    height:2.5vw;
    font-size: 1vw;
    cursor: pointer;
  }

  button:hover {
    background: #e88b00;
  }

  .next-btn,
  .back-btn,
  .save-api-key {
    width: 8vw;

  }

  .step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1vw;
  }

  .hint {
    font-size: 0.8vw;
    color: #666;
    margin-top: -0.5vw;
    margin-bottom: 1vw;
  }

  #tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vw;
    margin-bottom: 1vw;
  }

  .tag {
    background: #e6f9f2;
    color: #007a5e;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.88rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .tag:hover {
    background: #d0f3e8;
  }

  .tag::after {
    content: "✕";
    font-size: 0.8rem;
    margin-left: 10px;
    color: #007a5e;
  }

  #business{
    height:3vw;
  }

  .image-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:1vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .image-text h2 {
    font-size: 1.5vw;
    font-weight: 500;
  }

  .image-text p {
    font-size: 0.9vw;
    line-height: 1.6;
    color: #e0e0e0;
  }

  .input-error {
    border-color: #ff4d4f !important;
  }

  .error-msg {
    color: #ff4d4f;
    font-size: 0.8vw;
    margin-top: 0.5vw;
  }

  @media (max-width: 768px) {
    .onboarding-wrapper {
      flex-direction: column;
    }
    .image-text {
      padding: 20px;
    }
    .image-text h2 {
      font-size: 1.3rem;
    }
    .next-btn, .back-btn, .save-api-key {
      width: 100%;
    }
    .step-nav {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .success-msg {
    color: #00b383;
    margin-top: 0.5vw;
    margin-bottom: 1rem;
    font-size: 0.8vw;
  }

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
 (function ($){ 
  const $keywordInput = $("#keywordBox");
  const $tagContainer = $("#tags");

  $keywordInput.on("keypress", function (e) {
    if (e.which === 13) {
      e.preventDefault();
      const keyword = $keywordInput.val().trim();
      if (keyword) {
        const $tag = $("<span>")
          .addClass("tag")
          .text(keyword)
          .on("click", function () {
            $(this).remove();
          });
        $tagContainer.append($tag);
        $keywordInput.val("");
      }
    }
  });

  function showToast(message) {
    const toast = $("#toast");
    toast.text(message).addClass("show");
    setTimeout(() => {
      toast.removeClass("show");
    }, 2000);
  }
  function submitOnboarding() {
    const domain = $("#domain").val();
    const business = $("#business").val();
    const customers = $("#customers").val();
    const keywords = $(".tag").map(function () {
      return $(this).text().replace("✕", "").trim();
    }).get();

    const data = { domain, business, customers, keywords };
        
    $.post(ajaxurl, {
      action: "prod_submit_onboarding",
      prod_nonce: sqQuery.nonce,
      onboarding_data:data,
    }, function(response) {
        $("#submitBtn").css("background","#00b383");
        window.location.href = ajaxurl.replace('admin-ajax.php', 'admin.php?page=new_feed');
    })
  }

  const $tabs = $(".tab");
  const $steps = $(".step");
  const $progressBar = $("#progressBar");
  let currentStep = $steps.index($steps.filter(".active"));
  $progressBar.css("width", `${((currentStep + 1) / $steps.length) * 100}%`);

  function goToStep(index) {
    if (index < 0 || index >= $steps.length || index === currentStep) return;

    const $prevStep = $steps.eq(currentStep);
    const $nextStep = $steps.eq(index);

    gsap.to($prevStep[0], {
      duration: 0.4,
      opacity: 0,
      x: -50,
      onComplete: function () {
        $prevStep.hide().removeClass("active");
        $nextStep.css({ display: "flex", opacity: 0, transform: "translateX(50px)" }).addClass("active");
        gsap.to($nextStep[0], { duration: 0.4, opacity: 1, x: 0 });
        $tabs.removeClass("active").eq(index).addClass("active");
        $progressBar.css("width", `${((index + 1) / $steps.length) * 100}%`);
        currentStep = index;
      }
    });
  }

  $tabs.each(function (idx) {
    $(this).on("click", function () {
      goToStep(idx);
    });
  });

  $(".next-btn").on("click", function () {
    goToStep(currentStep + 1);
  });

  $(".back-btn").on("click", function () {
    goToStep(currentStep - 1);
  });

  $("#submitBtn").on("click", submitOnboarding);

  $(".save-api-key").on('click',function(){
    const domain = $('#domain').val().trim();
    $('.error-msg').remove();
    if (!domain) { 
      $('<div class="error-msg">Please enter your API key.</div>')
      .insertAfter('#domain')
      .hide()
      .fadeIn(300);
       $('#domain').addClass('input-error');
    }
    else {
      $('#domain').removeClass('input-error');
      $('.error-msg').remove();
        
      $.post(ajaxurl, {
        action: "prod_save_api_key",
        prod_nonce: sqQuery.nonce,
        apiKey:domain,
      }, function(response) {
           $('<div class="success-msg">API key saved successfully!</div>')
          .insertAfter('#domain')
          .hide()
          .fadeIn(300);
          setTimeout(() => {
            $('.success-msg').fadeOut(200, function () { $(this).remove(); });
            goToStep(currentStep + 1);
          }, 1000);
      });
    } 

  })

}(jQuery));
</script>
