<script setup lang="ts">
import log from "loglevel";
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
import { useQuery } from "@urql/vue";
import { computed } from "vue";
import type { CompetenceCertificate } from "@/types";
import { useCurrentCourseSession } from "@/composables";
import {
  assignmentsMaxEvaluationPoints,
  assignmentsUserPoints,
  competenceCertificateProgressStatusCount,
} from "@/pages/competence/utils";
import { useSelfEvaluationFeedbackSummaries } from "@/services/selfEvaluationFeedback";
import ItProgress from "@/components/ui/ItProgress.vue";
import { VV_COURSE_IDS } from "@/constants";

const props = defineProps<{
  courseSlug: string;
}>();

log.debug("CompetenceIndexPage setup", props);

const courseSession = useCurrentCourseSession();

const certificatesQuery = useQuery({
  query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
  variables: {
    courseSlug: props.courseSlug,
    courseSessionId: courseSession.value.id,
  },
});

const competenceCertificates = computed(() => {
  return (
    (certificatesQuery.data.value?.competence_certificate_list
      ?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
  );
});

const allAssignments = computed(() => {
  return competenceCertificates.value.flatMap((cc) => cc.assignments);
});

const totalPointsEvaluatedAssignments = computed(() => {
  return assignmentsMaxEvaluationPoints(allAssignments.value);
});

const userPointsEvaluatedAssignments = computed(() => {
  return assignmentsUserPoints(allAssignments.value);
});

const selfEvaluationFeedbackSummaries = useSelfEvaluationFeedbackSummaries(
  useCurrentCourseSession().value.id
);

const selfAssessmentCounts = computed(
  () => selfEvaluationFeedbackSummaries.aggregates.value?.self_assessment
);

const feedbackEvaluationCounts = computed(
  () => selfEvaluationFeedbackSummaries.aggregates.value?.feedback_assessment
);

const isFeedbackEvaluationVisible = computed(
  () =>
    selfEvaluationFeedbackSummaries.aggregates.value?.feedback_assessment_visible ??
    false
);

// FIXME 22.02.24: To-be-tackled NEXT in a separate PR (shippable member comp.navi)
//  -> Do not use the VV_COURSE_ID anymore (discuss with @chrigu) -> We do this next.
const currentCourseSession = useCurrentCourseSession();
const hasCompetenceCertificates = computed(() => {
  return !VV_COURSE_IDS.includes(currentCourseSession.value.course.id);
});

const isLoaded = computed(
  () =>
    !selfEvaluationFeedbackSummaries.loading.value && !certificatesQuery.fetching.value
);
</script>

<template>
  <div v-if="isLoaded" class="container-large lg:mt-4">
    <!-- Competence certificates -->
    <section v-if="hasCompetenceCertificates" class="mb-4 bg-white p-8">
      <div class="flex items-center">
        <h3>{{ $t("a.Kompetenznachweise") }}</h3>
      </div>
      <div class="mt-4" data-cy="certificate-total-points-text">
        <div v-if="userPointsEvaluatedAssignments > 0">
          {{ $t("a.Zwischenstand") }} {{ $t("a.Gesamtpunktzahl") }}:
          <span class="font-bold">
            {{ userPointsEvaluatedAssignments }}
          </span>
          {{ $t("assignment.von x Punkten", { x: totalPointsEvaluatedAssignments }) }}
        </div>
        <div v-else>
          {{ $t("a.competenceCertificateNoUserPoints") }}
        </div>
      </div>

      <div>
        <div class="mt-4">
          <div
            v-for="certificate in competenceCertificates"
            :key="certificate.id"
            class="flex flex-col justify-between py-4 lg:flex-row lg:items-center"
            :data-cy="`certificate-${certificate.slug}`"
          >
            <div class="text-bold text-xl">
              {{ certificate.title }}
            </div>
            <div class="mt-4 lg:mt-0">
              <span class="text-bold">
                {{ assignmentsUserPoints(certificate.assignments) }}
              </span>
              {{
                $t("assignment.von x Punkten", {
                  x: assignmentsMaxEvaluationPoints(certificate.assignments),
                })
              }}
            </div>
            <div class="flex">
              <div>
                {{
                  $t("assignment.x von y Kompetenznachweis-Elementen abgeschlossen", {
                    x: certificate.assignments.filter(
                      (a) => a.completion?.completion_status === "EVALUATION_SUBMITTED"
                    ).length,
                    y: certificate.assignments.length,
                  })
                }}
              </div>
              <div class="ml-2 hidden w-40 lg:block">
                <ItProgress
                  :status-count="
                    competenceCertificateProgressStatusCount(certificate.assignments)
                  "
                />
              </div>
            </div>
          </div>
          <div>
            <router-link
              :to="`/course/${props.courseSlug}/competence/certificates`"
              class="btn-text mt-4 inline-flex items-center py-2 pl-0"
              data-cy="certificates-show-all-button"
            >
              <span>{{ $t("a.Details anzeigen") }}</span>
              <it-icon-arrow-right></it-icon-arrow-right>
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- Self-evaluation -->
    <section class="mb-4 bg-white px-8 py-4 lg:mb-8 lg:py-8">
      <div class="mb-8">
        <h3 class="mb-4 pb-4 lg:pb-0">
          {{ $t("a.Selbsteinschätzungen") }}
        </h3>
        <ul
          class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
        >
          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.no") }}»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
              <p
                class="ml-4 inline-block text-7xl font-bold"
                data-cy="self-evaluation-fail"
              >
                {{ selfAssessmentCounts?.fail }}
              </p>
            </div>
          </li>
          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">«{{ $t("selfEvaluation.yes") }}»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
              <p
                class="ml-4 inline-block text-7xl font-bold"
                data-cy="self-evaluation-success"
              >
                {{ selfAssessmentCounts?.pass }}
              </p>
            </div>
          </li>
          <li class="flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
              <p
                class="ml-4 inline-block text-7xl font-bold"
                data-cy="self-evaluation-unknown"
              >
                {{ selfAssessmentCounts?.unknown }}
              </p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Feedback evaluation -->
      <div v-if="isFeedbackEvaluationVisible" class="mb-8 border-t pt-8">
        <h3 class="mb-4 pb-4 lg:pb-0">
          {{ $t("a.Fremdeinschätzungen") }}
        </h3>
        <ul
          class="mb-6 flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8"
        >
          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.no") }}»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-thinking class="h-16 w-16"></it-icon-smiley-thinking>
              <p class="ml-4 inline-block text-7xl font-bold">
                {{ feedbackEvaluationCounts?.fail }}
              </p>
            </div>
          </li>
          <li class="mb-4 inline-block flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">«{{ $t("receivedEvaluation.yes") }}»</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-happy class="h-16 w-16"></it-icon-smiley-happy>
              <p class="ml-4 inline-block text-7xl font-bold">
                {{ feedbackEvaluationCounts?.pass }}
              </p>
            </div>
          </li>
          <li class="flex-1 pb-4 lg:mb-0 lg:w-1/3 lg:pb-0">
            <h5 class="mb-4 text-gray-700">{{ $t("competences.notAssessed") }}</h5>
            <div class="flex flex-row items-center">
              <it-icon-smiley-neutral class="h-16 w-16"></it-icon-smiley-neutral>
              <p class="ml-4 inline-block text-7xl font-bold">
                {{ feedbackEvaluationCounts?.unknown }}
              </p>
            </div>
          </li>
        </ul>
      </div>

      <div>
        <router-link
          :to="`/course/${props.courseSlug}/competence/self-evaluation-and-feedback`"
          class="btn-text inline-flex items-center py-2 pl-0"
        >
          <span>{{ $t("general.showAll") }}</span>
          <it-icon-arrow-right></it-icon-arrow-right>
        </router-link>
      </div>
    </section>
  </div>
</template>

<style scoped></style>
