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-4">
              <div className="text-sm text-slate-200 bg-slate-700/30 p-2 rounded border border-slate-600/50">
                <strong>Summary:</strong> {aiAnalysis.analysis.summary}
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                {/* Long Term */}
                {aiAnalysis.analysis.longTerm && (
                  <div className="bg-slate-900/50 p-3 rounded-lg border border-slate-700/50">
                    <div className="text-xs font-bold text-slate-400 mb-2 uppercase tracking-wider">Long-Term Investor</div>
                    <div className="flex gap-2 mb-2">
                      <Badge variant={aiAnalysis.analysis.longTerm.assessment === 'BULLISH' ? 'success' : aiAnalysis.analysis.longTerm.assessment === 'BEARISH' ? 'destructive' : 'secondary'} className="text-[10px]">
                        {aiAnalysis.analysis.longTerm.assessment}
                      </Badge>
                      <Badge variant={aiAnalysis.analysis.longTerm.recommendation === 'ENTER' ? 'success' : aiAnalysis.analysis.longTerm.recommendation === 'WAIT' ? 'warning' : 'destructive'} className="text-[10px]">
                        {aiAnalysis.analysis.longTerm.recommendation}
                      </Badge>
                    </div>
                    <p className="text-xs text-slate-300 leading-relaxed">{aiAnalysis.analysis.longTerm.moatAndFundamentals}</p>
                  </div>
                )}

                {/* Swing Trade */}
                {aiAnalysis.analysis.swing && (
                  <div className="bg-slate-900/50 p-3 rounded-lg border border-slate-700/50">
                    <div className="text-xs font-bold text-slate-400 mb-2 uppercase tracking-wider">Swing Trader</div>
                    <div className="flex gap-2 mb-2">
                      <Badge variant={aiAnalysis.analysis.swing.assessment === 'BULLISH' ? 'success' : aiAnalysis.analysis.swing.assessment === 'BEARISH' ? 'destructive' : 'secondary'} className="text-[10px]">
                        {aiAnalysis.analysis.swing.assessment}
                      </Badge>
                      <Badge variant={aiAnalysis.analysis.swing.recommendation === 'ENTER' ? 'success' : aiAnalysis.analysis.swing.recommendation === 'WAIT' ? 'warning' : 'destructive'} className="text-[10px]">
                        {aiAnalysis.analysis.swing.recommendation}
                      </Badge>
                    </div>
                    <p className="text-xs text-slate-300 leading-relaxed">{aiAnalysis.analysis.swing.technicalSetup}</p>
                  </div>
                )}

                {/* Day Trade */}
                {aiAnalysis.analysis.dayTrade && (
                  <div className="bg-slate-900/50 p-3 rounded-lg border border-slate-700/50">
                    <div className="text-xs font-bold text-slate-400 mb-2 uppercase tracking-wider">Day Trader</div>
                    <div className="flex gap-2 mb-2">
                      <Badge variant={aiAnalysis.analysis.dayTrade.assessment === 'BULLISH' ? 'success' : aiAnalysis.analysis.dayTrade.assessment === 'BEARISH' ? 'destructive' : 'secondary'} className="text-[10px]">
                        {aiAnalysis.analysis.dayTrade.assessment}
                      </Badge>
                      <Badge variant={aiAnalysis.analysis.dayTrade.recommendation === 'ENTER' ? 'success' : aiAnalysis.analysis.dayTrade.recommendation === 'WAIT' ? 'warning' : 'destructive'} className="text-[10px]">
                        {aiAnalysis.analysis.dayTrade.recommendation}
                      </Badge>
                    </div>
                    <p className="text-xs text-slate-300 leading-relaxed">{aiAnalysis.analysis.dayTrade.volatilityAndLiquidity}</p>
                  </div>
                )}
              </div>
              
              <div className="flex items-center gap-4 text-xs text-slate-500 pt-2 border-t border-slate-700">
                {aiAnalysis.timestamp && (
                  <span>Generated: {new Date(aiAnalysis.timestamp).toLocaleTimeString()}</span>
                )}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

