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

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

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

const { $swal } = useNuxtApp();

// Form state - exactly like create page but will be populated with existing data
const applicationForm = reactive({
  name: "",
  slug: "",
  description: "",
  launchUrl: "",
  setupType: "web-app", // Default to most common type
  providerType: "oauth2", // Default to most common provider
});

// Loading states
const isLoading = ref(true);
const isSaving = ref(false);

// Original application data for comparison
const originalApplication = ref(null);

// Super simple setup types - no tech jargon (exactly like create page)
const setupTypes = ref([
  {
    id: "web-app",
    name: "🌐 Website/Web App",
    description: "For websites and web applications that users log into",
    popular: true,
  },
  {
    id: "mobile-app",
    name: "📱 Mobile App",
    description: "For mobile apps (iPhone, Android) that need login",
    popular: false,
  },
  {
    id: "desktop-app",
    name: "💻 Desktop App",
    description: "For desktop software that needs user authentication",
    popular: false,
  },
]);

// Simple provider presets - industry standards (exactly like create page)
const providerTypes = ref([
  {
    id: "oauth2",
    name: "🔐 OAuth2/OIDC",
    description: "Modern login standard - works with most apps (Recommended)",
    popular: true,
    technical: "OAuth2/OpenID Connect",
  },
  {
    id: "saml",
    name: "🏢 SAML SSO",
    description: "Enterprise single sign-on - common in large companies",
    popular: false,
    technical: "SAML 2.0",
  },
  {
    id: "ldap",
    name: "📁 LDAP Directory",
    description: "Connect to Active Directory or LDAP servers",
    popular: false,
    technical: "LDAP/Active Directory",
  },
  {
    id: "proxy",
    name: "🔄 Proxy Auth",
    description: "For older apps that don't support modern login",
    popular: false,
    technical: "Forward Auth Proxy",
  },
]);

// Fetch existing application data
const fetchApplication = async () => {
  try {
    isLoading.value = true;
    const response = await $fetch(`/api/applications/${applicationId}`);

    // Store original data
    originalApplication.value = response;

    // Populate form with existing data
    applicationForm.name = response.name || "";
    applicationForm.slug = response.slug || "";
    applicationForm.description = response.meta_description || "";
    applicationForm.launchUrl =
      response.launch_url || response.meta_launch_url || "";

    // Try to detect the setup type and provider type from existing data
    // This is a best guess based on available information
    applicationForm.setupType = "web-app"; // Default since we can't reliably detect this

    // Try to detect provider type from provider_obj
    if (response.provider_obj?.verbose_name_plural) {
      const providerName =
        response.provider_obj.verbose_name_plural.toLowerCase();
      if (providerName.includes("oauth")) {
        applicationForm.providerType = "oauth2";
      } else if (providerName.includes("saml")) {
        applicationForm.providerType = "saml";
      } else if (providerName.includes("ldap")) {
        applicationForm.providerType = "ldap";
      } else if (providerName.includes("proxy")) {
        applicationForm.providerType = "proxy";
      }
    }
  } catch (error) {
    console.error("Failed to fetch application:", error);

    // Use SweetAlert instead of toast
    $swal.fire({
      icon: 'error',
      title: 'Error',
      text: 'Failed to load application data. Please try again.'
    });
    await navigateTo("/applications");
  } finally {
    isLoading.value = false;
  }
};

// Simple validation (exactly like create page)
const isFormValid = computed(() => {
  return (
    applicationForm.name &&
    applicationForm.description &&
    applicationForm.launchUrl &&
    applicationForm.setupType &&
    applicationForm.providerType
  );
});

// Check if form has changes
const hasChanges = computed(() => {
  if (!originalApplication.value) return false;

  return (
    applicationForm.name !== originalApplication.value.name ||
    applicationForm.slug !== originalApplication.value.slug ||
    applicationForm.description !==
      (originalApplication.value.meta_description || "") ||
    applicationForm.launchUrl !==
      (originalApplication.value.launch_url ||
        originalApplication.value.meta_launch_url ||
        "")
  );
});

