/**
 * ML Model Card Component
 * Displays individual ML model information with status and metrics
 */

import {
  CpuChipIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  XCircleIcon,
  ClockIcon,
} from '@heroicons/react/24/solid';
import type { MLModel } from '../../../services/adminService';

interface MLModelCardProps {
  model: MLModel;
  onToggleStatus?: (modelId: string, newStatus: 'active' | 'inactive') => void;
}

export default function MLModelCard({ model, onToggleStatus }: MLModelCardProps) {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'active':
        return <CheckCircleIcon className="w-4 h-4 text-green-400" />;
      case 'training':
        return <ClockIcon className="w-4 h-4 text-yellow-400 animate-pulse" />;
      case 'inactive':
        return <ExclamationTriangleIcon className="w-4 h-4 text-gray-400" />;
      default:
        return <XCircleIcon className="w-4 h-4 text-red-400" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active':
        return 'bg-green-900/50 text-green-400 border-green-700';
      case 'training':
        return 'bg-yellow-900/50 text-yellow-400 border-yellow-700';
      case 'inactive':
        return 'bg-gray-700 text-gray-400 border-gray-600';
      default:
        return 'bg-red-900/50 text-red-400 border-red-700';
    }
  };

  const getTypeColor = (type: string) => {
    const colors: Record<string, string> = {
      AMD: 'bg-purple-600',
      ICT: 'bg-blue-600',
      Range: 'bg-orange-600',
      TPSL: 'bg-green-600',
      Ensemble: 'bg-pink-600',
    };
    return colors[type] || 'bg-gray-600';
  };

  const formatDate = (dateString: string) => {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  return (
    <div className="bg-gray-900 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors">
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className={`p-1.5 rounded ${getTypeColor(model.type)}`}>
            <CpuChipIcon className="w-4 h-4 text-white" />
          </div>
          <div>
            <h3 className="text-white font-semibold text-sm">{model.name || model.type}</h3>
            <span className="text-gray-500 text-xs">v{model.version}</span>
          </div>
        </div>
        <div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs border ${getStatusColor(model.status)}`}>
          {getStatusIcon(model.status)}
          <span className="capitalize">{model.status}</span>
        </div>
      </div>

      {/* Metrics Grid */}
      <div className="grid grid-cols-2 gap-2 mb-3">
        <div className="bg-gray-800 rounded p-2">
          <span className="text-gray-500 text-xs">Accuracy</span>
          <p className="text-white font-semibold">
            {((model.accuracy || 0) * 100).toFixed(1)}%
          </p>
        </div>
        <div className="bg-gray-800 rounded p-2">
          <span className="text-gray-500 text-xs">Precision</span>
          <p className="text-white font-semibold">
            {((model.precision || 0) * 100).toFixed(1)}%
          </p>
        </div>
        <div className="bg-gray-800 rounded p-2">
          <span className="text-gray-500 text-xs">Recall</span>
          <p className="text-white font-semibold">
            {((model.recall || 0) * 100).toFixed(1)}%
          </p>
        </div>
        <div className="bg-gray-800 rounded p-2">
          <span className="text-gray-500 text-xs">F1 Score</span>
          <p className="text-white font-semibold">
            {((model.f1_score || 0) * 100).toFixed(1)}%
          </p>
        </div>
      </div>

      {/* Additional Metrics */}
      {model.metrics && (
        <div className="border-t border-gray-700 pt-3 mb-3">
          <div className="grid grid-cols-3 gap-2 text-xs">
            <div>
              <span className="text-gray-500">Win Rate</span>
              <p className="text-green-400 font-semibold">
                {((model.metrics.win_rate || 0) * 100).toFixed(1)}%
              </p>
            </div>
            <div>
              <span className="text-gray-500">Profit Factor</span>
              <p className="text-blue-400 font-semibold">
                {(model.metrics.profit_factor || 0).toFixed(2)}
              </p>
            </div>
            <div>
              <span className="text-gray-500">Sharpe</span>
              <p className="text-purple-400 font-semibold">
                {(model.metrics.sharpe_ratio || 0).toFixed(2)}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <div className="flex items-center justify-between text-xs text-gray-500">
        <span>Predictions: {model.total_predictions?.toLocaleString() || 0}</span>
        <span>Last: {formatDate(model.last_prediction)}</span>
      </div>

      {/* Toggle Button */}
      {onToggleStatus && model.status !== 'training' && (
        <button
          onClick={() => onToggleStatus(model.model_id, model.status === 'active' ? 'inactive' : 'active')}
          className={`mt-3 w-full py-1.5 rounded text-xs font-semibold transition-colors ${
            model.status === 'active'
              ? 'bg-gray-700 hover:bg-gray-600 text-gray-300'
              : 'bg-green-700 hover:bg-green-600 text-white'
          }`}
        >
          {model.status === 'active' ? 'Deactivate' : 'Activate'}
        </button>
      )}
    </div>
  );
}
