import React from 'react';
import {
  ArrowTrendingUpIcon,
  ArrowTrendingDownIcon,
  ClockIcon,
  ShieldCheckIcon,
} from '@heroicons/react/24/solid';

export interface TradingSignal {
  signal_id: string;
  symbol: string;
  direction: 'long' | 'short' | 'LONG' | 'SHORT' | 'BUY' | 'SELL';
  entry_price: number;
  stop_loss: number;
  take_profit: number;
  risk_reward_ratio: number;
  prob_tp_first: number;
  confidence_score: number;
  amd_phase: string;
  volatility_regime: string;
  valid_until: string;
  // Backward-compatible camelCase aliases
  stopLoss?: number;
  takeProfit?: number;
  entry?: number;
  confidence?: number;
}

interface SignalCardProps {
  signal: TradingSignal;
  onTrade?: (signal: TradingSignal) => void;
}

export const SignalCard: React.FC<SignalCardProps> = ({ signal, onTrade }) => {
  const isLong = signal.direction === 'long';
  const confidencePercent = Math.round(signal.confidence_score * 100);
  const probTPPercent = Math.round(signal.prob_tp_first * 100);

  const getPhaseColor = (phase: string) => {
    switch (phase.toLowerCase()) {
      case 'accumulation':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
      case 'manipulation':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
      case 'distribution':
        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300';
    }
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div
            className={`p-2 rounded-lg ${
              isLong
                ? 'bg-green-100 dark:bg-green-900'
                : 'bg-red-100 dark:bg-red-900'
            }`}
          >
            {isLong ? (
              <ArrowTrendingUpIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
            ) : (
              <ArrowTrendingDownIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
            )}
          </div>
          <div>
            <h3 className="font-bold text-lg text-gray-900 dark:text-white">
              {signal.symbol}
            </h3>
            <span
              className={`text-sm font-medium ${
                isLong ? 'text-green-600' : 'text-red-600'
              }`}
            >
              {signal.direction.toUpperCase()}
            </span>
          </div>
        </div>
        <span className={`text-xs px-2 py-1 rounded-full ${getPhaseColor(signal.amd_phase)}`}>
          {signal.amd_phase}
        </span>
      </div>

      {/* Price levels */}
      <div className="grid grid-cols-3 gap-2 mb-3">
        <div className="text-center p-2 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <p className="text-xs text-gray-500 dark:text-gray-400">Entry</p>
          <p className="font-mono font-bold text-gray-900 dark:text-white">
            {signal.entry_price.toFixed(2)}
          </p>
        </div>
        <div className="text-center p-2 bg-red-50 dark:bg-red-900/20 rounded-lg">
          <p className="text-xs text-red-500">Stop Loss</p>
          <p className="font-mono font-bold text-red-600">
            {signal.stop_loss.toFixed(2)}
          </p>
        </div>
        <div className="text-center p-2 bg-green-50 dark:bg-green-900/20 rounded-lg">
          <p className="text-xs text-green-500">Take Profit</p>
          <p className="font-mono font-bold text-green-600">
            {signal.take_profit.toFixed(2)}
          </p>
        </div>
      </div>

      {/* Metrics */}
      <div className="flex items-center justify-between mb-3 text-sm">
        <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
          <ShieldCheckIcon className="w-4 h-4" />
          <span>R:R {signal.risk_reward_ratio.toFixed(1)}</span>
        </div>
        <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
          <span>Confidence: {confidencePercent}%</span>
        </div>
        <div className="flex items-center gap-1 text-gray-600 dark:text-gray-400">
          <span>P(TP): {probTPPercent}%</span>
        </div>
      </div>

      {/* Confidence bar */}
      <div className="mb-3">
        <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full ${
              confidencePercent >= 70
                ? 'bg-green-500'
                : confidencePercent >= 50
                ? 'bg-yellow-500'
                : 'bg-red-500'
            }`}
            style={{ width: `${confidencePercent}%` }}
          />
        </div>
      </div>

      {/* Valid until */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1 text-xs text-gray-500">
          <ClockIcon className="w-4 h-4" />
          <span>Valid until {new Date(signal.valid_until).toLocaleTimeString()}</span>
        </div>
        <button
          onClick={() => onTrade?.(signal)}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
            isLong
              ? 'bg-green-600 hover:bg-green-700 text-white'
              : 'bg-red-600 hover:bg-red-700 text-white'
          }`}
        >
          Trade Now
        </button>
      </div>
    </div>
  );
};

export default SignalCard;
