"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { ShoppingBag, X } from "lucide-react";

/*
  A prova social: "Fulana comprou isto há 3 minutos".

  Mesmas configurações do catálogo — ligar, intervalo, duração, quantos cabem
  na tela e de que lado aparecem. O desenho é do Vendor; o comportamento é o
  mesmo dos outros temas, senão a loja mudaria de tema e a configuração
  deixaria de valer.

  Os nomes são sorteados de uma lista, como no resto do sistema: mostrar o
  nome real de quem comprou seria expor cliente.
*/

const NOMES = [
  "Ana Paula",
  "Carlos Eduardo",
  "Fernanda",
  "João Vitor",
  "Mariana",
  "Rafael",
  "Juliana",
  "Guilherme",
  "Larissa",
  "Bruno",
  "Camila",
  "Felipe",
  "Patrícia",
  "Diego",
  "Aline",
  "Mateus",
  "Vanessa",
  "Thiago",
  "Renata",
  "Leandro",
  "Priscila",
  "Eduardo",
  "Tatiane",
  "Lucas",
  "Natália",
  "Vinícius",
  "Beatriz",
  "Rodrigo",
  "Gabriela",
  "André",
];

export type VendorProvaSocialAjustes = {
  ligado?: boolean | null;
  intervaloSegundos?: number | null;
  duracaoSegundos?: number | null;
  quantosCabem?: number | null;
  posicao?: string | null;
};

export type VendorProdutoDaProva = {
  id: string;
  name: string;
  image_url?: string | null;
};

type Aviso = {
  id: string;
  produtoId: string;
  quem: string;
  produto: string;
  foto?: string | null;
  minutos: number;
};

export function VendorProvaSocial({
  slug,
  produtos,
  ligado,
  intervaloSegundos,
  duracaoSegundos,
  quantosCabem,
  posicao,
}: {
  slug: string;
  produtos: VendorProdutoDaProva[];
  ligado?: boolean | null;
  intervaloSegundos?: number | null;
  duracaoSegundos?: number | null;
  quantosCabem?: number | null;
  posicao?: string | null;
}) {
  const [avisos, setAvisos] = useState<Aviso[]>([]);

  const fechar = useCallback((id: string) => {
    setAvisos((antes) => antes.filter((aviso) => aviso.id !== id));
  }, []);

  useEffect(() => {
    if (!ligado || !produtos.length) return;

    const intervalo = Math.min(120000, Math.max(5000, Number(intervaloSegundos || 18) * 1000));
    const duracao = Math.min(20000, Math.max(2000, Number(duracaoSegundos || 5) * 1000));
    const teto = Math.min(5, Math.max(1, Number(quantosCabem || 2)));

    let parado = false;
    let proximo: number | null = null;

    const mostrar = () => {
      if (parado) return;
      const produto = produtos[Math.floor(Math.random() * produtos.length)];
      if (!produto) return;
      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
      setAvisos((antes) =>
        [
          {
            id,
            produtoId: String(produto.id),
            quem: NOMES[Math.floor(Math.random() * NOMES.length)] || "Cliente",
            produto: produto.name,
            foto: produto.image_url,
            minutos: Math.floor(Math.random() * 7) + 1,
          },
          ...antes,
        ].slice(0, teto)
      );
      window.setTimeout(() => setAvisos((antes) => antes.filter((aviso) => aviso.id !== id)), duracao);
      proximo = window.setTimeout(mostrar, intervalo);
    };

    proximo = window.setTimeout(mostrar, 1600);
    return () => {
      parado = true;
      if (proximo !== null) window.clearTimeout(proximo);
    };
  }, [ligado, produtos, intervaloSegundos, duracaoSegundos, quantosCabem]);

  if (!ligado || !avisos.length) return null;

  const naDireita = posicao === "right";

  return (
    <div
      className={`pointer-events-none fixed bottom-24 z-[75] flex w-[min(320px,calc(100vw-2rem))] flex-col gap-2 md:bottom-6 ${
        naDireita ? "right-4 md:right-6" : "left-4 md:left-6"
      }`}
    >
      {avisos.map((aviso) => (
        <div
          key={aviso.id}
          className="pointer-events-auto flex items-center gap-2.5 border bg-[var(--vd-surface)] p-2.5 shadow-[0_12px_28px_rgba(15,23,42,0.16)]"
          style={{ borderRadius: "var(--vd-radius-lg)", borderColor: "var(--vd-border)" }}
        >
          <Link href={`/${slug}/p/${aviso.produtoId}`} className="flex min-w-0 flex-1 items-center gap-2.5">
            <span
              className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden border bg-white"
              style={{ borderRadius: "var(--vd-radius-md)", borderColor: "var(--vd-border)" }}
            >
              {aviso.foto ? (
                /* eslint-disable-next-line @next/next/no-img-element */
                <img src={aviso.foto} alt="" className="h-full w-full object-cover" />
              ) : (
                <ShoppingBag className="h-4 w-4 text-[var(--vd-muted-fg)]" />
              )}
            </span>
            <span className="min-w-0">
              <span className="block truncate text-[12.5px] font-semibold leading-snug">
                {aviso.quem} comprou
              </span>
              <span className="block truncate text-[11.5px] leading-snug text-[var(--vd-muted-fg)]">
                {aviso.produto} · há {aviso.minutos} min
              </span>
            </span>
          </Link>
          <button
            type="button"
            aria-label="Fechar aviso"
            onClick={() => fechar(aviso.id)}
            className="shrink-0 text-[var(--vd-muted-fg)] transition-opacity hover:opacity-70"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        </div>
      ))}
    </div>
  );
}