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

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

// State management
const applications = ref([]);
const isLoading = ref(true);
const isDeleting = ref(false);
const searchQuery = ref("");
const selectedStatus = ref("all");
const selectedProvider = ref("all");

// Fetch applications from Authentik
const fetchApplications = async () => {
  try {
    isLoading.value = true;
    const response = await $fetch("/api/applications");

    // Map Authentik response to our frontend format
    applications.value =
      response.results?.map((app) => {
        // Better provider detection based on actual provider type
        let providerName = "No Provider";
        if (app.provider_obj) {
          providerName =
            app.provider_obj.verbose_name ||
            app.provider_obj.name ||
            "Unknown Provider";
        } else if (app.provider) {
          // If provider exists but no provider_obj, it might be loading
          providerName = "Loading...";
        }

        return {
          id: app.slug, // Use slug as ID for consistency with Authentik API
          name: app.name,
          slug: app.slug,
          description: app.meta_description || "No description provided",
          status: "active", // Authentik applications are active by default
          provider: providerName,
          authentikId: app.pk, // Keep the original pk for reference
          launchUrl: app.launch_url || app.meta_launch_url || "#",
          icon: app.meta_icon || null,
          publisher: app.meta_publisher || "System",
          createdAt: app.created || new Date().toISOString(),
        };
      }) || [];
  } catch (error) {
    console.error("Failed to fetch applications:", error);
    applications.value = [];
  } finally {
    isLoading.value = false;
  }
};

// Computed properties
const filteredApplications = computed(() => {
  let filtered = applications.value.filter((app) => app && app.name);

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(
      (app) =>
        (app.name && app.name.toLowerCase().includes(query)) ||
        (app.description && app.description.toLowerCase().includes(query)) ||
        (app.publisher && app.publisher.toLowerCase().includes(query))
    );
  }

  if (selectedStatus.value !== "all") {
    filtered = filtered.filter((app) => app.status === selectedStatus.value);
  }

  if (selectedProvider.value !== "all") {
    filtered = filtered.filter(
      (app) => app.provider === selectedProvider.value
    );
  }

  return filtered;
});

const stats = computed(() => ({
  totalApps: applications.value.length,
  activeApps: applications.value.filter((app) => app.status === "active")
    .length,
  totalUsers: 0, // We'll need to fetch this from groups/users if needed
}));

const providers = computed(() => {
  const uniqueProviders = [
    ...new Set(
      applications.value
        .filter((app) => app && app.provider)
        .map((app) => app.provider)
    ),
  ];
  return uniqueProviders.map((provider) => ({
    value: provider,
    label: provider,
  }));
});

// Methods
const deleteApplication = async (applicationSlug) => {
  // Get the application name for the confirmation message
  const app = applications.value.find((app) => app.id === applicationSlug);
  if (!app) return;

  // Check if this is a protected application
  if (isProtectedApplication(app.name)) {
    const { $swal } = useNuxtApp();
    $swal.fire({
      icon: "warning",
      title: "Protected Application",
      text: "This application is used for system authentication and cannot be deleted.",
      confirmButtonText: "Understood",
    });
    return;
  }

  // Use SweetAlert for confirmation
  const { $swal } = useNuxtApp();
  const result = await $swal.fire({
    icon: "warning",
    title: "Delete Application?",
    text: `Are you sure you want to delete "${app.name}"? This action cannot be undone.`,
    showCancelButton: true,
    confirmButtonText: "Yes, delete it",
    confirmButtonColor: "#dc2626",
    cancelButtonText: "Cancel",
    reverseButtons: true,
  });

  // If user didn't confirm, abort
  if (!result.isConfirmed) return;

  console.log(
    `🗑️ Frontend: Deleting application with slug: ${applicationSlug}`
  );

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

    // Remove from local state (now using slug as id)
    const index = applications.value.findIndex(
      (app) => app.id === applicationSlug
    );
    if (index > -1) {
      applications.value.splice(index, 1);
    }

    console.log("✅ Application deleted successfully");

    // Use SweetAlert instead of alert
    const { $swal } = useNuxtApp();
    $swal.fire({
      icon: "success",
      title: "Success",
      text: "Application deleted successfully!",
      timer: 2000,
      showConfirmButton: false,
    });
  } catch (error) {
    console.error("❌ Failed to delete application:", error);

    // Show more specific error message
    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.";
    }

    // Use SweetAlert instead of alert
    const { $swal } = useNuxtApp();
    $swal.fire({
      icon: "error",
      title: "Error",
      text: errorMessage,
    });
  } finally {
    isDeleting.value = false;
  }
};

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

const getStatusVariant = (status) => {
  switch (status) {
    case "active":
      return "success";
    case "development":
      return "warning";
    case "inactive":
      return "secondary";
    default:
      return "secondary";
  }
};

// Check if an application is protected (cannot be deleted)
const isProtectedApplication = (appName) => {
  // List of protected applications that should not be deleted
  const protectedApps = [
    "CORRAD RBAC", // Main SSO application
    "corrad-rbac",
    "Authentik",
    "authentik",
    "CORRAD RBAC test2", // From the screenshot
  ];

  // Case-insensitive check
  return protectedApps.some(
    (name) => appName && appName.toLowerCase().includes(name.toLowerCase())
  );
};

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

