<script setup>
import dayjs from "dayjs";
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import DocumentUpload from "~/components/DocumentUpload.vue";
import DocumentList from "~/components/DocumentList.vue";

definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const supabase = useSupabaseClient()
const user = useSupabaseUser()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )

let currentItem = ref(null)

const tabItems = [
  {
    key: "information",
    label: "Informationen"
  },
  {
    key: "historyDisplay",
    label: "Logbuch"
  },
  {
    key: "phases",
    label: "Phasen"
  },{
    key: "tasks",
    label: "Aufgaben"
  },/*{
    key: "forms",
    label: "Formulare"
  },*/{
    key: "documents",
    label: "Dokumente"
  },{
    key: "timetracking",
    label: "Zeiterfassung"
  },{
    key: "events",
    label: "Termine"
  },{
    key: "material",
    label: "Material"
  }
]

const timeTableRows = [
  {
    key:"user",
    label: "Benutzer"
  },{
    key:"start",
    label: "Start"
  },{
    key:"end",
    label:"Ende"
  },{
    key:"duration",
    label: "Dauer"
  },{
    key: "type",
    label: "Typ"
  },{
    key:"notes",
    label: "Notizen"
  },
]



//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
  name: "",
  customer: 0,
  users: [dataStore.activeProfile.id]
})
const oldItemInfo = ref({})
const tags = dataStore.getDocumentTags


//Functions
const setupPage = () => {
  if(mode.value === "show" || mode.value === "edit"){
    currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
  }

  if(mode.value === "edit") itemInfo.value = currentItem.value

  if(mode.value === "create") {
    let query = route.query

    if(query.customer) itemInfo.value.customer = Number(query.customer)

    if(query.plant) {
      itemInfo.value.plant = Number(query.plant)
      itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
    }
  }
  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
}

const cancelEditorCreate = () => {
  if(currentItem.value) {
    router.push(`/projects/show/${currentItem.value.id}`)
  } else {
    router.push(`/projects/`)
  }
}

const projectHours = () => {
  let hours = 0
  dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
    hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
  })

  return hours.toFixed(2)
}


/*const phasesTemplate = ref([{
  label: 'Erstkontakt',
  icon: 'i-heroicons-clipboard-document',
  active: true
}, {
  label: 'Überprüfung Vor Ort',
  icon: 'i-heroicons-magnifying-glass'
}, {
  label: 'Angebotserstellung',
  icon: 'i-heroicons-document-text'
}, {
  label: 'Auftragsvergabe',
  icon: 'i-heroicons-document-check'
}, {
  label: 'Umsetzung',
  icon: 'i-heroicons-wrench-screwdriver'
},{
  label: 'Rechnungsstellung',
  icon: 'i-heroicons-document-text'
}, {
  label: 'Abgeschlossen',
  icon: 'i-heroicons-check'
}])*/
const phasesTemplateSelected = ref(dataStore.phasesTemplates[0].id)
const changeActivePhase = (phase) => {
  currentItem.value.phases = currentItem.value.phases.map(p => {
    if(p.active) delete p.active

    if(p.label === phase.label) p.active = true

    return p
  })

  savePhases()

}

const savePhases = () => {
  dataStore.updateItem("projects", currentItem.value)
}

const loadPhases = async () => {
  currentItem.value.phases = dataStore.phasesTemplates.find(i => i.id === phasesTemplateSelected.value).initialPhases
  await dataStore.updateItem("projects", currentItem.value)
}

setupPage()
</script>

