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-positive';
    case 'sell':
      return 'text-negative';
    default:
      return 'text-term-text-muted';
  }
};

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-term-text">{analysis.symbol}</span>
          <SentimentBadge sentiment={analysis.sentiment} />
        </div>
        {analysis.targetPrice && (
          <div className="text-right">
            <div className="text-[10px] font-mono uppercase tracking-wider text-term-text-muted">Target</div>
            <div className="text-xl font-mono font-bold text-term-text">
              ${analysis.targetPrice.toFixed(0)}
            </div>
          </div>
        )}
      </header>

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

      {/* Recommendation - Prominent but not boxed */}
      <section className="mb-6">
        <h3 className="text-label-xs mb-2 font-mono uppercase tracking-[0.18em] text-term-text-muted">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 mb-3 font-mono uppercase tracking-[0.18em] text-term-text-muted">Key Points</h3>
          <ul className="space-y-2">
            {analysis.keyPoints.map((point, i) => (
              <li key={i} className="text-body-sm flex items-start gap-2 text-term-text">
                <span className="mt-0.5 flex-shrink-0 text-info">•</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 mb-3 font-mono uppercase tracking-[0.18em] text-negative">Risks</h3>
              <ul className="space-y-2">
                {analysis.risks.map((risk, i) => (
                  <li key={i} className="text-body-xs flex items-start gap-2 text-term-text">
                    <span className="flex-shrink-0 text-negative">⚠</span>
                    <span>{risk}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

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