<template>
  <div
    v-if="cookieAccepted !== null && !cookieAccepted"
    class="fixed bottom-0 left-0 w-full bg-black-300 text-white py-6 px-4 md:px-8 lg:px-16 flex flex-col md:flex-row justify-between items-center gap-4 shadow-lg z-50 backdrop-blur-sm"
  >
    <div class="text-base md:text-lg max-w-3xl">
      We use cookies to enhance your experience. By continuing to use our
      website, you acknowledge that you have read and understand our
      <NuxtLink
        to="/privacy-policy"
        class="text-blue-400 hover:text-blue-200 underline underline-offset-2"
      >
        Privacy Policy
      </NuxtLink>
      and
      <NuxtLink
        to="/terms-of-service"
        class="text-blue-400 hover:text-blue-200 underline underline-offset-2"
      >
        Terms of Service
      </NuxtLink>
      , and consent to our use of cookies.
    </div>
    <div class="flex gap-3 whitespace-nowrap">
      <button
        @click="acceptCookies"
        class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg transition-colors duration-200 font-medium"
      >
        Accept
      </button>
      <button
        @click="declineCookies"
        class="bg-red-500 hover:bg-red-400 text-white px-6 py-2.5 rounded-lg transition-colors duration-200 font-medium"
      >
        Decline
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const emit = defineEmits(["consent-update"]);
const cookieAccepted = ref(null);
const COOKIE_CONSENT_KEY = "cookieConsent";
const CONSENT_DURATION_DAYS = 30;

onMounted(() => {
  checkCookieConsent();
});

const checkCookieConsent = () => {
  const storedConsent = localStorage.getItem(COOKIE_CONSENT_KEY);
  if (!storedConsent) {
    cookieAccepted.value = false;
    return;
  }

  try {
    const { value, timestamp } = JSON.parse(storedConsent);
    const now = new Date().getTime();
    const daysSinceConsent = (now - timestamp) / (1000 * 60 * 60 * 24);

    if (daysSinceConsent < CONSENT_DURATION_DAYS) {
      cookieAccepted.value = true;
    } else {
      localStorage.removeItem(COOKIE_CONSENT_KEY);
      cookieAccepted.value = false;
    }
  } catch (error) {
    console.error("Error parsing cookie consent:", error);
    localStorage.removeItem(COOKIE_CONSENT_KEY);
    cookieAccepted.value = false;
  }
};

const saveConsent = (value) => {
  const consent = {
    value,
    timestamp: new Date().getTime(),
  };
  localStorage.setItem(COOKIE_CONSENT_KEY, JSON.stringify(consent));
  cookieAccepted.value = true;
};

const acceptCookies = () => {
  saveConsent("accepted");
  emit("consent-update", "accepted");
};

const declineCookies = () => {
  saveConsent("declined");
  emit("consent-update", "declined");
};
</script>

<template>
  <div>
    <slot />
    <CookieConsent />
  </div>
</template>

<script setup>
import CookieConsent from '~/components/CookieConsent.vue';
</script>