"use client";

import { useState } from "react";
import type { AnalysisResult, CompanyProfile, Tender } from "../lib/types";
import { uploadDocument } from "../lib/api";

type Props = {
  tender: Tender | null;
  companyProfile: CompanyProfile;
  analysis: AnalysisResult | null;
  onAnalyze: (documentText?: string, models?: Record<string, string>) => Promise<void>;
  onBackToSearch: () => void;
};

const agents = [
  { id: "legal", name: "Dra. Legal", role: "Compliance", avatar: "⚖️", color: "text-amber-400", desc: "Verifies administrative bases and legal risks." },
  { id: "tech", name: "Ing. Tech", role: "Architecture", avatar: "👨‍💻", color: "text-cyan", desc: "Evaluates technical feasibility and stack requirements." },
  { id: "risk", name: "Sra. Estrategia", role: "ROI & Risk", avatar: "🕵️‍♀️", color: "text-purple-400", desc: "Calculates commercial impact and win probability." },
];

export default function AgentAnalysis({ tender, companyProfile, analysis, onAnalyze, onBackToSearch }: Props) {
  const [approved, setApproved] = useState(false);
  const [isRunning, setIsRunning] = useState(false);
  const [file, setFile] = useState<File | null>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [documentText, setDocumentText] = useState<string | "">("");
  const [agentModels, setAgentModels] = useState({
    legal: "Gemini 2.5 Flash",
    tech: "DeepSeek-V3.2 (Featherless)",
    risk: "Qwen-2.5 (Featherless)"
  });
  const [activeSettings, setActiveSettings] = useState<string | null>(null);


  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      setFile(event.target.files[0]);
    }
  };

  const handleAnalyzeClick = async () => {
    if (!approved || !tender) return;
    setIsRunning(true);
    let extractedText = documentText;
    
    try {
      if (file && !extractedText) {
        setIsUploading(true);
        const uploadResult = await uploadDocument(file);
        extractedText = uploadResult.text;
        setDocumentText(extractedText);
      }
      await onAnalyze(extractedText, agentModels);
    } catch (error) {
      console.error("Error during analysis flow:", error);
    } finally {
      setIsUploading(false);
      setIsRunning(false);
    }
  };

  if (!tender && !analysis) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] space-y-12 animate-in fade-in duration-1000">
        <div className="text-center space-y-4">
          <div className="inline-block p-4 rounded-3xl bg-white/5 border border-white/10 mb-6">
            <span className="text-5xl">🤖</span>
          </div>
          <h2 className="text-4xl font-bold text-white tracking-tight">Agent War Room</h2>
          <p className="text-slate-400 max-w-md mx-auto text-lg leading-relaxed">
            Our specialized agents are ready to analyze your next big opportunity. 
            Select a tender from <span className="text-purple-400 font-bold italic">Tender Search</span> to begin.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl w-full px-4">
          {agents.map(agent => (
            <div key={agent.id} className="glass-card rounded-3xl p-8 space-y-4 border border-white/5">
              <div className="text-4xl">{agent.avatar}</div>
              <div>
                <h4 className={`text-xs font-bold uppercase tracking-widest ${agent.color} mb-1`}>{agent.role}</h4>
                <h3 className="text-xl font-bold text-white mb-2">{agent.name}</h3>
                <p className="text-sm text-slate-500 leading-relaxed">{agent.desc}</p>
              </div>
            </div>
          ))}
        </div>
        
        <button 
          onClick={onBackToSearch}
          className="flex items-center gap-3 text-purple-400 hover:text-purple-300 transition-all active:scale-95 group"
        >
          <span className="text-xl transition-transform group-hover:-translate-x-1">←</span>
          <span className="text-sm font-bold uppercase tracking-widest underline decoration-purple-500/30 underline-offset-8">Back to Opportunities</span>
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
      {/* Navigation Header */}
      <div className="flex justify-start">
        <button 
          onClick={onBackToSearch}
          className="flex items-center gap-3 text-slate-500 hover:text-white transition-all group"
        >
          <span className="text-xl transition-transform group-hover:-translate-x-1">←</span>
          <span className="text-[10px] font-bold uppercase tracking-widest">Back to Opportunities</span>
        </button>
      </div>

      {/* Tender Header Card */}
      <div className="glass-card relative overflow-hidden rounded-3xl p-8 border border-white/10">
        <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-purple-500/10 blur-[100px]" />
        <div className="relative z-10 flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-3xl">
            <div className="flex items-center gap-3 mb-4">
              <span className="rounded-full bg-purple-500/20 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-purple-300 border border-purple-500/30">Active Opportunity</span>
              {tender?.name.toLowerCase().includes('sustentable') || tender?.description?.toLowerCase().includes('ambiental') ? (
                <span className="rounded-full bg-green-500/20 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-green-400 border border-green-500/30 animate-pulse">🌱 Sustainable / Compra Ágil</span>
              ) : null}
              <span className="text-xs text-slate-500 font-mono">{tender?.code}</span>
            </div>
            <h2 className="text-4xl font-bold text-white tracking-tight leading-tight mb-4">{tender?.name}</h2>
            <p className="text-slate-400 text-lg leading-relaxed">{tender?.buyer}</p>
            
            {tender && (
              <div className="mt-8 flex flex-wrap gap-4">
                <div className="rounded-2xl bg-white/5 p-4 border border-white/5">
                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1">Estimated Amount</p>
                   <p className="text-lg font-semibold text-white">
                      {tender.estimated_amount ? new Intl.NumberFormat("es-CL", { style: "currency", currency: "CLP", maximumFractionDigits: 0 }).format(tender.estimated_amount) : "Not disclosed"}
                   </p>
                </div>
                <div className="rounded-2xl bg-white/5 p-4 border border-white/5">
                   <p className="text-[10px] uppercase text-slate-500 font-bold mb-1">Closing Date</p>
                   <p className="text-lg font-semibold text-white">{tender.closing_date}</p>
                </div>
              </div>
            )}
          </div>

          <div className="flex flex-col gap-4 lg:w-80">
             <div className="glass-card rounded-2xl p-6 bg-white/5 border border-white/10">
                <h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 tracking-widest">Administrative Bases (PDF)</h4>
                
                {tender?.attachments && tender.attachments.length > 0 && (
                  <div className="mb-4 space-y-2">
                    {tender.attachments.map((att, i) => (
                      <div key={i} className="flex items-center gap-2 p-2 rounded-lg bg-purple-500/10 border border-purple-500/20 text-[10px] text-purple-300">
                        <span>📄</span>
                        <span className="truncate">{att.name}</span>
                      </div>
                    ))}
                  </div>
                )}

                <input type="file" accept=".pdf" onChange={handleFileChange} className="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-bold file:bg-white/10 file:text-purple-300 hover:file:bg-white/20 transition cursor-pointer" />
                {file && <p className="mt-2 text-[10px] text-green-400 font-bold">✓ Ready for extraction</p>}
             </div>
             
             <label className="flex items-center gap-3 p-4 rounded-2xl bg-white/5 cursor-pointer hover:bg-white/10 transition border border-white/5">
                <input type="checkbox" checked={approved} onChange={(e) => setApproved(e.target.checked)} className="h-5 w-5 rounded border-white/20 bg-black text-purple-500 outline-none accent-purple-500" />
                <span className="text-xs font-semibold text-slate-300">Authorize Agent War Room</span>
             </label>

             <button
               onClick={handleAnalyzeClick}
               disabled={!tender || !approved || isRunning || isUploading}
               className="w-full rounded-2xl premium-gradient py-5 font-bold text-white transition hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed shadow-xl shadow-purple-500/20 active:scale-[0.98]"
             >
               {isUploading ? "Extracting Text..." : isRunning ? "Agents Debating..." : "Launch Analysis Pipeline"}
             </button>
          </div>
        </div>
      </div>

      {/* Agents Row (Visual feedback & Configuration) */}
      <div className="grid gap-6 md:grid-cols-3">
        {agents.map((agent) => (
          <div key={agent.id} className="relative group">
            <div className={`glass-card rounded-3xl p-6 flex items-center gap-4 transition-all duration-700 ${isRunning ? 'ring-2 ring-purple-500/50 animate-pulse' : ''} ${analysis ? 'border-purple-500/30' : 'border-white/5'} hover:border-purple-500/20`}>
               <div className={`text-4xl ${isRunning ? 'animate-bounce' : ''}`}>{agent.avatar}</div>
               <div className="flex-1">
                  <div className={`text-[10px] font-bold uppercase tracking-widest ${agent.color}`}>{agent.role}</div>
                  <div className="text-sm font-bold text-white">{agent.name}</div>
                  <div className="text-[9px] text-slate-500 font-mono mt-1 flex items-center gap-1">
                    <span className="w-1 h-1 rounded-full bg-slate-500" />
                    {agentModels[agent.id as keyof typeof agentModels]}
                  </div>
               </div>
               <button 
                 onClick={() => setActiveSettings(activeSettings === agent.id ? null : agent.id)}
                 className="p-2 rounded-xl bg-white/5 text-slate-500 hover:bg-white/10 hover:text-white transition-all active:scale-90"
               >
                 ⚙️
               </button>
            </div>

            {/* Model Selector Popover */}
            {activeSettings === agent.id && (
              <div className="absolute top-full left-0 right-0 mt-2 z-50 glass-card rounded-2xl p-4 border border-purple-500/30 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
                <p className="text-[9px] font-black uppercase text-purple-400 mb-3 tracking-widest px-1">Select Engine</p>
                <div className="space-y-1">
                  {[
                    "Gemini 2.5 Flash", 
                    "DeepSeek-V3.2 (Featherless)", 
                    "Qwen-3-32B (Featherless)", 
                    "Gemma-4-31B (Featherless)",
                    "Llama-3.1-8B (Featherless)"
                  ].map(model => (
                    <button
                      key={model}
                      onClick={() => {
                        setAgentModels(prev => ({ ...prev, [agent.id]: model }));
                        setActiveSettings(null);
                      }}
                      className={`w-full text-left px-3 py-2 rounded-xl text-xs transition-all flex items-center justify-between ${agentModels[agent.id as keyof typeof agentModels] === model ? 'bg-purple-500/20 text-white border border-purple-500/30' : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'}`}
                    >
                      <span>{model}</span>
                      {agentModels[agent.id as keyof typeof agentModels] === model && <span>✓</span>}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Analysis Results View */}
      {analysis && (
        <div className="grid gap-8 lg:grid-cols-12 animate-in fade-in slide-in-from-bottom-8 duration-1000">
          <div className="lg:col-span-8 space-y-8">
             <div className="glass-card rounded-3xl p-10 bg-white/[0.02]">
                <div className="flex items-start justify-between mb-8">
                   <div>
                      <div className="text-[11px] font-bold uppercase tracking-[0.3em] text-purple-400 mb-2">Agent Consensus</div>
                      <h3 className="text-6xl font-black text-white">{analysis.fit_score}% <span className="text-2xl font-light text-slate-500">Fit Score</span></h3>
                   </div>
                   <div className="flex flex-col items-end gap-3">
                      <div className={`rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest shadow-lg ${analysis.decision === 'Recommended' ? 'bg-green-500/20 text-green-400 border border-green-500/30 shadow-green-500/10' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30 shadow-amber-500/10'}`}>
                         {analysis.decision}
                      </div>
                      <div className="flex gap-2">
                         <button 
                           onClick={() => window.print()}
                           className="px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-[10px] font-bold text-slate-400 hover:text-white hover:bg-white/10 transition uppercase tracking-[0.2em]"
                         >
                           Export PDF
                         </button>
                         <button 
                           onClick={() => alert("Report sent to executive committee via REW Secure Channel.")}
                           className="px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-xs text-slate-400 hover:text-white hover:bg-white/10 transition"
                           title="Share Analysis"
                         >
                           📧
                         </button>
                      </div>
                   </div>
                </div>
                <div className="prose prose-invert max-w-none">
                   <p className="text-slate-300 text-xl leading-relaxed italic border-l-4 border-purple-500 pl-8">{analysis.executive_summary}</p>
                </div>

                {/* Proposal Draft Section */}
                {analysis.proposal_draft && (
                  <div className="mt-12 space-y-6">
                    <div className="flex items-center justify-between border-b border-white/5 pb-4">
                       <h4 className="text-[11px] font-bold uppercase tracking-widest text-purple-400">AI Generated Proposal Draft</h4>
                       <button 
                         onClick={() => {
                           navigator.clipboard.writeText(analysis.proposal_draft);
                           alert("Proposal copied to clipboard!");
                         }}
                         className="text-[10px] font-bold uppercase text-slate-500 hover:text-white transition"
                       >
                         Copy to Clipboard 📋
                       </button>
                    </div>
                    <div className="p-8 rounded-3xl bg-white/[0.03] border border-white/10 font-serif text-slate-400 text-sm leading-relaxed whitespace-pre-wrap max-h-[500px] overflow-y-auto custom-scrollbar">
                       {analysis.proposal_draft}
                    </div>
                  </div>
                )}
             </div>


             <div className="grid gap-6 md:grid-cols-2">
                <div className="glass-card rounded-3xl p-8 bg-white/[0.01]">
                   <h4 className="text-[11px] font-bold uppercase tracking-widest text-amber-400 mb-6 flex items-center gap-2">
                     <span>⚠️</span> Legal Compliance Gaps
                   </h4>
                   <ul className="space-y-4">
                      {analysis.compliance_gaps.map((gap, i) => (
                        <li key={i} className="flex gap-4 text-sm text-slate-400 leading-relaxed">
                           <span className="text-amber-500 font-bold">•</span> {gap}
                        </li>
                      ))}
                   </ul>
                </div>
                <div className="glass-card rounded-3xl p-8 bg-white/[0.01]">
                   <h4 className="text-[11px] font-bold uppercase tracking-widest text-cyan mb-6 flex items-center gap-2">
                     <span>💎</span> Technical Requirements
                   </h4>
                   <ul className="space-y-4">
                      {analysis.key_requirements.map((req, i) => (
                        <li key={i} className="flex gap-4 text-sm text-slate-400 leading-relaxed">
                           <span className="text-cyan font-bold">▹</span> {req}
                        </li>
                      ))}
                   </ul>
                </div>
             </div>

             <div className="glass-card rounded-3xl p-10 bg-white/[0.01]">
                <h4 className="text-[11px] font-bold uppercase tracking-widest text-purple-400 mb-8 text-center">Neural Risk Matrix</h4>
                <div className="grid gap-6 md:grid-cols-2 mb-12">
                   {analysis.risks.map((risk, i) => (
                     <div key={i} className="group rounded-3xl bg-white/[0.02] p-6 border border-white/5 hover:border-purple-500/30 transition-all duration-300">
                        <div className="flex items-center justify-between mb-4">
                           <span className="font-bold text-white text-lg group-hover:text-purple-400 transition">{risk.title}</span>
                           <span className={`text-[9px] font-black px-3 py-1 rounded-full uppercase tracking-widest ${risk.severity === 'High' ? 'bg-red-500/20 text-red-500 border border-red-500/20' : 'bg-white/5 text-slate-500 border border-white/5'}`}>{risk.severity}</span>
                        </div>
                        <p className="text-xs text-slate-500 leading-relaxed">{risk.explanation}</p>
                     </div>
                   ))}
                </div>

                {analysis.strategic_roadmap && (
                  <div className="mt-8 pt-8 border-t border-white/5">
                    <h4 className="text-[11px] font-bold uppercase tracking-widest text-cyan mb-6 text-center">Winning Strategic Roadmap</h4>
                    <div className="p-8 rounded-3xl bg-cyan/5 border border-cyan/20 text-sm text-slate-300 leading-relaxed italic">
                      <div className="prose prose-invert prose-sm max-w-none">
                        {analysis.strategic_roadmap.split('\n').map((line, i) => (
                          <p key={i} className="mb-2">{line}</p>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
             </div>

          </div>

          <div className="lg:col-span-4">
             <div className="glass-card rounded-3xl p-8 bg-black/40 h-full sticky top-32">
                <div className="flex items-center gap-3 mb-8 border-b border-white/5 pb-6">
                   <div className="h-2 w-2 rounded-full bg-purple-500 animate-pulse shadow-[0_0_12px_rgba(168,85,247,0.8)]" />
                   <h4 className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Agent Intelligence Log</h4>
                </div>
                <div className="space-y-8 overflow-y-auto max-h-[700px] pr-2 custom-scrollbar">
                   {analysis.audit_log?.map((log, i) => (
                     <div key={i} className="flex gap-5 group">
                        <div className="flex flex-col items-center">
                           <div className="h-8 w-8 rounded-xl bg-white/5 flex items-center justify-center text-sm border border-white/10 group-hover:border-purple-500/50 transition-all duration-300 shadow-lg">🤖</div>
                           {i < (analysis.audit_log?.length ?? 0) - 1 && <div className="w-px flex-1 bg-gradient-to-b from-purple-500/40 to-transparent my-3" />}
                        </div>
                        <div className="pb-6">
                           <p className="text-[13px] text-slate-400 leading-relaxed group-hover:text-white transition-colors duration-300">{log}</p>
                        </div>
                     </div>
                   ))}
                </div>
             </div>
          </div>
        </div>
      )}
    </div>
  );
}