"use client";

// Sihirbazın "Nerede okumak istersin?" adımı: çip listesi yerine dokunarak
// il seçilen Türkiye haritası. Mavi ton ildeki program sayısını, turuncu
// kontur seçimi gösterir. KKTC gibi harita dışı yerler çip olarak eklenir.

import { cities } from "turkey-map-react/lib/data";
import {
  HARITA_GENISLIK,
  HARITA_UST_KIRPMA,
  HARITA_YUKSEKLIK,
  normalizeIlAdi,
} from "@/lib/harita";

export function IlSecimHaritasi({
  iller,
  secili,
  onToggle,
}: {
  /** Bu sıralama penceresinde programı olan iller (DB biçimi ad + adet) */
  iller: { il: string; adet: number }[];
  secili: string[];
  onToggle: (il: string) => void;
}) {
  const adetler = new Map(iller.map((i) => [i.il, i.adet]));
  const maxAdet = Math.max(1, ...iller.map((i) => i.adet));
  const seciliSet = new Set(secili);

  return (
    <div>
      <svg
        viewBox={`0 ${HARITA_UST_KIRPMA} ${HARITA_GENISLIK} ${HARITA_YUKSEKLIK - HARITA_UST_KIRPMA}`}
        className="h-auto w-full"
        role="group"
        aria-label="Okumak istediğin illeri haritadan seç"
      >
        {/* Seçili iller en son çizilir ki turuncu kontur komşularca örtülmesin */}
        {[...cities]
          .sort(
            (a, b) =>
              Number(seciliSet.has(normalizeIlAdi(a.name))) -
              Number(seciliSet.has(normalizeIlAdi(b.name))),
          )
          .map((city) => {
            const key = normalizeIlAdi(city.name);
            const adet = adetler.get(key);
            const seciliMi = seciliSet.has(key);
            const yogunluk = adet ? adet / maxAdet : 0;
            return (
              <path
                key={city.id}
                d={city.path}
                className={
                  adet
                    ? "cursor-pointer transition-opacity duration-200 hover:opacity-75"
                    : undefined
                }
                fill={
                  seciliMi
                    ? "oklch(0.705 0.213 47.6)" // orange-500
                    : adet
                      ? `oklch(0.623 0.188 259.8 / ${0.25 + 0.65 * yogunluk})`
                      : "oklch(0.929 0.013 255.5)" // slate-200
                }
                stroke={seciliMi ? "oklch(0.553 0.195 38.4)" : "white"}
                strokeWidth={seciliMi ? 2 : 1}
                onClick={adet ? () => onToggle(key) : undefined}
                role={adet ? "button" : undefined}
                aria-pressed={adet ? seciliMi : undefined}
                aria-label={
                  adet ? `${city.name} — ${adet} program` : undefined
                }
              >
                <title>
                  {adet
                    ? `${city.name}: ${adet} program — ${seciliMi ? "seçimi kaldır" : "seçmek için tıkla"}`
                    : `${city.name}: bu sıralamada program yok`}
                </title>
              </path>
            );
          })}
      </svg>
      <div className="mt-2 flex items-center justify-end gap-2 text-xs text-slate-500">
        <span>az</span>
        <span aria-hidden className="flex items-center gap-1">
          <span className="size-2.5 rounded-full bg-primary/25" />
          <span className="size-2.5 rounded-full bg-primary/55" />
          <span className="size-2.5 rounded-full bg-primary/90" />
        </span>
        <span>çok program</span>
        <span className="ml-3 inline-flex items-center gap-1.5">
          <span
            aria-hidden
            className="size-2.5 rounded-full bg-orange-500"
          />
          seçili
        </span>
      </div>
    </div>
  );
}
