<template>
  <div
    class="session-item"
    :class="{ 'is-active': active, 'is-pinned': session.pinned }"
    @click="emit('select')"
  >
    <i class="ph ph-push-pin session-pin-icon"></i>

    <div class="session-info">
      <div class="session-name">{{ displayName }}</div>
      <div v-if="session.preview" class="session-preview">{{ session.preview }}</div>
      <div v-if="sessionTime" class="session-time">{{ sessionTime }}</div>
    </div>

    <div class="session-actions" @click.stop>
      <button
        class="btn-icon"
        :title="session.pinned ? 'Unpin' : 'Pin'"
        @click="emit('pin')"
      >
        <i :class="session.pinned ? 'ph ph-push-pin-slash' : 'ph ph-push-pin'"></i>
      </button>
      <button
        class="btn-icon"
        title="Delete"
        @click="onDelete"
      >
        <i class="ph ph-trash"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useTimeLabel } from '@/composables/useTime.js'
import { useConfirm } from '@/composables/useConfirm.js'

const props = defineProps({
  session: { type: Object, required: true },
  active: { type: Boolean, default: false }
})

const emit = defineEmits(['select', 'delete', 'pin'])

const confirm = useConfirm()

const displayName = computed(() => {
  const id = props.session.session_id ?? ''
  return props.session.name || id.slice(0, 8)
})

const tsRef = computed(() => props.session.last_active)
const sessionTime = useTimeLabel(tsRef)

async function onDelete() {
  const ok = await confirm('Delete this conversation?')
  if (ok) emit('delete')
}
</script>