import React, { useState } from 'react';
import { InvestigationCase } from '../../types/forensics';
import { 
  Bot, 
  Sparkles, 
  Send, 
  FileText, 
  Scale, 
  ShieldAlert, 
  RefreshCw, 
  Copy, 
  Check, 
  Lightbulb,
  Zap
} from 'lucide-react';
import { requestAiAnalysis } from '../../services/forensicApi';

interface AiAnalystTabProps {
  currentCase: InvestigationCase;
}

export const AiAnalystTab: React.FC<AiAnalystTabProps> = ({
  currentCase,
}) => {
  const [analysisText, setAnalysisText] = useState<string>('');
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [userQuery, setUserQuery] = useState<string>('');
  const [copied, setCopied] = useState<boolean>(false);
  const [activeAnalysisMode, setActiveAnalysisMode] = useState<string>('DEEP_DIVE');

  const runAnalysis = async (mode: 'DEEP_DIVE' | 'SAR_DRAFT' | 'STATUTORY_BRIEF' | 'CUSTOM', customPrompt?: string) => {
    setIsLoading(true);
    setActiveAnalysisMode(mode);
    try {
      const result = await requestAiAnalysis(currentCase, mode, customPrompt);
      setAnalysisText(result);
    } catch (err: any) {
      setAnalysisText(`Error executing AI analysis: ${err.message}`);
    } finally {
      setIsLoading(false);
    }
  };

  const handleCustomSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!userQuery.trim() || isLoading) return;
    runAnalysis('CUSTOM', userQuery);
    setUserQuery('');
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(analysisText);
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  return (
    <div className="space-y-4 p-4 text-slate-100">
      {/* Top Banner: Gemini Threat Intelligence Analyst */}
      <div className="bg-slate-900/80 border border-slate-800 rounded-xl p-4 shadow-md space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="p-1.5 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-md">
              <Bot className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="text-sm font-bold uppercase tracking-wider font-mono bg-gradient-to-r from-indigo-300 to-purple-300 bg-clip-text text-transparent">
                Sentinel-AI Threat Intelligence & Legal Synthesis Engine
              </h3>
              <p className="text-[11px] text-slate-400 font-mono">
                Powered by Google Gemini 3.7 • Autonomous Mens Rea Attribution & Forensic Dossier Synthesis
              </p>
            </div>
          </div>

          <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-indigo-950 text-indigo-300 border border-indigo-800 font-bold flex items-center gap-1">
            <Sparkles className="w-3 h-3 text-indigo-400" />
            AI SERVER ENGINE
          </span>
        </div>

        {/* Quick Action Presets */}
        <div className="flex flex-wrap gap-2 pt-2 border-t border-slate-800">
          <button
            onClick={() => runAnalysis('DEEP_DIVE')}
            disabled={isLoading}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
              activeAnalysisMode === 'DEEP_DIVE' && analysisText
                ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30'
                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700'
            }`}
          >
            <ShieldAlert className="w-3.5 h-3.5 text-indigo-400" />
            <span>Generate Deep Threat Dossier</span>
          </button>

          <button
            onClick={() => runAnalysis('SAR_DRAFT')}
            disabled={isLoading}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
              activeAnalysisMode === 'SAR_DRAFT' && analysisText
                ? 'bg-cyan-600 text-white shadow-md shadow-cyan-600/30'
                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700'
            }`}
          >
            <FileText className="w-3.5 h-3.5 text-cyan-400" />
            <span>Draft FinCEN SAR Narrative</span>
          </button>

          <button
            onClick={() => runAnalysis('STATUTORY_BRIEF')}
            disabled={isLoading}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
              activeAnalysisMode === 'STATUTORY_BRIEF' && analysisText
                ? 'bg-purple-600 text-white shadow-md shadow-purple-600/30'
                : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700'
            }`}
          >
            <Scale className="w-3.5 h-3.5 text-purple-400" />
            <span>Statutory & Constitutional Brief</span>
          </button>
        </div>
      </div>

      {/* Analysis Output Screen */}
      <div className="bg-slate-900/90 border border-slate-800 rounded-xl p-4 shadow-md space-y-3 min-h-[350px] flex flex-col justify-between">
        <div className="flex items-center justify-between border-b border-slate-800 pb-2">
          <div className="flex items-center gap-2 text-xs font-bold text-slate-200 font-mono">
            <Sparkles className="w-4 h-4 text-indigo-400" />
            <span>ANALYSIS DOSSIER & LEGAL INTELLIGENCE</span>
          </div>

          {analysisText && (
            <button
              onClick={copyToClipboard}
              className="flex items-center gap-1 text-slate-400 hover:text-slate-200 text-xs font-mono cursor-pointer px-2 py-1 rounded bg-slate-800 border border-slate-700"
            >
              {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
              <span>{copied ? 'Copied' : 'Copy Dossier'}</span>
            </button>
          )}
        </div>

        {/* Content Body */}
        <div className="flex-1 my-2">
          {isLoading ? (
            <div className="flex flex-col items-center justify-center h-64 space-y-3">
              <RefreshCw className="w-8 h-8 text-indigo-400 animate-spin" />
              <div className="text-xs font-mono text-slate-400 animate-pulse">
                Synthesizing network telemetry, laundering hops, and statutory matrices with Gemini 3.7...
              </div>
            </div>
          ) : !analysisText ? (
            <div className="flex flex-col items-center justify-center h-64 text-center p-6 space-y-2">
              <Lightbulb className="w-8 h-8 text-slate-600" />
              <p className="text-xs font-mono text-slate-400 max-w-md">
                Select an intelligence preset above (Deep Threat Dossier, SAR Draft, Statutory Brief) or ask a custom forensic question below.
              </p>
            </div>
          ) : (
            <div className="p-4 bg-slate-950 rounded-lg border border-slate-800/80 text-xs font-mono text-slate-200 whitespace-pre-wrap leading-relaxed max-h-[500px] overflow-y-auto">
              {analysisText}
            </div>
          )}
        </div>

        {/* Custom Question Interrogation Bar */}
        <form onSubmit={handleCustomSubmit} className="flex gap-2 pt-2 border-t border-slate-800">
          <input
            type="text"
            value={userQuery}
            onChange={(e) => setUserQuery(e.target.value)}
            placeholder="Ask the AI Analyst (e.g., 'What evidence supports 18 U.S.C. 2339B material support?', 'Summarize physical triangulation')..."
            className="flex-1 bg-slate-950 border border-slate-800 text-slate-200 text-xs font-mono px-3 py-2 rounded-lg focus:outline-none focus:border-indigo-500 transition-colors placeholder-slate-600"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={isLoading || !userQuery.trim()}
            className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-slate-800 disabled:text-slate-600 text-white px-4 py-2 rounded-lg font-bold font-mono text-xs transition-all flex items-center gap-1.5 cursor-pointer shadow-md shadow-indigo-600/20"
          >
            <Send className="w-3.5 h-3.5" />
            <span>INTERROGATE</span>
          </button>
        </form>
      </div>
    </div>
  );
};