<template>
  <div class="auth-main v2">
    <div class="bg-overlay bg-dark"></div>
    <div class="auth-wrapper">
      <div class="auth-form">
        <div class="card my-5 mx-3">
          <div class="card-body" style="direction: rtl">
            <div class="text-center mb-4">
              <img :src="logo" alt="Logo" class="styled-logo" />
            </div>
            <div class="mb-3">
              <input
                @input="clearError('mobile')"
                type="email"
                class="form-control"
                id="floatingInput"
                placeholder="شماره موبایل"
                style="direction: rtl"
                v-model="mobile"
              />
              <small v-if="errors.mobile" class="text-danger">{{
                errors.mobile
              }}</small>
            </div>

            <div class="mb-3">
              <input
                @input="clearError('password')"
                type="password"
                class="form-control"
                id="floatingInput1"
                placeholder="رمز عبور"
                style="direction: rtl"
                v-model="password"
              />
              <small v-if="errors.password" class="text-danger">{{
                errors.password
              }}</small>
            </div>

            <div class="d-flex mt-1 justify-content-between align-items-center">
              <router-link to="/forgot-password-v2">
                <h6
                  class="text-secondary link-primary f-w-400 mb-0"
                  style="direction: rtl"
                >
                  فراموشی رمز عبور؟
                </h6>
              </router-link>
            </div>

            <div class="d-grid mt-4">
              <button
                type="button"
                class="btn btn-primary"
                style="direction: rtl"
                @click="handleLogin"
                :disabled="loading"
              >
                {{ loading ? "در حال ورود..." : "ورود" }}
              </button>
            </div>

            <div v-if="error" class="alert alert-danger mt-3">
              {{ error }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Rightbar />
</template>

<script>
import { useRouter } from "vue-router";
import ApiServiece from "@/services/ApiService";
import { computed, ref, onMounted } from "vue";
import { useStore } from "vuex";
import Swal from "sweetalert2";
export default {
  name: "LoginForm",
  setup() {
    const settings = ref();
    const logo = ref();
    const errors = ref({});
    const store = useStore();
    const mobile = ref("");
    const password = ref("");
    const loading = ref(false);
    const error = computed(() => store.state.error);
    const router = useRouter();

    const handleLogin = async () => {
      loading.value = true;
      if (!validateForm()) return;
      try {
        await store.dispatch("user/loginUser", {
          mobile: mobile.value,
          password: password.value,
        });
        loading.value = false;
        router.push({ name: "products" });
      } catch (error) {
        console.error("Login failed:", error.message);
        Swal.fire({
          icon: "error",
          title: "شماره تماس یا رمز عبور اشتباه است",
          text: `${error.message}`,
          confirmButtonText: "باشه",
        });
        loading.value = false;
      }
    };

    const validateForm = () => {
      errors.value = {};

      if (!mobile.value) errors.value.mobile = "موبایل خود را وارد نمایید";
      if (!password.value)
        errors.value.password = "رمز عبور خود را وارد نمایید";
      return Object.keys(errors.value).length === 0;
    };

    const clearError = (field) => {
      errors.value[field] = "";
    };

    const getSettings = async () => {
      logo.value = localStorage.getItem("logo");
      try {
        const response = await ApiServiece.get("settings/logo_fav");
        settings.value = response.data.data;
       
      } catch (error) {
        console.error("Error fetching settings:", error);
      }
    };

    onMounted(() => {
      getSettings();
    });

    return {
      mobile,
      password,
      loading,
      error,
      handleLogin,
      validateForm,
      clearError,
      errors,
      logo,
      settings,
    };
  },
};
</script>

<style scoped>
.styled-logo {
  display: block;
  max-width: 120px; /* Adjust the logo size here */
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  margin: 0 auto 30px;
  margin-bottom: 90px;
}

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 40px;
}

h4 {
  font-size: 1.5rem;
  font-weight: 500;
}

.text-center {
  text-align: center;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.form-control {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0.8rem 1rem;
}
</style>
