<script setup>
import { ref, computed, onMounted } from 'vue';
import { useDmsStore } from '~/stores/dms';
import DMSNavigation from '~/components/dms/navigation/DMSNavigation.vue';

// Define page metadata
definePageMeta({
  title: "Document Management System",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    {
      name: "Dashboard",
      path: "/dashboard",
    },
    {
      name: "DMS",
      path: "/dms",
    },
  ],
});

// Set up store
const dmsStore = useDmsStore();

// Local state
const showFileViewer = ref(false);
const currentDocument = ref(null);
const searchQuery = ref('');
const isSearching = ref(false);
const currentPath = ref('JKR Cawangan Kota Bharu, Kelantan');
const viewMode = ref('explorer'); // explorer, cabinets, list

// File selection state
const selectedFiles = ref([]);
const isSelecting = ref(false);

// Toggle file selection
const toggleFileSelection = (file) => {
  const index = selectedFiles.value.findIndex(f => f.id === file.id);
  if (index === -1) {
    selectedFiles.value.push(file);
  } else {
    selectedFiles.value.splice(index, 1);
  }
};

// Clear selection
const clearSelection = () => {
  selectedFiles.value = [];
  isSelecting.value = false;
};

// Select all files
const selectAllFiles = () => {
  selectedFiles.value = [...dmsStore.currentItems];
  isSelecting.value = true;
};

// Check if a file is selected
const isFileSelected = (file) => {
  return selectedFiles.value.some(f => f.id === file.id);
};

// Toggle view mode
const changeViewMode = (mode) => {
  viewMode.value = mode;
};

// View a file
const viewFile = (file) => {
  if (isSelecting.value) {
    toggleFileSelection(file);
    return;
  }
  
  currentDocument.value = file;
  showFileViewer.value = true;
};

// Navigate to a location
const navigateTo = (path) => {
  currentPath.value = path;
  // In a real app, we would fetch the contents of this location
  clearSelection();
};

// Search functionality
const handleSearch = async () => {
  if (!searchQuery.value.trim()) return;
  
  isSearching.value = true;
  await dmsStore.searchDocuments(searchQuery.value);
  isSearching.value = false;
};

// Clear search
const clearSearch = () => {
  searchQuery.value = '';
  dmsStore.clearSearch();
};

// Format file size
const formatFileSize = (size) => {
  if (!size) return '0 B';
  
  if (typeof size === 'string') {
    // If already formatted (like "4MB"), return as is
    if (size.endsWith('B')) return size;
    
    // Try to parse the size if it's a number in string form
    const parsed = parseFloat(size);
    if (isNaN(parsed)) return size;
    size = parsed;
  }
  
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  let i = 0;
  while (size >= 1024 && i < units.length - 1) {
    size /= 1024;
    i++;
  }
  return `${size.toFixed(2)} ${units[i]}`;
};

// Mock data for the example
const mockFiles = [
  { 
    id: 'file1', 
    name: 'Pembangunan_Sistem_IT_2021.pdf', 
    type: 'file', 
    extension: 'pdf', 
    size: '4MB', 
    modified: '2021-05-20',
    status: 'locked',
    info: {
      title: 'Projek Pembangunan Sistem IT',
      subject: 'Dokumen spesifikasi sistem',
      state: 'Kelantan',
      date: '2021-05-20',
      user: 'Mohd Faizal bin Abdullah',
      storeDate: '2021-05-25'
    }
  },
  { 
    id: 'file2', 
    name: 'Projek_Jalan_Raya_Kota_Bharu.pdf', 
    type: 'file', 
    extension: 'pdf', 
    size: '5MB', 
    modified: '2021-06-15',
    status: 'unlocked'
  },
  { 
    id: 'file3', 
    name: 'Anggaran_Kos_Projek_MRT3.xlsx', 
    type: 'file', 
    extension: 'xlsx', 
    size: '3MB', 
    modified: '2021-07-10',
    status: 'locked'
  },
  { 
    id: 'file4', 
    name: 'EIA_Empangan_Nenggiri.pdf', 
    type: 'file', 
    extension: 'pdf', 
    size: '15MB', 
    modified: '2021-04-18',
    status: 'locked'
  }
];

// Lifecycle hooks
onMounted(() => {
  // In a real app, we would load the initial data here
});
</script>