<template>
  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
    <template #right>
      <UButton
          v-if="mode === 'edit'"
          @click="dataStore.updateItem('projects',itemInfo,oldItemInfo)"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode === 'create'"
          @click="dataStore.createNewItem('projects',itemInfo)"
      >
        Erstellen
      </UButton>
      <UButton
          @click="cancelEditorCreate"
          color="red"
          class="ml-2"
          v-if="mode === 'edit' || mode === 'create'"
      >
        Abbrechen
      </UButton>
      <UButton
          v-if="mode === 'show'"
          @click="router.push(`/projects/edit/${currentItem.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
  <UTabs
      :items="tabItems"
      v-if="currentItem && mode == 'show'"
      class="p-5"
  >
    <template #item="{ item }">
      <UCard class="mt-5">
        <div v-if="item.key === 'information'">



          <div class="text-wrap">
            <p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
            <p>Objekt: <nuxt-link :to="`/plants/show/${currentItem.plant}`">{{currentItem.plant ? dataStore.getPlantById(currentItem.plant).name : ""}}</nuxt-link></p>
            <p class="">Notizen: {{currentItem.notes}}</p>
          </div>

          <UDivider class="my-3"/>
          <h1 class="font-bold text-lg my-3">Beteiligte Benutzer:</h1>
          <UAlert
              v-for="projectUser in currentItem.users"
              :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
              :title="dataStore.getProfileById(projectUser).fullName"
              class="mb-3"

          />
        </div>
        <div v-else-if="item.key === 'historyDisplay'">
          <HistoryDisplay
              type="project"
              v-if="currentItem"
              :element-id="currentItem.id"
          />
        </div>
        <div v-if="item.key === 'phases'" class="space-y-3">
          <UFormGroup
              label="Vorlage laden"
              v-if="currentItem.phases.length === 0"
          >
            <InputGroup>
              <USelectMenu
                  :options="dataStore.phasesTemplates"
                  option-attribute="name"
                  value-attribute="id"
                  v-model="phasesTemplateSelected"
                  class="flex-auto"
              >

              </USelectMenu>
              <UButton
                  @click="loadPhases"
              >
                Vorlage laden
              </UButton>
            </InputGroup>
          </UFormGroup>

          <UAccordion
              :items="currentItem.phases"
          >
            <template #default="{item,index,open}">
              <UButton
                variant="ghost"
                :color="item.active ? 'primary' : 'white'"
                class="mb-1"
              >
                <template #leading>
                  <div class="w-6 h-6  flex items-center justify-center -my-1">
                    <UIcon :name="item.icon" class="w-4 h-4 " />
                  </div>
                </template>

                <span class="truncate"> {{item.label}}</span>

                <template #trailing>
                  <UIcon
                      name="i-heroicons-chevron-right-20-solid"
                      class="w-5 h-5 ms-auto transform transition-transform duration-200"
                      :class="[open && 'rotate-90']"
                  />
                </template>

              </UButton>
            </template>
            <template #item="{item}">
              <InputGroup>
                <UButton
                    v-if="!item.active"
                    @click="changeActivePhase(item)"
                >
                  Phase aktivieren
                </UButton>
              </InputGroup>
            </template>
          </UAccordion>
        </div>
        <div v-if="item.key === 'tasks'" class="space-y-3">
          <Toolbar>
            <UButton
                @click="router.push(`/tasks/create?project=${currentItem.id}`)"
            >
              + Aufgabe
            </UButton>
          </Toolbar>

          <UTable
              :rows="dataStore.getTasksByProjectId(currentItem.id)"
              :columns="[{key: 'name',label: 'Name'},{key: 'categorie',label: 'Kategorie'},{key: 'user',label: 'Benutzer'}]"
              @select="(row) => router.push(`/tasks/show/${row.id}`)"
              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"

          >
            <template #user-data="{row}">
              {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
            </template>
          </UTable>

        </div>
        <div v-else-if="item.key === 'documents'" class="space-y-3">
          <Toolbar>
            <DocumentUpload
                type="project"
                :element-id="currentItem.id"
            />
            <UButton
                @click="router.push(`/createDocument/edit?project=${currentItem.id}&type=quotes&customer=${currentItem.customer}`)"
            >
              + Angebot
            </UButton>
            <UButton
                @click="router.push(`/createDocument/edit?project=${currentItem.id}&type=invoices&customer=${currentItem.customer}`)"
            >
              + Rechnung
            </UButton>
          </Toolbar>

          <UTable
            :rows="dataStore.getCreatedDocumentsByProject(currentItem.id)"
            :columns="[
                {
                  label: 'Typ',
                  key: 'type'
                }, {
                  label: 'Status',
                  key: 'state'
                }, {
                  label: 'Dokumentennummer',
                  key: 'documentNumber'
                }, {
                  label: 'Ansprechpartner',
                  key: 'createdBy'
                }

            ]"
            @select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
          >
            <template #type-data="{row}">
              <span v-if="row.type === 'invoices'">Rechnung</span>
              <span v-if="row.type === 'quotes'">Angebot</span>
              <span v-if="row.type === 'deliveryNotes'">Lieferschein</span>
            </template>
            <template #createdBy-data="{row}">
              {{dataStore.getProfileById(row.createdBy).fullName}}
            </template>
          </UTable>

          <DocumentList :documents="dataStore.getDocumentsByProjectId(currentItem.id)"/>
