import React, { useState, useEffect } from 'react'
import { api } from '../services/api'
import './Recommendations.css'
import CollapsibleUserGuide from './CollapsibleUserGuide'
import { TrendingDown, TrendingUp } from 'lucide-react'




function Recommendations() {
  const [recommendations, setRecommendations] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [typeFilter, setTypeFilter] = useState('realtime') // 'realtime' 或 'bookmarked'
  const [statusFilter, setStatusFilter] = useState('')
  const [directionFilter, setDirectionFilter] = useState('')
  const [generating, setGenerating] = useState(false)
  const [showDetails, setShowDetails] = useState({})
  const [bookmarking, setBookmarking] = useState({}) // 记录正在标记的推荐ID

  useEffect(() => {
    loadRecommendations()
    
    // 如果是查看实时推荐，每10秒静默更新价格（不触发loading状态）
    let interval = null
    if (typeFilter === 'realtime') {
      interval = setInterval(async () => {
        // 静默更新：只更新价格，不显示loading
        try {
          const result = await api.getRecommendations({ type: 'realtime' })
          const newData = result.data || []
          
          // 使用setState直接更新，不触发loading状态
          setRecommendations(prevRecommendations => {
            // 如果新数据为空，保持原数据不变
            if (newData.length === 0) {
              return prevRecommendations
            }
            
            // 实时推荐没有id，使用symbol作为key
            const newDataMap = new Map(newData.map(rec => [rec.symbol, rec]))
            const prevMap = new Map(prevRecommendations.map(rec => [rec.symbol || rec.id, rec]))
            
            // 合并数据：优先使用新数据（包含实时价格更新）
            const updated = prevRecommendations.map(prevRec => {
              const key = prevRec.symbol || prevRec.id
              const newRec = newDataMap.get(key)
              if (newRec) {
                return newRec
              }
              return prevRec
            })
            
            // 添加新出现的推荐
            const newItems = newData.filter(newRec => !prevMap.has(newRec.symbol))
            
            // 合并并去重（按symbol）
            const merged = [...updated, ...newItems]
            const uniqueMap = new Map()
            merged.forEach(rec => {
              const key = rec.symbol || rec.id
              if (!uniqueMap.has(key)) {
                uniqueMap.set(key, rec)
              }
            })
            
            return Array.from(uniqueMap.values())
          })
        } catch (err) {
          // 静默失败，不显示错误
          console.debug('静默更新价格失败:', err)
        }
      }, 10000) // 每10秒刷新
    }
    
    return () => {
      if (interval) {
        clearInterval(interval)
      }
    }
  }, [typeFilter, statusFilter, directionFilter])

  const loadRecommendations = async () => {
    try {
      setLoading(true)
      setError(null)
      
      const params = { type: typeFilter }
      if (typeFilter === 'bookmarked') {
        // 已标记的推荐：支持状态和方向过滤
        if (statusFilter) params.status = statusFilter
        if (directionFilter) params.direction = directionFilter
        params.limit = 50
      } else {
        // 实时推荐：只支持方向过滤
        if (directionFilter) params.direction = directionFilter
        params.limit = 50
        params.min_signal_strength = 5
      }
      
      const result = await api.getRecommendations(params)
      const data = result.data || []
      
      setRecommendations(data)
    } catch (err) {
      setError(err.message)
      console.error('加载推荐失败:', err)
    } finally {
      setLoading(false)
    }
  }
  
  const handleBookmark = async (rec) => {
    try {
      setBookmarking(prev => ({ ...prev, [rec.symbol || rec.id]: true }))
      
      await api.bookmarkRecommendation(rec)
      
      // 标记成功后，可以显示提示或更新状态
      alert('推荐已标记到数据库，可用于复盘')
      
      // 如果当前查看的是已标记推荐，重新加载
      if (typeFilter === 'bookmarked') {
        loadRecommendations()
      }
    } catch (err) {
      alert('标记失败: ' + err.message)
      console.error('标记推荐失败:', err)
    } finally {
      setBookmarking(prev => {
        const newState = { ...prev }
        delete newState[rec.symbol || rec.id]
        return newState
      })
    }
  }

  const handleGenerate = async () => {
    try {
      setGenerating(true)
      setError(null)
      await api.generateRecommendations(5, 20)
      await loadRecommendations()
      alert('推荐生成成功！')
    } catch (err) {
      setError(err.message)
      alert(`生成推荐失败: ${err.message}`)
    } finally {
      setGenerating(false)
    }
  }

  const handleMarkExecuted = async (id) => {
    if (!window.confirm('确认标记为已执行？')) return
    
    try {
      await api.markRecommendationExecuted(id)
      await loadRecommendations()
      alert('已标记为执行')
    } catch (err) {
      alert(`标记失败: ${err.message}`)
    }
  }

  const handleCancel = async (id) => {
    const notes = window.prompt('请输入取消原因（可选）:')
    if (notes === null) return
    
    try {
      await api.cancelRecommendation(id, notes || null)
      await loadRecommendations()
      alert('推荐已取消')
    } catch (err) {
      alert(`取消失败: ${err.message}`)
    }
  }

  const toggleDetails = (id) => {
    setShowDetails(prev => ({
      ...prev,
      [id]: !prev[id]
    }))
  }

  const formatTime = (timeStr) => {
    if (!timeStr) return '-'
    try {
      // 统一按“北京时间”显示，但要先把输入解析成正确的时间点（epoch）
      // 注意：部分来源会给出不带时区的字符串（如 "2026-01-19T05:54:04" 或 "2026-01-19 05:54:04"）
      // 这类字符串在浏览器里会被当作“本地时间”解析，导致显示偏差。
      const raw = String(timeStr).trim()

      let date = null

      // 1) 纯数字：兼容 seconds/ms
      if (/^\d+$/.test(raw)) {
        const n = Number(raw)
        const ms = raw.length >= 13 ? n : n * 1000
        date = new Date(ms)
      } else {
        // 2) "YYYY-MM-DD HH:mm:ss" -> 当作 UTC（历史推荐里常见），再转北京时间显示
        if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2}(\.\d+)?$/.test(raw)) {
          const isoUtc = raw.replace(' ', 'T') + 'Z'
          date = new Date(isoUtc)
        } else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?$/.test(raw)) {
          // 3) ISO 但无时区 -> 当作 UTC
          date = new Date(raw + 'Z')
        } else {
          // 4) 其他格式（包含 Z / +08:00 / RFC1123 等）交给浏览器解析
          date = new Date(raw)
        }
      }
      
      // 检查日期是否有效
      if (!date || isNaN(date.getTime())) {
        return timeStr
      }
      
      // 使用本地时区格式化（显示北京时间，如果服务器返回的是UTC时间）
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        timeZone: 'Asia/Shanghai'  // 明确使用北京时间
      })
    } catch (e) {
      return timeStr
    }
  }

  const getEntryStatus = (rec) => {
    try {
      const entry = Number(rec?.suggested_limit_price ?? rec?.planned_entry_price)
      const cur = Number(rec?.current_price)
      if (!isFinite(entry) || !isFinite(cur) || !rec?.direction) return null
      if (rec.direction === 'BUY') {
        return cur <= entry ? { text: '已到价', cls: 'hit' } : { text: '未到价', cls: 'wait' }
      }
      return cur >= entry ? { text: '已到价', cls: 'hit' } : { text: '未到价', cls: 'wait' }
    } catch (e) {
      return null
    }
  }

  const formatTimeMs = (ms) => {
    if (!ms && ms !== 0) return '-'
    try {
      const date = new Date(Number(ms))
      if (isNaN(date.getTime())) return '-'
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        timeZone: 'Asia/Shanghai'
      })
    } catch (e) {
      return '-'
    }
  }

  const fmtPrice = (v) => {
    const n = Number(v || 0)
    if (!isFinite(n)) return '-'
    // 低价币用更多小数位，避免“挂单价=止损价”只是显示精度导致的误解
    if (Math.abs(n) >= 100) return n.toFixed(2)
    if (Math.abs(n) >= 1) return n.toFixed(4)
    if (Math.abs(n) >= 0.01) return n.toFixed(6)
    return n.toFixed(8)
  }

  const getStatusBadge = (status) => {
    const statusMap = {
      active: { text: '有效', class: 'status-active' },
      executed: { text: '已执行', class: 'status-executed' },
      expired: { text: '已过期', class: 'status-expired' },
      cancelled: { text: '已取消', class: 'status-cancelled' }
    }
    const statusInfo = statusMap[status] || { text: status, class: 'status-unknown' }
    return <span className={`status-badge ${statusInfo.class}`}>{statusInfo.text}</span>
  }

  const getSignalStrengthColor = (strength) => {
    if (strength >= 8) return 'signal-strong'
    if (strength >= 6) return 'signal-medium'
    return 'signal-weak'
  }

  return (
    <div className="recommendations-container">
      <div className="recommendations-header">
        <h2>交易推荐</h2>
        <div className="header-actions">
          <button 
            className="btn-generate" 
            onClick={handleGenerate}
            disabled={generating}
          >
            {generating ? '生成中...' : '生成推荐'}
          </button>
          <button 
            className="btn-refresh" 
            onClick={loadRecommendations}
            disabled={loading}
          >
            刷新
          </button>
        </div>
      </div>

      <div className="filters">
        <select 
          value={typeFilter} 
          onChange={(e) => {
            setTypeFilter(e.target.value)
            setStatusFilter('') // 切换类型时重置状态过滤
          }}
          className="filter-select"
        >
          <option value="realtime">实时推荐</option>
          <option value="bookmarked">已标记推荐</option>
        </select>
        
        {typeFilter === 'bookmarked' && (
          <select 
            value={statusFilter} 
            onChange={(e) => setStatusFilter(e.target.value)}
            className="filter-select"
          >
            <option value="">全部状态</option>
            <option value="active">有效</option>
            <option value="executed">已执行</option>
            <option value="expired">已过期</option>
            <option value="cancelled">已取消</option>
          </select>
        )}
        
        <select 
          value={directionFilter} 
          onChange={(e) => setDirectionFilter(e.target.value)}
          className="filter-select"
        >
          <option value="">全部方向</option>
          <option value="BUY">做多</option>
          <option value="SELL">做空</option>
        </select>
      </div>

      {error && (
        <div className="error-message">
          {error}
        </div>
      )}

      {loading ? (
        <div className="loading">加载中...</div>
      ) : recommendations.length === 0 ? (
        <div className="empty-state">
          <p>暂无推荐记录</p>
          <button className="btn-generate" onClick={handleGenerate}>
            生成推荐
          </button>
        </div>
      ) : (
        <div className="recommendations-list">
          {recommendations.map((rec) => (
            <div key={rec.id || rec.symbol} className="recommendation-card">
              <div className="card-header">
                <div className="card-title">
                  <span className="symbol">{rec.symbol}</span>
                  <span className={`direction ${rec.direction.toLowerCase()}`}>
                    {rec.direction === 'BUY' ? '做多' : '做空'}
                  </span>
                  {getStatusBadge(rec.status)}
                </div>
                <div className="card-meta">
                  <span className={`signal-strength ${getSignalStrengthColor(rec.signal_strength)}`}>
                    信号强度: {rec.signal_strength}/10
                  </span>
                  <span className="time" title="北京时间">
                    {formatTime(rec.recommendation_time)}（北京）
                  </span>
                </div>
              </div>

              <div className="card-content">
                {/* 推荐分类和风险等级标签 */}
                {(rec.recommendation_category || rec.risk_level) && (
                  <div className="recommendation-tags">
                    {rec.recommendation_category && (
                      <span className={`category-tag category-${rec.recommendation_category?.replace(/[（\(\)）]/g, '').replace(/\s+/g, '-').toLowerCase() || 'default'}`}>
                        {rec.recommendation_category}
                      </span>
                    )}
                    {rec.risk_level && (
                      <span className={`risk-tag risk-${rec.risk_level?.replace(/\s+/g, '-').toLowerCase() || 'medium'}`}>
                        风险: {rec.risk_level}
                      </span>
                    )}
                  </div>
                )}

                <div className="price-info">
                  <div className="price-item">
                    <label>当前价格:</label>
                    <span>
                      {fmtPrice(rec.current_price)} USDT
                      {rec.current_price_source === 'mark_price' && (
                        <span
                          className="price-updated-badge"
                          title={`标记价（Binance premiumIndex） 更新时间: ${formatTimeMs(rec.current_price_time_ms)}`}
                        >
                          🟢
                        </span>
                      )}
                    </span>
                  </div>
                  {(rec.current_price_source || rec.current_price_time_ms) && (
                    <div className="price-item price-meta">
                      <label>价格时间:</label>
                      <span>
                        {rec.current_price_source === 'mark_price' ? '标记价' : (rec.current_price_source || 'snapshot')}
                        {rec.current_price_time_ms ? ` · ${formatTimeMs(rec.current_price_time_ms)}` : ''}
                      </span>
                    </div>
                  )}
                  {rec.change_percent !== undefined && rec.change_percent !== null && (
                    <div className="price-item">
                      <label>24h涨跌:</label>
                      <span className={rec.change_percent >= 0 ? 'positive' : 'negative'}>
                        {rec.change_percent >= 0 ? '+' : ''}{parseFloat(rec.change_percent).toFixed(2)}%
                      </span>
                    </div>
                  )}
                </div>

                {/* 用户指南（人话版计划） */}
                {rec.user_guide && (
                  <div className={`user-guide ${rec.direction === 'BUY' ? 'buy-bg' : 'sell-bg'}`}>
                    <div className="user-guide-head">
                      <strong>📋 操作计划</strong>
                      <div className="user-guide-prices">
                        <span className={`ug-direction-badge ${rec.direction === 'BUY' ? 'buy' : 'sell'}`} title={rec.direction === 'BUY' ? '做多' : '做空'}>
                          {rec.direction === 'BUY' ? (
                            <TrendingUp className="ug-direction-icon" aria-label="做多" size={18} />
                          ) : (
                            <TrendingDown className="ug-direction-icon" aria-label="做空" size={18} />
                          )}
                        </span>
                        <span className="ug-pill entry text-white text-xl">
                          入场 {fmtPrice(rec.suggested_limit_price ?? rec.planned_entry_price)} USDT
                          {(() => {
                            const st = getEntryStatus(rec)
                            return st ? <span className={`ug-entry-status ${st.cls}`}>{st.text}</span> : null
                          })()}
                        </span>
                        <span className="ug-pill stop">
                          止损 {fmtPrice(rec.suggested_stop_loss)} USDT
                        </span>
                        <span className="ug-pill tp1">
                          目标1 {fmtPrice(rec.suggested_take_profit_1)} USDT
                        </span>
                        <span className="ug-pill tp2">
                          目标2 {fmtPrice(rec.suggested_take_profit_2)} USDT
                        </span>
                      </div>
                    </div>
                    <CollapsibleUserGuide text={rec.user_guide} maxHeight={160} />
                  </div>
                )}

                <div className="card-actions">
                  {typeFilter === 'realtime' && (
                    <button 
                      className="btn-bookmark"
                      onClick={() => handleBookmark(rec)}
                      disabled={bookmarking[rec.symbol || rec.id]}
                      title="标记到数据库用于复盘"
                    >
                      {bookmarking[rec.symbol || rec.id] ? '标记中...' : '📌 标记'}
                    </button>
                  )}
                  <button 
                    className="btn-toggle-details"
                    onClick={() => toggleDetails(rec.id || rec.symbol)}
                  >
                    {showDetails[rec.id || rec.symbol] ? '隐藏' : '显示'}详细信息
                  </button>
                </div>

                {/* 预期持仓时间（如果存在） */}
                {rec.expected_hold_time && (
                  <div className="expected-hold-time">
                    <strong>⏱️ 预期持仓时间:</strong>
                    <span>{rec.expected_hold_time}</span>
                  </div>
                )}

                {/* 最大持仓天数提醒 */}
                {rec.max_hold_days && (
                  <div className="max-hold-warning">
                    <strong>⚠️ 退出提醒:</strong>
                    <span>若持仓超过{rec.max_hold_days}天仍未触及第一目标，建议平仓离场重新评估</span>
                  </div>
                )}

                {showDetails[rec.id || rec.symbol] && (
                  <div className="details-panel">
                    <div className="details-section">
                      <h4>交易提示</h4>
                      <div className="market-info">
                        <div className="info-item">
                          <label>提示:</label>
                          <span>{rec.trading_tutorial || '-'}</span>
                        </div>
                      </div>
                    </div>

                    <div className="details-section">
                      <h4>技术分析原因</h4>
                      <div className="market-info">
                        <div className="info-item">
                          <label>原因:</label>
                          <span>{rec.recommendation_reason || '-'}</span>
                        </div>
                      </div>
                    </div>

                    <div className="details-section">
                      <h4>建议参数</h4>
                      <div className="suggested-params">
                        <div className="param-item order-type">
                          <label>订单类型:</label>
                          <span className="order-type-badge limit">限价单</span>
                        </div>
                        {rec.suggested_limit_price && (
                          <div className="param-item limit-price highlight">
                            <label>建议挂单价:</label>
                            <span className="limit-price-value highlight-price">
                              {fmtPrice(rec.suggested_limit_price)} USDT
                              {rec.current_price && (
                                <span className="price-diff">
                                  ({rec.direction === 'BUY' ? '低于' : '高于'}当前价
                                  {Math.abs(((rec.suggested_limit_price - rec.current_price) / rec.current_price) * 100).toFixed(2)}%)
                                </span>
                              )}
                            </span>
                          </div>
                        )}
                        <div className="param-item">
                          <label>建议止损:</label>
                          <span>{fmtPrice(rec.suggested_stop_loss)}</span>
                        </div>
                        <div className="param-item">
                          <label>第一目标:</label>
                          <span>{fmtPrice(rec.suggested_take_profit_1)}</span>
                        </div>
                        <div className="param-item">
                          <label>第二目标:</label>
                          <span>{fmtPrice(rec.suggested_take_profit_2)}</span>
                        </div>
                        <div className="param-item">
                          <label>建议仓位:</label>
                          <span>{(parseFloat(rec.suggested_position_percent || 0) * 100).toFixed(2)}%</span>
                        </div>
                        <div className="param-item">
                          <label>建议杠杆:</label>
                          <span>{rec.suggested_leverage || 10}x</span>
                        </div>
                      </div>
                    </div>

                    <div className="details-section">
                      <h4>技术指标</h4>
                      <div className="indicators-grid">
                        {rec.rsi && (
                          <div className="indicator-item">
                            <label>RSI:</label>
                            <span>{parseFloat(rec.rsi).toFixed(2)}</span>
                          </div>
                        )}
                        {rec.macd_histogram !== null && rec.macd_histogram !== undefined && (
                          <div className="indicator-item">
                            <label>MACD:</label>
                            <span>{parseFloat(rec.macd_histogram).toFixed(6)}</span>
                          </div>
                        )}
                        {rec.ema20 && (
                          <div className="indicator-item">
                            <label>EMA20:</label>
                            <span>{parseFloat(rec.ema20).toFixed(4)}</span>
                          </div>
                        )}
                        {rec.ema50 && (
                          <div className="indicator-item">
                            <label>EMA50:</label>
                            <span>{parseFloat(rec.ema50).toFixed(4)}</span>
                          </div>
                        )}
                        {rec.ema20_4h && (
                          <div className="indicator-item">
                            <label>EMA20(4H):</label>
                            <span>{parseFloat(rec.ema20_4h).toFixed(4)}</span>
                          </div>
                        )}
                        {rec.atr && (
                          <div className="indicator-item">
                            <label>ATR:</label>
                            <span>{parseFloat(rec.atr).toFixed(4)}</span>
                          </div>
                        )}
                      </div>
                    </div>

                    <div className="details-section">
                      <h4>市场状态</h4>
                      <div className="market-info">
                        <div className="info-item">
                          <label>市场状态:</label>
                          <span>{rec.market_regime === 'trending' ? '趋势' : rec.market_regime === 'ranging' ? '震荡' : '-'}</span>
                        </div>
                        <div className="info-item">
                          <label>4H趋势:</label>
                          <span>
                            {rec.trend_4h === 'up' ? '向上' : rec.trend_4h === 'down' ? '向下' : rec.trend_4h === 'neutral' ? '中性' : '-'}
                          </span>
                        </div>
                        {rec.volume_24h && (
                          <div className="info-item">
                            <label>24h成交量:</label>
                            <span>{(parseFloat(rec.volume_24h) / 1000000).toFixed(2)}M USDT</span>
                          </div>
                        )}
                      </div>
                    </div>

                    {rec.bollinger_upper && (
                      <div className="details-section">
                        <h4>布林带</h4>
                        <div className="bollinger-info">
                          <div className="bollinger-item">
                            <label>上轨:</label>
                            <span>{parseFloat(rec.bollinger_upper).toFixed(4)}</span>
                          </div>
                          <div className="bollinger-item">
                            <label>中轨:</label>
                            <span>{parseFloat(rec.bollinger_middle).toFixed(4)}</span>
                          </div>
                          <div className="bollinger-item">
                            <label>下轨:</label>
                            <span>{parseFloat(rec.bollinger_lower).toFixed(4)}</span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {rec.status === 'active' && (
                  <div className="card-actions">
                    <button 
                      className="btn-execute"
                      onClick={() => handleMarkExecuted(rec.id)}
                    >
                      标记已执行
                    </button>
                    <button 
                      className="btn-cancel"
                      onClick={() => handleCancel(rec.id)}
                    >
                      取消推荐
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default Recommendations