import { useState, useEffect } from "react";
import { FiAlertCircle, FiMail } from "react-icons/fi";
import { useAuth } from "@/hooks/useAuth";
import { privateApi } from "@/api/privateClient";

export const BANNER_H = "40px";

export default function TopBanner() {
  const { user, isLoading } = useAuth();
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [cooldown, setCooldown] = useState(0);

  const show = !isLoading && !!user && user.email_verified === false;

  useEffect(() => {
    document.documentElement.style.setProperty("--top-banner-h", show ? BANNER_H : "0px");
  }, [show]);

  useEffect(() => {
    if (cooldown <= 0) return;
    const t = setTimeout(() => setCooldown((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [cooldown]);

  async function handleResend() {
    setSending(true);
    try {
      await privateApi.post("/api/account/resend-verification/");
      setSent(true);
    } catch (err: any) {
      const secs = err?.response?.data?.seconds_remaining;
      if (secs) setCooldown(secs);
    } finally {
      setSending(false);
    }
  }

  if (!show) return null;

  return (
    <div
      role="alert"
      aria-live="polite"
      className="fixed top-0 left-0 right-0 z-[200] flex items-center justify-center gap-2.5 px-12 text-amber-200 text-[0.8rem]"
      style={{
        height: BANNER_H,
        background: "color-mix(in hsl, #92400e, var(--c-background) 15%)",
        borderBottom: "1px solid color-mix(in hsl, #f59e0b, transparent 55%)",
      }}
    >
      <FiAlertCircle size={14} className="shrink-0 text-amber-400" />
      <span>Tvůj e-mail ještě není ověřen.</span>

      {sent ? (
        <span className="text-emerald-300 font-semibold">E-mail odeslán!</span>
      ) : (
        <button
          onClick={handleResend}
          disabled={sending || cooldown > 0}
          className="inline-flex items-center gap-1.5 rounded-full border border-amber-400/55 bg-amber-400/25 px-2.5 py-0.5 text-[0.75rem] font-semibold text-amber-200 transition-opacity disabled:cursor-not-allowed disabled:opacity-60"
        >
          <FiMail size={11} />
          {sending ? "Odesílám…" : cooldown > 0 ? `Počkej ${cooldown}s` : "Odeslat znovu"}
        </button>
      )}
    </div>
  );
}