/**
 * IranMapSection — server component
 * Fetches real café locations from the API and overlays them as blinking dots
 * on a stylised SVG silhouette of Iran.
 */
import { Suspense } from "react";

// ── Types ─────────────────────────────────────────────────────────────────────

type MapMarker = {
  id: string;
  name: string;
  city: string | null;
  latitude: number;
  longitude: number;
};

type MarkersApiResponse = {
  success: boolean;
  data: MapMarker[];
};

// ── Coordinate transform ──────────────────────────────────────────────────────

// Iran bounding box (degrees)
const MIN_LNG = 44;
const MAX_LNG = 64;
const MIN_LAT = 24;
const MAX_LAT = 41;
const SVG_W = 600;
const SVG_H = 500;

const toX = (lng: number) =>
  ((lng - MIN_LNG) / (MAX_LNG - MIN_LNG)) * SVG_W;

const toY = (lat: number) =>
  ((MAX_LAT - lat) / (MAX_LAT - MIN_LAT)) * SVG_H;

function toPt([lng, lat]: [number, number]) {
  return `${toX(lng).toFixed(1)},${toY(lat).toFixed(1)}`;
}

// ── Iran silhouette ────────────────────────────────────────────────────────────
// Simplified 40-point polygon; approximate but recognisable.
// Coordinates are [longitude, latitude] going clockwise from NW.
const IRAN_OUTLINE: [number, number][] = [
  // NW corner / Turkey-Armenia-Azerbaijan
  [44.8, 39.6], [45.5, 39.2], [46.2, 38.9],
  [46.8, 39.1], [47.6, 38.9],
  // Caspian coast (the concave notch heading south then north again)
  [48.3, 38.4], [49.0, 37.5], [49.9, 37.2],
  [51.0, 36.9], [52.2, 36.8], [53.0, 36.7],
  [54.0, 37.1], [54.7, 37.5],
  // NE / Turkmenistan
  [55.6, 37.4], [56.9, 37.1], [57.7, 36.8],
  [58.7, 37.5], [59.4, 36.8], [60.1, 36.7],
  // East / Afghanistan
  [61.2, 36.5], [61.3, 35.7], [62.0, 35.5],
  [62.5, 34.0], [63.0, 33.0], [63.2, 31.5],
  // SE / Pakistan – Oman Sea
  [61.8, 29.8], [60.9, 29.5], [60.0, 27.5],
  [59.0, 25.9], [58.5, 25.4],
  // South coast (Persian Gulf, west-bound)
  [57.5, 25.3], [56.4, 25.9], [55.6, 26.0],
  [54.5, 27.0], [53.4, 27.3], [52.4, 28.0],
  [51.1, 28.4], [50.4, 29.1], [49.0, 29.6],
  [48.5, 30.2], [48.2, 30.8],
  // West / Iraq border
  [47.7, 31.0], [47.2, 32.0], [46.8, 33.2],
  [46.2, 34.4], [45.5, 36.0], [45.0, 37.0],
  [44.8, 38.1], [44.5, 38.9], [44.8, 39.6],
];

const IRAN_PATH =
  "M " +
  IRAN_OUTLINE.map(toPt).join(" L ") +
  " Z";

// A handful of major cities shown as faint reference dots
const MAJOR_CITIES: { name: string; lng: number; lat: number }[] = [
  { name: "تهران", lng: 51.389, lat: 35.689 },
  { name: "مشهد", lng: 59.608, lat: 36.297 },
  { name: "اصفهان", lng: 51.668, lat: 32.661 },
  { name: "شیراز", lng: 52.531, lat: 29.594 },
  { name: "تبریز", lng: 46.291, lat: 38.08 },
  { name: "اهواز", lng: 48.683, lat: 31.318 },
];

// ── Data fetcher ──────────────────────────────────────────────────────────────

async function fetchMarkers(): Promise<MapMarker[]> {
  try {
    const apiBase =
      process.env.MEEZI_API_URL ?? "https://api.meezi.ir";
    const res = await fetch(`${apiBase}/api/public/map-markers`, {
      next: { revalidate: 3600 },
    });
    if (!res.ok) return [];
    const json = (await res.json()) as MarkersApiResponse;
    return json.data ?? [];
  } catch {
    return [];
  }
}

