<script setup>
import dayjs from "dayjs";


definePageMeta({
  middleware: "auth"
})

defineShortcuts({
  'backspace': () => {
    router.push("/projects")
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
    }
  },
  'arrowright': () => {
    if(openTab.value < 3) {
      openTab.value += 1
    }
  },
})

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 )

const openTab = ref(0)

const tabItems = [
  {
    key: "information",
    label: "Informationen"
  },
  {
    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
const phasesTemplates = ref([])

const plants = ref([])
const contracts = ref([])
const projecttypes = ref([])
const disableCustomerSelection =ref(false)


//Functions
const setupPage = async() => {
  plants.value = await useSupabaseSelect("plants")
  contracts.value = await useSupabaseSelect("contracts")
  projecttypes.value = await useSupabaseSelect("projecttypes", "*", "id")

  if(mode.value === "show" ){
    itemInfo.value = await useSupabaseSelectSingle("projects",route.params.id,"*, customer(*), plant(*), createddocuments(*)")
  } else if (mode.value === "edit") {
    itemInfo.value = await useSupabaseSelectSingle("projects",route.params.id,"*")
  }

  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(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))

  if(!oldItemInfo.value.projecttype) {
    itemInfo.value.projecttype = projecttypes.value[0].id
  }

}

setupPage()

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

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

  return hours.toFixed(2)
}

const updateProject = async () => {
  let initialPhases = projecttypes.value.find(i => i.id === itemInfo.value.projecttype).initialPhases

  if(oldItemInfo.value.phases.length === 0) {
    itemInfo.value.phases = initialPhases
  }

  await dataStore.updateItem('projects',itemInfo.value,oldItemInfo.value)

}

const createProject = async () => {
  let initialPhases = projecttypes.value.find(i => i.id === itemInfo.value.projecttype).initialPhases
  await dataStore.createNewItem('projects',{...itemInfo.value, phases: initialPhases })
}

const changeActivePhase = async (key) => {
  let item = await useSupabaseSelectSingle("projects",itemInfo.value.id,'*')

  console.log(key)

  let phaseLabel = ""

  item.phases = item.phases.map(p => {
    if(p.active) p.active = false

    if(p.key === key) {
      p.active = true
      p.activated_at = dayjs().format()
      p.activated_by = dataStore.activeProfile.id
      phaseLabel = p.label
    }

    return p
  })

  console.log(item.phases)

  await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
  const {error} = await supabase.from("historyitems").insert({
    createdBy: dataStore.activeProfile.id,
    tenant: dataStore.currentTenant,
    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
    project: item.id
  })
  console.log(error)

  setupPage()
}


const renderedPhases = computed(() => {

  if(itemInfo.value.phases) {
    return itemInfo.value.phases.map((phase,index,array) => {

      let isAvailable = false

      if(phase.active) {
        isAvailable = true
      } else if(index > 0 && array[index-1].active ){
        isAvailable = true
      } else if(index > 1 && array[index-1].optional && array[index-2].active){
        isAvailable = true
      } else if(array.findIndex(i => i.active) > index) {
        isAvailable = true
      }


      return {
        ...phase,
        label: phase.optional ? `${phase.label}(optional)`: phase.label,
        disabled: !isAvailable,
        defaultOpen: phase.active ? true : false
      }
    })
  } else {
    return []
  }
})

