/**
 * AMDPhaseIndicator Component
 * Displays the current AMD (Accumulation, Manipulation, Distribution) phase
 * with visual indicators and confidence metrics
 */

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

interface AMDPhaseIndicatorProps {
  phase: 'accumulation' | 'manipulation' | 'distribution' | 'unknown';
  confidence: number;
  phaseDuration?: number;
  nextPhaseProbability?: {
    accumulation: number;
    manipulation: number;
    distribution: number;
  };
  keyLevels?: {
    support: number;
    resistance: number;
  };
  className?: string;
  compact?: boolean;
}

export const AMDPhaseIndicator: React.FC<AMDPhaseIndicatorProps> = ({
  phase,
  confidence,
  phaseDuration,
  nextPhaseProbability,
  keyLevels,
  className = '',
  compact = false,
}) => {
  // Get phase configuration
  const getPhaseConfig = (currentPhase: string) => {
    switch (currentPhase.toLowerCase()) {
      case 'accumulation':
        return {
          color: 'blue',
          bgClass: 'bg-blue-500',
          bgLightClass: 'bg-blue-100',
          textClass: 'text-blue-800',
          darkBgClass: 'dark:bg-blue-900',
          darkTextClass: 'dark:text-blue-300',
          borderClass: 'border-blue-500',
          icon: ArrowTrendingUpIcon,
          label: 'Accumulation',
          description: 'Smart money accumulating positions',
        };
      case 'manipulation':
        return {
          color: 'amber',
          bgClass: 'bg-amber-500',
          bgLightClass: 'bg-amber-100',
          textClass: 'text-amber-800',
          darkBgClass: 'dark:bg-amber-900',
          darkTextClass: 'dark:text-amber-300',
          borderClass: 'border-amber-500',
          icon: ArrowsUpDownIcon,
          label: 'Manipulation',
          description: 'Price manipulation in progress',
        };
      case 'distribution':
        return {
          color: 'red',
          bgClass: 'bg-red-500',
          bgLightClass: 'bg-red-100',
          textClass: 'text-red-800',
          darkBgClass: 'dark:bg-red-900',
          darkTextClass: 'dark:text-red-300',
          borderClass: 'border-red-500',
          icon: ArrowTrendingDownIcon,
          label: 'Distribution',
          description: 'Smart money distributing positions',
        };
      default:
        return {
          color: 'gray',
          bgClass: 'bg-gray-500',
          bgLightClass: 'bg-gray-100',
          textClass: 'text-gray-800',
          darkBgClass: 'dark:bg-gray-900',
          darkTextClass: 'dark:text-gray-300',
          borderClass: 'border-gray-500',
          icon: SparklesIcon,
          label: 'Unknown',
          description: 'Phase detection in progress',
        };
    }
  };

  const config = getPhaseConfig(phase);
  const Icon = config.icon;

  // Get confidence color
  const getConfidenceColor = (conf: number) => {
    if (conf >= 0.7) return 'text-green-400';
    if (conf >= 0.5) return 'text-yellow-400';
    return 'text-red-400';
  };

  // Compact version for cards
  if (compact) {
    return (
      <div className={`flex items-center gap-2 ${className}`}>
        <div className={`p-1.5 rounded ${config.bgClass}`}>
          <Icon className="w-4 h-4 text-white" />
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <span className="text-sm font-semibold text-white">{config.label}</span>
            <span className={`text-xs font-bold ${getConfidenceColor(confidence)}`}>
              {Math.round(confidence * 100)}%
            </span>
          </div>
        </div>
      </div>
    );
  }

  // Full version for dashboard
  return (
    <div className={`card p-6 ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className={`p-3 rounded-lg ${config.bgClass}`}>
            <Icon className="w-6 h-6 text-white" />
          </div>
          <div>
            <h3 className="text-lg font-bold text-white">{config.label} Phase</h3>
            <p className="text-sm text-gray-400">{config.description}</p>
          </div>
        </div>
        <div className="text-right">
          <p className="text-xs text-gray-400">Confidence</p>
          <p className={`text-2xl font-bold ${getConfidenceColor(confidence)}`}>
            {Math.round(confidence * 100)}%
          </p>
        </div>
      </div>

      {/* Phase Duration */}
      {phaseDuration !== undefined && (
        <div className="mb-6 p-4 bg-gray-800 rounded-lg">
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-400">Phase Duration</span>
            <span className="text-lg font-bold text-white">{phaseDuration} bars</span>
          </div>
        </div>
      )}

      {/* Key Levels */}
      {keyLevels && (
        <div className="mb-6 space-y-3">
          <h4 className="text-sm font-medium text-gray-400">Key Levels</h4>
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-green-900/20 border border-green-800 rounded-lg">
              <p className="text-xs text-green-400 mb-1">Support</p>
              <p className="text-lg font-mono font-bold text-green-400">
                ${keyLevels.support.toFixed(2)}
              </p>
            </div>
            <div className="p-3 bg-red-900/20 border border-red-800 rounded-lg">
              <p className="text-xs text-red-400 mb-1">Resistance</p>
              <p className="text-lg font-mono font-bold text-red-400">
                ${keyLevels.resistance.toFixed(2)}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Next Phase Probability */}
      {nextPhaseProbability && (
        <div className="space-y-3">
          <h4 className="text-sm font-medium text-gray-400">Next Phase Probability</h4>
          <div className="space-y-2">
            {Object.entries(nextPhaseProbability).map(([phaseName, probability]) => {
              const phaseConfig = getPhaseConfig(phaseName);
              return (
                <div key={phaseName}>
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-xs text-gray-400 capitalize">{phaseName}</span>
                    <span className="text-xs font-bold text-white">
                      {Math.round(probability * 100)}%
                    </span>
                  </div>
                  <div className="h-2 bg-gray-700 rounded-full overflow-hidden">
                    <div
                      className={`h-full ${phaseConfig.bgClass} transition-all duration-300`}
                      style={{ width: `${probability * 100}%` }}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

export default AMDPhaseIndicator;
