import { useState } from 'react';
import { Badge } from '../../ui/Badge';
import { Button } from '@/components/ui/button';
import { cn } from '@/utils/cn';
import { useAIAnalysis } from '@/hooks/useAIAnalysis';
import { CheckCircle2 } from 'lucide-react';

export function AnalysisSection({ row, hasPhase1Data, onPhase1Click }) {
  const [showAIAnalysis, setShowAIAnalysis] = useState(false);
  const { loading: aiLoading, error: aiError, analysis: aiAnalysis, fetchAnalysis } = useAIAnalysis();

  return (
    <div className="space-y-3 md:col-span-2 lg:col-span-3">
      <div className="flex items-center justify-between mb-3 gap-2">
        <h4 className="text-sm font-semibold text-slate-300">🔍 ANALYSIS</h4>
        <div className="flex gap-2">
          {/* Phase 1 Eligibility Check */}
          <Button
            variant="outline"
            size="sm"
            onClick={onPhase1Click}
            className={cn(
              "text-xs",
              hasPhase1Data 
                ? "bg-blue-500/20 border-blue-500/50 text-blue-400 hover:bg-blue-500/30"
                : "bg-slate-700/50 border-slate-600 text-slate-400"
            )}
            title={hasPhase1Data ? "Check Phase 1 Eligibility" : "Phase 1 data not available"}
          >
            <CheckCircle2 className="w-3 h-3 mr-1" />
            Phase 1
          </Button>
          
          {/* AI Analysis */}
          {!showAIAnalysis && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                setShowAIAnalysis(true);
                fetchAnalysis(row);
              }}
              disabled={aiLoading}
              className="text-xs"
            >
              {aiLoading ? 'Analyzing...' : 'AI Analysis'}
            </Button>
          )}
        </div>
      </div>
      
      {showAIAnalysis && (
        <div className="bg-slate-800/50 rounded-lg p-4 space-y-3">
          {aiLoading && (
            <div className="text-sm text-slate-400">Analyzing with Claude AI...</div>
          )}
          
          {aiError && (
            <div className="text-sm text-red-400">Error: {aiError}</div>
          )}
          
          {aiAnalysis && aiAnalysis.analysis && (
            <div className="space-y-3">
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <Badge 
                    variant={
                      aiAnalysis.analysis.assessment === 'BULLISH' ? 'success' :
                      aiAnalysis.analysis.assessment === 'BEARISH' ? 'destructive' : 'secondary'
                    }
                    className="text-xs"
                  >
                    {aiAnalysis.analysis.assessment}
                  </Badge>
                  <Badge 
                    variant={
                      aiAnalysis.analysis.recommendation === 'ENTER' ? 'success' :
                      aiAnalysis.analysis.recommendation === 'WAIT' ? 'warning' : 'destructive'
                    }
                    className="text-xs"
                  >
                    {aiAnalysis.analysis.recommendation}
                  </Badge>
                  <Badge variant="outline" className="text-xs">
                    {aiAnalysis.analysis.riskLevel} Risk
                  </Badge>
                </div>
                <p className="text-sm text-slate-200">{aiAnalysis.analysis.summary}</p>
              </div>
              
              {aiAnalysis.analysis.keyFactors && aiAnalysis.analysis.keyFactors.length > 0 && (
                <div>
                  <div className="text-xs text-slate-500 mb-1">Key Factors:</div>
                  <ul className="text-xs text-slate-300 space-y-1">
                    {aiAnalysis.analysis.keyFactors.map((factor, idx) => (
                      <li key={idx}>• {factor}</li>
                    ))}
                  </ul>
                </div>
              )}
              
              {aiAnalysis.analysis.reasoning && (
                <div>
                  <div className="text-xs text-slate-500 mb-1">Reasoning:</div>
                  <p className="text-xs text-slate-300">{aiAnalysis.analysis.reasoning}</p>
                </div>
              )}
              
              <div className="flex items-center gap-4 text-xs text-slate-400 pt-2 border-t border-slate-700">
                <span>Time Horizon: {aiAnalysis.analysis.timeHorizon}</span>
                {aiAnalysis.timestamp && (
                  <span>• {new Date(aiAnalysis.timestamp).toLocaleTimeString()}</span>
                )}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

