import { Link } from "@tanstack/react-router";
import { X } from "lucide-react";
import { useEffect, useState } from "react";
import { useConsent } from "@/lib/consent";

export function CookieBanner() {
  const { consent, save, open, setOpen } = useConsent();
  const [prefs, setPrefs] = useState(false);
  const [stats, setStats] = useState(false);
  const [mkt, setMkt] = useState(false);
  useEffect(() => { setStats(consent.statistics); setMkt(consent.marketing); }, [consent]);

  if (!open) {
    return consent.decided ? (
      <button onClick={() => setOpen(true)} className="fixed bottom-0 left-8 z-50 rounded-t-md bg-surface px-4 py-2 text-[13px] text-ink shadow-[0_0_10px_rgba(0,0,0,.25)]">
        Gerenciar consentimento
      </button>
    ) : null;
  }
  const btn = "flex-1 rounded-[5px] px-3 py-2.5 text-[15px] font-medium";
  const row = (label: string, desc: string, checked: boolean | "always", on?: (v: boolean) => void) => (
    <div className="border-b border-border py-2">
      <div className="flex items-center justify-between font-semibold text-ink">
        <span>{label}</span>
        {checked === "always" ? <span className="text-[13px] text-success">Sempre ativo</span> :
          <input type="checkbox" checked={checked} onChange={(e) => on?.(e.target.checked)} className="h-4 w-4" />}
      </div>
      <p className="mt-1 text-[12px] leading-snug text-muted-foreground">{desc}</p>
    </div>
  );
  return (
    <div role="dialog" aria-label="Gerenciar Consentimento de Cookies"
      className="fixed bottom-2 left-2 z-[60] max-h-[90vh] w-[calc(100%-1rem)] max-w-[526px] overflow-y-auto rounded-[12px] bg-surface p-5 text-ink shadow-[0_0_10px_rgba(0,0,0,.4)]">
      <div className="relative mb-4 text-center text-[15px] font-semibold">
        Gerenciar Consentimento de Cookies
        <button aria-label="Fechar" onClick={() => setOpen(false)} className="absolute right-0 top-0 border-2 border-ink"><X className="h-4 w-4" /></button>
      </div>
      <p className="text-[13px] leading-snug">
        Para fornecer as melhores experiências, usamos tecnologias como cookies para armazenar e/ou acessar informações do dispositivo. O consentimento para essas tecnologias nos permitirá processar dados como comportamento de navegação ou IDs exclusivos neste site. Não consentir ou retirar o consentimento pode afetar negativamente certos recursos e funções.
      </p>
      {prefs && (
        <div className="mt-3 text-[14px]">
          {row("Funcional", "O armazenamento ou acesso técnico é estritamente necessário para a finalidade legítima de permitir a utilização de um serviço específico explicitamente solicitado pelo assinante ou utilizador, ou com a finalidade exclusiva de efetuar a transmissão de uma comunicação através de uma rede de comunicações eletrónicas.", "always")}
          {row("Estatísticas", "O armazenamento ou acesso técnico que é usado exclusivamente para fins estatísticos.", stats, setStats)}
          {row("Marketing", "O armazenamento ou acesso técnico é necessário para criar perfis de usuário para enviar publicidade ou para rastrear o usuário em um site ou em vários sites para fins de marketing semelhantes.", mkt, setMkt)}
        </div>
      )}
      <div className="mt-5 flex gap-2.5">
        <button className={`${btn} bg-consent text-primary-foreground`} onClick={() => save({ statistics: true, marketing: true })}>Aceitar</button>
        <button className={`${btn} bg-tile`} onClick={() => save({ statistics: false, marketing: false })}>Negar</button>
        {prefs
          ? <button className={`${btn} bg-tile`} onClick={() => save({ statistics: stats, marketing: mkt })}>Salvar preferências</button>
          : <button className={`${btn} bg-tile`} onClick={() => setPrefs(true)}>Ver preferências</button>}
      </div>
      <div className="mt-4 flex justify-center gap-4 text-[12px] text-consent underline">
        <Link to="/politica-de-cookies-br">Política de Cookies</Link>
        <Link to="/politica-de-privacidade-e-protecao-de-dados-pessoais">Política de privacidade e Proteção de Dados Pessoais</Link>
      </div>
    </div>
  );
}