<template>
  <div class="data-page">
    <div class="data-header">
      <div class="data-title">💼 商机管理 - 跟进中 {{ opportunityStats.active }}个</div>
      <div style="display: flex; gap: 8px;">
        <button class="btn btn-secondary"><i class="fas fa-download"></i> 导出</button>
        <button class="btn btn-primary" @click="showCreateModal = true"><i class="fas fa-plus"></i> 创建商机</button>
      </div>
    </div>

    <!-- Stats -->
    <div class="stat-row">
      <div class="stat-card-lg">
        <div class="stat-icon-lg blue"><i class="fas fa-briefcase"></i></div>
        <div class="stat-content-lg"><h3>{{ opportunityStats.active }}</h3><p>跟进中</p></div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg purple"><i class="fas fa-user-plus"></i></div>
        <div class="stat-content-lg"><h3>{{ opportunityStats.new }}</h3><p>新商机</p></div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg orange"><i class="fas fa-handshake"></i></div>
        <div class="stat-content-lg"><h3>{{ opportunityStats.negotiation }}</h3><p>谈判中</p></div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg green"><i class="fas fa-check-circle"></i></div>
        <div class="stat-content-lg"><h3>{{ opportunityStats.won }}</h3><p>本月成交</p></div>
      </div>
      <div class="stat-card-lg">
        <div class="stat-icon-lg" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);"><i class="fas fa-times-circle"></i></div>
        <div class="stat-content-lg"><h3>{{ opportunityStats.lost }}</h3><p>本月丢单</p></div>
      </div>
    </div>

    <!-- Pipeline -->
    <div class="pipeline-container">
      <div class="pipeline-header">
        <h3><i class="fas fa-filter"></i> 销售漏斗</h3>
        <div class="pipeline-total">总金额: ¥{{ formatNumber(totalPipeline) }}</div>
      </div>
      <div class="pipeline-stages">
        <div v-for="stage in pipelineStages" :key="stage.key" class="pipeline-stage">
          <div class="stage-header">
            <div class="stage-icon" :style="{ background: stage.bg, color: stage.color }">
              <i :class="stage.icon"></i>
            </div>
            <div class="stage-info">
              <div class="stage-name">{{ stage.label }}</div>
              <div class="stage-count">{{ stage.count }}个</div>
            </div>
          </div>
          <div class="stage-amount">¥{{ formatNumber(stage.amount) }}</div>
          <div class="stage-bar">
            <div class="stage-bar-fill" :style="{ width: (stage.amount / totalPipeline * 100) + '%', background: stage.color }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div style="display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px;">
      <div v-for="tab in tabs" :key="tab.key" 
           :style="{ 
             padding: '8px 16px', 
             borderRadius: '8px 8px 0 0', 
             cursor: 'pointer',
             fontSize: '13px',
             background: filterTab === tab.key ? 'var(--bg-hover)' : 'transparent',
             color: filterTab === tab.key ? 'var(--text-primary)' : 'var(--text-secondary)',
             fontWeight: filterTab === tab.key ? '600' : '400'
           }"
           @click="filterTab = tab.key">
        {{ tab.label }} <span style="font-size: 11px; opacity: 0.7;">({{ tab.count }})</span>
      </div>
    </div>

    <!-- Opportunity List -->
    <div style="flex: 1; overflow-y: auto;">
      <div v-for="opp in filteredOpportunities" :key="opp.id" 
           class="opportunity-card"
           @click="showOpportunityDetail(opp)">
        <div class="opp-icon" :style="{ background: getStageBg(opp.stage), color: getStageColor(opp.stage) }">
          <i :class="getStageIcon(opp.stage)"></i>
        </div>
        <div class="opp-info">
          <div class="opp-header">
            <span class="opp-name">{{ opp.name }}</span>
            <span class="opp-stage" :style="{ background: getStageBg(opp.stage), color: getStageColor(opp.stage) }">
              {{ getStageLabel(opp.stage) }}
            </span>
          </div>
          <div class="opp-customer">
            <i class="fas fa-building"></i> {{ opp.customer }} · {{ opp.country }}
          </div>
          <div class="opp-meta">
            <span><i class="fas fa-coins"></i> ¥{{ formatNumber(opp.amount) }}</span>
            <span><i class="fas fa-calendar"></i> 预计成交: {{ opp.expectedClose }}</span>
            <span><i class="fas fa-user"></i> {{ opp.owner }}</span>
          </div>
          <div class="opp-progress">
            <div class="progress-header">
              <span style="font-size: 10px;">{{ opp.progress }}% - {{ getStageLabel(opp.stage) }}</span>
            </div>
            <div class="progress-bar">
              <div class="progress-fill" :class="opp.stage === 'won' ? 'won' : 'blue'" :style="{ width: opp.progress + '%' }"></div>
            </div>
          </div>
        </div>
        <div class="opp-confidence">
          <div class="confidence-circle" :class="getConfidenceClass(opp.confidence)">{{ opp.confidence }}%</div>
          <div class="confidence-label">赢单率</div>
        </div>
        <div class="opp-days">
          <span class="days-badge" :class="{ urgent: opp.daysLeft <= 7 }">
            剩{{ opp.daysLeft }}天
          </span>
        </div>
        <div class="opp-actions" @click.stop>
          <button class="btn btn-primary btn-sm" @click="advanceStage(opp)"><i class="fas fa-arrow-right"></i> 推进</button>
          <button class="btn btn-secondary btn-sm" @click="showOpportunityDetail(opp)"><i class="fas fa-eye"></i></button>
        </div>
      </div>
    </div>

    <!-- Create Modal -->
    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
      <div class="modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-briefcase"></i> 创建商机</div>
          <button class="modal-close" @click="showCreateModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">商机名称 <span class="required">*</span></label>
              <input type="text" class="form-input" v-model="newOpportunity.name" placeholder="例如：SSD采购订单">
            </div>
            <div class="form-group">
              <label class="form-label">关联客户 <span class="required">*</span></label>
              <select class="form-select" v-model="newOpportunity.customer">
                <option value="">选择客户</option>
                <option>Riyadh Tech Distribution</option>
                <option>Dubai Storage Solutions</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">预计金额</label>
              <input type="text" class="form-input" v-model="newOpportunity.amount" placeholder="例如：¥500,000">
            </div>
            <div class="form-group">
              <label class="form-label">预计成交日期</label>
              <input type="date" class="form-input" v-model="newOpportunity.expectedClose">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">商机描述</label>
            <textarea class="form-input" rows="3" v-model="newOpportunity.description" placeholder="描述商机详情..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showCreateModal = false">取消</button>
          <button class="btn btn-primary" @click="createOpportunity"><i class="fas fa-plus"></i> 创建</button>
        </div>
      </div>
    </div>

    <!-- Opportunity Detail Modal -->
    <div v-if="showDetailModal && selectedOpportunity" class="modal-overlay" @click.self="showDetailModal = false">
      <div class="modal opportunity-detail-modal">
        <div class="modal-header">
          <div class="modal-title">
            <div class="title-icon" :style="{ background: getStageBg(selectedOpportunity.stage), color: getStageColor(selectedOpportunity.stage) }">
              <i :class="getStageIcon(selectedOpportunity.stage)"></i>
            </div>
            <div>
              <h3>{{ selectedOpportunity.name }}</h3>
              <p>{{ selectedOpportunity.customer }} · {{ selectedOpportunity.country }}</p>
            </div>
          </div>
          <button class="modal-close" @click="showDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- Quick Stats -->
          <div class="detail-stats">
            <div class="detail-stat-card">
              <div class="detail-stat-value success">¥{{ formatNumber(selectedOpportunity.amount) }}</div>
              <div class="detail-stat-label">商机金额</div>
            </div>
            <div class="detail-stat-card">
              <div class="detail-stat-value" :class="getConfidenceClass(selectedOpportunity.confidence)">{{ selectedOpportunity.confidence }}%</div>
              <div class="detail-stat-label">赢单概率</div>
            </div>
            <div class="detail-stat-card">
              <div class="detail-stat-value">{{ selectedOpportunity.daysLeft }}天</div>
              <div class="detail-stat-label">剩余时间</div>
            </div>
            <div class="detail-stat-card">
              <div class="detail-stat-value purple">¥{{ formatNumber(selectedOpportunity.weightedAmount) }}</div>
              <div class="detail-stat-label">加权金额</div>
            </div>
          </div>

          <!-- Stage Progress -->
          <div class="detail-section">
            <h4><i class="fas fa-route"></i> 销售阶段</h4>
            <div class="stage-progress">
              <div v-for="(stage, index) in stagesList" :key="stage.key" 
                   class="stage-step"
                   :class="{ active: selectedOpportunity.stage === stage.key, completed: getStageIndex(selectedOpportunity.stage) > index }">
                <div class="step-dot">
                  <i v-if="getStageIndex(selectedOpportunity.stage) > index" class="fas fa-check"></i>
                  <i v-else :class="stage.icon"></i>
                </div>
                <div class="step-name">{{ stage.label }}</div>
              </div>
            </div>
          </div>

          <!-- Customer Info -->
          <div class="detail-section">
            <h4><i class="fas fa-building"></i> 客户信息</h4>
            <div class="customer-info-card">
              <div class="customer-flag">{{ selectedOpportunity.customerFlag }}</div>
              <div class="customer-details">
                <div class="customer-name">{{ selectedOpportunity.customer }}</div>
                <div class="customer-meta">{{ selectedOpportunity.industry }} · {{ selectedOpportunity.location }}</div>
                <div class="customer-contact">
                  <span><i class="fas fa-user"></i> {{ selectedOpportunity.contactPerson }}</span>
                  <span><i class="fas fa-envelope"></i> {{ selectedOpportunity.contactEmail }}</span>
                </div>
              </div>
              <button class="btn btn-secondary btn-sm">查看客户</button>
            </div>
          </div>

          <!-- Products -->
          <div class="detail-section">
            <h4><i class="fas fa-box"></i> 产品明细</h4>
            <div class="products-table">
              <div class="product-row header">
                <div class="product-name">产品名称</div>
                <div class="product-qty">数量</div>
                <div class="product-price">单价</div>
                <div class="product-total">小计</div>
              </div>
              <div v-for="product in selectedOpportunity.products" :key="product.id" class="product-row">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-qty">{{ product.qty }}</div>
                <div class="product-price">¥{{ formatNumber(product.price) }}</div>
                <div class="product-total">¥{{ formatNumber(product.qty * product.price) }}</div>
              </div>
              <div class="product-row total">
                <div class="product-name">合计</div>
                <div class="product-qty"></div>
                <div class="product-price"></div>
                <div class="product-total">¥{{ formatNumber(selectedOpportunity.amount) }}</div>
              </div>
            </div>
          </div>

          <!-- Competitors -->
          <div class="detail-section" v-if="selectedOpportunity.competitors?.length">
            <h4><i class="fas fa-users"></i> 竞争对手</h4>
            <div class="competitors-list">
              <div v-for="comp in selectedOpportunity.competitors" :key="comp.name" class="competitor-item">
                <div class="competitor-name">{{ comp.name }}</div>
                <div class="competitor-strength">
                  <span class="strength-label">竞争力:</span>
                  <div class="strength-bar">
                    <div class="strength-fill" :style="{ width: comp.strength + '%' }"></div>
                  </div>
                  <span class="strength-value">{{ comp.strength }}%</span>
                </div>
                <div class="competitor-advantage">{{ comp.advantage }}</div>
              </div>
            </div>
          </div>

          <!-- Activities -->
          <div class="detail-section">
            <h4><i class="fas fa-history"></i> 跟进记录</h4>
            <div class="activities-list">
              <div v-for="activity in selectedOpportunity.activities" :key="activity.id" class="activity-item">
                <div class="activity-dot" :class="activity.type"></div>
                <div class="activity-content">
                  <div class="activity-header">
                    <span class="activity-action">{{ activity.action }}</span>
                    <span class="activity-time">{{ activity.time }}</span>
                  </div>
                  <div class="activity-detail">{{ activity.detail }}</div>
                  <div class="activity-person" v-if="activity.person">
                    <i class="fas fa-user"></i> {{ activity.person }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- AI Suggestions -->
          <div class="detail-section">
            <h4><i class="fas fa-robot"></i> AI 建议</h4>
            <div class="ai-suggestions">
              <div v-for="suggestion in selectedOpportunity.aiSuggestions" :key="suggestion.id" class="suggestion-card">
                <div class="suggestion-icon" :class="suggestion.priority">
                  <i :class="suggestion.icon"></i>
                </div>
                <div class="suggestion-content">
                  <div class="suggestion-title">{{ suggestion.title }}</div>
                  <div class="suggestion-desc">{{ suggestion.description }}</div>
                </div>
                <button class="btn btn-secondary btn-sm">{{ suggestion.action }}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDetailModal = false">关闭</button>
          <button class="btn btn-secondary"><i class="fas fa-edit"></i> 编辑</button>
          <button class="btn btn-primary" @click="advanceStage(selectedOpportunity)">
            <i class="fas fa-arrow-right"></i> 推进阶段
          </button>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const showCreateModal = ref(false)
const showDetailModal = ref(false)
const selectedOpportunity = ref(null)
const filterTab = ref('all')
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

const opportunityStats = {
  active: 89,
  new: 24,
  negotiation: 35,
  won: 23,
  lost: 7
}

const tabs = [
  { key: 'all', label: '全部商机', count: 89 },
  { key: 'new', label: '新商机', count: 24 },
  { key: 'negotiation', label: '谈判中', count: 35 },
  { key: 'proposal', label: '方案报价', count: 18 },
  { key: 'won', label: '已成交', count: 23 },
  { key: 'lost', label: '已丢单', count: 7 }
]

const stagesList = [
  { key: 'new', label: '新商机', icon: 'fas fa-star', bg: 'rgba(139, 92, 246, 0.2)', color: '#8b5cf6' },
  { key: 'qualification', label: '需求确认', icon: 'fas fa-clipboard-check', bg: 'rgba(6, 182, 212, 0.2)', color: '#06b6d4' },
  { key: 'proposal', label: '方案报价', icon: 'fas fa-file-alt', bg: 'rgba(245, 158, 11, 0.2)', color: '#f59e0b' },
  { key: 'negotiation', label: '谈判中', icon: 'fas fa-handshake', bg: 'rgba(99, 102, 241, 0.2)', color: '#6366f1' },
  { key: 'won', label: '已成交', icon: 'fas fa-check-circle', bg: 'rgba(16, 185, 129, 0.2)', color: '#10b981' }
]

const pipelineStages = computed(() => [
  { key: 'new', label: '新商机', count: 24, amount: 4800000, icon: 'fas fa-star', bg: 'rgba(139, 92, 246, 0.2)', color: '#8b5cf6' },
  { key: 'qualification', label: '需求确认', count: 18, amount: 3600000, icon: 'fas fa-clipboard-check', bg: 'rgba(6, 182, 212, 0.2)', color: '#06b6d4' },
  { key: 'proposal', label: '方案报价', count: 18, amount: 4200000, icon: 'fas fa-file-alt', bg: 'rgba(245, 158, 11, 0.2)', color: '#f59e0b' },
  { key: 'negotiation', label: '谈判中', count: 35, amount: 8500000, icon: 'fas fa-handshake', bg: 'rgba(99, 102, 241, 0.2)', color: '#6366f1' },
  { key: 'won', label: '已成交', count: 23, amount: 6200000, icon: 'fas fa-check-circle', bg: 'rgba(16, 185, 129, 0.2)', color: '#10b981' }
])

const totalPipeline = computed(() => pipelineStages.value.reduce((sum, s) => sum + s.amount, 0))

const newOpportunity = ref({
  name: '', customer: '', amount: '', expectedClose: '', description: ''
})

const opportunities = ref([
  { 
    id: 1, name: 'SSD采购订单', stage: 'negotiation', customer: 'Riyadh Tech Distribution', 
    country: '🇸🇦 沙特', amount: 850000, expectedClose: '2026-04-15', owner: '张经理', 
    confidence: 85, progress: 75, daysLeft: 27, weightedAmount: 722500,
    customerFlag: '🇸🇦', industry: '固态硬盘进口商', location: '沙特·利雅得',
    contactPerson: 'Ahmed Al-Rashid', contactEmail: 'ahmed@riyahtech.sa',
    products: [
      { id: 1, name: 'NVMe SSD 1TB 企业级', qty: 2000, price: 280 },
      { id: 2, name: 'NVMe SSD 2TB 企业级', qty: 1000, price: 290 }
    ],
    competitors: [
      { name: 'Samsung', strength: 75, advantage: '品牌知名度高，价格略低' },
      { name: 'WD', strength: 60, advantage: '产品线齐全' }
    ],
    activities: [
      { id: 1, type: 'meeting', action: '视频会议', detail: '讨论技术规格和交付时间，客户对样品满意', time: '2天前', person: '张经理' },
      { id: 2, type: 'email', action: '发送报价单', detail: '正式报价已发送，等待客户反馈', time: '5天前', person: '张经理' },
      { id: 3, type: 'call', action: '电话跟进', detail: '确认了采购数量和付款方式', time: '1周前', person: '张经理' }
    ],
    aiSuggestions: [
      { id: 1, priority: 'high', icon: 'fas fa-clock', title: '加速跟进', description: '客户响应积极，建议本周内敲定合同', action: '安排会议' },
      { id: 2, priority: 'medium', icon: 'fas fa-percentage', title: '价格策略', description: '可考虑提供3%早付款折扣，加快成交', action: '调整报价' }
    ]
  },
  { 
    id: 2, name: '企业存储方案', stage: 'proposal', customer: 'Berlin Tech GmbH', 
    country: '🇩🇪 德国', amount: 1200000, expectedClose: '2026-04-20', owner: '李经理', 
    confidence: 78, progress: 50, daysLeft: 32, weightedAmount: 936000,
    customerFlag: '🇩🇪', industry: '企业级存储', location: '德国·柏林',
    contactPerson: 'Hans Mueller', contactEmail: 'hans@berlintech.de',
    products: [
      { id: 1, name: '企业级SSD 4TB', qty: 500, price: 480 },
      { id: 2, name: 'RAID控制器', qty: 20, price: 12000 }
    ],
    competitors: [],
    activities: [
      { id: 1, type: 'email', action: '发送方案', detail: '技术方案已发送，等待技术团队评审', time: '3天前', person: '李经理' }
    ],
    aiSuggestions: [
      { id: 1, priority: 'medium', icon: 'fas fa-user-tie', title: '关键人跟进', description: '建议与技术总监直接沟通，加快评审', action: '联系技术总监' }
    ]
  },
  { 
    id: 3, name: '数据中心项目', stage: 'new', customer: 'Singapore Digital Pte Ltd', 
    country: '🇸🇬 新加坡', amount: 520000, expectedClose: '2026-05-01', owner: '王经理', 
    confidence: 65, progress: 25, daysLeft: 43, weightedAmount: 338000,
    customerFlag: '🇸🇬', industry: '电子产品分销', location: '新加坡',
    contactPerson: 'David Tan', contactEmail: 'david@sgdigital.sg',
    products: [
      { id: 1, name: 'SAS SSD 2TB', qty: 800, price: 320 },
      { id: 2, name: 'NVMe SSD 1TB', qty: 800, price: 330 }
    ],
    competitors: [],
    activities: [
      { id: 1, type: 'call', action: '初步电话沟通', detail: '了解客户需求，数据中心扩容项目', time: '1周前', person: '王经理' }
    ],
    aiSuggestions: [
      { id: 1, priority: 'high', icon: 'fas fa-calendar', title: '安排会议', description: '客户项目时间紧迫，建议尽快安排现场拜访', action: '预约拜访' }
    ]
  },
  { 
    id: 4, name: 'NVMe SSD批量采购', stage: 'won', customer: 'Paris Storage Solutions', 
    country: '🇫🇷 法国', amount: 680000, expectedClose: '2026-03-15', owner: '张经理', 
    confidence: 100, progress: 100, daysLeft: 0, weightedAmount: 680000,
    customerFlag: '🇫🇷', industry: '云存储服务商', location: '法国·巴黎',
    contactPerson: 'Pierre Dubois', contactEmail: 'pierre@parisstorage.fr',
    products: [
      { id: 1, name: 'NVMe SSD 1TB', qty: 2000, price: 340 }
    ],
    competitors: [],
    activities: [
      { id: 1, type: 'order', action: '订单确认', detail: 'PO-2026-0315 已确认', time: '3天前', person: '张经理' }
    ],
    aiSuggestions: []
  }
])

const filteredOpportunities = computed(() => {
  if (filterTab.value === 'all') return opportunities.value
  return opportunities.value.filter(o => o.stage === filterTab.value)
})

const formatNumber = (num) => num.toLocaleString()

const getStageIndex = (stage) => stagesList.findIndex(s => s.key === stage)

const getStageIcon = (stage) => {
  const map = { new: 'fas fa-star', qualification: 'fas fa-clipboard-check', proposal: 'fas fa-file-alt', negotiation: 'fas fa-handshake', won: 'fas fa-check-circle', lost: 'fas fa-times-circle' }
  return map[stage] || 'fas fa-briefcase'
}

const getStageBg = (stage) => {
  const map = { new: 'rgba(139, 92, 246, 0.2)', qualification: 'rgba(6, 182, 212, 0.2)', proposal: 'rgba(245, 158, 11, 0.2)', negotiation: 'rgba(99, 102, 241, 0.2)', won: 'rgba(16, 185, 129, 0.2)', lost: 'rgba(239, 68, 68, 0.2)' }
  return map[stage] || 'rgba(99, 102, 241, 0.2)'
}

const getStageColor = (stage) => {
  const map = { new: '#8b5cf6', qualification: '#06b6d4', proposal: '#f59e0b', negotiation: '#6366f1', won: '#10b981', lost: '#ef4444' }
  return map[stage] || '#6366f1'
}

const getStageLabel = (stage) => {
  const map = { new: '新商机', qualification: '需求确认', proposal: '方案报价', negotiation: '谈判中', won: '已成交', lost: '已丢单' }
  return map[stage] || stage
}

const getConfidenceClass = (confidence) => confidence >= 80 ? 'high' : confidence >= 60 ? 'medium' : 'low'

const showOpportunityDetail = (opp) => {
  selectedOpportunity.value = opp
  showDetailModal.value = true
}

const advanceStage = (opp) => {
  showToastMessage(`商机"${opp.name}"已推进到下一阶段`, 'success')
  showDetailModal.value = false
}

const createOpportunity = () => {
  showCreateModal.value = false
  showToastMessage('商机创建成功', 'success')
}

const showToastMessage = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => showToast.value = false, 3000)
}
</script>

