<script setup lang="ts">
import MailAt from "~/components/svg/Contact/MailAt.vue";
import WhatsappLight from "~/components/svg/Contact/WhatsappLight.vue";
import Phone from "~/components/svg/Contact/Phone.vue";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import EgyptFlag from "~/components/svg/country/EgyptFlag.vue";
import SaudiFlag from "~/components/svg/country/SaudiFlag.vue";
import NoiseBg from "~/components/svg/NoiseBg.vue";
import WhatsappColored from "~/components/svg/Contact/WhatsappColored.vue";

defineProps({
  email: { type: String, default: "" },
  egyPhone: { type: String, default: "" },
  saudiPhone: { type: String, default: "" },
  whatsappEgy: { type: String, default: "" },
  whatsappSaudi: { type: String, default: "" },
});

const isOpen = ref(false);
</script>

<template>
  <div
    class="fixed right-0 bottom-0 left-0 z-[999] rounded-t-3xl bg-white/90 shadow-[0_-2px_10px_rgba(0,0,0,0.08)] backdrop-blur-md"
  >
    <div
      class="relative flex h-[70px] items-center justify-around gap-5 text-[#061D37]"
    >
      <!-- WhatsApp -->
      <Popover v-if="whatsappEgy || whatsappSaudi">
        <PopoverTrigger as-child>
          <button
            class="flex flex-col items-center justify-center gap-2"
            @click="isOpen = !isOpen"
          >
            <component
              :is="isOpen ? WhatsappColored : WhatsappLight"
              class="h-6 w-6"
            />
            <span
              class="text-xs font-normal"
              :class="isOpen ? 'text-gradient' : 'text-[#061D37]'"
              >WhatsApp</span
            >
          </button>
        </PopoverTrigger>
        <PopoverContent
          class="flex w-[60px] flex-col items-center justify-center gap-2 border-none bg-transparent shadow-none"
        >
          <NuxtLink
            v-if="whatsappEgy"
            :to="`https://wa.me/${whatsappEgy.replace('+', '')}`"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div
              class="flex h-[55px] w-[55px] items-center justify-center rounded-full border-4 border-white bg-[#fff] p-2 transition-transform hover:scale-105"
            >
              <EgyptFlag class="h-12 w-12" />
            </div>
          </NuxtLink>

          <NuxtLink
            v-if="whatsappSaudi"
            :to="`https://wa.me/${whatsappSaudi.replace('+', '')}`"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div
              class="flex h-[55px] w-[55px] items-center justify-center rounded-full border-4 border-white bg-[#fff] p-2 transition-transform hover:scale-105"
            >
              <SaudiFlag class="h-12 w-12" />
            </div>
          </NuxtLink>
        </PopoverContent>
      </Popover>

      <!-- Phone -->
      <Popover v-if="egyPhone || saudiPhone">
        <PopoverTrigger as-child>
          <div
            class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-white bg-[#061D37] p-5 shadow-[0_2px_10px_rgba(0,0,0,0.08)] z-[999]"
          >
            <Phone class="h-7 w-7 text-white" />
            <NoiseBg class="absolute -top-[15%] left-[10%] h-[85px] w-[85px]" />
          </div>
        </PopoverTrigger>

        <PopoverContent
          side="top"
          align="center"
          class="flex w-[190px] flex-col items-center justify-center gap-2 border-none bg-transparent shadow-none"
        >
          <NuxtLink
            v-if="egyPhone"
            :to="`tel:${egyPhone.replace('+', '')}`"
            target="_blank"
            rel="noopener noreferrer"
            class="relative"
          >
            <div
              class="flex h-[55px] w-[170px] items-center justify-center gap-2 rounded-full border-1 border-white bg-[#FCFDFF] p-1"
            >
              <p class="text-md font-normal tracking-wider text-[#061D37]">
                {{ egyPhone }}
              </p>
              <EgyptFlag class="h-6 w-6" />
              <NoiseBg
                class="absolute -top-[15%] right-[10%] h-[85px] w-[85px]"
              />
            </div>
          </NuxtLink>

          <NuxtLink
            v-if="saudiPhone"
            :to="`tel:${saudiPhone.replace('+', '')}`"
            target="_blank"
            rel="noopener noreferrer"
            class="relative"
          >
            <div
              class="flex h-[55px] w-[170px] items-center justify-center gap-2 rounded-full border-1 border-white bg-[#FCFDFF] p-1"
            >
              <p class="text-md font-normal tracking-wider text-[#061D37]">
                {{ saudiPhone }}
              </p>
              <SaudiFlag class="h-6 w-6" />
              <NoiseBg
                class="absolute -top-[15%] right-[10%] h-[85px] w-[85px]"
              />
            </div>
          </NuxtLink>
        </PopoverContent>
      </Popover>

      <!-- Email -->
      <NuxtLink
        v-if="email"
        :to="`mailto:${email}`"
        class="flex flex-col items-center justify-center gap-2"
      >
        <MailAt class="h-6 w-6" />
        <span class="text-xs font-normal">E-mail</span>
      </NuxtLink>
    </div>
  </div>
</template>

<style scoped>
.gradient {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(80, 120, 255, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(160, 80, 255, 0.2) 0%,
      transparent 40%
    ),
    linear-gradient(360deg, #061d37 0%, #0a1e2d 100%);
}
.text-gradient {
  background: linear-gradient(90deg, #00bed7 0%, #6489e3 50%, #c853ef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
</style>
