<script setup>
import { ref, computed } from 'vue';
import { useDmsStore } from '~/stores/dms';

const props = defineProps({
  document: {
    type: Object,
    required: true
  },
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['close', 'requestSubmitted']);

// Store
const dmsStore = useDmsStore();

// Form state
const selectedAccessLevel = ref('view');
const justification = ref('');
const isSubmitting = ref(false);
const formError = ref('');

// Access level options
const accessLevels = [
  { id: 'view', label: 'View Only', description: 'Can only view the document' },
  { id: 'download', label: 'Download', description: 'Can view and download the document' },
  { id: 'print', label: 'Print', description: 'Can view, download, and print the document' },
  { id: 'edit', label: 'Edit', description: 'Can view, download, print, and edit the document' },
  { id: 'full', label: 'Full Access', description: 'Has complete control over the document' }
];

// Computed properties
const documentTitle = computed(() => {
  return props.document?.name || 'Document';
});

const documentIconSvg = computed(() => {
  const extension = props.document?.extension?.toLowerCase();
  
  if (extension === 'pdf') 
    return '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15h6"></path><path d="M9 11h6"></path></svg>';
  
  if (['doc', 'docx'].includes(extension)) 
    return '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
  
  if (['xls', 'xlsx'].includes(extension)) 
    return '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><rect x="8" y="12" width="8" height="6"></rect><line x1="8" y1="16" x2="16" y2="16"></line><line x1="11" y1="12" x2="11" y2="18"></line></svg>';
  
  if (['ppt', 'pptx'].includes(extension)) 
    return '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><rect x="8" y="12" width="8" height="6"></rect></svg>';
  
  return '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>';
});

const currentAccessLevel = computed(() => {
  // This would be determined from actual permissions in production
  return 'None';
});

// Methods
const closeDialog = () => {
  emit('close');
};

const submitRequest = async () => {
  // Validate form
  if (!selectedAccessLevel.value) {
    formError.value = 'Please select an access level';
    return;
  }
  
  if (!justification.value.trim()) {
    formError.value = 'Please provide a justification for your request';
    return;
  }
  
  isSubmitting.value = true;
  formError.value = '';
  
  try {
    // Submit the request to the store
    const request = await dmsStore.requestAccess(props.document.id, selectedAccessLevel.value);
    
    // Emit success event
    emit('requestSubmitted', request);
    
    // Close the dialog
    closeDialog();
  } catch (error) {
    formError.value = 'Failed to submit access request. Please try again.';
    console.error('Access request error:', error);
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<template>
  <rs-modal 
    :visible="visible" 
    @close="closeDialog"
    title="Request Document Access"
    size="md"
  >
    <template #body>
      <div class="p-4">
        <!-- Document info -->
        <div class="flex items-center mb-6 bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
          <span class="text-primary mr-4" v-html="documentIconSvg"></span>
          <div>
            <h3 class="font-medium text-lg">{{ documentTitle }}</h3>
            <p class="text-sm text-gray-500">
              Current Access Level: <span class="font-medium">{{ currentAccessLevel }}</span>
            </p>
          </div>
        </div>
        
        <!-- Form error -->
        <div v-if="formError" class="mb-4 p-3 bg-red-100 text-red-800 rounded-md">
          {{ formError }}
        </div>
        
        <!-- Access level selection -->
        <div class="mb-4">
          <label class="block text-sm font-medium mb-2">Request Access Level:</label>
          <div class="space-y-2">
            <div 
              v-for="level in accessLevels" 
              :key="level.id"
              class="flex items-start p-3 border rounded-md cursor-pointer"
              :class="selectedAccessLevel === level.id 
                ? 'border-primary bg-primary/10' 
                : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'"
              @click="selectedAccessLevel = level.id"
            >
              <div class="flex-shrink-0 mt-0.5">
                <div class="w-4 h-4 rounded-full border-2 flex items-center justify-center"
                  :class="selectedAccessLevel === level.id 
                    ? 'border-primary' 
                    : 'border-gray-400'"
                >
                  <div 
                    v-if="selectedAccessLevel === level.id"
                    class="w-2 h-2 rounded-full bg-primary"
                  ></div>
                </div>
              </div>
              <div class="ml-3">
                <div class="font-medium">{{ level.label }}</div>
                <p class="text-sm text-gray-500">{{ level.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Justification -->
        <div class="mb-4">
          <label class="block text-sm font-medium mb-2">Justification:</label>
          <textarea 
            v-model="justification"
            rows="3"
            placeholder="Please explain why you need access to this document..."
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800"
          ></textarea>
          <p class="text-xs text-gray-500 mt-1">Your request will be reviewed by the document owner or administrator.</p>
        </div>
      </div>
    </template>
    
    <template #footer>
      <div class="flex justify-end gap-3">
        <rs-button color="secondary" @click="closeDialog" :disabled="isSubmitting">
          Cancel
        </rs-button>
        <rs-button color="primary" @click="submitRequest" :disabled="isSubmitting">
          <svg v-if="isSubmitting" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin mr-2"><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10"></path><path d="M12 2v4"></path><path d="M12 18v4"></path></svg>
          <span>Submit Request</span>
        </rs-button>
      </div>
    </template>
  </rs-modal>
</template> 