---
import Button from "../../base/Button.astro";
import Toast from "../../base/Toast.astro";

// Иконки по умолчанию (SVG строки)
const emailIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>`;

const passwordIcon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>`;

// Props для переопределения иконок
interface Props {
  emailIcon?: string;
  passwordIcon?: string;
  redirectUrl?: string;
}

const {
  emailIcon: customEmailIcon,
  passwordIcon: customPasswordIcon,
  redirectUrl = "/",
} = Astro.props;

// Используем кастомные или дефолтные
const finalEmailIcon = customEmailIcon || emailIcon;
const finalPasswordIcon = customPasswordIcon || passwordIcon;

// Константы валидации
const MIN_PASSWORD_LENGTH = 8;
const MAX_PASSWORD_LENGTH = 12;
---

<form class="space-y-6" id="login-form" novalidate>
  <!-- Honeypot поле для защиты от ботов (скрытое) -->
  <div class="honeypot-field" aria-hidden="true">
    <input
      type="text"
      name="website"
      id="website"
      tabindex="-1"
      autocomplete="off"
      placeholder="Не заполняйте это поле"
    />
  </div>

  <!-- Email -->
  <div class="relative group">
    <label
      for="email"
      class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
    >
      Email <span class="text-red-500">*</span>
    </label>
    <div class="relative">
      <div
        class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"
      >
        <Fragment set:html={finalEmailIcon} />
      </div>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="you@example.com"
        required
        maxlength="254"
        class="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 font-medium focus:outline-none focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all"
      />
    </div>
    <span class="error-message hidden text-red-500 text-xs mt-1">
      Введите корректный email адрес
    </span>
  </div>

  <!-- Password -->
  <div class="relative group">
    <label
      for="password"
      class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2"
    >
      Пароль <span class="text-red-500">*</span>
    </label>
    <div class="relative">
      <div
        class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400"
      >
        <Fragment set:html={finalPasswordIcon} />
      </div>
      <input
        type="password"
        id="password"
        name="password"
        placeholder="••••••••"
        required
        minlength={MIN_PASSWORD_LENGTH}
        maxlength={MAX_PASSWORD_LENGTH}
        class="w-full pl-12 pr-12 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-900 font-medium focus:outline-none focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all"
      />
      <!-- Кнопка показа/скрытия пароля -->
      <button
        type="button"
        id="toggle-password"
        class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 cursor-pointer transition-colors"
        aria-label="Показать пароль"
      >
        <svg
          id="eye-icon"
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
          ></path>
        </svg>
        <svg
          id="eye-off-icon"
          class="w-5 h-5 hidden"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
          ></path>
        </svg>
      </button>
    </div>
    <span class="error-message hidden text-red-500 text-xs mt-1">
      Пароль должен быть от {MIN_PASSWORD_LENGTH} до {MAX_PASSWORD_LENGTH} символов
    </span>
  </div>

  <!-- Options -->
  <div class="flex items-center justify-between text-sm">
    <label class="flex items-center gap-2 text-gray-500 cursor-pointer">
      <input type="checkbox" name="remember" class="w-4 h-4 accent-gold" checked />
      <span>Запомнить меня</span>
    </label>
    <a
      href="/auth/forgot-password"
      class="text-gold hover:underline font-medium">Забыли пароль?</a
    >
  </div>

  <!-- Submit -->
  <Button
    type="submit"
    text="Войти"
    variant="primary-white-text"
    size="md"
    className="w-full!"
    id="submit-btn"
  />

  <!-- Register link -->
  <p class="text-center text-sm text-gray-500 m-0">
    Нет аккаунта? <a
      href="/auth/register"
      class="text-gold hover:underline font-medium">Зарегистрироваться</a
    >
  </p>
</form>

<!-- Toast уведомление -->
<Toast />

<style>
  /* Скрываем honeypot поле */
  .honeypot-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
  }
</style>

<script
  define:vars={{
    MIN_PASSWORD_LENGTH,
    MAX_PASSWORD_LENGTH,
    redirectUrl,
  }}