<template>
  <div class="dms-page">
    <LayoutsBreadcrumb />
    
    <rs-card class="h-full">
      <template #body>
        <div class="explorer-layout h-full flex flex-col">
          <!-- Address bar (Windows Explorer style) -->
          <div class="address-bar border-b border-gray-200 dark:border-gray-700 p-2 flex items-center gap-2">
            <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
              <svg 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"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            </button>
            
            <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
              <svg 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"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </button>
            
            <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800">
              <svg 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"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
            </button>
            
            <div class="flex-1 flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800">
              <svg 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="mr-2 text-gray-500"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
              <span>{{ currentPath }}</span>
            </div>
            
            <div class="relative">
              <input 
                type="text" 
                placeholder="Search in current folder..."
                class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 w-56"
              />
              <span class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
              </span>
            </div>
          </div>
          
          <!-- View options toolbar -->
          <div class="view-toolbar border-b border-gray-200 dark:border-gray-700 p-2 flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="flex items-center bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden border border-gray-200 dark:border-gray-700">
                <button 
                  @click="changeViewMode('explorer')" 
                  class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
                  :class="viewMode === 'explorer' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                  <span class="text-sm">Explorer View</span>
                </button>
                
                <button 
                  @click="changeViewMode('cabinets')" 
                  class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
                  :class="viewMode === 'cabinets' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
                  <span class="text-sm">Cabinets View</span>
                </button>
                
                <button 
                  @click="changeViewMode('list')" 
                  class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"
                  :class="viewMode === 'list' ? 'bg-white dark:bg-gray-700 shadow-sm' : ''"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
                  <span class="text-sm">List View</span>
                </button>
              </div>
            </div>
            
            <div class="flex items-center gap-3">
              <rs-button size="sm" color="primary" class="flex items-center">
                <svg 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="mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                Upload
              </rs-button>
              
              <rs-button size="sm" color="secondary" class="flex items-center">
                <svg 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="mr-1"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                Create New
              </rs-button>
              
              <div class="flex items-center border border-gray-200 dark:border-gray-700 rounded-md px-3 py-1 bg-white dark:bg-gray-800">
                <svg 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="mr-1"><path d="M11 5h10"></path><path d="M11 9h10"></path><path d="M11 13h10"></path><path d="M3 17h18"></path><path d="M3 5l4 4"></path><path d="M3 13l4-4"></path></svg>
                <span class="text-sm">Sort</span>
              </div>
            </div>
          </div>
          
          <!-- Main content area -->
          <div class="flex-1 flex overflow-hidden">
            <!-- Left sidebar navigation -->
            <DMSNavigation />
            
            <!-- File explorer main content -->
            <div class="flex-1 overflow-y-auto">
              <!-- List view -->
              <table class="min-w-full">
                <thead class="bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-6">
                      <input 
                        type="checkbox" 
                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                        @click="selectAllFiles"
                      >
                    </th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      Nama
                    </th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      Jenis
                    </th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      Saiz
                    </th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      Modified Date
                    </th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  <tr 
                    v-for="file in mockFiles" 
                    :key="file.id"
                    @click="viewFile(file)"
                    class="hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                    :class="{ 'bg-blue-50 dark:bg-blue-900/20': isFileSelected(file) }"
                  >
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input 
                        type="checkbox" 
                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                        :checked="isFileSelected(file)"
                        @click.stop="toggleFileSelection(file)"
                      >
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <div class="flex items-center">
                        <span class="text-gray-500 mr-2">
                          <svg v-if="file.extension === 'pdf'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                          <svg v-else-if="file.extension === 'xlsx'" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
                        </span>
                        <div class="flex items-center">
                          <span>{{ file.name }}</span>
                          <span v-if="file.status === 'locked'" class="ml-2 text-red-500">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                          </span>
                        </div>
                      </div>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="uppercase">{{ file.extension }}</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      {{ file.size }}
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      {{ file.modified }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- Right sidebar for document details -->
            <div v-if="currentDocument" class="w-72 border-l border-gray-200 dark:border-gray-700 overflow-y-auto bg-gray-50 dark:bg-gray-800">
              <div class="p-4">
                <div class="text-center mb-4 bg-white dark:bg-gray-700 p-8 rounded shadow-sm">
                  <div v-if="currentDocument.extension === 'pdf'" class="flex justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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>
                  </div>
                  <div v-else-if="currentDocument.extension === 'xlsx'" class="flex justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1D6F42" stroke-width="1" 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" fill="white"></path>
                      <polyline points="14 2 14 8 20 8"></polyline>
                      <rect x="8" y="12" width="8" height="6" fill="#1D6F42"></rect>
                      <line x1="8" y1="16" x2="16" y2="16" stroke="white"></line>
                      <line x1="11" y1="12" x2="11" y2="18" stroke="white"></line>
                    </svg>
                  </div>
                  <h2 class="text-lg font-medium">{{ currentDocument.name }}</h2>
                </div>
                
                <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
                  <h3 class="text-lg font-medium mb-3">Document Information</h3>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Title:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info?.title || 'N/A' }}</div>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Subject:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info?.subject || 'N/A' }}</div>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">State:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info?.state || 'N/A' }}</div>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Date:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info?.date || currentDocument.modified }}</div>
                  </div>
                </div>
                
                <div class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
                  <h3 class="text-lg font-medium mb-3">Document Details</h3>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">File Name:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.name }}</div>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Type:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.extension.toUpperCase() }}</div>
                  </div>
                  
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Size:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.size }}</div>
                  </div>
                  
                  <div v-if="currentDocument.info?.user" class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Author:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info.user }}</div>
                  </div>
                  
                  <div v-if="currentDocument.info?.storeDate" class="grid grid-cols-3 gap-2 mb-2">
                    <div class="col-span-1 text-gray-500 dark:text-gray-400">Date modified:</div>
                    <div class="col-span-2 text-right">{{ currentDocument.info.storeDate }}</div>
                  </div>
                </div>
                
                <div class="flex gap-2 mt-6">
                  <rs-button size="sm" color="primary" block class="flex-1">
                    <svg 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="mr-2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                    Preview
                  </rs-button>
                  <rs-button size="sm" color="secondary" block class="flex-1">
                    <svg 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="mr-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                    Download
                  </rs-button>
                </div>
                
                <rs-button v-if="currentDocument.status === 'locked'" size="sm" color="default" block class="mt-2">
                  <svg 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="mr-2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                  Request Access
                </rs-button>
              </div>
            </div>
          </div>
        </div>
      </template>
    </rs-card>
  </div>
</template>

<style scoped>
.dms-page {
  height: calc(100vh - 64px - 48px - 32px); /* Adjust based on your layout */
}

.explorer-layout {
  height: calc(100vh - 200px); /* Adjust based on your layout */
}
</style> 