<!--
          {{dataStore.getDocumentsByProjectId(currentItem.id)}}
-->

        </div>

        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
          Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
          <UTable
              :rows="dataStore.getTimesByProjectId(currentItem.id)"
              :columns="timeTableRows"
              :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
          >
            <template #user-data="{row}">
              {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
            </template>
            <template #duration-data="{row}">
              {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
            </template>
            <template #start-data="{row}">
              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
            </template>
            <template #end-data="{row}">
              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
            </template>

          </UTable>
        </div>
        <div v-else-if="item.key === 'events'" class="space-y-3">
          <Toolbar>
            <UButton
              @click="router.push(`/events/edit`)"
            >
              + Termin
            </UButton>
          </Toolbar>
          <UTable
            :rows="dataStore.getEventsByProjectId(currentItem.id)"
            @select="(i) => router.push(`/events/show/${i.id}`)"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
            :columns="[{key:'title',label:'Titel'},{key:'start',label:'Start'},{key:'end',label:'Ende'},{key:'type',label:'Typ'},{key:'resources',label:'Resourcen'}]"
          >
              <template #start-data="{row}">
                {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
              </template>
              <template #end-data="{row}">
                {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
              </template>
              <template #resources-data="{row}">
                {{row.resources.map(i => i.title).join(", ")}}
              </template>
          </UTable>

        </div>
        <div v-else-if="item.key === 'material'" class="space-y-3">
          Auf das Projekt gebuchte Artikel:

          <UTable
            :rows="dataStore.getStocksByProjectId(currentItem.id)"
            :columns="[{key:'productId',label:'Artikel'},{key:'stock',label:'Anzahl'}]"
            @select="(i) => router.push(`/products/show/${i.productId}`)"
          >
            <template #productId-data="{row}">
              {{dataStore.getProductById(row.productId).name}}
            </template>
            <template #stock-data="{row}">
              {{row.stock}} {{dataStore.units.find(i => i.id === dataStore.getProductById(row.productId).unit).short}}
            </template>
          </UTable>

        </div>
      </UCard>
    </template>


  </UTabs>

  <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5" >
    <UFormGroup
        label="Name:"
    >
      <UInput
          v-model="itemInfo.name"
      />
    </UFormGroup>

    <UFormGroup
        label="Kundennummer:"
    >
      <USelectMenu
          v-model="itemInfo.customer"
          :options="dataStore.customers"
          option-attribute="name"
          value-attribute="id"
          searchable
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Gewerk:"
    >
      <USelectMenu
          v-model="itemInfo.measure"
          :options="dataStore.getMeasures"
          option-attribute="name"
          value-attribute="short"
          searchable
          :search-attributes="['name']"
      >

      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Objekt:"
    >
      <USelectMenu
          v-model="itemInfo.plant"
          :options="dataStore.plants"
          option-attribute="name"
          value-attribute="id"
          searchable
          :search-attributes="['name']"
      >
        <template #label>
          {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Objekt auswählen"}}
        </template>
      </USelectMenu>
    </UFormGroup>
    <UFormGroup
        label="Beteiligte Benutzer:"
    >
      <USelectMenu
          v-model="itemInfo.users"
          :options="dataStore.profiles"
          option-attribute="fullName"
          value-attribute="id"
          searchable
          multiple
          :search-attributes="['fullName']"
      >
        <template #label>
          {{itemInfo.users.length > 0 ? itemInfo.users.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
      label="Notizen:"
    >
      <UTextarea
        v-model="itemInfo.notes"
      />
    </UFormGroup>
  </UForm>
</template>

<style scoped>

</style>