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

// Define page metadata
definePageMeta({
  title: "My Documents",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    {
      name: "Dashboard",
      path: "/dashboard",
    },
    {
      name: "DMS",
      path: "/dms",
    },
    {
      name: "My Documents",
      path: "/dms/my-documents",
    },
  ],
});

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

// Local state
const searchQuery = ref('');
const isSearching = ref(false);
const currentPath = ref('My Documents');
const viewMode = ref('explorer'); // explorer, cabinets, list
const selectedFiles = ref([]);
const isSelecting = ref(false);
const currentDocument = ref(null);
const showFileViewer = 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 = [...myFiles];
  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;
};

// Search functionality
const handleSearch = async () => {
  if (!searchQuery.value.trim()) return;
  
  isSearching.value = true;
  // In a real app, we would call an API to search
  setTimeout(() => {
    isSearching.value = false;
  }, 800);
};

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

// Mock data for the example
const myFiles = [
  { 
    id: 'file1', 
    name: 'Project_Proposal_2023.pdf', 
    type: 'file', 
    extension: 'pdf', 
    size: '2.4MB', 
    modified: '2023-01-15',
    status: 'unlocked',
    createdBy: 'Current User'
  },
  { 
    id: 'file2', 
    name: 'Budget_Estimation_Q1.xlsx', 
    type: 'file', 
    extension: 'xlsx', 
    size: '1.8MB', 
    modified: '2023-02-10',
    status: 'unlocked',
    createdBy: 'Current User'
  },
  { 
    id: 'file3', 
    name: 'Meeting_Minutes_March.docx', 
    type: 'file', 
    extension: 'docx', 
    size: '578KB', 
    modified: '2023-03-22',
    status: 'locked',
    createdBy: 'Current User'
  },
  { 
    id: 'file4', 
    name: 'Technical_Specifications.pdf', 
    type: 'file', 
    extension: 'pdf', 
    size: '3.2MB', 
    modified: '2023-02-28',
    status: 'unlocked',
    createdBy: 'Current User'
  }
];

// Lifecycle hooks
onMounted(() => {
  // In a real app, we would fetch the user's documents here
});
</script>

<template>
  <div class="dms-page">
    <LayoutsBreadcrumb />
    
    <rs-card class="h-full">
      <template #header>
        <div class="flex flex-wrap items-center justify-between gap-4">
          <h1 class="text-xl font-bold text-primary">My Documents</h1>
          
          <div class="flex items-center gap-3">
            <!-- Search box -->
            <div class="relative">
              <input 
                v-model="searchQuery"
                @keyup.enter="handleSearch"
                type="text" 
                placeholder="Search my documents..."
                class="pl-10 pr-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 w-64"
              />
              <span 
                class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"
              >
                <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"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
              </span>
              <button 
                v-if="searchQuery" 
                @click="clearSearch"
                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
              >
                <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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
              </button>
            </div>
          </div>
        </div>
      </template>
      
      <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="Filter in current view..."
                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-2">
              <button 
                @click="changeViewMode('explorer')" 
                class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
                :class="viewMode === 'explorer' ? 'bg-gray-100 dark:bg-gray-800' : ''"
              >
                <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"><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="ml-1 text-sm">Explorer View</span>
              </button>
              
              <button 
                @click="changeViewMode('cabinets')" 
                class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
                :class="viewMode === 'cabinets' ? 'bg-gray-100 dark:bg-gray-800' : ''"
              >
                <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"><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="ml-1 text-sm">Cabinets View</span>
              </button>
              
              <button 
                @click="changeViewMode('list')" 
                class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
                :class="viewMode === 'list' ? 'bg-gray-100 dark:bg-gray-800' : ''"
              >
                <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"><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="ml-1 text-sm">List View</span>
              </button>
            </div>
            
            <div class="flex items-center gap-2">
              <rs-button size="sm" color="primary">
                <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">
                <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>
                New
              </rs-button>
            </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">
                      Name
                    </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">
                      Type
                    </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">
                      Size
                    </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 myFiles" 
                    :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>
                          <svg v-else-if="file.extension === 'docx'" 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>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <line x1="10" y1="9" x2="8" y2="9"></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 - optional -->
          </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> 