"use client";

export type ExperienceMapMarker = {
  id: string;
  label: string;
  lat: number;
  lng: number;
};

/** Lightweight map shell (no third-party map SDK). Markers positioned relatively for preview. */
export function ExperienceMap({
  markers = [],
  center = { lat: 35.25, lng: 59.22 },
  title = "نقشه",
}: {
  markers?: ExperienceMapMarker[];
  center?: { lat: number; lng: number };
  title?: string;
}) {
  const span = 0.08;
  const toPct = (lat: number, lng: number) => {
    const x = ((lng - (center.lng - span)) / (span * 2)) * 100;
    const y = ((center.lat + span - lat) / (span * 2)) * 100;
    return {
      left: `${Math.min(95, Math.max(5, x))}%`,
      top: `${Math.min(95, Math.max(5, y))}%`,
    };
  };

  return (
    <div
      role="region"
      aria-label={title}
      className="relative h-64 overflow-hidden rounded-xl border border-[var(--border)] bg-[linear-gradient(135deg,var(--experience-accent-soft),var(--surface-muted))]"
    >
      <div className="pointer-events-none absolute inset-0 opacity-30 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:32px_32px]" />
      {markers.map((m) => {
        const pos = toPct(m.lat, m.lng);
        return (
          <button
            key={m.id}
            type="button"
            title={m.label}
            aria-label={m.label}
            className="absolute z-10 -translate-x-1/2 -translate-y-full rounded-full bg-[var(--experience-accent)] px-2 py-1 text-[10px] font-medium text-white shadow transition-transform hover:scale-105"
            style={pos}
          >
            {m.label}
          </button>
        );
      })}
      {markers.length === 0 ? (
        <p className="absolute inset-0 flex items-center justify-center text-sm text-[var(--muted)]">
          نشانگری ثبت نشده
        </p>
      ) : null}
    </div>
  );
}