<template>
  <footer class="footer p-10 bg-secondary text-neutral-content">
    <nav>
      <h6 class="footer-title">Social</h6>
      <a v-if="settingsStore.settings.link_facebook" class="link link-hover" :href="settingsStore.settings.link_facebook" target="_blank">Facebook</a>
      <a v-if="settingsStore.settings.link_google" class="link link-hover" :href="settingsStore.settings.link_google" target="_blank">Google</a>
      <a v-if="settingsStore.settings.link_website" class="link link-hover" :href="settingsStore.settings.link_website" target="_blank">Website</a>
    </nav>
    <nav>
      <h6 class="footer-title">Quick Call</h6>
      <div v-for="(call, idx) in quickCalls" :key="idx">{{ call.name }} - {{ call.phone }}</div>
    </nav>
    <nav>
      <h6 class="footer-title">Search Shortcuts</h6>
      <div class="grid grid-cols-2 gap-x-4 gap-y-2">
        <div class="flex items-center gap-2">
          <kbd class="kbd kbd-sm bg-neutral text-neutral-content border-neutral-content/30">@</kbd>
          <span class="text-sm opacity-80">Last name</span>
        </div>
        <div class="flex items-center gap-2">
          <kbd class="kbd kbd-sm bg-neutral text-neutral-content border-neutral-content/30">!</kbd>
          <span class="text-sm opacity-80">Address</span>
        </div>
        <div class="flex items-center gap-2">
          <kbd class="kbd kbd-sm bg-neutral text-neutral-content border-neutral-content/30">#</kbd>
          <span class="text-sm opacity-80">Phone</span>
        </div>
        <div class="flex items-center gap-2">
          <kbd class="kbd kbd-sm bg-neutral text-neutral-content border-neutral-content/30">$</kbd>
          <span class="text-sm opacity-80">Account #</span>
        </div>
      </div>
    </nav>
    <nav v-if="settingsStore.settings.link_google_review">
      <h6 class="footer-title">Google Review</h6>
      <div class="flex items-center gap-2">
        <img src="../../assets/images/googlereview.png" alt="Google Review QR" class="h-16 w-auto rounded" />
        <div class="flex flex-col gap-1">
          <a class="link link-hover text-xs break-all max-w-32">{{ reviewShortUrl }}</a>
          <button @click="copyReviewLink" class="btn btn-outline btn-xs">Copy Link</button>
        </div>
      </div>
    </nav>
  </footer>
</template>


<script setup lang="ts">
import { ref, computed } from 'vue';
import { useSettingsStore } from '../../stores/settings';

const settingsStore = useSettingsStore();

const quickCalls = computed(() => settingsStore.parseQuickCalls());

const reviewShortUrl = computed(() => {
  const url = settingsStore.settings.link_google_review || '';
  try {
    return url.replace(/^https?:\/\//, '');
  } catch {
    return url;
  }
});

const copyReviewLink = async () => {
    const textToCopy = settingsStore.settings.link_google_review || '';
    
    // Try the modern Clipboard API first (works in secure contexts like HTTPS or localhost)
    if (navigator.clipboard && window.isSecureContext) {
        try {
            await navigator.clipboard.writeText(textToCopy);
            alert('Link copied to clipboard!');
            return;
        } catch (err) {
            console.warn('Clipboard API failed, falling back to legacy method.', err);
        }
    }

    // Fallback for non-secure contexts (like HTTP LAN)
    const textArea = document.createElement("textarea");
    textArea.value = textToCopy;
    
    // Ensure it's not visible but part of the DOM
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    textArea.style.top = "0";
    document.body.appendChild(textArea);
    
    textArea.focus();
    textArea.select();

    try {
        const successful = document.execCommand('copy');
        if (successful) {
             alert('Link copied to clipboard!');
        } else {
             alert('Unable to copy link. Please manually copy: ' + textToCopy);
        }
    } catch (err) {
        console.error('Fallback copy failed', err);
        alert('Unable to copy link. Please manually copy: ' + textToCopy);
    }

    document.body.removeChild(textArea);
};
</script>
<style></style>
