"use client";

// Türkiye dışındaki tercihlerin ülke mini haritaları: /sonuc ve /listem'de
// Türkiye haritasının altında, listede geçen her ülke için bir kontür ve
// şehir başına risk renkli toplu pin. Renk dili Türkiye haritasıyla aynı:
// ülke zemini "tercih içeren il" mavisi, pin rengi çoğunluk riski.

import { useMemo } from "react";
import {
  ULKE_HARITALARI,
  ULKE_HARITA_GENISLIK,
  ULKE_HARITA_YUKSEKLIK,
  type UlkeKodu,
} from "@/lib/harita-ulkeler";
import type { YurtdisiPin } from "@/lib/harita-pinler";
import { RISK_PIN_RENK, type RiskSeviyesi } from "@/lib/risk";

/** Pinin çoğunluk riski (eşitlikte güvenli taraf) — Türkiye il pinleriyle aynı kural. */
function baskinRisk(riskler: RiskSeviyesi[]): RiskSeviyesi {
  const sayac: Record<RiskSeviyesi, number> = {
    guvenli: 0,
    "az-riskli": 0,
    riskli: 0,
  };
  for (const r of riskler) sayac[r] += 1;
  return (["guvenli", "az-riskli", "riskli"] as const).reduce((a, b) =>
    sayac[b] > sayac[a] ? b : a,
  );
}

export function YurtdisiHaritalar({
  pinler,
  onTercihSec,
}: {
  pinler: YurtdisiPin[];
  /** Pine dokununca ilgili ilk tercihe in (liste satırına) */
  onTercihSec?: (sira: number) => void;
}) {
  const ulkeler = useMemo(() => {
    const gruplar = new Map<UlkeKodu, YurtdisiPin[]>();
    for (const p of pinler) {
      const grup = gruplar.get(p.ulke);
      if (grup) grup.push(p);
      else gruplar.set(p.ulke, [p]);
    }
    return [...gruplar.entries()];
  }, [pinler]);

  if (ulkeler.length === 0) return null;

  return (
    <div className="mt-3 flex flex-wrap items-end justify-center gap-x-6 gap-y-2">
      {ulkeler.map(([ulke, ulkePinleri]) => {
        const harita = ULKE_HARITALARI[ulke];
        const adet = ulkePinleri.reduce(
          (top, p) => top + p.tercihSiralari.length,
          0,
        );
        return (
          <figure key={ulke} className="w-52 max-w-full">
            <svg
              viewBox={`0 0 ${ULKE_HARITA_GENISLIK} ${ULKE_HARITA_YUKSEKLIK}`}
              className="h-auto w-full"
              role="img"
              aria-label={`${harita.ad} haritasında ${adet} tercih`}
            >
              {harita.baglam.map((d, i) => (
                <path
                  key={`b${i}`}
                  d={d}
                  fill="oklch(0.929 0.013 255.5)" // slate-200
                  stroke="white"
                  strokeWidth={2}
                />
              ))}
              {harita.ulke.map((d, i) => (
                <path
                  key={`u${i}`}
                  d={d}
                  fill="oklch(0.882 0.059 254.1)" // blue-200: tercih içeren zemin
                  stroke="white"
                  strokeWidth={2}
                >
                  <title>{harita.ad}</title>
                </path>
              ))}
              {ulkePinleri.map((p) => {
                const ilkSira = Math.min(...p.tercihSiralari);
                return (
                  <g
                    key={p.id}
                    className={onTercihSec ? "cursor-pointer" : undefined}
                    onClick={
                      onTercihSec ? () => onTercihSec(ilkSira) : undefined
                    }
                    role={onTercihSec ? "button" : undefined}
                    aria-label={`${p.sehir}: ${p.tercihSiralari.length} tercih`}
                  >
                    {/* r ≤ 26: en yakın şehir çifti (Girne–Lefkoşa ~55 birim)
                        çakışmadan sığsın */}
                    <circle
                      cx={p.x}
                      cy={p.y}
                      r={26}
                      fill={RISK_PIN_RENK[baskinRisk(p.riskler)]}
                      stroke="white"
                      strokeWidth={5}
                    />
                    <text
                      x={p.x}
                      y={p.y}
                      textAnchor="middle"
                      dominantBaseline="central"
                      fontSize={26}
                      fontWeight={700}
                      fill="white"
                      className="pointer-events-none select-none"
                    >
                      {p.tercihSiralari.length}
                    </text>
                    <title>{`${p.sehir}: ${p.tercihSiralari.length} tercih`}</title>
                  </g>
                );
              })}
            </svg>
            <figcaption className="text-center text-xs font-medium text-slate-500">
              {harita.ad}
            </figcaption>
          </figure>
        );
      })}
    </div>
  );
}
