<template>
  <div>
    <div
      class="relative group flex flex-col items-start md:flex-row md:space-x-2 border-2 border-primary-muted hover:bg-primary-muted rounded-md p-3 transition overflow-hidden"
    >
      <div
        class="w-full md:w-48 flex flex-col col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1"
      >
        <div class="text-xl sm:text-2xl font-bold transition">
          <NuxtLink
            :to="projectRoute(project.id)"
            class="break-words hover:text-primary"
          >
            {{ project.name }}
          </NuxtLink>
          <UserAvatarGroup :users="teamUsers" :max-count="2" class="mt-2" />
        </div>
        <div class="flex-grow"></div>
        <div class="text-xs text-foreground-2 flex items-center">
          <UserCircleIcon class="w-4 h-4 mr-1" />
          <span class="-mt-px">
            {{ project.role?.split(':').reverse()[0] }}
          </span>
        </div>
        <!-- Note: commented out as we have the +x models indicator. Less clutter! -->
        <!-- <div class="text-xs text-foreground-2 flex items-center">
          <CubeIcon class="w-4 h-4 mr-1" />
          {{ project.models.totalCount }} models
        </div> -->
        <div class="text-xs text-foreground-2 flex items-center">
          <ClockIcon class="w-4 h-4 mr-1" />
          <span class="-mt-px">
            updated
            <b>{{ updatedAt }}</b>
          </span>
        </div>
      </div>
      <div
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 flex-grow col-span-4 lg:col-span-3 w-full"
      >
        <ProjectPageModelsCard
          v-for="pendingModel in pendingModels"
          :key="pendingModel.id"
          :model="pendingModel"
          :project="project"
          :project-id="project.id"
          height="h-52"
        />
        <ProjectPageModelsCard
          v-for="model in models"
          :key="model.id"
          :model="model"
          :project="project"
          :show-versions="false"
          :show-actions="false"
          :project-id="project.id"
          height="h-52"
        />
        <ProjectCardImportFileArea
          v-if="hasNoModels"
          :project-id="project.id"
          class="h-36 col-span-4"
        />
      </div>
      <div
        v-if="modelItemTotalCount > 4"
        class="absolute -right-11 hover:right-0 top-1/2 translate -translate-y-1/2 bg-foundation text-primary text-xs font-bold transition-all opacity-0 group-hover:opacity-100 rounded-l-md shadow-md px-1 py-12"
      >
        <NuxtLink :to="allProjectModelsRoute(project.id) + '/'">
          +{{ modelItemTotalCount - 4 }} more model{{
            modelItemTotalCount - 4 !== 1 ? 's' : ''
          }}
        </NuxtLink>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import type { ProjectDashboardItemFragment } from '~~/lib/common/generated/gql/graphql'
import { UserCircleIcon, ClockIcon } from '@heroicons/vue/24/outline'
import { projectRoute, allProjectModelsRoute } from '~~/lib/common/helpers/route'
import { useGeneralProjectPageUpdateTracking } from '~~/lib/projects/composables/projectPages'

const props = defineProps<{
  project: ProjectDashboardItemFragment
}>()

const projectId = computed(() => props.project.id)

// Tracking updates to project, its models and versions
useGeneralProjectPageUpdateTracking(
  { projectId },
  { redirectHomeOnProjectDeletion: false }
)

const teamUsers = computed(() => props.project.team.map((t) => t.user))
const pendingModels = computed(() => props.project.pendingImportedModels)
const models = computed(() => {
  const items = props.project.models?.items || []
  return items.slice(0, Math.max(0, 4 - pendingModels.value.length))
})
const updatedAt = computed(() => dayjs(props.project.updatedAt).from(dayjs()))

const hasNoModels = computed(() => !models.value.length && !pendingModels.value.length)
const modelItemTotalCount = computed(
  () => props.project.models.totalCount + pendingModels.value.length
)
</script>
