frontend/app/components/InteractivePanel.vue

<template>
  <div
    class="h-full premium-glass rounded-3xl overflow-hidden flex flex-col shadow-lg"
  >
    <!-- Header / Tabs (Visible only when ready) -->
    <div
      v-if="isReady"
      class="flex p-1 bg-slate-900/5 backdrop-blur-sm border-b border-white/20 shrink-0"
    >
      <button
        v-for="tab in ['chat', 'quiz']"
        :key="tab"
        :id="'tab-' + tab"
        @click="activeTab = tab"
        class="flex-1 py-3 text-sm font-bold uppercase tracking-wider rounded-xl transition-all flex items-center justify-center gap-2"
        :class="
          activeTab === tab
            ? 'bg-white shadow-sm text-green-600'
            : 'text-slate-500 hover:bg-white/50 hover:text-slate-700'
        "
      >
        <UIcon
          :name="
            tab === 'chat'
              ? 'i-lucide-messages-square'
              : 'i-lucide-brain-circuit'
          "
          class="w-4 h-4"
        />
        {{ tab === "chat" ? "AI Tutor" : "Quiz" }}
      </button>
    </div>

    <!-- Content Area -->
    <div class="flex-1 overflow-hidden relative">
      <Transition name="fade-slide" mode="out-in">
        <template v-if="isReady">
          <ChatInterface v-if="activeTab === 'chat'" :project="project" />
          <QuizBuilder v-else :project="project" />
        </template>
        <div
          v-else
          class="h-full flex flex-col items-center justify-center p-8 text-center"
        >
          <div
            class="w-20 h-20 rounded-3xl bg-green-50 flex items-center justify-center mb-6 relative"
          >
            <div
              class="absolute inset-0 bg-green-200/30 rounded-3xl animate-ping opacity-20"
            ></div>
            <UIcon
              name="i-lucide-lock"
              class="w-10 h-10 text-green-600 relative z-10"
            />
          </div>
          <h3 class="text-xl font-black text-slate-900 mb-3">
            Interactivity Preparing
          </h3>
          <p class="text-slate-500 text-sm leading-relaxed max-w-[280px]">
            The AI Tutor and interactive quiz features will be unlocked once the
            video generation is complete.
          </p>
          <div
            class="mt-8 flex items-center gap-2 px-4 py-2 bg-slate-900/5 rounded-full border border-slate-900/5"
          >
            <UIcon
              name="i-lucide-loader-2"
              class="w-4 h-4 text-green-500 animate-spin"
            />
            <span
              class="text-[10px] font-bold uppercase tracking-wider text-slate-500"
              >Processing Intelligence</span
            >
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import ChatInterface from "./ChatInterface.vue";
import QuizBuilder from "./QuizBuilder.vue";

const props = defineProps({
  project: { type: Object, required: true },
});

const activeTab = ref("chat");
const isReady = computed(
  () =>
    props.project?.status === "completed" ||
    props.project?.has_video ||
    props.project?.has_combined_video,
);
</script>

<style scoped>
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(10px);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
</style>