import { useEffect, useState } from "react";
import { ShieldAlert } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";

const STORAGE_KEY = "investplus_security_notice_seen";

const WHATSAPP_URL =
  "https://wa.me/551152863746?text=" +
  encodeURIComponent(
    "Olá, gostaria de relatar uma possível divulgação indevida de oferta em nome da Investplus.",
  );


function WhatsAppIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884a9.82 9.82 0 016.988 2.896 9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.945c0 2.096.549 4.142 1.594 5.945L0 24l6.305-1.654a11.94 11.94 0 005.71 1.454h.006c6.585 0 11.946-5.359 11.949-11.945a11.87 11.87 0 00-3.45-8.406" />
    </svg>
  );
}

export function SecurityNoticeModal() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined") return;
    let seen: string | null = null;
    try {
      seen = window.sessionStorage.getItem(STORAGE_KEY);
    } catch {
      seen = "true";
    }
    if (seen) return;
    const t = window.setTimeout(() => setOpen(true), 1200);
    return () => window.clearTimeout(t);
  }, []);

  function handleOpenChange(next: boolean) {
    setOpen(next);
    if (!next) {
      try {
        window.sessionStorage.setItem(STORAGE_KEY, "true");
      } catch {
        /* sessionStorage indisponível — ignora */
      }
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="max-h-[85dvh] w-[calc(100%-2rem)] max-w-[580px] gap-0 overflow-y-auto rounded-2xl border-border/60 p-6 shadow-[0_40px_80px_-30px_oklch(0.15_0.03_250/0.55)] sm:rounded-2xl sm:p-8">
        <div className="flex flex-col items-center text-center">
          <div className="brand-gradient inline-flex size-14 items-center justify-center rounded-2xl">
            <ShieldAlert className="size-7 text-[oklch(0.15_0.02_250)]" aria-hidden="true" />
          </div>
          <DialogTitle className="mt-5 font-display text-lg font-bold uppercase leading-snug tracking-tight sm:text-xl">
            Atenção a anúncios e abordagens fora do site da InvestPlus
          </DialogTitle>

        </div>

        <DialogDescription className="mt-5 text-left text-sm leading-relaxed text-foreground/70">
          Tenha cuidado com empresas ou pessoas que afirmem possuir uma oferta pública de
          investimento disponível na Investplus.
        </DialogDescription>

        <div className="mt-4 rounded-xl border-l-4 border-[oklch(0.5_0.16_210)] bg-muted px-4 py-3 text-left text-sm leading-relaxed text-foreground/80">
          As únicas ofertas oficialmente estruturadas e publicadas por meio da Investplus são
          aquelas apresentadas neste site oficial. A Investplus é uma plataforma eletrônica de
          investimento participativo autorizada pela Comissão de Valores Mobiliários, CVM.
        </div>

        <p className="mt-4 text-left text-sm leading-relaxed text-foreground/70">
          Antes de realizar qualquer pagamento, transferência ou investimento, confirme se a oferta
          está efetivamente disponível em nosso site.
        </p>
        <p className="mt-3 text-left text-sm leading-relaxed text-foreground/70">
          Caso tenha conhecimento de empresa ou pessoa utilizando indevidamente o nome da
          Investplus, entre em contato com nosso suporte.
        </p>

        <div className="mt-6 flex flex-col gap-3 sm:flex-row-reverse">
          <button
            type="button"
            onClick={() => handleOpenChange(false)}
            className="brand-gradient inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-[oklch(0.15_0.02_250)] transition hover:opacity-90 sm:w-auto"
          >
            Entendi
          </button>
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition hover:bg-muted sm:w-auto"
          >
            <WhatsAppIcon className="size-4" />
            Denunciar pelo WhatsApp
          </a>
        </div>

        <p className="mt-4 text-center text-xs text-foreground/50">
          Sua denúncia será tratada com confidencialidade.
        </p>
      </DialogContent>
    </Dialog>
  );
}