<style scoped>
.data-page { flex: 1; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: var(--bg-dark); }
.data-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.data-title { font-size: 20px; font-weight: 600; }
.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card-lg { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.stat-card-lg:hover { border-color: var(--primary); }
.stat-icon-lg { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(99, 102, 241, 0.2); color: var(--primary); }
.stat-content-lg h3 { font-size: 24px; font-weight: 700; }
.stat-content-lg p { font-size: 12px; color: var(--text-secondary); }
.pipeline-container { background: var(--bg-card); border-radius: 14px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--border); }
.pipeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pipeline-header h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pipeline-header h3 i { color: var(--primary); }
.pipeline-total { font-size: 13px; color: var(--success); font-weight: 600; }
.pipeline-stages { display: flex; gap: 16px; }
.pipeline-stage { flex: 1; padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.stage-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stage-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.stage-name { font-size: 12px; font-weight: 500; }
.stage-count { font-size: 11px; color: var(--text-muted); }
.stage-amount { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.stage-bar { height: 4px; background: var(--bg-dark); border-radius: 2px; overflow: hidden; }
.stage-bar-fill { height: 100%; border-radius: 2px; }
.opportunity-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-card); border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.opportunity-card:hover { border-color: var(--primary); }
.opp-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.opp-info { flex: 1; }
.opp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.opp-name { font-size: 15px; font-weight: 600; }
.opp-stage { font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.opp-customer { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.opp-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.opp-progress { margin-top: 8px; }
.opp-progress .progress-bar { height: 4px; background: var(--bg-dark); border-radius: 2px; overflow: hidden; }
.opp-progress .progress-fill { height: 100%; border-radius: 2px; }
.opp-progress .progress-fill.won { background: var(--success); }
.opp-progress .progress-fill.blue { background: var(--primary); }
.opp-confidence { text-align: center; margin-right: 20px; }
.confidence-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.confidence-circle.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.confidence-circle.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.confidence-circle.low { background: rgba(148, 163, 184, 0.2); color: var(--text-secondary); }
.confidence-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.opp-days { margin-right: 16px; }
.days-badge { font-size: 11px; padding: 4px 10px; border-radius: 12px; background: var(--bg-hover); color: var(--text-secondary); }
.days-badge.urgent { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.opp-actions { display: flex; gap: 8px; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.opportunity-detail-modal { max-width: 850px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border); }
.modal-title { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.modal-title h3 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-title p { font-size: 12px; color: var(--text-secondary); margin: 4px 0 0 0; }
.title-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.modal-close { width: 32px; height: 32px; background: var(--bg-hover); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--border); color: var(--text-primary); }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.form-input { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; }
.form-input:focus { outline: none; border-color: var(--primary); }
.required { color: var(--danger); }
.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.detail-stat-card { background: var(--bg-hover); border-radius: 12px; padding: 16px; text-align: center; }
.detail-stat-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.detail-stat-value.success { color: var(--success); }
.detail-stat-value.high { color: var(--success); }
.detail-stat-value.medium { color: var(--warning); }
.detail-stat-value.low { color: var(--text-secondary); }
.detail-stat-value.purple { color: var(--secondary); }
.detail-stat-label { font-size: 12px; color: var(--text-secondary); }
.detail-section { margin-bottom: 24px; }
.detail-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.detail-section h4 i { color: var(--primary); }
.stage-progress { display: flex; justify-content: space-between; position: relative; padding: 0 20px; }
.stage-progress::before { content: ''; position: absolute; top: 18px; left: 40px; right: 40px; height: 2px; background: var(--border); }
.stage-step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.step-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); z-index: 1; }
.stage-step.completed .step-dot { background: var(--success); border-color: var(--success); color: white; }
.stage-step.active .step-dot { background: var(--primary); border-color: var(--primary); color: white; }
.step-name { font-size: 11px; color: var(--text-secondary); }
.stage-step.active .step-name { color: var(--primary); font-weight: 500; }
.customer-info-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-hover); border-radius: 12px; }
.customer-info-card .customer-flag { font-size: 32px; }
.customer-details { flex: 1; }
.customer-details .customer-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.customer-details .customer-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.customer-details .customer-contact { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); }
.products-table { background: var(--bg-hover); border-radius: 12px; overflow: hidden; }
.product-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: 12px 16px; font-size: 12px; }
.product-row.header { background: var(--bg-dark); color: var(--text-muted); font-weight: 500; }
.product-row.total { background: var(--bg-dark); font-weight: 600; }
.product-total { text-align: right; }
.competitors-list { display: flex; flex-direction: column; gap: 10px; }
.competitor-item { padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.competitor-name { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.competitor-strength { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.strength-label { font-size: 11px; color: var(--text-muted); }
.strength-bar { flex: 1; height: 4px; background: var(--bg-dark); border-radius: 2px; overflow: hidden; }
.strength-fill { height: 100%; background: var(--danger); border-radius: 2px; }
.strength-value { font-size: 11px; font-weight: 600; }
.competitor-advantage { font-size: 11px; color: var(--text-secondary); }
.activities-list { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 24px; }
.activities-list::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.activity-item { position: relative; }
.activity-dot { position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg-card); }
.activity-dot.email { background: var(--primary); }
.activity-dot.call { background: var(--success); }
.activity-dot.meeting { background: var(--warning); }
.activity-dot.order { background: var(--success); }
.activity-content { padding: 12px; background: var(--bg-hover); border-radius: 10px; }
.activity-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.activity-action { font-size: 13px; font-weight: 500; }
.activity-time { font-size: 11px; color: var(--text-muted); }
.activity-detail { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.activity-person { font-size: 11px; color: var(--text-muted); }
.ai-suggestions { display: flex; flex-direction: column; gap: 10px; }
.suggestion-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--bg-hover); border-radius: 12px; border-left: 3px solid var(--primary); }
.suggestion-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.suggestion-icon.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.suggestion-icon.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.suggestion-content { flex: 1; }
.suggestion-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.suggestion-desc { font-size: 11px; color: var(--text-secondary); }
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); z-index: 2000; }
.toast.success { border-color: var(--success); }
.toast.success i { color: var(--success); }
.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(20px); }
@media (max-width: 992px) { .stat-row { grid-template-columns: repeat(3, 1fr); } .pipeline-stages { flex-wrap: wrap; } .pipeline-stage { flex: 1 1 calc(33% - 12px); } .detail-stats { grid-template-columns: repeat(2, 1fr); } }
</style>
