<!-- headerauth.vue -->
<template>
  <!-- Main header container, contains both rows -->
  <header class="sticky top-0 z-50 bg-base-200 shadow-sm">
    
    <!-- Row 1: The primary navbar -->
    <div class="navbar px-4">
      
      <!-- Navbar Start: Logo & Mobile Menu Toggle -->
      <div class="navbar-start">
        <label for="my-drawer-2" class="btn btn-ghost btn-circle drawer-button lg:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </label>
        <div class="flex flex-col items-center">
          <span class="text-xs text-base-content/60">{{ dayOfWeek }}</span>
          <span class="normal-case text-xl font-bold">
            {{ currentDate }}
          </span>
        </div>
      </div>

      <!-- 
        Navbar End: Contains the Search Bar (on tablet+) and all action buttons.
        Using flexbox to manage the space distribution.
      -->
      <div class="navbar-end w-full gap-4">
        
        <!-- Search Bar Wrapper (for tablet and up) -->
        <!-- This is the growing element. Hidden on mobile. -->
        <div class="hidden md:flex flex-grow max-w-xl">
           <div class="relative w-full">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-base-content/50">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
              </svg>
            </div>
            <input
              id="customer-search-input-desktop"
              type="text"
              placeholder="Search customers..."
              v-model="searchStore.searchTerm"
              class="input input-bordered w-full pl-10"
              @input="searchStore.debouncedSearch"
            />
          </div>
        </div>

        <!-- Action Buttons Wrapper -->
        <!-- This group is set to not shrink, keeping it always visible. -->
        <div class="flex-shrink-0 flex items-center gap-2">
          
          <!-- VOIP Routing Dropdown (visible tablet+) -->
          <div class="dropdown dropdown-end hidden md:flex">
            <label tabindex="0" class="btn btn-ghost gap-2">
               <svg xmlns="http://www.w.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-success">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 6.75z" />
              </svg>
              <span class="font-semibold whitespace-nowrap">{{ currentPhone || 'Routing' }}</span>
            </label>
            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-4">
              <li v-for="option in routingOptions" :key="option.value">
                <a @click.prevent="showConfirmRoute(option)" href="#">
                  <span class="font-mono">{{ option.label }}</span>
                </a>
              </li>
            </ul>
          </div>
        
          <!-- Create Customer Button (visible tablet+) -->
          <router-link :to="{ name: 'customerCreate' }" class="btn btn-success btn-sm hidden md:inline-flex">
            New Customer
          </router-link>

          <!-- User Dropdown (Always visible) -->
          <div v-if="user.user_id" class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost btn-circle avatar">
              <div class="w-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center">
                <span class="text-lg font-bold">{{ userInitials }}</span>
              </div>
            </label>
            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
              <li class="p-2 font-semibold">{{ user.user_name }}</li>
              <div class="divider my-0"></div>
              <li><router-link :to="{ name: 'employeeProfile', params: { id: user.user_id } }">Profile</router-link></li>
              <li><router-link :to="{ name: 'changePassword' }">Change Password</router-link></li>
              <li><a @click="logout">Logout</a></li>
            </ul>
          </div>
          <div v-else class="skeleton w-10 h-10 rounded-full"></div>
        </div>
      </div>
    </div>

    <!-- Row 2: MOBILE SEARCH BAR -->
    <!-- This full-width search bar only appears on screens smaller than md -->
    <div class="w-full px-4 pb-3 md:hidden">
      <div class="relative w-full">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-base-content/50">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
          </svg>
        </div>
        <input
          id="customer-search-input-mobile"
          type="text"
          placeholder="Search customers..."
          v-model="searchStore.searchTerm"
          class="input input-bordered w-full pl-10"
          @input="searchStore.debouncedSearch"
        />
      </div>
    </div>
  </header>
  
  <!-- MODAL SECTION REMAINS UNCHANGED -->
  <!-- ... (paste your existing modals here) ... -->
  
  <div class="modal" :class="{ 'modal-open': isRouteModalVisible }">
    <div class="modal-box">
      <div v-if="routeModalMode === 'confirm'">
        <h3 class="font-bold text-lg">Confirm Routing Change</h3>
        <p class="py-4">FROM: {{ currentPhone }} → TO: {{ selectedOption?.label }}</p>
        <div class="modal-action">
          <button @click="proceedRoute" class="btn btn-success">Confirm</button>
          <button @click="closeRouteModal" class="btn btn-error">Cancel</button>
        </div>
      </div>
      <div v-else-if="routeModalMode === 'loading'">
        <h3 class="font-bold text-lg">Switching Route</h3>
        <div class="py-4 text-center">
          <p class="text-lg mb-3">Switching phone routing from {{ currentPhone }} to {{ selectedOption?.label }}...</p>
          <div class="loading loading-spinner loading-lg text-primary mb-3"></div>
          <p class="text-sm text-gray-600">Please wait while we update the routing.</p>
        </div>
      </div>
      <div v-else-if="routeModalMode === 'result'">
        <h3 class="font-bold text-lg">Route Change Result</h3>
        <div class="py-4">
          <div v-if="routeResponse && !routeResponse.error" class="alert alert-success mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>Routing change completed successfully.</span>
          </div>
          <div v-else-if="routeResponse && routeResponse.error" class="alert alert-error mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>Error occurred during routing change.</span>
          </div>
          <div v-if="routeResponse.message || routeResponse.status" class="bg-base-200 p-3 rounded">
            <p>{{ routeResponse.message || routeResponse.status }}</p>
          </div>
          <div v-else class="bg-base-200 p-3 rounded">
            <p>Response received successfully.</p>
          </div>
        </div>
        <div class="modal-action">
          <button @click="closeRouteModal" class="btn">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" :class="{ 'modal-open': isTestModalVisible }">
    <div class="modal-box">
      <h3 class="font-bold text-lg">DID Test Result</h3>
      <div class="py-4">
        <div v-if="isTestLoading" class="text-center">
          <span class="text-lg mb-3">Testing DID connection...</span>
          <div class="loading loading-spinner loading-lg text-primary mb-3"></div>
          <p class="text-sm text-gray-600">Please wait while we fetch DID information.</p>
        </div>
        <div v-else-if="testResponse">
          <div v-if="testResponse.status === 'success' && testResponse.dids && testResponse.dids.length > 0" class="space-y-4">
            <div class="alert alert-success">
              <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>DID Test Successful! Connection is working.</span>
            </div>
            <div v-for="did in testResponse.dids" :key="did.did" class="border rounded-lg p-3 bg-base-100">
              <h4 class="font-semibold mb-2">DID: {{ did.did }}</h4>
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div><strong>Description:</strong> {{ did.description }}</div>
                <div><strong>Routing:</strong> {{ did.routing }}</div>
                <div><strong>Call Recording:</strong> {{ did.record_calls === '1' ? 'Enabled' : 'Disabled' }}</div>
                <div><strong>Voicemail:</strong> {{ did.voicemail === '1' ? 'Enabled' : 'Disabled' }}</div>
              </div>
            </div>
          </div>
          <div v-else-if="testResponse.error" class="text-center text-error">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6 mx-auto mb-2" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <p class="font-semibold">API Error</p>
            <p>{{ testResponse.error }}</p>
          </div>
          <div v-else class="bg-base-200 p-3 rounded text-sm overflow-auto max-h-40">
            <pre>{{ JSON.stringify(testResponse, null, 2) }}</pre>
          </div>
        </div>
        <div v-else class="text-center">
          <p>No response received.</p>
        </div>
      </div>
      <div class="modal-action" v-if="!isTestLoading">
        <button @click="isTestModalVisible = false; testResponse = null;" class="btn">Close</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import { useSearchStore } from '../../stores/search' // Adjust path if needed
