<template>
  <div class="signin-container">
    <!-- PWA Check -->
    <div v-if="enablePwa" class="pwa-check">
      <CCheckAppRunning :login="true" />
    </div>

    <!-- Login Card -->
    <q-card class="signin-card">
      <!-- Header con Logo -->
      <div class="signin-header">
        <logo class="signin-logo" mystyle="width: 60px !important; height: 60px !important;" />
        <h1 class="signin-title">{{ t('login.enter') }}</h1>
        <p class="signin-subtitle">Accedi al tuo account</p>
      </div>

      <!-- Form -->
      <q-card-section class="signin-form">
        <q-form ref="myForm" @submit="onSubmit" @reset="onReset">
          <div class="form-fields">
            <!-- Username Input -->
            <q-input
              ref="refUsername"
              v-model="signin.username"
              filled
              class="modern-input"
              :label="$t('reg.username_login')"
              tabindex="1"
              lazy-rules
              :rules="[
                (val) => !!val || t('reg.err.required'),
                (val) =>
                  val.length >= 4 ||
                  t('reg.err.atleast') + ' 4 ' + t('reg.err.char'),
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="person" color="primary" />
              </template>
            </q-input>

            <!-- Password Input -->
            <q-input
              ref="refPassword"
              v-model="signin.password"
              :type="typePassword"
              filled
              class="modern-input"
              :label="$t('reg.password')"
              tabindex="2"
              debounce="500"
              @update:model-value="checkAutoCompletion"
              v-on:keyup.enter="onSubmit()"
              lazy-rules
              :rules="[
                (val) => !!val || t('reg.err.required'),
                (val) =>
                  val.length >= 8 ||
                  t('reg.err.atleast') + ' 8 ' + t('reg.err.char'),
              ]"
            >
              <template v-slot:prepend>
                <q-icon name="lock" color="primary" />
              </template>
              <template v-slot:append>
                <q-btn
                  v-if="!autoCompleteTriggered"
                  flat
                  round
                  dense
                  tabindex="-1"
                  :icon="typePassword === 'password' ? 'visibility_off' : 'visibility'"
                  @click="showPassword"
                />
              </template>
            </q-input>

            <!-- Submit Button -->
            <q-btn
              type="submit"
              unelevated
              size="lg"
              color="primary"
              :label="$t('login.enter')"
              class="submit-btn"
              tabindex="3"
            />

            <!-- Forgot Password Link -->
            <div class="forgot-password">
              <a :href="getlinkforgetpwd()" class="forgot-link">
                <q-icon name="help_outline" size="18px" />
                {{ t('reg.forgetpassword') }}
              </a>
            </div>

            <!-- Divider -->
            <div v-if="site.confpages && site.confpages?.enableReg && showregbutt" class="divider">
              <span>Non hai un account?</span>
            </div>

            <!-- Registration Button (Bot) -->
            <div
              v-if="
                site.confpages &&
                site.confpages?.enableReg &&
                showregbutt &&
                site.confpages?.enableRegByBot
              "
              class="register-section"
            >
              <p class="register-text">Se non sei ancora registrato:</p>
              <q-btn
                type="a"
                unelevated
                size="lg"
                color="positive"
                icon="person_add"
                href="/bot"
                :label="$t('reg.submit')"
                class="register-btn"
              />
            </div>

            <!-- Registration Button (Standard) -->
            <div
              v-else-if="site.confpages && site.confpages?.enableReg && showregbutt"
              class="register-section"
            >
              <p class="register-text">Se non sei ancora registrato:</p>
              <q-btn
                unelevated
                size="lg"
                color="positive"
                icon="person_add"
                to="/registrati"
                :label="$t('reg.submit')"
                class="register-btn"
              />
            </div>
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </div>
</template>

<script lang="ts" src="./CSignIn.ts"></script>

<style lang="scss" scoped>
@import './CSignIn.scss';
</style>
