import { Brain, TrendingUp, TrendingDown, Minus, AlertTriangle } from 'lucide-react';
import type { AIAnalysis } from '@/types';

interface AIAnalysisPanelProps {
  analysis: AIAnalysis | null;
  isLoading: boolean;
}

export default function AIAnalysisPanel({ analysis, isLoading }: AIAnalysisPanelProps) {
  if (isLoading) {
    return (
      <div className="card">
        <div className="flex items-center gap-3 mb-4">
          <Brain className="w-6 h-6 text-blue-500" />
          <h3 className="text-lg font-semibold">AI Analysis</h3>
        </div>
        <div className="flex items-center justify-center py-8">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
          <span className="ml-3 text-gray-400">Analyzing market conditions...</span>
        </div>
      </div>
    );
  }

  if (!analysis) {
    return (
      <div className="card">
        <div className="flex items-center gap-3 mb-4">
          <Brain className="w-6 h-6 text-blue-500" />
          <h3 className="text-lg font-semibold">AI Analysis</h3>
        </div>
        <p className="text-gray-400 text-center py-8">
          Click "AI Analysis" to get intelligent market insights
        </p>
      </div>
    );
  }

  const getRecommendationIcon = () => {
    switch (analysis.recommendation) {
      case 'BUY':
        return <TrendingUp className="w-6 h-6 text-green-500" />;
      case 'SELL':
        return <TrendingDown className="w-6 h-6 text-red-500" />;
      case 'HOLD':
        return <Minus className="w-6 h-6 text-yellow-500" />;
    }
  };

  const getRecommendationColor = () => {
    switch (analysis.recommendation) {
      case 'BUY':
        return 'text-green-500';
      case 'SELL':
        return 'text-red-500';
      case 'HOLD':
        return 'text-yellow-500';
    }
  };

  const getRiskColor = () => {
    switch (analysis.riskLevel) {
      case 'LOW':
        return 'bg-green-500/20 text-green-500';
      case 'MEDIUM':
        return 'bg-yellow-500/20 text-yellow-500';
      case 'HIGH':
        return 'bg-red-500/20 text-red-500';
    }
  };

  return (
    <div className="card">
      <div className="flex items-center gap-3 mb-4">
        <Brain className="w-6 h-6 text-blue-500" />
        <h3 className="text-lg font-semibold">AI Analysis</h3>
      </div>

      <div className="space-y-4">
        <div className="bg-dark-bg rounded-lg p-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-3">
              {getRecommendationIcon()}
              <div>
                <p className="text-sm text-gray-400">Recommendation</p>
                <p className={`text-xl font-bold ${getRecommendationColor()}`}>
                  {analysis.recommendation}
                </p>
              </div>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-400">Confidence</p>
              <p className="text-xl font-bold">{analysis.confidence}%</p>
            </div>
          </div>
          <div className="w-full bg-dark-surface rounded-full h-2">
            <div
              className="bg-blue-500 h-2 rounded-full transition-all"
              style={{ width: `${analysis.confidence}%` }}
            />
          </div>
        </div>

        <div className="bg-dark-bg rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle className="w-4 h-4 text-gray-400" />
            <p className="text-sm font-semibold">Risk Level</p>
          </div>
          <span className={`px-3 py-1 rounded-full text-sm font-medium ${getRiskColor()}`}>
            {analysis.riskLevel}
          </span>
        </div>

        <div className="bg-dark-bg rounded-lg p-4">
          <h4 className="font-semibold mb-2">Reasoning</h4>
          <p className="text-sm text-gray-300 leading-relaxed">{analysis.reasoning}</p>
        </div>

        {(analysis.supportResistance.support.length > 0 ||
          analysis.supportResistance.resistance.length > 0) && (
          <div className="bg-dark-bg rounded-lg p-4">
            <h4 className="font-semibold mb-3">Key Levels</h4>
            <div className="space-y-3">
              {analysis.supportResistance.resistance.length > 0 && (
                <div>
                  <p className="text-xs text-gray-400 mb-1">Resistance</p>
                  <div className="flex flex-wrap gap-2">
                    {analysis.supportResistance.resistance.map((level, idx) => (
                      <span
                        key={idx}
                        className="px-2 py-1 bg-red-500/20 text-red-500 rounded text-sm"
                      >
                        ${level.toFixed(2)}
                      </span>
                    ))}
                  </div>
                </div>
              )}
              {analysis.supportResistance.support.length > 0 && (
                <div>
                  <p className="text-xs text-gray-400 mb-1">Support</p>
                  <div className="flex flex-wrap gap-2">
                    {analysis.supportResistance.support.map((level, idx) => (
                      <span
                        key={idx}
                        className="px-2 py-1 bg-green-500/20 text-green-500 rounded text-sm"
                      >
                        ${level.toFixed(2)}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
