<script setup lang="ts">
import Waveform from "./Waveform.vue";
import VideoPlayer from "./VideoPlayer.vue";
import type { TestimonialCardType } from "~/types/testimonialCard";

const props = defineProps<
  TestimonialCardType & { videoResetToken?: number; audioResetToken?: number }
>();

const waveformRef = ref<InstanceType<typeof Waveform> | null>(null);
const emit = defineEmits<{
  (e: "play" | "pause"): void;
}>();

const showOpinion = ref(false);
const showAudio = ref(false);
const showVideo = ref(true);

watchEffect(() => {
  if (props.videoUrl) {
    showVideo.value = true;
    showAudio.value = false;
    showOpinion.value = false;
  } else if (props.audioUrl) {
    showAudio.value = true;
    showVideo.value = false;
    showOpinion.value = false;
  } else if (props.comment) {
    showOpinion.value = true;
    showVideo.value = false;
    showAudio.value = false;
  }
});

// Reset handlers
watch(
  () => props.audioResetToken,
  () => {
    if (waveformRef.value) {
      waveformRef.value.reset();
    }
  },
);
</script>

<template>
  <Card class="ws-gradient-border h-[446px] flex-1 gap-6">
    <CardHeader class="flex flex-col items-center text-center">
      <NuxtImg
        v-if="props.image"
        :src="props.image"
        class="h-[66px] w-[66px] rounded-full object-contain"
        :alt="props.fullName"
      />
      <NuxtImg
        v-else
        :src="'/images/placeholders/image-fallback.png'"
        class="h-[66px] w-[66px] rounded-full object-contain"
        :alt="props.fullName"
      />
      <CardTitle>{{ props.fullName }}</CardTitle>
      <CardDescription>{{ props.jobPosition }}</CardDescription>
    </CardHeader>
    <CardContent class="flex h-full flex-col items-center justify-center gap-6">
      <!-- Toggle Options -->
      <div class="my-2 flex h-[10%] items-center justify-center gap-2">
        <Button
          v-if="props.comment"
          :aria-label="$t('ariaLabels.testimonalComment')"
          variant="wsIcon"
          size="wsIcon"
          :class="showOpinion ? 'ws-gradient-border' : ''"
          class="cursor-pointer"
          @click="
            showOpinion = true;
            showAudio = false;
            showVideo = false;
          "
        >
          <SvgCommentIcon
            class="size-[25px]"
            :is-gradient="showOpinion ? true : false"
          />
        </Button>

        <Button
          v-if="props.videoUrl"
          :aria-label="$t('ariaLabels.testimonialVideo')"
          :class="showVideo ? 'ws-gradient-border' : ''"
          variant="wsIcon"
          size="wsIcon"
          class="cursor-pointer"
          @click="
            showVideo = true;
            showAudio = false;
            showOpinion = false;
          "
        >
          <SvgGradientPlayIcon
            class="size-[25px]"
            :is-gradient="showVideo ? true : false"
          />
        </Button>

        <Button
          v-if="props.audioUrl"
          :aria-label="$t('ariaLabels.testimonialSound')"
          :class="showAudio ? 'ws-gradient-border' : ''"
          variant="wsIcon"
          size="wsIcon"
          class="cursor-pointer"
          @click="
            showAudio = true;
            showVideo = false;
            showOpinion = false;
          "
        >
          <SvgMicrophoneIcon
            class="size-[25px]"
            :is-gradient="showAudio ? true : false"
          />
        </Button>
      </div>

      <!-- Content -->
      <div class="flex h-[80%] items-center justify-center gap-2">
        <div
          v-if="showOpinion"
          class="scrollable-list max-h-[180px] w-full overflow-y-auto"
        >
          <p class="text-justify text-base leading-8 font-normal">
            {{ props.comment }}
          </p>
        </div>

        <!-- YouTube Video Player -->
        <VideoPlayer
          v-if="showVideo && props.videoUrl"
          :key="props.videoResetToken"
          :video-url="props.videoUrl"
          video-class="h-[150px] w-[260px]"
          thumbnail-class="h-[150px] w-[260px]"
          @play="emit('play')"
          @pause="emit('pause')"
        />

        <!-- Audio -->
        <Waveform
          v-if="showAudio"
          ref="waveformRef"
          :audio-url="props.audioUrl"
          class="w-[300px]"
          @play="emit('play')"
          @pause="emit('pause')"
        />
      </div>

      <!-- Audio controls -->
      <div v-if="showAudio" class="flex items-center justify-center gap-2">
        <Button
          variant="wsIcon"
          size="wsIcon"
          class="cursor-pointer"
          @click="waveformRef?.reset()"
        >
          <SvgResetIcon class="size-6" />
        </Button>
        <Button
          variant="wsIcon"
          size="wsIcon"
          class="cursor-pointer"
          @click="waveformRef?.playPause()"
        >
          <SvgPauseIcon v-if="waveformRef?.isPlaying" class="size-6" />
          <SvgPlayIcon v-else class="size-6" />
        </Button>
      </div>
    </CardContent>
  </Card>
</template>

<style scoped>
/* Scrollable comment styles (restored) */
.scrollable-list::-webkit-scrollbar {
  width: 8px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background: var(--surface-border);
}

.scrollable-list {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-border) transparent;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