import { useAuthStore } from '../../stores/auth'

// Define the shape of your data for internal type safety
interface User {
  user_name: string;
  user_id: number;
}

interface RoutingOption {
  value: string;
  label: string;
}

// Router
const router = useRouter()

// Reactive data
const user = ref({} as User)
const currentPhone = ref('')
const routingOptions = ref([
  { value: 'main', label: '407323' },
  { value: 'sip', label: '407323_auburnoil' },
  { value: 'cellphone1', label: 'Ed Cell' },
  { value: 'cellphone2', label: 'Aneta Cell' },
  { value: 'test_did', label: 'Test DID' }
] as RoutingOption[])
const selectedOption = ref<RoutingOption | null>(null)
const isRouteModalVisible = ref(false)
const routeModalMode = ref('confirm')
const routeResponse = ref(null as any)
const isTestModalVisible = ref(false)
const isTestLoading = ref(false)
const testResponse = ref(null as any)

// Computed properties
const searchStore = computed(() => useSearchStore())

const userInitials = computed((): string => {
  if (!user.value || !user.value.user_name) return '';
  const parts = user.value.user_name.split(' ');
  return parts.length > 1
    ? `${parts[0][0]}${parts[1][0]}`.toUpperCase()
    : user.value.user_name.substring(0, 2).toUpperCase();
})