// ── Sub-components ────────────────────────────────────────────────────────────

async function IranMapSvg() {
  const markers = await fetchMarkers();

  return (
    <div className="relative mx-auto w-full max-w-lg select-none">
      <svg
        viewBox={`0 0 ${SVG_W} ${SVG_H}`}
        aria-label="نقشه ایران با موقعیت کافه‌ها"
        className="w-full drop-shadow-lg"
      >
        {/* Glow filter */}
        <defs>
          <filter id="glow">
            <feGaussianBlur stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <radialGradient id="mapGrad" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#e8f5f1" />
            <stop offset="100%" stopColor="#d1ece5" />
          </radialGradient>
        </defs>

        {/* Iran silhouette */}
        <path
          d={IRAN_PATH}
          fill="url(#mapGrad)"
          stroke="#0F6E56"
          strokeWidth="2"
          strokeLinejoin="round"
          opacity="0.9"
        />

        {/* Major city reference dots (faint) */}
        {MAJOR_CITIES.map((city) => (
          <g key={city.name}>
            <circle
              cx={toX(city.lng)}
              cy={toY(city.lat)}
              r={3}
              fill="#0F6E56"
              opacity={0.25}
            />
          </g>
        ))}

        {/* Café blinking dots */}
        {markers.map((m, idx) => {
          const cx = toX(m.longitude);
          const cy = toY(m.latitude);
          // Stagger animation delay so dots don't all pulse in sync
          const delay = `${(idx * 0.4) % 2}s`;
          return (
            <g key={m.id} filter="url(#glow)">
              {/* Outer pulse ring */}
              <circle cx={cx} cy={cy} r={10} fill="#0F6E56" opacity={0.2}>
                <animate
                  attributeName="r"
                  values="8;16;8"
                  dur="2.4s"
                  begin={delay}
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="opacity"
                  values="0.25;0;0.25"
                  dur="2.4s"
                  begin={delay}
                  repeatCount="indefinite"
                />
              </circle>
              {/* Core dot */}
              <circle
                cx={cx}
                cy={cy}
                r={5}
                fill="#0F6E56"
              >
                <animate
                  attributeName="opacity"
                  values="1;0.5;1"
                  dur="2.4s"
                  begin={delay}
                  repeatCount="indefinite"
                />
              </circle>
            </g>
          );
        })}
      </svg>

      {/* Floating legend */}
      {markers.length > 0 && (
        <div className="absolute bottom-3 start-3 flex items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs shadow-md backdrop-blur-sm">
          <span className="flex h-2 w-2 rounded-full bg-brand-600 ring-2 ring-brand-200" />
          <span className="font-medium text-brand-700">{markers.length} کافه و رستوران</span>
        </div>
      )}
    </div>
  );
}

// ── Export ────────────────────────────────────────────────────────────────────

export function IranMapSection() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-white to-brand-50/40 py-20 sm:py-28">
      {/* Subtle background pattern */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage:
            "radial-gradient(circle, #0f6e56 1px, transparent 1px)",
          backgroundSize: "32px 32px",
        }}
      />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Heading */}
        <div className="mb-12 text-center">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700">
            <span className="flex h-1.5 w-1.5 rounded-full bg-brand-500" />
            پراکنش جغرافیایی
          </div>
          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            میزی در سراسر ایران
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-500">
            از تهران تا مشهد، از تبریز تا شیراز — کافه‌ها و رستوران‌های بیشتری هر روز به میزی می‌پیوندند.
          </p>
        </div>

        {/* Map */}
        <div className="flex justify-center">
          <Suspense
            fallback={
              <div
                className="w-full max-w-lg animate-pulse rounded-2xl bg-brand-50"
                style={{ aspectRatio: "6/5" }}
              />
            }
          >
            <IranMapSvg />
          </Suspense>
        </div>
      </div>
    </section>
  );
}
