const tabsContainer = document.getElementById("tabs");
const flagsContainer = document.getElementById("flags");
const searchInput = document.getElementById("search");
const noResultEl = document.getElementById("no-result");
const mapTitleEl = document.getElementById("map-title");
const mapCoordEl = document.getElementById("map-coord");

let regionGroups = {};
let activeRegion = "Asia";
let currentFilter = "";
let map = null;
let marker = null;
let polygonsByCode = {};
let overlayLayer = null;
let popupPinned = false;

function formatCoord(lat, lng) {
  return `座標：${lat.toFixed(4)}, ${lng.toFixed(4)}`;
}

function normalizeLatLng(value) {
  if (!Array.isArray(value)) return null;

  const flattened = value.flat ? value.flat(Infinity) : flattenArray(value);
  const coords = flattened.filter(num => typeof num === "number" && Number.isFinite(num));
  if (coords.length < 2) return null;

  const pickPair = (a, b) => {
    let lat = a;
    let lng = b;
    if (Math.abs(lat) > 90 && Math.abs(lng) <= 90) {
      [lat, lng] = [lng, lat];
    }
    if (Math.abs(lat) <= 90 && Math.abs(lng) <= 180) {
      return [lat, lng];
    }
    return null;
  };

  let pair = pickPair(coords[0], coords[1]);
  if (pair) return pair;

  for (let i = 2; i < coords.length - 1; i++) {
    pair = pickPair(coords[i], coords[i + 1]);
    if (pair) return pair;
  }
  return null;
}

function flattenArray(arr) {
  const out = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      out.push(...flattenArray(item));
    } else {
      out.push(item);
    }
  });
  return out;
}

function buildPopupContent(item) {
  const codeLabel = `${item.code.toUpperCase()} ${item.nameZh}`;
  const flagUrl = `flags/${item.code}.svg`;
  return `
    <div class="popup-flag">
      <img src="${flagUrl}" alt="${codeLabel}" />
      <div class="popup-code">${codeLabel}</div>
      <div class="popup-name">${item.nameEn}</div>
    </div>
  `;
}

function attachMarkerInteractions(markerInstance) {
  markerInstance.on("mouseover", () => {
    if (!popupPinned) {
      markerInstance.openPopup();
    }
  });
  markerInstance.on("mouseout", () => {
    if (!popupPinned) {
      markerInstance.closePopup();
    }
  });
  markerInstance.on("click", () => {
    popupPinned = !popupPinned;
    if (popupPinned) {
      markerInstance.openPopup();
    } else {
      markerInstance.closePopup();
    }
  });
}

function initMap(defaultLatLng) {
  const center = defaultLatLng || [23.6978, 120.9605]; // 台灣大致中心
  map = L.map("map").setView(center, 4);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 18,
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  // 初始 marker
  marker = L.marker(center).addTo(map);
  attachMarkerInteractions(marker);
  marker.bindPopup("請點選上方任一國旗卡片");
  mapTitleEl.textContent = "地圖：尚未選擇國家";
  mapCoordEl.textContent = "";
}

function focusCountryOnMap(item) {
  if (!map) return;

  const coords = normalizeLatLng(item.latlng);
  if (!coords) return;

  const [lat, lng] = coords;
  item.latlng = coords;

  // 先清掉舊的 overlay（polygon / circle）
  if (overlayLayer) {
    map.removeLayer(overlayLayer);
    overlayLayer = null;
  }

  const feat = polygonsByCode[item.code];

  if (feat) {
    // 有 polygon 的正常畫輪廓
    overlayLayer = L.geoJSON(feat, {
      style: {
        color: "#ff6600",
        weight: 2,
        fillOpacity: 0.12
      }
    }).addTo(map);

    const bounds = overlayLayer.getBounds();
    if (bounds.isValid()) {
      map.fitBounds(bounds, { padding: [12, 12] });
    } else {
      map.setView([lat, lng], 5);
    }
  } else if (item.code === "tw") {
    // dataset 仍缺台灣 polygon 時，使用大圓圈當 fallback
    overlayLayer = L.circle([lat, lng], {
      radius: 250000, // 250km 左右，把台灣圈起來
      color: "#ff6600",
      weight: 2,
      fillOpacity: 0.12
    }).addTo(map);
    map.fitBounds(overlayLayer.getBounds(), { padding: [12, 12] });
  } else {
    // 其他沒有 polygon 的國家，就只用中心點
    map.setView([lat, lng], 5);
  }

  // Marker 移動到該國家位置並顯示國旗 popup
  if (marker) {
    marker.setLatLng([lat, lng]);
  } else {
    marker = L.marker([lat, lng]).addTo(map);
    attachMarkerInteractions(marker);
  }

  marker.bindPopup(buildPopupContent(item));
  popupPinned = false;
  marker.closePopup();

  mapTitleEl.textContent = `地圖：${item.code.toUpperCase()} - ${item.nameZh} / ${item.nameEn}`;
  mapCoordEl.textContent = formatCoord(lat, lng);
}

