import React from 'react';
import { formatDateTime } from '../../utils/formatters';

export default function ExplainTradesSection({
  tickerTrades,
  selectedSymbol,
  isOpen,
  onToggle,
}) {
  const sideLabel = (value) => {
    if (value === 'LONG') return '做多';
    if (value === 'SHORT') return '做空';
    return value || '-';
  };

  return (
    <div className="section">
      <div className="section-header">
        <h2 className="section-title">成交记录</h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 11, color: '#666666' }}>
            {tickerTrades.length} 笔与 {selectedSymbol} 相关的交易
          </div>
          <button
            onClick={onToggle}
            style={{
              border: '1px solid #111111',
              background: isOpen ? '#111111' : '#ffffff',
              color: isOpen ? '#ffffff' : '#111111',
              padding: '7px 10px',
              fontFamily: 'inherit',
              fontSize: 11,
              fontWeight: 700,
              cursor: 'pointer'
            }}
          >
            {isOpen ? '收起成交记录' : `展开成交记录 ${tickerTrades.length}`}
          </button>
        </div>
      </div>

      {tickerTrades.length === 0 ? (
        <div className="empty-state">该股票暂无成交记录</div>
      ) : !isOpen ? (
        <div className="empty-state">成交记录默认收起，需要时再展开查看。</div>
      ) : (
        <div className="table-wrapper">
          <table className="data-table">
            <thead>
              <tr>
                <th>时间</th>
                <th>方向</th>
                <th>数量</th>
                <th>价格</th>
              </tr>
            </thead>
            <tbody>
              {tickerTrades.slice(0, 10).map((trade, index) => (
                <tr key={trade.id || `${trade.ticker}-${trade.timestamp}-${index}`}>
                  <td>{formatDateTime(trade.timestamp)}</td>
                  <td style={{ fontWeight: 700, color: trade.side === 'LONG' ? '#00C853' : trade.side === 'SHORT' ? '#FF1744' : '#000000' }}>
                    {sideLabel(trade.side)}
                  </td>
                  <td>{trade.qty}</td>
                  <td>${Number(trade.price).toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}