<script setup>
definePageMeta({
  title: "View Application",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    { name: "Dashboard", path: "/dashboard" },
    { name: "Applications", path: "/applications" },
    { name: "View Application", path: "", type: "current" },
  ],
});

import { ref, onMounted, computed } from "vue";

// Get application ID from route
const route = useRoute();
const applicationId = route.params.id;

// No need for separate toast reference as we're using $swal

// State management
const application = ref(null);
const isLoading = ref(true);
const isDeleting = ref(false);

// Fetch application details
const fetchApplication = async () => {
  try {
    isLoading.value = true;
    const response = await $fetch(`/api/applications/${applicationId}`);
    
    // Transform response to match our frontend format
    application.value = {
      id: response.slug,
      name: response.name,
      slug: response.slug,
      description: response.meta_description || "No description provided",
      status: "active", // Authentik applications are active by default
      provider: response.provider_obj?.verbose_name || response.provider_obj?.name || "No Provider",
      authentikId: response.pk,
      launchUrl: response.launch_url || response.meta_launch_url || "#",
      icon: response.meta_icon || null,
      publisher: response.meta_publisher || "System",
      createdAt: response.created || new Date().toISOString(),
      providerType: response.provider_obj?.verbose_name_plural || "Unknown",
      providerDetails: response.provider_obj || null,
    };
  } catch (error) {
    console.error("Failed to fetch application:", error);
    application.value = null;
  } finally {
    isLoading.value = false;
  }
};

// Delete application
const deleteApplication = async () => {
  if (
    !confirm(
      "Are you sure you want to delete this application? This action cannot be undone and will remove all associated configurations."
    )
  ) {
    return;
  }

  try {
    isDeleting.value = true;
    await $fetch(`/api/applications/${applicationId}`, {
      method: "DELETE",
    });

    console.log("✅ Application deleted successfully");
    
    // Use SweetAlert instead of toast
    const { $swal } = useNuxtApp();
    $swal.fire({
      icon: 'success',
      title: 'Success',
      text: 'Application deleted successfully!',
      timer: 2000,
      showConfirmButton: false
    });
    
    // Redirect to applications list
    await navigateTo("/applications");
  } catch (error) {
    console.error("❌ Failed to delete application:", error);
    
    let errorMessage = "Failed to delete application. ";
    if (error.data?.message) {
      errorMessage += error.data.message;
    } else if (error.statusCode === 404) {
      errorMessage += "Application not found.";
    } else if (error.statusCode === 401) {
      errorMessage += "You are not authorized to delete this application.";
    } else {
      errorMessage += "Please try again.";
    }

    const { $swal } = useNuxtApp();
    $swal.fire({
      icon: 'error',
      title: 'Error',
      text: errorMessage
    });
  } finally {
    isDeleting.value = false;
  }
};

// Computed properties
const providerTypeIcon = computed(() => {
  if (!application.value?.providerDetails) return "ph:shield";
  
  const providerType = application.value.providerDetails.verbose_name_plural?.toLowerCase();
  if (providerType?.includes("oauth")) return "ph:key";
  if (providerType?.includes("saml")) return "ph:certificate";
  if (providerType?.includes("ldap")) return "ph:tree-structure";
  if (providerType?.includes("proxy")) return "ph:arrows-left-right";
  return "ph:shield";
});

const statusVariant = computed(() => {
  return application.value?.status === "active" ? "success" : "secondary";
});

const formatDate = (dateString) => {
  if (!dateString) return "Never";
  return new Date(dateString).toLocaleDateString() + " " + new Date(dateString).toLocaleTimeString();
};

// Initialize
onMounted(() => {
  fetchApplication();
});
</script>

