<script setup>
import { computed } from "vue";
import ToggleSwitch from "primevue/toggleswitch";

const props = defineProps({
  testimonial: {
    type: Object,
    required: true,
  },
  canDelete: {
    type: Boolean,
    default: true,
  },
  selected: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "edit",
  "delete",
  "toggle-status",
]);

const formatDate = (dateString) => {
  if (!dateString) return "N/A";
  const date = new Date(dateString);
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
};

const truncatedComment = computed(() => {
  if (!props.testimonial.comment) return "";
  return props.testimonial.comment.length > 120
    ? props.testimonial.comment.substring(0, 120) + "..."
    : props.testimonial.comment;
});

const getInitials = (name) => {
  if (!name) return "U";
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);
};
</script>

<template>
  <div
    class="testimonial-card"
    :class="{ 'is-selected': selected }"
    
  >
    <div class="card-top-bar">
      <div class="left-controls">
        <div class="drag-handle" title="Drag to reorder" @click.stop>
          <i class="pi pi-bars"></i>
        </div>

      </div>

      <div class="card-actions">
        <div class="status-toggle mr-2" @click.stop>
          <ToggleSwitch
            :model-value="!!testimonial.is_enabled"
            @change="emit('toggle-status', testimonial)"
            class="scale-75 testimonial-toggle"
          />
        </div>
        <RouterLink
          class="action-btn edit-btn"
          :to="{ name: 'testimonial-edit', params: { id: testimonial.id } }"
          title="Edit"
          @click.stop
        >
          <i class="pi pi-pencil"></i>
        </RouterLink>
        <button
          v-if="canDelete"
          class="action-btn delete-btn"
          @click.stop="emit('delete', testimonial)"
          title="Delete"
        >
          <i class="pi pi-trash"></i>
        </button>
      </div>
    </div>

    <div class="user-profile">
      <div class="avatar-wrapper">
        <div class="testimonial-avatar">
          {{ getInitials(testimonial.parent_name) }}
        </div>
      </div>
      <div class="user-info">
        <h3 class="testimonial-name">{{ testimonial.parent_name }}</h3>
        <p class="testimonial-role">{{ testimonial.role || "Parent" }}</p>
      </div>
    </div>

    <div class="card-content">
      <i class="pi pi-quote-left quote-icon"></i>
      <p class="testimonial-text">{{ truncatedComment }}</p>
    </div>

    <div class="card-footer">
      <div class="date-display">
        <i class="pi pi-calendar text-gray-400 mr-1"></i>
        {{ formatDate(testimonial.created_at) }}
      </div>
      <div class="language-badge">
        {{ testimonial.language?.toUpperCase() }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.testimonial-card {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #003b6f;
  cursor: pointer;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.testimonial-card.is-selected {
  background-color: #eff6ff;
  border-color: #003b6f;
  box-shadow: 0 0 0 2px #003b6f;
}

/* ========== TOP BAR ========== */
.card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.drag-handle {
  cursor: grab;
  color: #94a3b8;
  transition: color 0.2s;
  padding: 4px;
}
.drag-handle:hover {
  color: #003b6f;
}

.custom-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: white;
}

.testimonial-card.is-selected .custom-checkbox {
  background: #003b6f;
  border-color: #003b6f;
}

/* ========== ACTIONS ========== */
.card-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 1;
  transition: opacity 0.2s;
}

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 0.8rem;
  text-decoration: none;
}

.edit-btn {
  background: #f1f5f9;
  color: #475569;
}
.edit-btn:hover {
  background: #e2e8f0;
  color: #003b6f;
}

.translate-btn {
  background: #eff6ff;
  color: #003b6f;
}
.translate-btn:hover {
  background: #dbeafe;
  color: #002a50;
}

.delete-btn {
  background: #fef2f2;
  color: #ef4444;
}
.delete-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

:deep(.testimonial-toggle .p-toggleswitch-slider) {
  background: #cbd5e1 !important;
}

:deep(.testimonial-toggle.p-toggleswitch-checked .p-toggleswitch-slider) {
  background: #003b6f !important;
}

:deep(.testimonial-toggle .p-toggleswitch-handle) {
  background: #ffffff !important;
}

/* ========== PROFILE ========== */
.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #003b6f 0%, #0056a3 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0, 59, 111, 0.2);
}

.user-info {
  flex: 1;
  overflow: hidden;
}

.testimonial-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-role {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

/* ========== CONTENT ========== */
.card-content {
  flex: 1;
  margin-bottom: 1.25rem;
  position: relative;
}

.quote-icon {
  color: #e2e8f0;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  display: block;
}

.testimonial-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Allow more lines */
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== FOOTER ========== */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

.date-display {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.language-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
</style>
