import { Link } from 'react-router-dom';
import { formatDateTime, timeAgo } from '../utils/date';

export default function SignalCard({ signal, showResult = false }) {
  const isBuy = signal.type === 'BUY';
  const isActive = signal.status === 'active';
  const isProfit = signal.result === 'profit';

  return (
    <Link to={`/signals/${signal.id}`} className="card block hover:border-accent/50 transition-colors">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <div className={`text-2xl font-black ${isBuy ? 'text-emerald-400' : 'text-red-400'}`}>
            {isBuy ? '↑ BUY' : '↓ SELL'}
          </div>
          <div>
            <p className="font-bold text-lg">{signal.pair}</p>
            <p className="text-sm text-gray-500">#{signal.id} · {signal.pairName}</p>
          </div>
        </div>

        <div className="flex flex-wrap gap-6 text-sm">
          <div>
            <p className="text-gray-500">زمان ارسال</p>
            <p>{formatDateTime(signal.sentAt)}</p>
          </div>
          {signal.lastUpdateAt && isActive && (
            <div>
              <p className="text-gray-500">آخرین بروزرسانی</p>
              <p>{formatDateTime(signal.lastUpdateAt)}</p>
            </div>
          )}
          {signal.closedAt && (
            <div>
              <p className="text-gray-500">زمان بسته شدن</p>
              <p>{formatDateTime(signal.closedAt)}</p>
            </div>
          )}
          {showResult && signal.closedAt && (
            <div>
              <p className="text-gray-500">مدت</p>
              <p>{timeAgo(signal.closedAt)}</p>
            </div>
          )}
        </div>

        <div>
          {isActive ? (
            <span className="px-4 py-2 rounded-full bg-accent/20 text-accent border border-accent/40 text-sm font-medium">
              ● فعال
            </span>
          ) : showResult ? (
            <span
              className={`px-4 py-2 rounded-full text-sm font-medium flex items-center gap-2 ${
                isProfit
                  ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/40'
                  : 'bg-red-500/20 text-red-400 border border-red-500/40'
              }`}
            >
              {isProfit ? '✓ سود' : '✗ ضرر'}
            </span>
          ) : (
            <span className="text-gray-500 text-sm">بسته شده</span>
          )}
        </div>
      </div>
    </Link>
  );
}
