import { cities } from "turkey-map-react/lib/data";
import {
  HARITA_GENISLIK,
  HARITA_UST_KIRPMA,
  HARITA_YUKSEKLIK,
  normalizeIlAdi,
} from "@/lib/harita";
import {
  ULKE_HARITA_GENISLIK,
  ULKE_HARITA_YUKSEKLIK,
  uniUlkeKonum,
  type UlkeKonum,
} from "@/lib/harita-ulkeler";

const SECILI_DOLGU = "oklch(0.809 0.105 251.8)";
const ZEMIN_DOLGU = "oklch(0.929 0.013 255.5)";

export function UniversiteKonumHaritasi({
  universite,
  il,
}: {
  universite: string;
  il: string | null;
}) {
  const yurtdisi = uniUlkeKonum(universite, il);
  if (yurtdisi) {
    return (
      <KonumBolumu universite={universite}>
        <UlkeHaritasi universite={universite} konum={yurtdisi} />
        <p className="pointer-events-none absolute bottom-0 left-0 text-[11px] font-medium text-slate-500">
          {yurtdisi.ulkeAd}
          {yurtdisi.sehir ? ` · ${yurtdisi.sehir}` : ""}
        </p>
      </KonumBolumu>
    );
  }

  if (!il) return null;

  return (
    <KonumBolumu universite={universite}>
      <svg
        viewBox={`0 ${HARITA_UST_KIRPMA} ${HARITA_GENISLIK} ${HARITA_YUKSEKLIK - HARITA_UST_KIRPMA}`}
        className="absolute inset-0 h-full w-full"
        role="img"
        aria-label={`${universite} konumunun Türkiye haritasındaki görünümü`}
      >
        {cities.map((city) => {
          const secili = il ? normalizeIlAdi(city.name) === il : false;
          return (
            <path
              key={city.id}
              d={city.path}
              fill={secili ? SECILI_DOLGU : ZEMIN_DOLGU}
              stroke="white"
              strokeWidth={secili ? 1.8 : 1}
            >
              <title>{city.name}</title>
            </path>
          );
        })}
      </svg>
    </KonumBolumu>
  );
}

function KonumBolumu({
  universite,
  children,
}: {
  universite: string;
  children: React.ReactNode;
}) {
  return (
    <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>
      <div className="relative h-full min-h-44 w-full">{children}</div>
    </section>
  );
}

function UlkeHaritasi({
  universite,
  konum,
}: {
  universite: string;
  konum: UlkeKonum;
}) {
  const { harita, ulkeAd, sehir } = konum;
  return (
    <svg
      viewBox={`0 0 ${ULKE_HARITA_GENISLIK} ${ULKE_HARITA_YUKSEKLIK}`}
      className="absolute inset-0 h-full w-full"
      role="img"
      aria-label={`${universite} konumunun ${ulkeAd} haritasındaki görünümü${sehir ? ` (${sehir})` : ""}`}
    >
      {harita.baglam.map((d, i) => (
        <path key={`b${i}`} d={d} fill={ZEMIN_DOLGU} stroke="white" strokeWidth={1} />
      ))}
      {harita.ulke.map((d, i) => (
        <path key={`u${i}`} d={d} fill={SECILI_DOLGU} stroke="white" strokeWidth={1.8}>
          <title>{ulkeAd}</title>
        </path>
      ))}
    </svg>
  );
}