import { useState, useEffect } from 'react';
import { lotteryAPI } from '../services/api';

const STATUS_MAP = {
  pending: { label: '待开奖', className: 'pending' },
  won: { label: '已中奖', className: 'won' },
  lost: { label: '未中奖', className: 'lost' }
};

const TYPE_MAP = {
  welfare: '福彩',
  sports: '体彩'
};

function TicketDetail({ ticket, onBack, onDelete, onEdit }) {
  const [winningNumbers, setWinningNumbers] = useState(null);

  useEffect(() => {
    if (ticket && ticket.issue && ticket.game) {
      lotteryAPI.result(ticket.game, ticket.issue).then(res => {
        if (res.data && res.data.numbers) {
          setWinningNumbers(res.data.numbers);
        }
      }).catch(() => {});
    }
  }, [ticket]);

  if (!ticket) return null;

  const status = STATUS_MAP[ticket.status] || STATUS_MAP.pending;
  const typeLabel = TYPE_MAP[ticket.type] || ticket.type;
  const numbers = ticket.numbers ? JSON.parse(ticket.numbers) : [];

  const handleDelete = () => {
    if (confirm('确定删除这张彩票？')) {
      onDelete(ticket.id);
    }
  };

  return (
    <div className="detail-page">
      <div className="detail-header">
        <button className="btn btn-secondary" onClick={onBack}>返回</button>
        <h2>彩票详情</h2>
        <div style={{width: '60px'}}></div>
      </div>

      <div className="detail-content">
        <div className="detail-card">
          <div className="detail-row">
            <span className="detail-label">类型</span>
            <span className="detail-value">{typeLabel} - {ticket.game}</span>
          </div>
          <div className="detail-row">
            <span className="detail-label">期数</span>
            <span className="detail-value">{ticket.issue || '未填写'}</span>
          </div>
          <div className="detail-row">
            <span className="detail-label">状态</span>
            <span className={`ticket-status ${status.className}`}>{status.label}</span>
          </div>
        </div>

        {numbers.length > 0 && (
          <div className="detail-card">
            <h3 className="detail-card-title">号码</h3>
            {numbers.map((num, index) => (
              <div key={index} className="number-display">
                {ticket.type === 'welfare' ? (
                  <div className="number-balls">
                    {num.red?.map((r, i) => (
                      <span key={i} className="ball red">{r}</span>
                    ))}
                    <span className="ball blue">{num.blue}</span>
                  </div>
                ) : (
                  <div className="number-balls">
                    {num.front?.map((f, i) => (
                      <span key={i} className="ball red">{f}</span>
                    ))}
                    {num.back?.map((b, i) => (
                      <span key={i} className="ball blue">{b}</span>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {winningNumbers && (
          <div className="detail-card">
            <h3 className="detail-card-title">中奖号码</h3>
            <div className="number-display">
              {ticket.type === 'welfare' ? (
                <div className="number-balls">
                  {winningNumbers.red?.map((r, i) => (
                    <span key={i} className="ball red">{r}</span>
                  ))}
                  <span className="ball blue">{winningNumbers.blue}</span>
                </div>
              ) : (
                <div className="number-balls">
                  {winningNumbers.front?.map((f, i) => (
                    <span key={i} className="ball red">{f}</span>
                  ))}
                  {winningNumbers.back?.map((b, i) => (
                    <span key={i} className="ball blue">{b}</span>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}

        <div className="detail-card">
          <div className="detail-row">
            <span className="detail-label">注数</span>
            <span className="detail-value">{ticket.bet_count} 注</span>
          </div>
          <div className="detail-row">
            <span className="detail-label">倍数</span>
            <span className="detail-value">{ticket.multiple} 倍</span>
          </div>
          {ticket.type === 'sports' && (
            <div className="detail-row">
              <span className="detail-label">追加</span>
              <span className="detail-value">{ticket.is_additional ? '是' : '否'}</span>
            </div>
          )}
          <div className="detail-row">
            <span className="detail-label">花费</span>
            <span className="detail-value expense">¥{ticket.cost}</span>
          </div>
          {ticket.prize > 0 && (
            <div className="detail-row">
              <span className="detail-label">中奖</span>
              <span className="detail-value income">¥{ticket.prize}</span>
            </div>
          )}
        </div>

        <div className="detail-card">
          <div className="detail-row">
            <span className="detail-label">创建时间</span>
            <span className="detail-value">{new Date(ticket.created_at).toLocaleString()}</span>
          </div>
        </div>

        <div style={{display: 'flex', gap: '12px', marginTop: '20px'}}>
          <button className="btn btn-primary" style={{flex: 1}} onClick={() => onEdit(ticket)}>
            编辑
          </button>
          <button className="btn btn-danger" style={{flex: 1}} onClick={handleDelete}>
            删除
          </button>
        </div>
      </div>
    </div>
  );
}

export default TicketDetail;
