<template>
  <div>
          <div v-if="loading" class="text-center p-4">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Đang tải...</span>
            </div>
          </div>
          
          <div v-else-if="callLog" class="row g-3">
            <!-- Thông tin cơ bản và liên lạc -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">Thông tin cuộc gọi</h6>
                </div>
                <div class="card-body">
                  <div class="row g-3">
                    <!-- Trạng thái Lead -->
                    <div class="col-md-3">
                      <label class="form-label fw-bold text-muted">Trạng thái Lead:</label>
                      <div>
                        <span 
                          class="badge fs-6"
                          :class="getLeadStatusClass(callLog.LeadStatus)"
                        >
                          {{ getLeadStatusText(callLog.LeadStatus) }}
                        </span>
                      </div>
                    </div>
                    
                    <!-- Từ số -->
                    <div class="col-md-3">
                      <label class="form-label fw-bold text-muted">Từ số:</label>
                      <div>
                        <div class="fw-semibold">{{ callLog.FromNo }}</div>
                        <small class="text-muted">{{ callLog.FromDispName || 'Không có tên' }}</small>
                      </div>
                    </div>
                    
                    <!-- Số cuối -->
                    <div class="col-md-3">
                      <label class="form-label fw-bold text-muted">Số cuối:</label>
                      <div>
                        <div class="fw-semibold">{{ callLog.FinalNumber || 'N/A' }}</div>
                        <small class="text-muted">{{ callLog.FinalDispName || 'Không có tên' }}</small>
                      </div>
                    </div>
                    
                    <!-- Thời lượng -->
                    <div class="col-md-3">
                      <label class="form-label fw-bold text-muted">Thời lượng:</label>
                      <div>
                        <span class="badge bg-info fs-6">{{ callLog.Duration || '00:00:00' }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Thông tin thời gian -->
            <div class="col-md-8">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">Thông tin thời gian</h6>
                </div>
                <div class="card-body">
                  <div class="row g-3">
                    <div class="col-md-4">
                      <label class="form-label fw-bold text-muted">Bắt đầu:</label>
                      <div class="fw-semibold">{{ formatDateTime(callLog.TimeStart) }}</div>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-bold text-muted">Trả lời:</label>
                      <div class="fw-semibold">{{ formatDateTime(callLog.TimeAnswered) || 'N/A' }}</div>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-bold text-muted">Kết thúc:</label>
                      <div class="fw-semibold">{{ formatDateTime(callLog.TimeEnd) || 'N/A' }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Nội dung trạng thái -->
            <div class="col-md-4">
              <div class="card h-100">
                <div class="card-header">
                  <h6 class="mb-0">Nội dung trạng thái</h6>
                </div>
                <div class="card-body">
                  <p class="mb-0 text-muted">{{ callLog.StatusContent || 'Không có nội dung' }}</p>
                </div>
              </div>
            </div>
            
            <!-- Cập nhật trạng thái Lead - chỉ hiển thị khi trạng thái là "Tạo mới" -->
            <div class="col-12" v-if="callLog && callLog.LeadStatus === 1">
              <div class="card">
                <div class="card-header">
                  <h6 class="mb-0">Cập nhật trạng thái Lead</h6>
                </div>
                <div class="card-body">
                  <div class="row g-3">
                    <div class="col-md-4">
                      <label class="form-label">Trạng thái mới:</label>
                      <select class="form-select" v-model="newLeadStatus">
                        <option value="3">Thành công</option>
                        <option value="4">Thất bại</option>
                      </select>
                    </div>
                    <div class="col-md-8">
                      <label class="form-label">Nội dung trạng thái:</label>
                      <div class="input-group">
                        <textarea 
                          class="form-control" 
                          rows="2"
                          v-model="newStatusContent"
                          placeholder="Mô tả chi tiết về trạng thái mới..."
                        ></textarea>
                        <button 
                          class="btn btn-primary"
                          @click="updateLeadStatus"
                          :disabled="updatingStatus"
                        >
                          <span v-if="updatingStatus" class="spinner-border spinner-border-sm me-2"></span>
                          Cập nhật
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="text-center p-4">
            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
            <p class="text-muted">Không tìm thấy thông tin CallLog</p>
          </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useToast } from 'vue-toastification';

// Services
import callLogService from "@/services/crm/callLogService";

// Props
const props = defineProps({
  callLogId: {
    type: Number,
    required: true
  }
});

// Emits
const emit = defineEmits(['close']);

// Toast instance
const toast = useToast();

// Reactive data
const loading = ref(false);
const updatingStatus = ref(false);
const callLog = ref(null);
const newLeadStatus = ref(1);
const newStatusContent = ref("");

// Watchers
watch(() => props.callLogId, (newVal) => {
  if (newVal) {
    loadCallLog();
  }
}, { immediate: true });

// Methods
async function loadCallLog() {
  loading.value = true;
  try {
    callLog.value = await callLogService.getById(props.callLogId);
    if (callLog.value) {
      // Chỉ set newLeadStatus khi trạng thái là "Tạo mới" (1)
      if (callLog.value.LeadStatus === 1) {
        newLeadStatus.value = 3; // Mặc định chọn "Thành công"
        newStatusContent.value = callLog.value.StatusContent || "";
      }
    }
  } catch (error) {
    console.error("Lỗi tải CallLog:", error);
    toast.error("Có lỗi xảy ra khi tải thông tin CallLog");
  } finally {
    loading.value = false;
  }
}

async function updateLeadStatus() {
  updatingStatus.value = true;
  try {
    const result = await callLogService.updateLeadStatus(props.callLogId, {
      leadStatus: parseInt(newLeadStatus.value),
      statusContent: newStatusContent.value
    });

    if (result.Result === 1) {
      toast.success("Cập nhật trạng thái Lead thành công");
      // Reload để lấy dữ liệu mới
      loadCallLog();
    } else {
      toast.error(result.Message || "Có lỗi xảy ra khi cập nhật trạng thái");
    }
  } catch (error) {
    console.error("Lỗi cập nhật trạng thái:", error);
    toast.error("Có lỗi xảy ra khi cập nhật trạng thái Lead");
  } finally {
    updatingStatus.value = false;
  }
}

function formatDateTime(dateTime) {
  if (!dateTime) return "";
  return new Date(dateTime).toLocaleString('vi-VN');
}

function formatCurrency(amount) {
  return callLogService.formatCurrency(amount);
}

function getLeadStatusClass(status) {
  const statusClasses = {
    1: 'bg-primary',
    3: 'bg-success',
    4: 'bg-danger'
  };
  return statusClasses[status] || 'bg-secondary';
}

function getLeadStatusText(status) {
  const statusTexts = {
    1: 'Tạo mới',
    3: 'Thành công',
    4: 'Thất bại'
  };
  return statusTexts[status] || 'Chưa xác định';
}
</script>

<style scoped>
.form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.card {
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.badge {
  font-size: 0.75em;
}
</style>
