import { normalizeIlAdi } from "@/lib/harita";
import { uniUlkeKonum, yurtdisiUniKonum } from "@/lib/harita-ulkeler";
import { cities } from "turkey-map-react/lib/data";
import {
  TurkiyePikselHaritasi,
  UlkePikselHaritasi,
} from "./sehir-piksel-haritasi";

// Harita il adları modül yükünde bir kez DB biçimine çevrilir.
const HARITA_ILLERI = new Set(cities.map((c) => normalizeIlAdi(c.name)));
/**
 * Harita katmanı ızgaranın tamamını kaplar ve biraz dışına sarkar; kartlar
 * (beyaz, opak) üstünde kalır, harita aralıklardan ve üçüncü sütunun boş
 * alanından görünür. Mask'lar (dış: kartların tarafına doğru, iç: dik
 * yönde iki kenar) hiçbir kenarda kesik kare bırakmaz — geniş ekranda sağdan
 * sola, telefonda üst satırdan (harita yeri) aşağı doğru erir.
 */
const KATMAN_SINIFI =
  "pointer-events-none absolute -inset-x-4 -inset-y-8 -z-10 [mask-image:linear-gradient(to_bottom,transparent_0%,black_14%,black_34%,rgba(0,0,0,0.12)_58%,transparent_82%)] lg:[mask-image:linear-gradient(to_right,transparent_2%,rgba(0,0,0,0.08)_30%,rgba(0,0,0,0.35)_54%,black_74%,black_92%,transparent_100%)]";
const IC_MASK_SINIFI =
  "h-full w-full [mask-image:linear-gradient(to_right,transparent_0%,black_12%,black_88%,transparent_100%)] lg:[mask-image:linear-gradient(to_bottom,transparent_0%,black_16%,black_84%,transparent_100%)]";
// İl geniş ekranda üçüncü sütunun ortasına (x≈0,82), telefonda üst satıra gelir.
const ODAK_HIZA = { lg: { x: 0.82, y: 0.5 }, dar: { x: 0.5, y: 0.17 } } as const;

/**
 * Üniversite sayfasındaki konum haritası: şehir sayfasıyla aynı dot-matrix
 * harita (DESIGN.md §4.17; Bilal, 24 Eyl 2026: "bu kart kısmına piksel
 * dokuları ekle", sonra "4 kartın arkasına sarkabilir"). Türkiye'de il
 * turuncu karelerle yanar; KKTC/yurt dışında ülke kontürü + kampüs şehrinde
 * iri turuncu kare. Ebeveyn ızgara `relative isolate` olmalı.
 */
export function UniversiteKonumHaritasi({
  universite,
  il,
}: {
  universite: string;
  il: string | null;
}) {
  const yurtdisi = uniUlkeKonum(universite, il);
  let harita: React.ReactNode = null;
  let altYazi: React.ReactNode = null;
  if (yurtdisi) {
    const konum = yurtdisiUniKonum(universite, il);
    harita = (
      <UlkePikselHaritasi
        ulke={yurtdisi.ulke}
        sehir={konum ? { x: konum.x, y: konum.y } : null}
        etiket={`${universite} konumunun ${yurtdisi.ulkeAd} haritasındaki görünümü${yurtdisi.sehir ? ` (${yurtdisi.sehir})` : ""}`}
        doldur
        odakHiza={ODAK_HIZA}
      />
    );
    altYazi = (
      <p className="pointer-events-none absolute bottom-0 left-0 text-xs font-medium text-slate-500">
        {yurtdisi.ulkeAd}
        {yurtdisi.sehir ? ` · ${yurtdisi.sehir}` : ""}
      </p>
    );
  } else if (il && HARITA_ILLERI.has(il)) {
    harita = (
      <TurkiyePikselHaritasi
        il={il}
        etiket={`${universite} konumunun Türkiye haritasındaki görünümü`}
        doldur
        odakHiza={ODAK_HIZA}
      />
    );
  }
  if (!harita) return null;

  return (
    <>
      {/* Yer tutucu: telefonda tam genişlikte bir satır, lg'de üçüncü sütun */}
      <section
        aria-labelledby="universite-konumu"
        className="relative col-span-2 min-h-44 lg:col-span-1 lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:min-h-0"
      >
        <h2 id="universite-konumu" className="sr-only">
          {universite} kampüs konumu
        </h2>
        {altYazi}
      </section>
      <div className={KATMAN_SINIFI}>
        <div className={IC_MASK_SINIFI}>{harita}</div>
      </div>
    </>
  );
}