<template>
  <main class="container mx-auto px-6 py-8">
    <DocumentPreviewModal
      :document="previewDocument"
      :visible="previewVisible"
      :documents="siteDocuments"
      @close="closePreview"
    />

    <div class="my-8">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">
          Sites
        </h2>
        <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
          <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
          Ajouter un site
        </button>
      </div>

      <div v-if="loading" class="flex justify-center items-center py-12">
        <span class="loading loading-spinner loading-lg" />
      </div>

      <div v-else-if="sites.length === 0" class="text-center py-12">
        <div class="max-w-md mx-auto">
          <IconLucideMapPin class="w-16 h-16 mx-auto text-base-content/30 mb-4" aria-hidden="true" />
          <h3 class="text-lg font-medium text-base-content mb-2">
            Aucun site trouvé
          </h3>
          <p class="text-base-content/50 mb-4">
            Commencez par ajouter votre premier site.
          </p>
          <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
            Ajouter un site
          </button>
        </div>
      </div>

      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <SiteCard
          v-for="site in sites"
          :key="site.id"
          :site="site"
          @edit="editSite"
          @delete="confirmDeleteSite"
        />
      </div>
    </div>

    <SiteCreateModal
      :visible="showAddSiteModal"
      :site="newSite"
      :disabled="!canEdit"
      @close="closeCreateModal"
      @submit="handleCreateSite"
    />

    <SiteEditModal
      :visible="showEditSiteModal"
      :site-name="siteBeingEdited?.name || ''"
      :form="editSiteForm"
      :documents="siteDocuments"
      :selected-files="selectedFiles"
      :uploading-documents="uploadingDocuments"
      :can-preview-document="canPreviewDocument"
      :document-icon="documentIcon"
      :format-size="formatSize"
      :disabled="!canEdit"
      @close="closeEditModal"
      @submit="handleUpdateSite"
      @remove-document="handleRemoveSiteDocument"
      @download-document="downloadDocument"
      @preview-document="openPreview"
      @update:selected-files="(files) => (selectedFiles.value = files)"
    />
  </main>
</template>

<script setup>
import IconLucideMapPin from '~icons/lucide/map-pin'
import IconLucidePlus from '~icons/lucide/plus'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import SiteCard from '~/components/sites/SiteCard.vue'
import SiteCreateModal from '~/components/sites/SiteCreateModal.vue'
import SiteEditModal from '~/components/sites/SiteEditModal.vue'
import { useSiteManagement } from '~/composables/useSiteManagement'

const { canEdit } = usePermissions()

const {
  sites,
  loading,
  showAddSiteModal,
  showEditSiteModal,
  siteBeingEdited,
  newSite,
  editSiteForm,
  selectedFiles,
  uploadingDocuments,
  previewDocument,
  previewVisible,
  siteDocuments,
  documentIcon,
  handleCreateSite,
  editSite,
  handleUpdateSite,
  closeEditModal,
  handleRemoveSiteDocument,
  downloadDocument,
  openPreview,
  closePreview,
  formatSize,
  confirmDeleteSite,
  canPreviewDocument,
  openCreateSiteModal,
  closeCreateModal
} = useSiteManagement()
</script>
