window.onload = function () {
  new Vue({
    el: ".search_wrap",
    data() {
      return {
        areaList: [], // APIから受け取る
        inputData: {},
        message: "",
        flags: { success: false, find: false, fail: false, invalidZip: false }
      };
    },
    mounted() {
      this.loadAreaList(); // API読込
    },
    methods: {
      // 全角→半角 正規化（数字・ハイフン）＋空白削除
      normalizeZip(zip) {
        if (!zip) return "";
        return zip
          .replace(/[０-９]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 0xfee0))
          .replace(/[ー－―]/g, "-")
          .replace(/\s+/g, "")
          .replace(/[^0-9-]/g, ""); // 数字とハイフン以外は除去（厳格運用なら削除）
      },
      validateZip(zip) {
        return /^\d{3}-?\d{4}$/.test(zip);
      },
      async loadAreaList() {
        try {
          const res = await axios.get("/wp-json/area/v1/area-list", { headers: { "Cache-Control": "no-cache" } });
          // APIは construction_area タクソノミーの市区町村名（文字列）の配列を返す
          const data = Array.isArray(res.data) ? res.data : Object.values(res.data);
          this.areaList = data.filter(Boolean);
        } catch (e) {
          console.error("area_list取得失敗:", e);
          this.areaList = [];
        }
      },
      async searchZip() {
        const url = "https://zipcloud.ibsnet.co.jp/api/search";
        const result_wrap = document.querySelector(".result_wrap");
        const zip = this.normalizeZip(this.inputData.zip);
        if (!zip || !this.validateZip(zip)) {
          this.flags = { success: false, find: false, fail: false, invalidZip: true };
          this.message = "正しい郵便番号ではありません";
          result_wrap.classList.add("active");
          return;
        }
        try {
          const result = await axios.get(url, {
            adapter: axiosJsonpAdapter,
            callbackParamName: "callback",
            params: { zipcode: zip }
          });
          const { status, results } = result.data || {};
          result_wrap.classList.add("active");

          if (status === 400 || (status === 200 && !results)) {
            this.flags = { success: false, find: false, fail: true, invalidZip: false };
            this.message = "該当するエリアが見つかりませんでした";
            return;
          }

          let findItem = null;
          results.forEach((item) => {
            const hit = this.areaList.find((name) => name.indexOf(item.address2) === 0);
            if (hit) findItem = item;
          });

          if (findItem) {
            this.flags = { success: true, find: true, fail: false, invalidZip: false };
            this.message = `${findItem.address1}${findItem.address2}${findItem.address3}`;
          } else {
            this.flags = { success: true, find: false, fail: true, invalidZip: false };
            this.message = `${results[0].address1}${results[0].address2}${results[0].address3}`;
          }
        } catch (error) {
          console.error("Error fetching postal data:", error);
          this.flags = { success: false, find: false, fail: false, invalidZip: false };
          this.message = "郵便番号の検索中にエラーが発生しました";
        }
      }
    }
  });
};