async function loadCountryMeta() {
  const map = {};
  try {
    const url =
      "https://restcountries.com/v3.1/alpha?codes=" +
      countryCodes.map(c => c.toUpperCase()).join(",") +
      "&fields=cca2,name,region,subregion,latlng";

    const resp = await fetch(url);
    if (!resp.ok) {
      console.warn("無法從 restcountries 取得資料，status =", resp.status);
      return map;
    }

    const data = await resp.json();
    data.forEach(item => {
      if (!item.cca2) return;
      const code = item.cca2.toLowerCase();
      const nameEn = item.name?.common || code.toUpperCase();
      const nameZh = CUSTOM_ZH[code] || nameEn;
      const latlng = normalizeLatLng(item.latlng);

      map[code] = {
        nameEn,
        nameZh,
        region: item.region || "Other",
        subregion: item.subregion || "",
        latlng
      };
    });
  } catch (e) {
    console.error("取得國家資訊失敗:", e);
  }
  return map;
}

// 讀取世界國家 GeoJSON，依 ISO3166-1 Alpha-2 建索引
async function loadTaiwanPolygon() {
  try {
    const resp = await fetch("https://raw.githubusercontent.com/g0v/twgeojson/master/json/twCounty2010.geo.json");
    if (!resp.ok) {
      console.warn("無法取得台灣 polygon 資料，status =", resp.status);
      return null;
    }
    const gj = await resp.json();
    if (Array.isArray(gj.features) && gj.features.length > 0) {
      const polygons = [];
      gj.features.forEach(feature => {
        const geom = feature.geometry;
        if (!geom || !geom.coordinates) return;
        if (geom.type === "Polygon") {
          polygons.push(geom.coordinates);
        } else if (geom.type === "MultiPolygon") {
          geom.coordinates.forEach(poly => polygons.push(poly));
        }
      });
      if (polygons.length === 0) return null;

      return {
        type: "Feature",
        properties: { ISO_A2: "TW" },
        geometry: {
          type: "MultiPolygon",
          coordinates: polygons
        }
      };
    }
  } catch (e) {
    console.error("取得台灣 polygon 失敗:", e);
  }
  return null;
}

async function loadCountryPolygons() {
  const result = {};
  try {
    const url = "https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson";
    const resp = await fetch(url);
    if (!resp.ok) {
      console.warn("無法取得國家 polygon 資料，status =", resp.status);
    } else {
      const gj = await resp.json();
      if (Array.isArray(gj.features)) {
        gj.features.forEach(feat => {
          const props = feat.properties || {};
          const iso2 =
            props["ISO_A2"] ||
            props["ISO3166-1-Alpha-2"] ||
            props.iso2;
          if (iso2 && iso2 !== "-99") {
            result[iso2.toLowerCase()] = feat;
          }
        });
      }
    }
  } catch (e) {
    console.error("取得國家 polygon 失敗:", e);
  }

  if (!result.tw) {
    const twFeat = await loadTaiwanPolygon();
    if (twFeat) {
      result.tw = twFeat;
    }
  }

  return result;
}

function buildRegionGroups(metaMap) {
  const groups = {};
  REGION_ORDER.forEach(r => (groups[r] = []));

  countryCodes.forEach(code => {
    const meta = metaMap[code] || {
      nameEn: code.toUpperCase(),
      nameZh: CUSTOM_ZH[code] || code.toUpperCase(),
      region: "Other",
      subregion: "",
      latlng: null
    };
    const region = REGION_ORDER.includes(meta.region) ? meta.region : "Other";
    groups[region].push({
      code,
      nameEn: meta.nameEn,
      nameZh: meta.nameZh,
      region,
      subregion: meta.subregion,
      latlng: normalizeLatLng(meta.latlng)
    });
  });

  Object.values(groups).forEach(list => {
    list.sort((a, b) => a.nameEn.localeCompare(b.nameEn, "en"));
  });

  return groups;
}

