import { useEffect, useState } from "react";
import { getConsent, setConsent, startHeartbeat, type ConsentValue } from "../lib/analytics.js";

export function CookieConsent() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const current = getConsent();
    if (current === null) {
      setVisible(true);
    } else if (current === "accepted") {
      startHeartbeat();
    }
  }, []);

  function choose(value: ConsentValue) {
    setConsent(value);
    setVisible(false);
    if (value === "accepted") startHeartbeat();
  }

  if (!visible) return null;

  return (
    <div className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-panel/95 backdrop-blur px-4 py-3 sm:px-6">
      <div className="mx-auto flex max-w-4xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-xs text-slate-300 sm:text-sm">
          Este site coleta dados básicos de uso (endereço IP, país aproximado e páginas
          acessadas) apenas para estatísticas anônimas de acesso. Nenhum dado é vendido ou
          compartilhado com terceiros. Você pode recusar sem perder acesso ao atlas.
        </p>
        <div className="flex shrink-0 gap-2">
          <button
            onClick={() => choose("declined")}
            className="rounded px-3 py-1.5 text-xs text-slate-300 hover:bg-white/5 sm:text-sm"
          >
            Recusar
          </button>
          <button
            onClick={() => choose("accepted")}
            className="rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 sm:text-sm"
          >
            Aceitar
          </button>
        </div>
      </div>
    </div>
  );
}