"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

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

  useEffect(() => {
    const consent = document.cookie.includes("cookie_consent=");
    if (!consent) setVisible(true);
  }, []);

  function setCookie(value: string) {
    document.cookie = `cookie_consent=${value}; path=/; max-age=31536000; SameSite=Lax`;
    fetch("/api/consent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type: "cookies", value }),
    }).catch(() => {});
    setVisible(false);
  }

  if (!visible) return null;

  return (
    <div
      // R17 A.3: was z-[9998] which overlaid the mobile bottom-nav and
      // hid every nav icon on first visit. Pushed above the nav on
      // mobile (bottom-16) and dropped z to 55 (under the nav's z-60
      // on small screens). On md+ the nav isn't visible, so revert to
      // bottom-0.
      className="fixed bottom-16 md:bottom-0 left-0 right-0 z-[55] bg-zinc-900 border-t border-zinc-700 shadow-2xl pb-[env(safe-area-inset-bottom)]"
    >
      <div className="max-w-6xl mx-auto p-4 sm:p-5">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
          <div className="flex items-start gap-3 flex-1">
            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
            </div>
            <div className="text-sm text-zinc-300">
              <p className="font-medium text-white mb-1">Cookie Preferences</p>
              <p>
                We use cookies to enhance your browsing experience, serve personalized content, and analyze traffic.
                You can choose to accept all cookies or only essential ones.{" "}
                <Link href="/privacy" className="text-primary hover:text-primary-light underline">
                  Privacy Policy
                </Link>
                {" "}&middot;{" "}
                <Link href="/cookies" className="text-primary hover:text-primary-light underline">
                  Cookie Policy
                </Link>
              </p>
            </div>
          </div>
          <div className="flex gap-2 shrink-0 w-full sm:w-auto">
            <button
              onClick={() => setCookie("rejected")}
              className="flex-1 sm:flex-none px-4 py-2 text-sm border border-zinc-600 text-zinc-300 rounded-lg hover:bg-zinc-800 transition-colors"
            >
              Reject All
            </button>
            <button
              onClick={() => setCookie("essential")}
              className="flex-1 sm:flex-none px-4 py-2 text-sm border border-zinc-600 text-zinc-300 rounded-lg hover:bg-zinc-800 transition-colors"
            >
              Essential Only
            </button>
            <button
              onClick={() => setCookie("all")}
              className="flex-1 sm:flex-none px-4 py-2 text-sm bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors"
            >
              Accept All
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}