"use client";

export type PontoNoMapa = {
  id: string;
  titulo: string;
  hora: string | null;
  lat: number;
  lng: number;
  ordem: number;
};

/**
 * Mapa do dia, embutido do Google.
 *
 * Usa o endereco classico de embutir do Google Maps, que nao pede chave nem
 * conta de faturamento — diferente da plataforma de mapas deles, que exige
 * cartao mesmo na faixa gratuita.
 *
 * O que se ganha: o mapa que o brasileiro reconhece, com os controles e o
 * "ver rota" do proprio Google, e o tracado real do trajeto quando ha mais de
 * uma parada.
 *
 * O que se perde, e foi decisao consciente: nao da para tingir o mapa com a
 * cor da marca nem desenhar alfinete numerado. O embutido e o Google como ele
 * e. Por isso a ordem das paradas fica na lista ao lado, e nao no mapa.
 *
 * Ressalva honesta: este endereco de embutir nao esta na documentacao oficial
 * do Google — eles podem mudar. Se um dia parar, o caminho e uma chave
 * gratuita de provedor de mapas, e ai muda so este arquivo.
 */
export default function MapaDoDia({ pontos }: { pontos: PontoNoMapa[]; cor?: string }) {
  if (!pontos.length) return null;

  const coord = (p: PontoNoMapa) => `${p.lat},${p.lng}`;

  /* Paradas repetidas no mesmo endereco viram uma. Sem isso, tres visitas no
     mesmo predio pedem uma rota de um ponto para ele mesmo, e o Google
     responde abrindo o mundo inteiro — foi o que apareceu no teste. */
  const distintos = pontos.filter(
    (p, i, todos) => i === 0 || coord(p) !== coord(todos[i - 1])
  );

  const url =
    distintos.length === 1
      ? `https://maps.google.com/maps?q=${coord(distintos[0])}&z=15&output=embed`
      : `https://maps.google.com/maps?saddr=${coord(distintos[0])}&daddr=${distintos
          .slice(1)
          .map(coord)
          .join("+to:")}&output=embed`;

  return (
    <div className="overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)]">
      <iframe
        src={url}
        title={
          distintos.length === 1
            ? `Mapa de ${pontos[0].titulo}`
            : `Trajeto com ${distintos.length} paradas`
        }
        loading="lazy"
        /* Nao envia o endereco do admin para o Google: a URL da tela interna
           nao interessa a ninguem de fora. */
        referrerPolicy="no-referrer"
        className="h-[280px] w-full border-0 sm:h-[380px]"
      />
    </div>
  );
}