import React from 'react';
import { StockAnalysis } from '../../types/financial';

interface AnalysisPanelProps {
  analysis: StockAnalysis;
}

export const AnalysisPanel: React.FC<AnalysisPanelProps> = ({ analysis }) => {
  const getSentimentColor = (sentiment: string) => {
    switch (sentiment) {
      case 'bullish':
        return 'text-[#00d26a] bg-[#00d26a]/10 border-[#00d26a]/20';
      case 'bearish':
        return 'text-[#ff4757] bg-[#ff4757]/10 border-[#ff4757]/20';
      default:
        return 'text-[#888888] bg-[#888888]/10 border-[#888888]/20';
    }
  };

  const getRecommendationColor = (rec: string) => {
    switch (rec) {
      case 'buy':
        return 'text-[#00d26a]';
      case 'sell':
        return 'text-[#ff4757]';
      default:
        return 'text-[#888888]';
    }
  };

  return (
    <div className="bg-[#111111] border border-[#2a2a2a] rounded-lg overflow-hidden my-4">
      {/* Header */}
      <div className="bg-[#1a1a1a] px-4 py-3 border-b border-[#2a2a2a]">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-mono font-bold text-[#e0e0e0]">{analysis.symbol}</h3>
            <span className={`text-[10px] font-mono uppercase tracking-wider px-2 py-1 rounded border ${getSentimentColor(analysis.sentiment)}`}>
              {analysis.sentiment}
            </span>
          </div>
          {analysis.targetPrice && (
            <div className="text-right">
              <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider">Target</div>
              <div className="text-xl font-mono font-bold text-[#e0e0e0]">${analysis.targetPrice.toFixed(0)}</div>
            </div>
          )}
        </div>
      </div>

      {/* Content */}
      <div className="p-4 space-y-4">
        {/* Summary */}
        <div>
          <h4 className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-2">Summary</h4>
          <p className="text-sm text-[#e0e0e0] leading-relaxed">{analysis.summary}</p>
        </div>

        {/* Recommendation */}
        <div className="bg-[#1a1a1a] rounded-lg p-3">
          <div className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-1">Recommendation</div>
          <div className={`text-2xl font-mono font-bold uppercase ${getRecommendationColor(analysis.recommendation)}`}>
            {analysis.recommendation}
          </div>
        </div>

        {/* Key Points */}
        {analysis.keyPoints.length > 0 && (
          <div>
            <h4 className="text-[10px] text-[#888888] font-mono uppercase tracking-wider mb-2">Key Points</h4>
            <ul className="space-y-1.5">
              {analysis.keyPoints.map((point, i) => (
                <li key={i} className="text-sm text-[#e0e0e0] flex items-start gap-2">
                  <span className="text-[#58a6ff] mt-0.5">•</span>
                  <span>{point}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Two Column: Risks & Opportunities */}
        <div className="grid grid-cols-2 gap-4">
          {/* Risks */}
          {analysis.risks.length > 0 && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <h4 className="text-[10px] text-[#ff4757] font-mono uppercase tracking-wider mb-2">Risks</h4>
              <ul className="space-y-1">
                {analysis.risks.map((risk, i) => (
                  <li key={i} className="text-xs text-[#e0e0e0] flex items-start gap-1.5">
                    <span className="text-[#ff4757]">⚠</span>
                    <span>{risk}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Opportunities */}
          {analysis.opportunities.length > 0 && (
            <div className="bg-[#1a1a1a] rounded p-3">
              <h4 className="text-[10px] text-[#00d26a] font-mono uppercase tracking-wider mb-2">Opportunities</h4>
              <ul className="space-y-1">
                {analysis.opportunities.map((opp, i) => (
                  <li key={i} className="text-xs text-[#e0e0e0] flex items-start gap-1.5">
                    <span className="text-[#00d26a]">✓</span>
                    <span>{opp}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
