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

import { ref, reactive, computed, onMounted } from 'vue'

// Form state - SIMPLIFIED
const userForm = reactive({
  // Basic Information
  firstName: '',
  lastName: '',
  email: '',
  username: '',
  password: '',
  confirmPassword: '',
  
  // Application Assignment (ESSENTIAL)
  application: '',
  
  // Group Assignment (Groups contain roles)
  groups: [],
  
  // Direct Role Assignment (optional - for specific cases)
  additionalRoles: [],
  
  // Account Settings
  isActive: true,
  mustChangePassword: true,
  sendInvitation: true
})

// Available options
const availableApplications = ref([
  { id: '1', name: 'Main Application', description: 'Primary business application' },
  { id: '2', name: 'HR System', description: 'Human Resources Management' },
  { id: '3', name: 'Finance System', description: 'Financial Management' }
])

const availableGroups = ref([
  { id: '1', name: 'IT Department', application: '1', description: 'Information Technology Department' },
  { id: '2', name: 'HR Department', application: '2', description: 'Human Resources Department' },
  { id: '3', name: 'Finance Department', application: '3', description: 'Finance and Accounting Department' },
  { id: '4', name: 'Development Team', application: '1', description: 'Software Development Team' },
  { id: '5', name: 'Support Team', application: '1', description: 'Customer Support Team' }
])

const availableRoles = ref([
  { id: '1', name: 'Administrator', application: '1', description: 'Full system access' },
  { id: '2', name: 'Manager', application: '1', description: 'Department management access' },
  { id: '3', name: 'Editor', application: '1', description: 'Content editing access' },
  { id: '4', name: 'Viewer', application: '1', description: 'Read-only access' },
  { id: '5', name: 'HR Admin', application: '2', description: 'HR system administrator' },
  { id: '6', name: 'Finance Admin', application: '3', description: 'Finance system administrator' }
])

// Validation state
const errors = ref({})
const isLoading = ref(false)

// Computed
const isFormValid = computed(() => {
  return userForm.username && 
         userForm.email && 
         userForm.firstName && 
         userForm.lastName && 
         userForm.password && 
         userForm.password === userForm.confirmPassword &&
         userForm.password.length >= 8 &&
         userForm.application
})

const passwordStrength = computed(() => {
  const password = userForm.password
  if (!password) return { score: 0, label: 'No Password', color: 'gray' }
  
  let score = 0
  if (password.length >= 8) score++
  if (/[A-Z]/.test(password)) score++
  if (/[a-z]/.test(password)) score++
  if (/[0-9]/.test(password)) score++
  if (/[^A-Za-z0-9]/.test(password)) score++
  
  const labels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong']
  const colors = ['red', 'orange', 'yellow', 'blue', 'green']
  
  return {
    score,
    label: labels[score] || 'Very Weak',
    color: colors[score] || 'red'
  }
})

const applicationOptions = computed(() => 
  availableApplications.value.map(app => ({
    label: app.name,
    value: app.id
  }))
)

// Groups filtered by selected application
const filteredGroups = computed(() => {
  if (!userForm.application) return []
  return availableGroups.value.filter(group => group.application === userForm.application)
})

// Roles filtered by selected application (for additional roles)
const filteredRoles = computed(() => {
  if (!userForm.application) return []
  return availableRoles.value.filter(role => role.application === userForm.application)
})

// Methods
const validateForm = () => {
  errors.value = {}
  
  if (!userForm.username) {
    errors.value.username = 'Username is required'
  }
  
  if (!userForm.email) {
    errors.value.email = 'Email is required'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(userForm.email)) {
    errors.value.email = 'Invalid email format'
  }
  
  if (!userForm.firstName) {
    errors.value.firstName = 'First name is required'
  }
  
  if (!userForm.lastName) {
    errors.value.lastName = 'Last name is required'
  }
  
  if (!userForm.password) {
    errors.value.password = 'Password is required'
  } else if (userForm.password.length < 8) {
    errors.value.password = 'Password must be at least 8 characters'
  }
  
  if (userForm.password !== userForm.confirmPassword) {
    errors.value.confirmPassword = 'Passwords do not match'
  }

  if (!userForm.application) {
    errors.value.application = 'Application is required'
  }
  
  return Object.keys(errors.value).length === 0
}

const generateRandomPassword = () => {
  const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*'
  let password = ''
  for (let i = 0; i < 12; i++) {
    password += charset.charAt(Math.floor(Math.random() * charset.length))
  }
  userForm.password = password
  userForm.confirmPassword = password
}

// Clear groups and roles when application changes
const onApplicationChange = () => {
  userForm.groups = []
  userForm.additionalRoles = []
}