// Auto-generate slug when name changes (exactly like create page)
const generateSlug = () => {
  if (
    applicationForm.name &&
    applicationForm.name !== originalApplication.value?.name
  ) {
    applicationForm.slug = applicationForm.name
      .toLowerCase()
      .replace(/[^a-z0-9]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
  }
};

// Update application - super simplified (like create page)
const updateApplication = async () => {
  if (!isFormValid.value) return;

  isSaving.value = true;

  try {
    const applicationData = {
      name: applicationForm.name,
      slug: applicationForm.slug,
      meta_description: applicationForm.description,
      meta_launch_url: applicationForm.launchUrl,
      meta_publisher: "IT Department",
      setupType: applicationForm.setupType,
      providerType: applicationForm.providerType,
    };

    console.log("Updating application:", applicationData);

    const response = await $fetch(`/api/applications/${applicationId}`, {
      method: "PUT",
      body: applicationData,
    });

    console.log("Application updated successfully:", response);

    // Show success message with SweetAlert instead of toast
    $swal.fire({
      icon: 'success',
      title: 'Success',
      text: response.message || "Application updated successfully!",
      timer: 2000,
      showConfirmButton: false
    });

    // Success - redirect to view page after short delay using the new slug
    setTimeout(async () => {
      // Use the updated slug from the response instead of the old applicationId
      const newSlug = response.slug || applicationId;
      await navigateTo(`/applications/${newSlug}`);
    }, 1000);
  } catch (error) {
    console.error("Failed to update application:", error);

    // Show error message with SweetAlert instead of toast
    let errorMessage = "Failed to update application. ";
    if (error.data?.message) {
      errorMessage += error.data.message;
    } else {
      errorMessage += "Please check the details and try again.";
    }

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

// Get dynamic info based on selected provider (updated for edit context)
const getProviderInfo = () => {
  const providerInfo = {
    oauth2: {
      title: "OAuth2 configuration will be updated",
      description:
        "Changes to OAuth2 settings may require updating your application's callback URLs and client configuration.",
    },
    saml: {
      title: "SAML SSO configuration will be updated",
      description:
        "Changes to SAML settings may require updating your application's SAML configuration and certificates.",
    },
    ldap: {
      title: "LDAP directory integration will be updated",
      description:
        "Changes to LDAP settings may affect how users authenticate with their network credentials.",
    },
    proxy: {
      title: "Proxy authentication will be updated",
      description:
        "Changes to proxy settings may affect how the authentication proxy forwards requests to your application.",
    },
  };

  return providerInfo[applicationForm.providerType] || providerInfo.oauth2;
};

// Reset form to original values
const resetForm = () => {
  if (originalApplication.value) {
    applicationForm.name = originalApplication.value.name || "";
    applicationForm.slug = originalApplication.value.slug || "";
    applicationForm.description =
      originalApplication.value.meta_description || "";
    applicationForm.launchUrl =
      originalApplication.value.launch_url ||
      originalApplication.value.meta_launch_url ||
      "";
  }
};

// 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 data...
        </p>
      </div>
    </div>

    <!-- Edit Form -->
    <div v-else>
      <!-- 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">
              Edit Application
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
              Update application configuration and settings
            </p>
          </div>
          <div class="flex space-x-3">
            <rs-button
              @click="navigateTo(`/applications/${applicationId}`)"
              variant="secondary"
            >
              <Icon name="ph:arrow-left" class="w-4 h-4 mr-2" />
              Cancel
            </rs-button>
            <rs-button
              @click="resetForm"
              variant="primary-outline"
              :disabled="!hasChanges"
            >
              <Icon name="ph:arrow-clockwise" class="w-4 h-4 mr-2" />
              Reset Changes
            </rs-button>
            <rs-button
              @click="updateApplication"
              :disabled="!isFormValid || !hasChanges || isSaving"
              variant="primary"
            >
              <Icon
                v-if="isSaving"
                name="ph:spinner"
                class="w-4 h-4 mr-2 animate-spin"
              />
              <Icon v-else name="ph:floppy-disk" class="w-4 h-4 mr-2" />
              {{ isSaving ? "Saving..." : "Save Changes" }}
            </rs-button>
          </div>
        </div>
      </div>

      <!-- Changes Indicator -->
      <div v-if="hasChanges" class="mb-6">
        <div
          class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4"
        >
          <div class="flex items-center">
            <Icon
              name="ph:warning"
              class="w-5 h-5 text-orange-600 dark:text-orange-400 mr-2"
            />
            <span class="text-sm text-orange-700 dark:text-orange-300">
              You have unsaved changes. Don't forget to save your modifications.
            </span>
          </div>
        </div>
      </div>

      <!-- Single Card Form - Exactly like create page -->
      <rs-card>
        <template #header>
          <Icon name="ph:pencil" class="text-blue-600" />
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">
            Application Details
          </h3>
        </template>
        <template #body>
          <FormKit type="form" :actions="false">
            <div class="space-y-6">
              <!-- Basic Information -->
              <div class="space-y-4">
                <h4
                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
                >
                  Basic Information
                </h4>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <FormKit
                    v-model="applicationForm.name"
                    type="text"
                    label="Application Name"
                    placeholder="e.g., Employee Portal"
                    validation="required"
                    validation-visibility="dirty"
                    @input="generateSlug"
                    help="What should we call this application?"
                  />

                  <FormKit
                    v-model="applicationForm.slug"
                    type="text"
                    label="URL Identifier"
                    placeholder="employee-portal"
                    validation="required"
                    validation-visibility="dirty"
                    help="Auto-generated from name"
                    disabled
                  />
                </div>

                <FormKit
                  v-model="applicationForm.description"
                  type="textarea"
                  label="Description"
                  placeholder="Brief description of what this application does"
                  validation="required"
                  validation-visibility="dirty"
                  rows="3"
                  help="Explain what users will use this application for"
                />

                <FormKit
                  v-model="applicationForm.launchUrl"
                  type="url"
                  label="Application Website"
                  placeholder="https://portal.company.com"
                  validation="required|url"
                  validation-visibility="dirty"
                  help="Where users will go to access this application"
                />
              </div>

              <!-- Application Type -->
              <div class="space-y-4">
                <h4
                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
                >
                  Application Type
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div
                    v-for="type in setupTypes"
                    :key="type.id"
                    @click="applicationForm.setupType = type.id"
                    class="relative p-4 border-2 rounded-lg cursor-pointer transition-colors hover:border-blue-500"
                    :class="{
                      'border-blue-500 bg-blue-50 dark:bg-blue-900/20':
                        applicationForm.setupType === type.id,
                      'border-gray-200 dark:border-gray-700':
                        applicationForm.setupType !== type.id,
                    }"
                  >
                    <div class="flex items-start space-x-3">
                      <div class="text-2xl">{{ type.name.split(" ")[0] }}</div>
                      <div class="flex-1">
                        <h3
                          class="text-sm font-medium text-gray-900 dark:text-white"
                        >
                          {{ type.name.substring(2) }}
                        </h3>
                        <p
                          class="text-xs text-gray-600 dark:text-gray-400 mt-1"
                        >
                          {{ type.description }}
                        </p>
                        <div v-if="type.popular" class="mt-2">
                          <rs-badge variant="primary">Most Popular</rs-badge>
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="applicationForm.setupType === type.id"
                      class="absolute top-2 right-2"
                    >
                      <Icon
                        name="ph:check-circle-fill"
                        class="w-5 h-5 text-blue-500"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <!-- Authentication Provider -->
              <div class="space-y-4">
                <h4
                  class="text-sm font-medium text-gray-700 dark:text-gray-300"
                >
                  Authentication Method
                </h4>
                <p class="text-xs text-gray-600 dark:text-gray-400">
                  Choose how users will log into this application
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div
                    v-for="provider in providerTypes"
                    :key="provider.id"
                    @click="applicationForm.providerType = provider.id"
                    class="relative p-4 border-2 rounded-lg cursor-pointer transition-colors hover:border-green-500"
                    :class="{
                      'border-green-500 bg-green-50 dark:bg-green-900/20':
                        applicationForm.providerType === provider.id,
                      'border-gray-200 dark:border-gray-700':
                        applicationForm.providerType !== provider.id,
                    }"
                  >
                    <div class="flex items-start space-x-3">
                      <div class="text-xl">
                        {{ provider.name.split(" ")[0] }}
                      </div>
                      <div class="flex-1">
                        <h3
                          class="text-sm font-medium text-gray-900 dark:text-white"
                        >
                          {{ provider.name.substring(2) }}
                        </h3>
                        <p
                          class="text-xs text-gray-600 dark:text-gray-400 mt-1"
                        >
                          {{ provider.description }}
                        </p>
                        <div class="flex items-center space-x-2 mt-2">
                          <div v-if="provider.popular" class="mt-1">
                            <rs-badge variant="success" size="xs"
                              >Recommended</rs-badge
                            >
                          </div>
                          <span class="text-xs text-gray-500">{{
                            provider.technical
                          }}</span>
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="applicationForm.providerType === provider.id"
                      class="absolute top-2 right-2"
                    >
                      <Icon
                        name="ph:check-circle-fill"
                        class="w-5 h-5 text-green-500"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <!-- Dynamic Info Box Based on Provider -->
              <div
                class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4"
              >
                <div class="flex items-start space-x-3">
                  <Icon
                    name="ph:info"
                    class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5"
                  />
                  <div class="flex-1">
                    <h4
                      class="text-sm font-medium text-blue-900 dark:text-blue-100"
                    >
                      {{ getProviderInfo().title }}
                    </h4>
                    <p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
                      {{ getProviderInfo().description }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </FormKit>
        </template>
      </rs-card>
    </div>
  </div>
</template>

<style scoped>
input:focus {
  @apply ring-2 ring-offset-2;
}

select:focus {
  @apply ring-2 ring-offset-2;
}
</style>
