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

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

// Form state - SIMPLIFIED
const roleForm = reactive({
  name: '',
  description: '',
  application: '',
  permissions: [], // Simple list of permissions
  isActive: true
})

// Available applications
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' }
])

// Simplified permissions - focused on actual system functions
const availablePermissions = ref([
  // User Management
  { id: 'users_view', name: 'View Users', category: 'User Management', description: 'Can view user listings and profiles' },
  { id: 'users_create', name: 'Create Users', category: 'User Management', description: 'Can create new user accounts' },
  { id: 'users_edit', name: 'Edit Users', category: 'User Management', description: 'Can modify user information' },
  { id: 'users_delete', name: 'Delete Users', category: 'User Management', description: 'Can delete user accounts' },
  
  // Group Management
  { id: 'groups_view', name: 'View Groups', category: 'Group Management', description: 'Can view group listings' },
  { id: 'groups_create', name: 'Create Groups', category: 'Group Management', description: 'Can create new groups' },
  { id: 'groups_edit', name: 'Edit Groups', category: 'Group Management', description: 'Can modify groups' },
  { id: 'groups_delete', name: 'Delete Groups', category: 'Group Management', description: 'Can delete groups' },
  
  // Role Management
  { id: 'roles_view', name: 'View Roles', category: 'Role Management', description: 'Can view role listings' },
  { id: 'roles_create', name: 'Create Roles', category: 'Role Management', description: 'Can create new roles' },
  { id: 'roles_edit', name: 'Edit Roles', category: 'Role Management', description: 'Can modify roles' },
  { id: 'roles_delete', name: 'Delete Roles', category: 'Role Management', description: 'Can delete roles' },
  
  // System Access
  { id: 'dashboard_access', name: 'Dashboard Access', category: 'System Access', description: 'Can access the dashboard' },
  { id: 'reports_view', name: 'View Reports', category: 'System Access', description: 'Can view system reports' },
  { id: 'settings_view', name: 'View Settings', category: 'System Access', description: 'Can view system settings' },
  { id: 'settings_edit', name: 'Edit Settings', category: 'System Access', description: 'Can modify system settings' }
])

// Loading state
const isLoading = ref(false)

// Computed
const isFormValid = computed(() => {
  return roleForm.name && 
         roleForm.description && 
         roleForm.application
})

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

const permissionsByCategory = computed(() => {
  const grouped = {}
  availablePermissions.value.forEach(permission => {
    if (!grouped[permission.category]) {
      grouped[permission.category] = []
    }
    grouped[permission.category].push(permission)
  })
  return grouped
})

// Methods
const createRole = async () => {
  if (!isFormValid.value) return
  
  isLoading.value = true
  
  try {
    const roleData = {
      name: roleForm.name,
      description: roleForm.description,
      application: roleForm.application,
      permissions: roleForm.permissions,
      isActive: roleForm.isActive
    }
    
    console.log('Creating role:', roleData)
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // Success - redirect
    await navigateTo('/roles')
    
  } catch (error) {
    console.error('Failed to create role:', error)
  } finally {
    isLoading.value = false
  }
}

const resetForm = () => {
  Object.assign(roleForm, {
    name: '',
    description: '',
    application: '',
    permissions: [],
    isActive: true
  })
}

// 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">Create New Role</h1>
          <p class="text-gray-600 dark:text-gray-400">Roles define what users can do in the application</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="createRole" :disabled="!isFormValid || isLoading">
            <Icon name="ph:shield-plus" class="w-4 h-4 mr-2" />
            {{ isLoading ? 'Creating...' : 'Create Role' }}
          </rs-button>
        </div>
      </div>
    </div>

    <FormKit type="form" @submit="createRole">
      <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="roleForm.name"
                    type="text"
                    label="Role Name"
                    placeholder="e.g., Content Manager"
                    validation="required|length:3"
                    validation-visibility="dirty"
                    :validation-messages="{
                      required: 'Role name is required',
                      length: 'Role name must be at least 3 characters'
                    }"
                  />
                  
                  <FormKit
                    v-model="roleForm.application"
                    type="select"
                    label="Application"
                    placeholder="Select application"
                    :options="applicationOptions"
                    validation="required"
                    validation-visibility="dirty"
                    help="Which application this role applies to"
                    :validation-messages="{
                      required: 'Application is required'
                    }"
                  />
                </div>
                
                <FormKit
                  v-model="roleForm.description"
                  type="textarea"
                  label="Description"
                  placeholder="Describe what this role can do and its responsibilities"
                  validation="required"
                  validation-visibility="dirty"
                  rows="3"
                  :validation-messages="{
                    required: 'Description is required'
                  }"
                />
                
                <FormKit
                  v-model="roleForm.isActive"
                  type="checkbox"
                  label="Active Role"
                  help="Role can be assigned to users when active"
                />
              </div>
            </template>
          </rs-card>

          <!-- Permissions -->
          <rs-card>
            <template #header>
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Permissions</h3>
            </template>
            <template #body>
              <div class="space-y-6">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  Select what actions this role can perform in the system.
                </p>
                
                <div 
                  v-for="(permissions, category) in permissionsByCategory"
                  :key="category"
                  class="space-y-3"
                >
                  <h4 class="text-sm font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
                    {{ category }}
                  </h4>
                  
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                    <FormKit
                      v-for="permission in permissions"
                      :key="permission.id"
                      v-model="roleForm.permissions"
                      type="checkbox"
                      :value="permission.id"
                      :label="permission.name"
                      :help="permission.description"
                      :classes="{
                        wrapper: 'mb-1',
                        label: '!text-sm',
                        help: '!text-xs'
                      }"
                    />
                  </div>
                </div>
              </div>
            </template>
          </rs-card>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
          <!-- Role Preview -->
          <rs-card>
            <template #header>
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Role 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">{{ roleForm.name || '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 === roleForm.application)?.name || 'Not selected' }}
                  </p>
                </div>
                
                <div>
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Permissions:</span>
                  <rs-badge :variant="roleForm.permissions.length > 0 ? 'success' : 'secondary'">
                    {{ roleForm.permissions.length }} permissions
                  </rs-badge>
                </div>
                
                <div class="flex space-x-2">
                  <rs-badge :variant="roleForm.isActive ? 'success' : 'secondary'">
                    {{ roleForm.isActive ? 'Active' : 'Inactive' }}
                  </rs-badge>
                </div>
              </div>
            </template>
          </rs-card>
        </div>
      </div>
    </FormKit>
  </div>
</template>

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