<template>
  <div style="width: 47vw;">
    <h2 class="section-title">客户详情</h2>
    <div id="context-panel" ref="contextPanelRef" class="section-card">
      <div v-if="selectedContact" class="context-panel-content" style="min-height: 570px;">
        <div class="panel-header">
          <h3>{{ selectedContact.name }}</h3>
        </div>
    </div>     
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import Chart from 'chart.js/auto';

// 定义props
const props = defineProps({
  selectedContact: {
    type: Object,
    default: null
  }
});

const contextPanelRef = ref(null);
const sentimentChartCanvas = ref(null);
const chartInstances = {};

// CHARTING
const createOrUpdateChart = (chartId, canvasRef, config) => {
  if (chartInstances[chartId]) {
    chartInstances[chartId].destroy();
  }
  if (canvasRef.value) {
    const ctx = canvasRef.value.getContext('2d');
    chartInstances[chartId] = new Chart(ctx, config);
  }
};

const renderSentimentChart = (history) => {
  if (!sentimentChartCanvas.value) return;
  const ctx = sentimentChartCanvas.value.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, 0, 120);
  gradient.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
  gradient.addColorStop(1, 'rgba(59, 130, 246, 0.05)');
  
  const config = {
    type: 'line',
    data: {
      labels: history.map((_, i) => `第${i+1}次`),
      datasets: [{
        label: '情绪值', 
        data: history, 
        borderColor: '#3b82f6', 
        borderWidth: 3,
        tension: 0.4, 
        fill: true, 
        backgroundColor: gradient, 
        pointRadius: 4,
        pointBackgroundColor: '#3b82f6',
        pointBorderColor: '#ffffff',
        pointBorderWidth: 2,
        pointHoverRadius: 6
      }]
    },
    options: { 
      responsive: true, 
      maintainAspectRatio: false, 
      plugins: { 
        legend: { display: false }, 
        tooltip: { 
          enabled: true,
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          titleColor: '#ffffff',
          bodyColor: '#ffffff',
          borderColor: '#3b82f6',
          borderWidth: 1,
          callbacks: {
            label: function(context) {
              return `情绪值: ${context.parsed.y}`;
            }
          }
        } 
      }, 
      scales: { 
        y: { 
          display: true,
          min: 0, 
          max: 100,
          grid: {
            color: 'rgba(148, 163, 184, 0.2)',
            drawBorder: false
          },
          ticks: {
            color: '#64748b',
            font: {
              size: 11
            },
            stepSize: 25
          }
        }, 
        x: { 
          display: true,
          grid: {
            display: false
          },
          ticks: {
            color: '#64748b',
            font: {
              size: 11
            }
          }
        } 
      } 
    }
  };
  createOrUpdateChart('sentiment', sentimentChartCanvas, config);
};

// WATCHERS
watch(() => props.selectedContact, (newContact) => {
  if (newContact && newContact.sentimentHistory && newContact.sentimentHistory.length > 0) {
    nextTick(() => {
      renderSentimentChart(newContact.sentimentHistory);
    });
  }
}, { immediate: true });
</script>

<style lang="scss" scoped>
// Color Palette
$slate-50: #f8fafc;
$slate-100: #f1f5f9;
$slate-200: #e2e8f0;
$slate-400: #94a3b8;
$slate-500: #64748b;
$slate-600: #475569;
$slate-700: #334155;
$slate-800: #1e293b;
$white: #ffffff;

$blue: #3b82f6;
$green: #22c55e;
$amber: #f59e0b;
$red: #ef4444;
$indigo: #4f46e5;
$purple: #a855f7;

h2.section-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: $slate-700;
}

h4 {
    font-weight: 600;
    color: $slate-700;
    margin-bottom: 0.5rem;
}

// Context Panel
.section-card {
  background-color: $white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  padding-top: 0rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  margin-top: 12px;
}