const invoiceDeliveryNotes = () => {
  router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${itemInfo.value.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
}

</script>

<template>
  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/projects`)"
      >
        Projekte
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          class="text-xl font-medium"
      >{{itemInfo.name ? `Projekt: ${itemInfo.name}` : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')}}</h1>
    </template>
    <template #right>
      <UButton
          v-if="mode === 'edit'"
          @click="updateProject"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode === 'create'"
          @click="createProject"
      >
        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/${itemInfo.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UTabs
        :items="tabItems"
        v-if="itemInfo.id && mode == 'show'"
        v-model="openTab"
    >
      <template #item="{ item }">
        <div v-if="item.key === 'information'" class="flex flex-row">
          <div class="w-1/2 mr-3">
            <UCard class="mt-5">
              <div class="text-wrap">
                <p>Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer.name}}</nuxt-link></p>
                <p>Objekt: <nuxt-link v-if="itemInfo.plant" :to="`/plants/show/${itemInfo.plant.id}`">{{itemInfo.plant ? itemInfo.plant.name : ""}}</nuxt-link><span v-else>-</span></p>
                <p class="">Notizen: {{itemInfo.notes}}</p>
              </div>
            </UCard>
            <UCard class="mt-3">
              <h1 class="font-bold text-lg mb-3">Beteiligte Benutzer:</h1>
              <UAlert
                  v-for="projectUser in itemInfo.profiles"
                  :avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
                  :title="dataStore.getProfileById(projectUser).fullName"
                  class="mb-3"

              />
            </UCard>
          </div>
          <div class="w-1/2">
            <UCard class="mt-5">
              <HistoryDisplay
                  type="project"
                  v-if="itemInfo"
                  :element-id="itemInfo.id"
                  render-headline
              />
            </UCard>
          </div>



        </div>
        <div v-if="item.key === 'phases'" class="space-y-3">
          <UCard class="mt-5">
            <UAccordion
                :items="renderedPhases"
            >
              <template #default="{item,index,open}">
                <UButton
                    variant="ghost"
                    :color="item.active ? 'primary' : 'white'"
                    class="mb-1"
                    :disabled="true"
                >
                  <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, index}">
                <UCard class="mx-5">
                  <template #header>
                    <span class="text-black">{{item.label}}</span>
                  </template>
                  <InputGroup>
                    <UButton
                        v-if="!item.activated_at && index !== 0 "
                        @click="changeActivePhase(item.key)"
                    >
                      Phase aktivieren
                    </UButton>
                    <UButton
                        v-if="item.active"
                        v-for="button in item.quickactions"
                        @click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
                    >
                      {{button.label}}
                    </UButton>
                  </InputGroup>

                  <div>
                    <p v-if="item.activated_at" class="text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
                    <p v-if="item.activated_by" class="text-black">Aktiviert durch: {{dataStore.getProfileById(item.activated_by).fullName}}</p>
                    <p v-if="item.description" class="text-black">Beschreibung: {{item.description}}</p>
                  </div>
                </UCard>


              </template>
            </UAccordion>
          </UCard>
        </div>
        <div v-if="item.key === 'tasks'" class="space-y-3">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/tasks/create?project=${itemInfo.id}`)"
              >
                + Aufgabe
              </UButton>
            </Toolbar>

            <UTable
                :rows="dataStore.getTasksByProjectId(itemInfo.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>
          </UCard>



        </div>
        <div v-else-if="item.key === 'documents'" class="space-y-3">
          <UCard class="mt-5">
            <Toolbar>
              <DocumentUpload
                  type="project"
                  :element-id="itemInfo.id"
              />
              <UButton
                  @click="router.push(`/createDocument/edit?project=${itemInfo.id}&customer=${itemInfo.customer.id}`)"
              >
                + Dokument
              </UButton>
              <UButton
                @click="invoiceDeliveryNotes"
              >
                Lieferscheine abrechnen
              </UButton>
            </Toolbar>


            <UTable
                :rows="itemInfo.createddocuments"
                :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}`)"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen erstellten Dokumente' }"

            >
              <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(itemInfo.id)"/>
          </UCard>




        </div>
        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
          <UCard class="mt-5">
            Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
            <UTable
                :rows="dataStore.getTimesByProjectId(itemInfo.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>
          </UCard>


        </div>
        <div v-else-if="item.key === 'events'" class="space-y-3">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/events/edit`)"
              >
                + Termin
              </UButton>
            </Toolbar>
            <UTable
                :rows="dataStore.getEventsByProjectId(itemInfo.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>
          </UCard>
        </div>
        <div v-else-if="item.key === 'material'" class="space-y-3">

        </div>

      </template>


    </UTabs>

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

      <UFormGroup
          label="Projektnummer:"
      >
        <UInput
            v-model="itemInfo.projectNumber"
            placeholder="Leer lassen für automatisch generierte Nummer"
        />
      </UFormGroup>

      <UFormGroup
          label="Objekt:"
      >
        <USelectMenu
            v-model="itemInfo.plant"
            :options="itemInfo.customer ? plants.filter(i => i.customer === itemInfo.customer) : plants"
            option-attribute="name"
            value-attribute="id"
            searchable
            :search-attributes="['name']"
            @change="itemInfo.customer = plants.find(i => i.id === itemInfo.plant).customer,
                    disableCustomerSelection = true"
        >
          <template #label>
            {{plants.find(i => i.id === itemInfo.plant) ? plants.find(i => i.id === itemInfo.plant).name : "Objekt auswählen"}}
          </template>
        </USelectMenu>
      </UFormGroup>
      <UFormGroup
          label="Vertrag:"
      >
        <USelectMenu
            v-model="itemInfo.contract"
            :options="itemInfo.customer ? contracts.filter(i => i.customer === itemInfo.customer) : contracts"
            option-attribute="name"
            value-attribute="id"
            searchable
            :search-attributes="['name']"
            @change="itemInfo.customer = contracts.find(i => i.id === itemInfo.contract).customer,
                    disableCustomerSelection = true"
        >
          <template #label>
            {{contracts.find(i => i.id === itemInfo.contract) ? contracts.find(i => i.id === itemInfo.contract).name : "Vertrag auswählen"}}
          </template>
        </USelectMenu>
      </UFormGroup>

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

      <UFormGroup
          label="Typ:"
      >
        <USelectMenu
            v-model="itemInfo.projecttype"
            :options="projecttypes"
            option-attribute="name"
            value-attribute="id"
            searchable
            :search-attributes="['label']"
            :disabled="oldItemInfo.projecttype"
        >
        </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="Beteiligte Benutzer:"
      >
        <USelectMenu
            v-model="itemInfo.profiles"
            :options="dataStore.profiles"
            option-attribute="fullName"
            value-attribute="id"
            searchable
            multiple
            :search-attributes="['fullName']"
        >
          <template #label>
            {{itemInfo.profiles.length > 0 ? itemInfo.profiles.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
          </template>
        </USelectMenu>
      </UFormGroup>

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


</template>

<style scoped>

</style>