<template>
  <div>
    <LayoutsBreadcrumb />

    <!-- Loading State -->
    <div v-if="isLoading" class="flex items-center justify-center py-12">
      <div class="text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
        <p class="text-gray-600 dark:text-gray-400 mt-4">Loading application details...</p>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="!application" class="text-center py-12">
      <Icon name="ph:warning-circle" class="w-16 h-16 text-red-500 mx-auto mb-4" />
      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Application Not Found</h3>
      <p class="text-gray-600 dark:text-gray-400 mb-6">
        The application you're looking for doesn't exist or you don't have permission to view it.
      </p>
      <rs-button @click="navigateTo('/applications')" variant="primary">
        <Icon name="ph:arrow-left" class="w-4 h-4 mr-2" />
        Back to Applications
      </rs-button>
    </div>

    <!-- Application Details -->
    <div v-else>
      <!-- Header -->
      <div class="mb-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <div class="flex-shrink-0">
              <div class="h-12 w-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                <span class="text-lg font-bold text-white">
                  {{ application.name ? application.name.charAt(0).toUpperCase() : "?" }}
                </span>
              </div>
            </div>
            <div>
              <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ application.name }}
              </h1>
              <p class="text-gray-600 dark:text-gray-400">
                {{ application.description }}
              </p>
            </div>
          </div>
                     <div class="flex space-x-3">
             <rs-button @click="navigateTo('/applications')" variant="secondary">
               <Icon name="ph:arrow-left" class="w-4 h-4 mr-2" />
               Back to List
             </rs-button>
             <rs-button @click="navigateTo(`/applications/${applicationId}/edit`)" variant="primary-outline">
               <Icon name="ph:pencil" class="w-4 h-4 mr-2" />
               Edit Application
             </rs-button>
             <rs-button 
               @click="deleteApplication" 
               :disabled="isDeleting"
               variant="danger"
             >
               <Icon name="ph:trash" class="w-4 h-4 mr-2" />
               {{ isDeleting ? 'Deleting...' : 'Delete' }}
             </rs-button>
           </div>
        </div>
      </div>

      <!-- Application Information Cards -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Basic Information -->
        <rs-card>
          <template #header>
            <Icon name="ph:info" class="text-blue-600" />
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Basic Information</h3>
          </template>
          <template #body>
            <div class="space-y-4">
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</span>
                <rs-badge :variant="statusVariant">{{ application.status }}</rs-badge>
              </div>
              
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Application ID</span>
                <span class="text-sm text-gray-900 dark:text-white font-mono">{{ application.slug }}</span>
              </div>
              
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Launch URL</span>
                <a 
                  :href="application.launchUrl" 
                  target="_blank"
                  class="text-sm text-primary hover:underline flex items-center"
                >
                  {{ application.launchUrl }}
                  <Icon name="ph:arrow-square-out" class="w-3 h-3 ml-1" />
                </a>
              </div>
              
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Publisher</span>
                <span class="text-sm text-gray-900 dark:text-white">{{ application.publisher }}</span>
              </div>
              
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Created</span>
                <span class="text-sm text-gray-900 dark:text-white">{{ formatDate(application.createdAt) }}</span>
              </div>
            </div>
          </template>
        </rs-card>

        <!-- Provider Information -->
        <rs-card>
          <template #header>
            <Icon :name="providerTypeIcon" class="text-green-600" />
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Authentication Provider</h3>
          </template>
          <template #body>
            <div class="space-y-4">
              <div class="flex justify-between items-start">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Provider Type</span>
                <span class="text-sm text-gray-900 dark:text-white">{{ application.provider }}</span>
              </div>
              
              <div v-if="application.providerDetails" class="space-y-3">
                <div class="flex justify-between items-start">
                  <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Provider ID</span>
                  <span class="text-sm text-gray-900 dark:text-white font-mono">{{ application.providerDetails.pk }}</span>
                </div>
                
                <div v-if="application.providerDetails.client_id" class="flex justify-between items-start">
                  <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Client ID</span>
                  <span class="text-sm text-gray-900 dark:text-white font-mono">{{ application.providerDetails.client_id }}</span>
                </div>
                
                <div v-if="application.providerDetails.authorization_flow_name" class="flex justify-between items-start">
                  <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Auth Flow</span>
                  <span class="text-sm text-gray-900 dark:text-white">{{ application.providerDetails.authorization_flow_name }}</span>
                </div>
              </div>
              
              <div v-else class="text-center py-4">
                <Icon name="ph:warning" class="w-8 h-8 text-orange-500 mx-auto mb-2" />
                <p class="text-sm text-orange-600 dark:text-orange-400">No provider configured</p>
              </div>
            </div>
          </template>
        </rs-card>
      </div>

      <!-- Access Control -->
      <rs-card>
        <template #header>
          <Icon name="ph:users" class="text-purple-600" />
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Access Control</h3>
        </template>
        <template #body>
          <div class="text-center py-8">
            <Icon name="ph:shield-check" class="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Access Control Configuration</h4>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              Configure which users and groups can access this application.
            </p>
            <rs-button variant="primary-outline" disabled>
              <Icon name="ph:gear" class="w-4 h-4 mr-2" />
              Configure Access (Coming Soon)
            </rs-button>
          </div>
        </template>
      </rs-card>
    </div>
  </div>
</template>

<style scoped>
/* Component specific styles */
</style> 