function renderTabs() {
  tabsContainer.innerHTML = "";
  const regions = REGION_ORDER.filter(r => regionGroups[r] && regionGroups[r].length > 0);

  regions.forEach(region => {
    const btn = document.createElement("button");
    btn.className = "tab" + (region === activeRegion ? " active" : "");
    btn.textContent = REGION_LABELS[region] || region;
    btn.dataset.region = region;
    btn.addEventListener("click", () => {
      if (activeRegion === region) return;
      activeRegion = region;
      document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
      btn.classList.add("active");
      renderFlagsForRegion(region);
    });
    tabsContainer.appendChild(btn);
  });
}

function getFilteredList(region) {
  const list = regionGroups[region] || [];
  const q = currentFilter.trim().toLowerCase();
  if (!q) return list;

  return list.filter(item => {
    const codeMatch = item.code.toLowerCase().includes(q);
    const enMatch = item.nameEn.toLowerCase().includes(q);
    const zhMatch = (item.nameZh || "").toLowerCase().includes(q);
    return codeMatch || enMatch || zhMatch;
  });
}

function renderFlagsForRegion(region) {
  const list = getFilteredList(region);
  flagsContainer.innerHTML = "";

  if (list.length === 0) {
    noResultEl.style.display = "block";
    return;
  } else {
    noResultEl.style.display = "none";
  }

  list.forEach(item => {
    const card = document.createElement("div");
    card.className = "flag-card";

    const img = document.createElement("img");
    img.src = "flags/" + item.code + ".svg";
    img.alt = item.nameEn + " (" + item.code.toUpperCase() + ")";
    img.loading = "lazy";
    img.onerror = () => {
      img.style.opacity = "0.3";
      const err = document.createElement("div");
      err.className = "error";
      err.textContent = "找不到圖片檔：" + item.code + ".svg";
      card.appendChild(err);
    };

    const meta = document.createElement("div");
    meta.className = "meta";

    const line1 = document.createElement("div");
    const codeSpan = document.createElement("span");
    codeSpan.className = "code";
    codeSpan.textContent = item.code.toUpperCase();

    const nameZhSpan = document.createElement("span");
    nameZhSpan.className = "name-zh";
    nameZhSpan.textContent = " " + item.nameZh;

    line1.appendChild(codeSpan);
    line1.appendChild(nameZhSpan);

    const nameEnSpan = document.createElement("span");
    nameEnSpan.className = "name-en";
    nameEnSpan.textContent = item.nameEn;

    meta.appendChild(line1);
    meta.appendChild(nameEnSpan);

    if (item.subregion) {
      const sub = document.createElement("span");
      sub.className = "subregion";
      sub.textContent = item.subregion;
      meta.appendChild(sub);
    }

    card.appendChild(img);
    card.appendChild(meta);

    // 點國旗 → 地圖移到該國家 + 顯示邊界
    card.addEventListener("click", () => {
      focusCountryOnMap(item);
    });

    flagsContainer.appendChild(card);
  });
}

(async function init() {
  // 同時抓國家基本資料 + polygon
  const [metaMap, polyMap] = await Promise.all([
    loadCountryMeta(),
    loadCountryPolygons()
  ]);

  regionGroups = buildRegionGroups(metaMap);
  polygonsByCode = polyMap;

  // Leaflet 地圖初始化（優先用台灣）
  const twMeta = metaMap["tw"];
      const defaultLatLng = normalizeLatLng(twMeta?.latlng) || [23.6978, 120.9605];

  initMap(defaultLatLng);

  if (!regionGroups[activeRegion] || regionGroups[activeRegion].length === 0) {
    const firstRegion = REGION_ORDER.find(r => regionGroups[r] && regionGroups[r].length > 0);
    if (firstRegion) activeRegion = firstRegion;
  }

  renderTabs();
  renderFlagsForRegion(activeRegion);

  searchInput.addEventListener("input", () => {
    currentFilter = searchInput.value || "";
    renderFlagsForRegion(activeRegion);
  });
})();