const createUser = async () => {
  if (!validateForm()) {
    return
  }
  
  isLoading.value = true
  
  try {
    // Prepare user data - SIMPLIFIED
    const userData = {
      username: userForm.username,
      email: userForm.email,
      firstName: userForm.firstName,
      lastName: userForm.lastName,
      password: userForm.password,
      application: userForm.application,
      groups: userForm.groups,
      additionalRoles: userForm.additionalRoles,
      isActive: userForm.isActive,
      mustChangePassword: userForm.mustChangePassword,
      sendInvitation: userForm.sendInvitation
    }
    
    // API call to create user
    const response = await $fetch('/api/users/create', {
      method: 'POST',
      body: userData
    })
    
    if (response.success) {
      await navigateTo('/users')
    }
    
  } catch (error) {
    console.error('Failed to create user:', error)
  } finally {
    isLoading.value = false
  }
}

const resetForm = () => {
  Object.assign(userForm, {
    firstName: '',
    lastName: '',
    email: '',
    username: '',
    password: '',
    confirmPassword: '',
    application: '',
    groups: [],
    additionalRoles: [],
    isActive: true,
    mustChangePassword: true,
    sendInvitation: true
  })
  errors.value = {}
}

// Initialize
onMounted(() => {
  // Load additional data if needed
})
</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">Add New User</h1>
          <p class="text-gray-600 dark:text-gray-400">Users get permissions through groups (collections of roles)</p>
        </div>
        <div class="flex space-x-3">
          <rs-button @click="resetForm" variant="primary-outline">
            <Icon name="ph:arrow-clockwise" class="w-4 h-4 mr-2" />
            Reset Form
          </rs-button>
          <rs-button @click="createUser" :disabled="!isFormValid || isLoading">
            <Icon name="ph:user-plus" class="w-4 h-4 mr-2" />
            {{ isLoading ? 'Creating...' : 'Create User' }}
          </rs-button>
        </div>
      </div>
    </div>

    <FormKit type="form" @submit="createUser">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Form -->
        <div class="lg:col-span-2 space-y-6">
          
          <!-- Basic Information -->
          <rs-card>
            <template #header>
              <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="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <FormKit
                    v-model="userForm.firstName"
                    type="text"
                    label="First Name"
                    placeholder="John"
                    validation="required"
                    validation-visibility="dirty"
                    :validation-messages="{
                      required: 'First name is required'
                    }"
                  />
                  
                  <FormKit
                    v-model="userForm.lastName"
                    type="text"
                    label="Last Name"
                    placeholder="Doe"
                    validation="required"
                    validation-visibility="dirty"
                    :validation-messages="{
                      required: 'Last name is required'
                    }"
                  />
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <FormKit
                    v-model="userForm.username"
                    type="text"
                    label="Username"
                    placeholder="john.doe"
                    validation="required"
                    validation-visibility="dirty"
                    :validation-messages="{
                      required: 'Username is required'
                    }"
                  />
                  
                  <FormKit
                    v-model="userForm.email"
                    type="email"
                    label="Email Address"
                    placeholder="john.doe@company.com"
                    validation="required|email"
                    validation-visibility="dirty"
                    :validation-messages="{
                      required: 'Email is required',
                      email: 'Invalid email format'
                    }"
                  />
                </div>
                
                <FormKit
                  v-model="userForm.application"
                  type="select"
                  label="Application"
                  placeholder="Select application"
                  :options="applicationOptions"
                  validation="required"
                  validation-visibility="dirty"
                  help="Which application this user will access"
                  :validation-messages="{
                    required: 'Application is required'
                  }"
                  @input="onApplicationChange"
                />
              </div>
            </template>
          </rs-card>

          <!-- Password Settings -->
          <rs-card>
            <template #header>
              <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Password Settings</h3>
                <rs-button @click="generateRandomPassword" variant="primary-outline" size="sm">
                  <Icon name="ph:key" class="w-4 h-4 mr-1" />
                  Generate
                </rs-button>
              </div>
            </template>
            <template #body>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormKit
                  v-model="userForm.password"
                  type="password"
                  label="Password"
                  placeholder="Enter password"
                  validation="required|length:8"
                  validation-visibility="dirty"
                  :validation-messages="{
                    required: 'Password is required',
                    length: 'Password must be at least 8 characters'
                  }"
                />
                
                <FormKit
                  v-model="userForm.confirmPassword"
                  type="password"
                  label="Confirm Password"
                  placeholder="Confirm password"
                  validation="required|confirm:password"
                  validation-visibility="dirty"
                  :validation-messages="{
                    required: 'Confirm password is required',
                    confirm: 'Passwords do not match'
                  }"
                />
              </div>
              
              <!-- Password Strength Indicator -->
              <div v-if="userForm.password" class="mt-4">
                <div class="flex items-center justify-between text-xs">
                  <span class="text-gray-500">Password Strength</span>
                  <span :class="`text-${passwordStrength.color}-600`">{{ passwordStrength.label }}</span>
                </div>
                <div class="mt-1 w-full bg-gray-200 rounded-full h-1">
                  <div 
                    :class="`bg-${passwordStrength.color}-500`"
                    class="h-1 rounded-full transition-all duration-300"
                    :style="{ width: (passwordStrength.score / 5 * 100) + '%' }"
                  ></div>
                </div>
              </div>
            </template>
          </rs-card>

          <!-- Account Settings -->
          <rs-card>
            <template #header>
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Account Settings</h3>
            </template>
            <template #body>
              <div class="space-y-4">
                <FormKit
                  v-model="userForm.isActive"
                  type="checkbox"
                  label="Account Active"
                  help="User can log in when active"
                />
                
                <FormKit
                  v-model="userForm.mustChangePassword"
                  type="checkbox"
                  label="Must Change Password on First Login"
                  help="Force password change on first login"
                />
                
                <FormKit
                  v-model="userForm.sendInvitation"
                  type="checkbox"
                  label="Send Email Invitation"
                  help="Send welcome email with login instructions"
                />
              </div>
            </template>
          </rs-card>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- Groups Assignment (PRIMARY) -->
          <rs-card>
            <template #header>
              <div class="flex items-center">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mr-2">Groups</h3>
                <rs-badge variant="info">Primary</rs-badge>
              </div>
            </template>
            <template #body>
              <div class="space-y-3">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  Groups contain roles. Users inherit all roles from their groups.
                </p>
                
                <div v-if="!userForm.application" class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                  <p class="text-sm text-blue-800 dark:text-blue-200">
                    Select an application first to see available groups.
                  </p>
                </div>
                
                <div v-else-if="filteredGroups.length === 0" class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    No groups available for the selected application.
                  </p>
                </div>
                
                <div v-else>
                  <FormKit
                    v-for="group in filteredGroups"
                    :key="group.id"
                    v-model="userForm.groups"
                    type="checkbox"
                    :value="group.id"
                    :label="group.name"
                    :help="group.description"
                    :classes="{
                      wrapper: 'mb-2',
                      label: '!text-sm',
                      help: '!text-xs'
                    }"
                  />
                </div>
              </div>
            </template>
          </rs-card>

          <!-- Additional Roles (OPTIONAL) -->
          <rs-card>
            <template #header>
              <div class="flex items-center">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mr-2">Additional Roles</h3>
                <rs-badge variant="secondary">Optional</rs-badge>
              </div>
            </template>
            <template #body>
              <div class="space-y-3">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  Extra roles for specific permissions beyond group roles.
                </p>
                
                <div v-if="!userForm.application" class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                  <p class="text-sm text-blue-800 dark:text-blue-200">
                    Select an application first to see available roles.
                  </p>
                </div>
                
                <div v-else-if="filteredRoles.length === 0" class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    No additional roles available for the selected application.
                  </p>
                </div>
                
                <div v-else>
                  <FormKit
                    v-for="role in filteredRoles"
                    :key="role.id"
                    v-model="userForm.additionalRoles"
                    type="checkbox"
                    :value="role.id"
                    :label="role.name"
                    :help="role.description"
                    :classes="{
                      wrapper: 'mb-2',
                      label: '!text-sm',
                      help: '!text-xs'
                    }"
                  />
                </div>
              </div>
            </template>
          </rs-card>

          <!-- Preview -->
          <rs-card>
            <template #header>
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Preview</h3>
            </template>
            <template #body>
              <div class="space-y-3">
                <div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Name:</span>
                  <p class="text-sm text-gray-900 dark:text-white">
                    {{ userForm.firstName && userForm.lastName ? `${userForm.firstName} ${userForm.lastName}` : 'Not set' }}
                  </p>
                </div>
                
                <div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Application:</span>
                  <p class="text-sm text-gray-900 dark:text-white">
                    {{ availableApplications.find(a => a.id === userForm.application)?.name || 'Not selected' }}
                  </p>
                </div>
                
                <div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Groups:</span>
                  <p class="text-sm text-gray-900 dark:text-white">
                    {{ userForm.groups.length }} group(s) selected
                  </p>
                </div>
                
                <div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Additional Roles:</span>
                  <p class="text-sm text-gray-900 dark:text-white">
                    {{ userForm.additionalRoles.length }} additional role(s)
                  </p>
                </div>
                
                <div class="flex space-x-2">
                  <rs-badge :variant="userForm.isActive ? 'success' : 'secondary'">
                    {{ userForm.isActive ? 'Active' : 'Inactive' }}
                  </rs-badge>
                </div>
              </div>
            </template>
          </rs-card>
        </div>
      </div>
    </FormKit>
  </div>
</template>

<style scoped>
/* Custom styles */
</style> 