.context-panel-content {
  .panel-header {
    border-bottom: 1px solid $slate-200;
    padding-bottom: 1rem;
    h3 { margin-bottom: 0; font-size: 1.25rem; }
  }

  .detail-blocks-container {
    display: flex;
    gap: 1rem;
    
    // 移动端适配
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 1.5rem;
    }
  }

  .detail-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    &:first-child {
      flex: 1; // 左列占1份
    }
    
    &:last-child {
      flex: 2; // 右列占2份
    }
    
    // 移动端适配
    @media (max-width: 768px) {
      &:first-child,
      &:last-child {
        flex: 1;
      }
    }
  }

  .detail-block {
    min-width: 0; // 防止flex项目溢出
  }

  .form-details {
    background-color: $slate-50;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    
    // 移动端适配
    @media (max-width: 768px) {
      padding: 1rem;
      font-size: 0.95rem;
    }

    > div {
      display: flex;
      gap: 0.5rem;
      
      &.concerns {
        align-items: flex-start;
      }
      span:last-child {
        font-weight: 500;
        text-align: right;
      }
    }
  }

  .communication-insights {
    background-color: $slate-50;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    
    .insight-item {
      margin-bottom: 1rem;
      &:last-child {
        margin-bottom: 0;
      }
      
      h5 {
        font-size: 0.875rem;
        font-weight: 600;
        color: $slate-700;
        margin-bottom: 0.5rem;
      }
    }
    
    .suggestion-tags {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    
    .suggestion-tag {
      font-size: 0.75rem;
      font-weight: 500;
      padding: 0.25rem 0.5rem;
      border-radius: 0.375rem;
      
      &.positive {
        background-color: #dcfce7;
        color: #166534;
      }
    }
    
    .ratio-chart {
      .ratio-bar {
        display: flex;
        height: 1.5rem;
        border-radius: 0.375rem;
        overflow: hidden;
        margin-bottom: 0.5rem;
        
        .speak-portion {
          background-color: #3b82f6;
          transition: width 0.3s ease;
        }
        
        .listen-portion {
          background-color: #22c55e;
          transition: width 0.3s ease;
        }
      }
      
      .ratio-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        
        .speak-label {
          color: #3b82f6;
          font-weight: 500;
        }
        
        .listen-label {
          color: #22c55e;
          font-weight: 500;
        }
      }
    }
  }

  .sentiment-summary {
    background-color: $slate-50;
    padding: 0.75rem;
    border-radius: 0.5rem;
    p { font-size: 0.875rem; font-weight: 500; span { font-weight: 400; } }
    .sentiment-chart-block { 
    margin-top: 0.75rem; 
    padding: 0.75rem;
    background-color: $white;
    border-radius: 0.5rem;
    border: 1px solid $slate-200;
    p {
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: $slate-700;
    }
  }
  }
}

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: $slate-500;
}

// Timeline
.timeline {
  border-left: 2px solid $slate-200;
  .timeline-item {
    position: relative;
    padding-left: 1rem;
    padding-bottom: 1rem;
    &:last-child {
      padding-bottom: 0;
    }
    &::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 5px;
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background-color: $slate-400;
      border: 2px solid $white;
    }
    &.call::before { background-color: $blue; }
    &.email::before { background-color: $green; }
    &.meeting::before { background-color: $purple; }
    &.system::before { background-color: $slate-500; }
  }
  .timeline-date { font-size: 0.75rem; color: $slate-400; }
  .timeline-summary { font-size: 0.875rem; color: $slate-600; }
  .no-interactions { padding-left: 1rem; font-size: 0.875rem; color: $slate-400; }
}

// Tags
.tags-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  
  &.concern-tag { background-color: $slate-200; color: $slate-700; }
}

// Chart Containers
.chart-container {
  position: relative;
  width: 100%;
  height: 180px;
  &.sentiment-chart {
    height: 120px;
    margin-top: 0.5rem;
  }
}
</style>