<template>
  <div class="project-sessions-container fade-in">
    <div class="project-header">
      <div class="project-header-info">
        <span class="project-header-emoji">{{ project?.emoji || "📁" }}</span>
        <h2 class="project-header-title">{{ project?.title }}</h2>
      </div>
      <p class="project-header-description" v-if="project?.description">
        {{ project.description }}
      </p>
    </div>

    <div class="project-input-slot">
      <slot></slot>
    </div>

    <v-card flat class="project-sessions-list">
      <v-list v-if="sessions.length > 0">
        <v-list-item
          v-for="session in sessions"
          :key="session.session_id"
          @click="$emit('selectSession', session.session_id)"
          class="project-session-item"
          rounded="lg"
        >
          <v-list-item-title>
            {{ session.display_name || tm("conversation.newConversation") }}
          </v-list-item-title>
          <v-list-item-subtitle>
            {{ formatDate(session.updated_at) }}
          </v-list-item-subtitle>
          <template v-slot:append>
            <div class="session-actions">
              <v-btn
                icon="mdi-pencil"
                size="x-small"
                variant="text"
                class="edit-session-btn"
                @click.stop="
                  $emit(
                    'editSessionTitle',
                    session.session_id,
                    session.display_name ?? '',
                  )
                "
              />
              <v-btn
                icon="mdi-delete"
                size="x-small"
                variant="text"
                class="delete-session-btn"
                color="error"
                @click.stop="handleDeleteSession(session)"
              />
            </div>
          </template>
        </v-list-item>
      </v-list>
      <div v-else class="no-sessions-in-project">
        <v-icon
          icon="mdi-message-outline"
          size="large"
          color="grey-lighten-1"
        ></v-icon>
        <p>{{ tm("project.noSessions") }}</p>
      </div>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { useModuleI18n } from "@/i18n/composables";
import type { Project } from "@/components/chat/ProjectList.vue";
import { askForConfirmation, useConfirmDialog } from "@/utils/confirmDialog";

interface Session {
  session_id: string;
  display_name?: string | null;
  updated_at: string;
}

interface Props {
  project?: Project | null;
  sessions: Session[];
}

defineProps<Props>();

const emit = defineEmits<{
  selectSession: [sessionId: string];
  editSessionTitle: [sessionId: string, title: string];
  deleteSession: [sessionId: string];
}>();

const { tm } = useModuleI18n("features/chat");

const confirmDialog = useConfirmDialog();

function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleString();
}

async function handleDeleteSession(session: Session) {
  const sessionTitle =
    session.display_name || tm("conversation.newConversation");
  const message = tm("conversation.confirmDelete", { name: sessionTitle });
  if (await askForConfirmation(message, confirmDialog)) {
    emit("deleteSession", session.session_id);
  }
}
</script>

<style scoped>
.project-sessions-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  overflow-y: auto;
}

.project-header {
  text-align: center;
  margin-bottom: 32px;
  max-width: 600px;
}

.project-header-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.project-header-emoji {
  font-size: 48px;
}

.project-header-title {
  font-size: 32px;
  font-weight: 600;
}

.project-header-description {
  font-size: 14px;
  color: var(--v-theme-secondaryText);
  margin: 0;
}

.project-input-slot {
  width: 100%;
  max-width: 800px;
  margin-bottom: 24px;
}

.project-sessions-list {
  width: 100%;
  max-width: 680px;
  background-color: transparent !important;
}

.project-session-item {
  margin-bottom: 8px;
  border-radius: 12px !important;
  cursor: pointer;
}

.project-session-item:hover {
  background-color: rgba(103, 58, 183, 0.05);
}

.project-session-item:hover .session-actions {
  opacity: 1;
  visibility: visible;
}

.session-actions {
  display: flex;
  gap: 2px;
  opacity: 1;
}

.no-sessions-in-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0.6;
}

.no-sessions-in-project p {
  margin-top: 12px;
  font-size: 14px;
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
