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

interface AnalysisPanelProps {
  analysis: StockAnalysis;
}

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

export const AnalysisPanel: React.FC<AnalysisPanelProps> = ({ analysis }) => {
  return (
    <div className="analysis-panel py-4 overflow-auto">
      {/* Header with sentiment inline */}
      <header className="flex items-start justify-between mb-6">
        <div className="flex items-center gap-3">
          <span className="text-2xl font-mono font-bold text-[#e0e0e0]">{analysis.symbol}</span>
          <SentimentBadge sentiment={analysis.sentiment} />
        </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>
        )}
      </header>

      {/* Summary - Typography-led */}
      <section className="mb-6">
        <h3 className="text-label-xs text-[#888888] font-mono uppercase tracking-[0.18em] mb-2">Summary</h3>
        <p className="text-body-sm text-[#d0d0d0] leading-relaxed">{analysis.summary}</p>
      </section>

      {/* Recommendation - Prominent but not boxed */}
      <section className="mb-6">
        <h3 className="text-label-xs text-[#888888] font-mono uppercase tracking-[0.18em] mb-2">Recommendation</h3>
        <div className={`text-display-xl font-mono font-bold uppercase ${getRecommendationColor(analysis.recommendation)}`}>
          {analysis.recommendation}
        </div>
      </section>

      {/* Key Points - Clean list */}
      {analysis.keyPoints.length > 0 && (
        <section className="mb-6">
          <h3 className="text-label-xs text-[#888888] font-mono uppercase tracking-[0.18em] mb-3">Key Points</h3>
          <ul className="space-y-2">
            {analysis.keyPoints.map((point, i) => (
              <li key={i} className="text-body-sm text-[#e0e0e0] flex items-start gap-2">
                <span className="text-[#58a6ff] mt-0.5 flex-shrink-0">•</span>
                <span>{point}</span>
              </li>
            ))}
          </ul>
        </section>
      )}

      {/* Risks & Opportunities - Side by side */}
      {(analysis.risks.length > 0 || analysis.opportunities.length > 0) && (
        <section className="grid grid-cols-2 gap-8">
          {/* Risks */}
          {analysis.risks.length > 0 && (
            <div>
              <h3 className="text-label-xs text-[#ff4757] font-mono uppercase tracking-[0.18em] mb-3">Risks</h3>
              <ul className="space-y-2">
                {analysis.risks.map((risk, i) => (
                  <li key={i} className="text-body-xs text-[#e0e0e0] flex items-start gap-2">
                    <span className="text-[#ff4757] flex-shrink-0">⚠</span>
                    <span>{risk}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Opportunities */}
          {analysis.opportunities.length > 0 && (
            <div>
              <h3 className="text-label-xs text-[#00d26a] font-mono uppercase tracking-[0.18em] mb-3">Opportunities</h3>
              <ul className="space-y-2">
                {analysis.opportunities.map((opp, i) => (
                  <li key={i} className="text-body-xs text-[#e0e0e0] flex items-start gap-2">
                    <span className="text-[#00d26a] flex-shrink-0">✓</span>
                    <span>{opp}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </section>
      )}
    </div>
  );
};