const currentDate = computed((): string => {
  const now = new Date();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const year = now.getFullYear().toString().slice(-2);
  return `${month}/${day}/${year}`;
})

const dayOfWeek = computed((): string => {
  const now = new Date();
  return now.toLocaleDateString('en-US', { weekday: 'long' });
})

// Lifecycle
onMounted(() => {
  userStatus()
  updatestatus()
  fetchCurrentPhone()
})

// Functions
const userStatus = () => {
  let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
  axios({
    method: "get",
    url: path,
    withCredentials: true,
    headers: authHeader(),

  })
    .then((response: any) => {
      if (response.data.ok) {
        user.value = response.data.user;
      } else {

        localStorage.removeItem('user');
        router.push('/login');
      }
    })
}

const updatestatus = () => {
  let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
  }).then((response: any) => {
    if (response.data.update)
      console.log("Updated Status of Deliveries")
  })
}

const logout = () => {
  // Clear auth data
  const authStore = useAuthStore();
  authStore.clearAuth();
  // Redirect to login
  router.push({ name: 'login' });
}

const fetchCurrentPhone = () => {
  const path = import.meta.env.VITE_BASE_URL + '/admin/voip_routing';
  axios({
    method: 'get',
    url: path,
    headers: authHeader(),
     withCredentials: true,
  })
    .then((response: any) => {
      if (response.data.current_phone) {
        currentPhone.value = response.data.current_phone;
      }
    })
    .catch((error: any) => {
      console.error('Failed to fetch current routing:', error);
    });
}

const routeTo = (route: string): Promise<any> => {
  const path = `${import.meta.env.VITE_VOIPMS_URL}/route/${route}`;
  return axios({
    method: 'post',
    url: path,
  withCredentials: true, headers: authHeader()
  })
    .then((response: any) => {
      routeResponse.value = response.data;
      // Find the corresponding label
      const option = routingOptions.value.find(opt => opt.value === route);
      if (option) {
        currentPhone.value = option.label;
      }
      return response.data;
    });
}

const showConfirmRoute = (option: RoutingOption) => {
  selectedOption.value = option;
  if (option.value === 'test_did') {
    testDid();
  } else {
    isRouteModalVisible.value = true;
    routeModalMode.value = 'confirm';
  }
}

const proceedRoute = () => {
  if (selectedOption.value && selectedOption.value.value !== 'test_did') {
    routeModalMode.value = 'loading';
    routeTo(selectedOption.value.value)
      .then(() => {
        routeModalMode.value = 'result';
      })
      .catch((error: any) => {
        routeResponse.value = { error: error.message };
        routeModalMode.value = 'result';
      });
  }
}

const closeRouteModal = () => {
  isRouteModalVisible.value = false;
  routeModalMode.value = 'confirm';
  routeResponse.value = null;
  selectedOption.value = null;
}

const testDid = () => {
  isTestModalVisible.value = true;
  isTestLoading.value = true;
  const path = `${import.meta.env.VITE_VOIPMS_URL}/test/did`;
  axios({
    method: 'get',
    url: path,
   withCredentials: true, headers: authHeader()
  })
    .then((response: any) => {
      testResponse.value = response.data;
      isTestLoading.value = false;
    })
    .catch((error: any) => {
      testResponse.value = { status: 'error', message: error.message };
      isTestLoading.value = false;
    });
}
</script>