>
  // Элементы формы
  const form = document.getElementById("login-form");
  const emailInput = document.getElementById("email");
  const passwordInput = document.getElementById("password");
  const submitBtn = document.getElementById("submit-btn");
  const togglePasswordBtn = document.getElementById("toggle-password");
  const eyeIcon = document.getElementById("eye-icon");
  const eyeOffIcon = document.getElementById("eye-off-icon");
  const honeypotField = document.getElementById("website");

  // Отслеживаем "тронутые" поля
  const touchedFields = new Set();

  // Валидация email
  function validateEmail(showError = false) {
    const value = emailInput.value.trim();
    const errorEl = emailInput
      .closest(".group")
      .querySelector(".error-message");
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    let isValid = true;

    if (!value) {
      isValid = false;
    } else if (!emailPattern.test(value)) {
      isValid = false;
    } else if (value.length > 254) {
      isValid = false;
    }

    if (showError || touchedFields.has("email")) {
      if (!isValid && value.length > 0) {
        errorEl.classList.remove("hidden");
        emailInput.classList.add(
          "border-red-500",
          "focus:border-red-500",
          "focus:ring-red-500/20",
        );
        emailInput.classList.remove("focus:border-gold", "focus:ring-gold/20");
      } else {
        errorEl.classList.add("hidden");
        emailInput.classList.remove(
          "border-red-500",
          "focus:border-red-500",
          "focus:ring-red-500/20",
        );
        emailInput.classList.add("focus:border-gold", "focus:ring-gold/20");
      }
    }

    return isValid;
  }

  // Валидация пароля
  function validatePassword(showError = false) {
    const value = passwordInput.value;
    const errorEl = passwordInput
      .closest(".group")
      .querySelector(".error-message");

    let isValid = true;

    if (!value) {
      isValid = false;
    } else if (
      value.length < MIN_PASSWORD_LENGTH ||
      value.length > MAX_PASSWORD_LENGTH
    ) {
      isValid = false;
    }

    if (showError || touchedFields.has("password")) {
      if (!isValid && value.length > 0) {
        errorEl.classList.remove("hidden");
        passwordInput.classList.add(
          "border-red-500",
          "focus:border-red-500",
          "focus:ring-red-500/20",
        );
        passwordInput.classList.remove(
          "focus:border-gold",
          "focus:ring-gold/20",
        );
      } else {
        errorEl.classList.add("hidden");
        passwordInput.classList.remove(
          "border-red-500",
          "focus:border-red-500",
          "focus:ring-red-500/20",
        );
        passwordInput.classList.add("focus:border-gold", "focus:ring-gold/20");
      }
    }

    return isValid;
  }

  // Показать все ошибки
  function showAllErrors() {
    touchedFields.add("email");
    touchedFields.add("password");
    const isEmailValid = validateEmail(true);
    const isPasswordValid = validatePassword(true);
    return isEmailValid && isPasswordValid;
  }

  // Ограничение ввода для email (только разрешенные символы)
  emailInput?.addEventListener("keypress", (e) => {
    if (
      !/[a-zA-Z0-9@._%+\-]/.test(e.key) &&
      !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "@"].includes(
        e.key,
      )
    ) {
      e.preventDefault();
    }
  });

  // Запрет пробелов в email
  emailInput?.addEventListener("input", (e) => {
    e.target.value = e.target.value.replace(/\s/g, "");
    validateEmail();
  });

  // Ограничение ввода для пароля (жесткий лимит 12 символов)
  passwordInput?.addEventListener("keypress", (e) => {
    if (
      passwordInput.value.length >= MAX_PASSWORD_LENGTH &&
      !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)
    ) {
      e.preventDefault();
    }
  });

  passwordInput?.addEventListener("input", (e) => {
    if (e.target.value.length > MAX_PASSWORD_LENGTH) {
      e.target.value = e.target.value.slice(0, MAX_PASSWORD_LENGTH);
    }
    e.target.value = e.target.value.replace(/\s/g, "");
    validatePassword();
  });

  // Переключение видимости пароля
  togglePasswordBtn?.addEventListener("click", () => {
    const type =
      passwordInput.getAttribute("type") === "password" ? "text" : "password";
    passwordInput.setAttribute("type", type);

    if (type === "text") {
      eyeIcon.classList.add("hidden");
      eyeOffIcon.classList.remove("hidden");
      togglePasswordBtn.setAttribute("aria-label", "Скрыть пароль");
    } else {
      eyeIcon.classList.remove("hidden");
      eyeOffIcon.classList.add("hidden");
      togglePasswordBtn.setAttribute("aria-label", "Показать пароль");
    }
  });

  // Отслеживание фокуса
  emailInput?.addEventListener("focus", () => touchedFields.add("email"));
  passwordInput?.addEventListener("focus", () => touchedFields.add("password"));

  // Валидация при потере фокуса
  emailInput?.addEventListener("blur", () => {
    touchedFields.add("email");
    if (emailInput.value.length > 0) validateEmail(true);
  });

  passwordInput?.addEventListener("blur", () => {
    touchedFields.add("password");
    if (passwordInput.value.length > 0) validatePassword(true);
  });

  // Отправка формы
  form?.addEventListener("submit", async (e) => {
    e.preventDefault();

    // Проверка honeypot (если заполнено — бот)
    if (honeypotField.value) {
      console.log("[LOGIN FORM] Bot detected");
      return;
    }

    // Если локальная валидация не пройдена — показываем тост с ошибкой
    if (!showAllErrors()) {
      console.log("[LOGIN FORM] Валидация не пройдена");
      if (window.showToast) {
        window.showToast(
          "Пожалуйста, проверьте правильность заполнения полей",
          "error",
        );
      }
      return;
    }

    console.log("[LOGIN FORM] Начало отправки формы");

    // Блокировка кнопки на время отправки
    submitBtn.disabled = true;
    const originalText = submitBtn.textContent;
    submitBtn.textContent = "Вход...";

    try {
      const formData = new FormData(form);
      const email = formData.get("email");
      const password = formData.get("password");
      const remember = formData.get("remember") === "on";

      console.log("[LOGIN FORM] Данные формы:", {
        email,
        passwordLength: password?.length,
        remember,
      });
      console.log("[LOGIN FORM] Отправка запроса на /api/auth/login");

      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include", // Для передачи кук
        body: JSON.stringify({ email, password, remember }),
      });

      console.log("[LOGIN FORM] Ответ сервера:", response.status);

      const data = await response.json();
      console.log("[LOGIN FORM] Данные ответа:", data);

      if (!response.ok) {
        console.log("[LOGIN FORM] Ошибка входа, обработка...");
        console.log("[LOGIN FORM] window.showToast существует?", typeof window.showToast);
        
        // Восстанавливаем кнопку
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;

        // Email не подтверждён — редирект на страницу подтверждения
        if (response.status === 403 && !data.verified) {
          window.location.href = `/auth/verify?email=${encodeURIComponent(email)}`;
          return;
        }

        // Определяем сообщение для toaster в зависимости от кода ошибки
        let toastMessage = data.error || "Неверный email или пароль";
        
        console.log("[LOGIN FORM] pbStatus:", data.pbStatus);
        console.log("[LOGIN FORM] errorCode:", data.errorCode);
        console.log("[LOGIN FORM] Сообщение для toaster:", toastMessage);
        
        // Дополнительные сообщения для разных кодов
        if (data.pbStatus === 429) {
          toastMessage = "Слишком много попыток. Подождите немного";
        } else if (data.pbStatus === 404) {
          toastMessage = "Пользователь не найден. Проверьте email";
        } else if (data.errorCode === "auth_failed") {
          toastMessage = "Неверный email или пароль";
        }

        // Показываем тост с ошибкой
        if (typeof window.showToast === "function") {
          console.log("[LOGIN FORM] Вызов window.showToast с сообщением:", toastMessage);
          window.showToast(toastMessage, "error", 4000);
        } else {
          console.error("[LOGIN FORM] window.showToast не определён!");
          // Fallback — alert для отладки
          alert(toastMessage);
        }
        return;
      }

      console.log("[LOGIN FORM] ✅ Вход успешён, редирект на:", redirectUrl);

      // Редирект после успешного входа (на страницу откуда пришли)
      window.location.href = redirectUrl;
    } catch (error) {
      console.error("[LOGIN FORM] ❌ Ошибка входа:", error);
      if (window.showToast) {
        window.showToast(
          error.message || "Ошибка входа. Проверьте данные.",
          "error",
        );
      }
      submitBtn.disabled = false;
      submitBtn.textContent = originalText;
    }
  });
</script>
