<script setup lang="ts">
import SubmissionsOverview from "@/components/cockpit/SubmissionsOverview.vue";
import UserStatusCount from "@/components/cockpit/UserStatusCount.vue";
import CourseSessionDueDatesList from "@/components/dueDates/CourseSessionDueDatesList.vue";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
import { useExpertCockpitStore } from "@/stores/expertCockpit";
import AttendanceOverview from "./AttendanceOverview.vue";

const expertCockpitStore = useExpertCockpitStore();
const courseSession = useCurrentCourseSession();
const courseSessionDetailResult = useCourseSessionDetailQuery();

const props = defineProps<{
  courseSlug: string;
}>();
</script>
<template>
  <div v-if="expertCockpitStore.circles?.length">
    <div v-if="expertCockpitStore.currentCircle" class="container-large pt-10">
      <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
        <ItDropdownSelect
          :as-heading="true"
          :model-value="expertCockpitStore.currentCircle"
          type-name="Circle:"
          class="mt-4 w-full lg:mt-0 lg:w-auto"
          :items="expertCockpitStore.circles"
          @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
        ></ItDropdownSelect>
      </div>
      <!-- Status -->
      <div class="mb-4 gap-4">
        <AttendanceOverview />
      </div>

      <div class="mb-4 bg-white p-6">
        <CourseSessionDueDatesList
          :course-session-id="courseSession.id"
          :circle-id="expertCockpitStore.currentCircle.id"
          :max-count="4"
        ></CourseSessionDueDatesList>
      </div>
      <SubmissionsOverview
        :course-session="courseSession"
        :selected-circle="expertCockpitStore.currentCircle.id"
      ></SubmissionsOverview>
      <div class="pt-4">
        <!-- progress -->
        <div
          v-if="courseSessionDetailResult.filterMembers().length > 0"
          class="bg-white p-6"
        >
          <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
          <ul>
            <ItPersonRow
              v-for="csu in courseSessionDetailResult.filterMembers()"
              :key="csu.user_id"
              :name="`${csu.first_name} ${csu.last_name}`"
              :avatar-url="csu.avatar_url"
            >
              <template #center>
                <div
                  class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
                >
                  <LearningPathDiagram
                    :course-session-id="courseSession.id"
                    :course-slug="props.courseSlug"
                    :user-id="csu.user_id"
                    :show-circle-slugs="[expertCockpitStore.currentCircle.slug]"
                    diagram-type="singleSmall"
                    class="mr-4"
                  ></LearningPathDiagram>
                  <p class="lg:min-w-[150px]">
                    {{ expertCockpitStore.currentCircle.title }}
                  </p>
                  <UserStatusCount
                    :course-slug="props.courseSlug"
                    :user-id="csu.user_id"
                  ></UserStatusCount>
                </div>
              </template>
              <template #link>
                <router-link
                  :to="{
                    name: 'profileLearningPath',
                    params: { userId: csu.user_id, courseSlug: props.courseSlug },
                  }"
                  class="link w-full lg:text-right"
                >
                  {{ $t("general.profileLink") }}
                </router-link>
              </template>
            </ItPersonRow>
          </ul>
        </div>
      </div>
    </div>
    <div v-else class="container-large mt-4">
      <!-- No circle selected -->
      <span class="text-lg text-orange-600">
        {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
      </span>
    </div>
  </div>
  <div v-else class="container-large mt-4">
    <span class="text-lg text-orange-600">
      <!-- No circle at all (should never happen, mostly
        for us to reduce confusion why the cockpit is just empty...) -->
      {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
    </span>
  </div>
</template>