<template>
  <div>
    <LayoutsBreadcrumb />

    <!-- Header -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
            Applications
          </h1>
          <p class="text-gray-600 dark:text-gray-400">
            Manage applications integrated with Authentik
          </p>
        </div>
        <div class="flex space-x-3">
          <rs-button @click="navigateTo('/applications/create')">
            <Icon name="ph:plus" class="w-4 h-4 mr-2" />
            Create Application
          </rs-button>
        </div>
      </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <rs-card>
        <template #body>
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div
                class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"
              >
                <Icon
                  name="ph:app-window"
                  class="w-5 h-5 text-blue-600 dark:text-blue-400"
                />
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Total Applications
              </p>
              <p class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ stats.totalApps }}
              </p>
            </div>
          </div>
        </template>
      </rs-card>

      <rs-card>
        <template #body>
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div
                class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center"
              >
                <Icon
                  name="ph:check-circle"
                  class="w-5 h-5 text-green-600 dark:text-green-400"
                />
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Active Applications
              </p>
              <p class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ stats.activeApps }}
              </p>
            </div>
          </div>
        </template>
      </rs-card>

      <rs-card>
        <template #body>
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div
                class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center"
              >
                <Icon
                  name="ph:users"
                  class="w-5 h-5 text-orange-600 dark:text-orange-400"
                />
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
                Total App Users
              </p>
              <p class="text-2xl font-bold text-gray-900 dark:text-white">
                {{ stats.totalUsers }}
              </p>
            </div>
          </div>
        </template>
      </rs-card>
    </div>

    <!-- Applications Table -->
    <rs-card>
      <template #header>
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">
            All Applications
          </h3>
          <rs-badge variant="info">{{ stats.totalApps }} applications</rs-badge>
        </div>
      </template>
      <template #body>
        <RsTable
          :field="['name', 'status', 'provider', 'users', 'created', 'actions']"
          :data="filteredApplications"
          :advanced="true"
        >
          <!-- Name Column -->
          <template #name="{ value }">
            <div class="flex items-center" v-if="value">
              <div class="flex-shrink-0 h-10 w-10">
                <div
                  class="h-10 w-10 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"
                >
                  <span class="text-sm font-medium text-white">{{
                    value.name ? value.name.charAt(0).toUpperCase() : "?"
                  }}</span>
                </div>
              </div>
              <div class="ml-4">
                <div
                  class="text-sm font-medium text-gray-900 dark:text-white hover:text-primary cursor-pointer"
                  @click="navigateTo(`/applications/${value.id}`)"
                >
                  {{ value.name }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  {{ value.description || "No description" }}
                </div>
              </div>
            </div>
          </template>

          <!-- Status Column -->
          <template #status="{ value }">
            <rs-badge
              :variant="getStatusVariant(value?.status || 'inactive')"
              v-if="value"
            >
              {{ value.status || "Unknown" }}
            </rs-badge>
          </template>

          <!-- Provider Column -->
          <template #provider="{ value }">
            <div class="flex items-center" v-if="value && value.provider">
              <Icon
                :name="
                  value.provider === 'OAuth2/OIDC' ? 'ph:key' : 'ph:shield'
                "
                class="w-4 h-4 mr-2 text-gray-400"
              />
              <span class="text-sm text-gray-900 dark:text-white">{{
                value.provider
              }}</span>
            </div>
          </template>

          <!-- Users Column -->
          <template #users="{ value }">
            <div class="text-sm" v-if="value">
              <div class="text-gray-900 dark:text-white">
                {{ value.userCount || 0 }} users
              </div>
              <div class="text-gray-500 dark:text-gray-400">
                {{ value.roleCount || 0 }} roles
              </div>
            </div>
          </template>

          <!-- Created Column -->
          <template #created="{ value }">
            <div class="text-sm" v-if="value">
              <div class="text-gray-900 dark:text-white">
                {{ formatDate(value.createdAt) }}
              </div>
              <div class="text-gray-500 dark:text-gray-400">
                {{ value.createdBy || "System" }}
              </div>
            </div>
          </template>

          <!-- Actions Column -->
          <template #actions="{ value }">
            <div
              class="flex items-center space-x-2"
              v-if="value && value.id && !isProtectedApplication(value.name)"
            >
              <button
                class="text-primary hover:text-primary/80 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
                @click="navigateTo(`/applications/${value.id}`)"
                title="View Application"
              >
                <Icon name="ph:eye" class="w-4 h-4" />
              </button>
              <button
                class="text-primary hover:text-primary/80 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
                @click="navigateTo(`/applications/${value.id}/edit`)"
                title="Edit Application"
              >
                <Icon name="ph:pencil" class="w-4 h-4" />
              </button>
              <button
                class="text-red-600 hover:text-red-800 p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
                @click="deleteApplication(value.id)"
                title="Delete Application"
              >
                <Icon name="ph:trash" class="w-4 h-4" />
              </button>
            </div>
            <div class="flex items-center space-x-2" v-else>-</div>
          </template>
        </RsTable>
      </template>
    </rs-card>
  </div>
</template>

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