import React, { useState } from 'react';
import { AnalysisResult, EmailDraft, Language, OutreachResponse } from '../types';
import { generateOutreachCampaign, translateEmailDrafts } from '../services/geminiService';
import { Upload, FileText, Sparkles, Copy, Check, Loader2, ArrowRight, CheckCircle2, Download, Languages, Plus, UserPlus } from 'lucide-react';

interface StepOutreachProps {
  company: AnalysisResult;
  language: Language;
  referenceUrl: string;
  onBack: () => void;
  knowledgeBase?: string; // New prop for pre-loaded context
}

export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, referenceUrl, onBack, knowledgeBase }) => {
  const [fileContent, setFileContent] = useState<string>(knowledgeBase || '');
  const [fileName, setFileName] = useState<string>(knowledgeBase ? 'Knowledge Base from Strategy Step' : '');
  
  const [isProcessing, setIsProcessing] = useState(false);
  const [isTranslating, setIsTranslating] = useState(false);
  const [isGeneratingSpecific, setIsGeneratingSpecific] = useState<string | null>(null); // Track which specific role is loading

  const [emails, setEmails] = useState<EmailDraft[]>([]);
  const [availableRoles, setAvailableRoles] = useState<string[]>([]); // Suggested roles not yet generated
  
  const [activeTab, setActiveTab] = useState(0);
  const [copied, setCopied] = useState(false);

  // If knowledgeBase prop changes, update state (useful if it loads late)
  React.useEffect(() => {
    if (knowledgeBase && !fileContent) {
        setFileContent(knowledgeBase);
        setFileName('Knowledge Base from Strategy Step');
    }
  }, [knowledgeBase]);

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setFileContent(event.target?.result as string);
        setFileName(file.name);
      };
      reader.readAsText(file);
    }
  };

  const handleGenerate = async () => {
    if (!fileContent) return;
    setIsProcessing(true);
    try {
      // Initial generation (Top 5 + Suggestions)
      const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl);
      setEmails(response.campaigns);
      setAvailableRoles(response.available_roles || []);
    } catch (e) {
      console.error(e);
      alert('Failed to generate campaign. Please try again.');
    } finally {
      setIsProcessing(false);
    }
  };

  const handleGenerateSpecific = async (role: string) => {
      if (!fileContent) return;
      setIsGeneratingSpecific(role);
      try {
          // Generate single specific campaign
          const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl, role);
          if (response.campaigns && response.campaigns.length > 0) {
              // Add new campaign to list
              setEmails(prev => [...prev, response.campaigns[0]]);
              // Remove from available roles
              setAvailableRoles(prev => prev.filter(r => r !== role));
              // Switch view to new campaign
              setActiveTab(emails.length);
          }
      } catch (e) {
          console.error("Failed to generate specific role", e);
          alert(`Failed to generate campaign for ${role}`);
      } finally {
          setIsGeneratingSpecific(null);
      }
  };

  const handleTranslate = async (targetLang: Language) => {
    if (emails.length === 0) return;
    setIsTranslating(true);
    try {
        const translated = await translateEmailDrafts(emails, targetLang);
        setEmails(translated);
    } catch (e) {
        console.error("Translation failed", e);
        alert("Translation failed.");
    } finally {
        setIsTranslating(false);
    }
  }

  const handleDownloadMD = () => {
    if (emails.length === 0) return;

    let content = `# Hyper-Personalized Campaign: ${company.companyName}\n\n`;
    content += `Generated by parcelLab Intel\n\n`;

    emails.forEach((email, index) => {
        content += `## Variant ${index + 1}: ${email.persona}\n\n`;
        content += `**Subject:** ${email.subject}\n\n`;
        content += `**Body:**\n\n${email.body}\n\n`;
        content += `**Analysis:**\n`;
        email.keyPoints.forEach(kp => content += `- ${kp}\n`);
        content += `\n---\n\n`;
    });

    const blob = new Blob([content], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `campaign_${company.companyName.replace(/\s+/g, '_')}_variants.md`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // Helper to render text with bold syntax **text**
  const renderBoldText = (text: string) => {
    const parts = text.split(/(\**.*?\**)/g);
    return parts.map((part, index) => {
      if (part.startsWith('**') && part.endsWith('**')) {
        return <strong key={index} className="font-bold text-slate-900">{part.slice(2, -2)}</strong>;
      }
      return <span key={index}>{part}</span>;
    });
  };

  if (emails.length > 0) {
    const activeEmail = emails[activeTab];
    return (
      <div className="max-w-6xl mx-auto mt-8 px-4 pb-24">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-2xl font-bold text-slate-900">Hyper-Personalized Campaign</h2>
            <p className="text-slate-600">Target: <span className="font-semibold text-indigo-600">{company.companyName}</span></p>
          </div>
          <button onClick={onBack} className="text-slate-500 hover:text-slate-800 font-medium text-sm">
            Close & Return
          </button>
        </div>

        {/* Toolbar */}
        <div className="flex items-center gap-4 mb-4 justify-end">
            <div className="flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm">
                <span className="text-xs font-bold text-slate-400 uppercase px-2 flex items-center gap-1">
                    <Languages size={14} /> Translate
                </span>
                <div className="h-4 w-px bg-slate-200 mx-1"></div>
                <button 
                    onClick={() => handleTranslate('de')} 
                    disabled={isTranslating}
                    className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
                >
                    DE
                </button>
                <button 
                    onClick={() => handleTranslate('en')}
                    disabled={isTranslating} 
                    className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
                >
                    EN
                </button>
                <button 
                    onClick={() => handleTranslate('fr')} 
                    disabled={isTranslating}
                    className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
                >
                    FR
                </button>
                {isTranslating && <Loader2 className="animate-spin ml-2 text-indigo-600" size={14} />}
            </div>

            <button 
                onClick={handleDownloadMD}
                className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-medium py-2 px-4 rounded-lg flex items-center gap-2 text-sm shadow-sm transition-colors"
            >
                <Download size={16} /> Download All Variants (.md)
            </button>
        </div>

        <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden flex flex-col md:flex-row min-h-[600px]">
          {/* Sidebar Tabs */}
          <div className="w-full md:w-80 bg-slate-50 border-r border-slate-200 flex flex-col">
            <div className="p-4 border-b border-slate-200">
                <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Generated Campaigns</h3>
            </div>
            
            {/* Generated List */}
            <div className="flex-1 overflow-y-auto p-2 flex flex-col gap-2">
                {emails.map((email, idx) => (
                <button
                    key={idx}
                    onClick={() => setActiveTab(idx)}
                    className={`text-left p-3 rounded-lg text-sm font-medium transition-all group ${activeTab === idx 
                        ? 'bg-white shadow-sm text-indigo-700 border border-indigo-100 ring-1 ring-indigo-500/20' 
                        : 'text-slate-600 hover:bg-slate-200/50'
                    }`}
                >
                    <div className="flex items-center justify-between">
                        <span className="truncate font-semibold">{email.persona}</span>
                        <span className="text-[10px] bg-slate-200 text-slate-500 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">#{idx+1}</span>
                    </div>
                    <div className="text-xs text-slate-400 mt-1 truncate font-normal opacity-80">{email.subject}</div>
                </button>
                ))}
            </div>

            {/* Suggestions List */}
            {availableRoles.length > 0 && (
                <div className="border-t border-slate-200 bg-slate-100/50 flex flex-col max-h-[40%]">
                    <div className="p-3 border-b border-slate-200 flex items-center gap-2">
                        <Sparkles size={14} className="text-indigo-500" />
                        <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Other Relevant Roles</h3>
                    </div>
                    <div className="overflow-y-auto p-2 gap-2 flex flex-col">
                        {availableRoles.map((role, i) => (
                            <div key={i} className="flex items-center justify-between p-2 bg-white border border-slate-200 rounded-lg shadow-sm">
                                <span className="text-xs font-medium text-slate-700 truncate max-w-[140px]" title={role}>{role}</span>
                                <button 
                                    onClick={() => handleGenerateSpecific(role)}
                                    disabled={!!isGeneratingSpecific}
                                    className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 p-1.5 rounded-md transition-colors disabled:opacity-50"
                                    title="Generate Campaign"
                                >
                                    {isGeneratingSpecific === role ? (
                                        <Loader2 size={14} className="animate-spin" />
                                    ) : (
                                        <Plus size={14} strokeWidth={3} />
                                    )}
                                </button>
                            </div>
                        ))}
                    </div>
                </div>
            )}
          </div>

          {/* Content Area */}
          <div className="flex-1 p-8 flex flex-col overflow-y-auto bg-slate-50/30">
            {activeEmail ? (
                <>
                    <div className="mb-6">
                    <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Subject Line</label>
                    <div className="text-lg font-semibold text-slate-800 bg-white p-4 rounded-lg border border-slate-200 select-text shadow-sm">
                        {activeEmail.subject}
                    </div>
                    </div>

                    <div className="flex-col mb-8">
                    <div className="flex justify-between items-end mb-1">
                        <label className="block text-xs font-bold text-slate-400 uppercase tracking-wider">Email Body</label>
                        <button 
                        onClick={() => copyToClipboard(`${activeEmail.subject}\n\n${activeEmail.body}`)}
                        className="flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-800 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-full transition-colors"
                        >
                        {copied ? <Check size={14} /> : <Copy size={14} />}
                        {copied ? "Copied" : "Copy Content"}
                        </button>
                    </div>
                    <div className="bg-white border border-slate-200 rounded-xl p-8 text-slate-700 leading-relaxed whitespace-pre-wrap font-serif text-base select-text shadow-sm">
                        {renderBoldText(activeEmail.body)}
                    </div>
                    </div>

                    {/* Checklist Section */}
                    {activeEmail.keyPoints && activeEmail.keyPoints.length > 0 && (
                        <div className="border-t border-slate-200 pt-6">
                            <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4 flex items-center gap-2">
                                <CheckCircle2 size={16} className="text-emerald-500" />
                                Persona & KPI Analysis
                            </h3>
                            <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                {activeEmail.keyPoints.map((point, i) => (
                                    <li key={i} className="flex items-start gap-3 bg-emerald-50/50 p-3 rounded-lg border border-emerald-100/50">
                                        <div className="mt-0.5 bg-emerald-100 text-emerald-600 rounded-full p-0.5">
                                            <Check size={12} strokeWidth={3} />
                                        </div>
                                        <span className="text-sm text-slate-700">{point}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}
                </>
            ) : (
                <div className="flex items-center justify-center h-full text-slate-400">Select a variant</div>
            )}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto mt-16 px-4">
       <div className="text-center mb-10">
        <div className="inline-block p-4 bg-indigo-100 rounded-full mb-4">
           <UserPlus className="text-indigo-600" size={32} />
        </div>
        <h2 className="text-3xl font-bold text-slate-900 mb-4">Create Outreach Campaign</h2>
        <p className="text-lg text-slate-600">
          Generating emails for <span className="font-bold text-slate-900">{company.companyName}</span>.
          <br/>Please upload your marketing knowledge base (Markdown/Text) to begin.
        </p>
      </div>

      <div className="bg-white rounded-2xl shadow-xl border border-slate-200 p-8">
        {!fileContent ? (
            <div className="border-2 border-dashed border-slate-300 rounded-xl p-12 text-center hover:border-indigo-400 hover:bg-slate-50 transition-all">
                <input 
                    type="file" 
                    accept=".md,.txt,.markdown"
                    onChange={handleFileUpload}
                    id="file-upload"
                    className="hidden"
                />
                <label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center gap-4">
                    <div className="bg-slate-100 p-4 rounded-full text-slate-400">
                        <Upload size={32} />
                    </div>
                    <div>
                        <p className="text-lg font-semibold text-slate-900">Click to upload Knowledge Base</p>
                        <p className="text-sm text-slate-500 mt-1">Supported files: .md, .txt</p>
                    </div>
                </label>
            </div>
        ) : (
            <div className="space-y-6">
                 <div className="flex items-center gap-4 p-4 bg-emerald-50 border border-emerald-100 rounded-xl">
                    <div className="bg-emerald-100 p-2 rounded-lg">
                        <FileText className="text-emerald-600" size={24} />
                    </div>
                    <div className="flex-1">
                        <p className="font-semibold text-emerald-900">Knowledge Base Loaded</p>
                        <p className="text-sm text-emerald-700">{fileName}</p>
                    </div>
                    <button 
                        onClick={() => { setFileContent(''); setFileName(''); }}
                        className="text-emerald-600 hover:text-emerald-800 text-sm font-medium"
                    >
                        Change
                    </button>
                 </div>

                 <button
                    onClick={handleGenerate}
                    disabled={isProcessing}
                    className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-bold py-4 rounded-xl shadow-lg shadow-indigo-600/20 transition-all transform active:scale-[0.99] flex items-center justify-center gap-2 text-lg"
                 >
                    {isProcessing ? (
                        <>
                            <Loader2 className="animate-spin" /> Identifying Roles & Drafting Campaigns...
                        </>
                    ) : (
                        <>
                            Generate Campaign <ArrowRight size={20} />
                        </>
                    )}
                 </button>
            </div>
        )}
      </div>
      <div className="mt-8 text-center">
          <button onClick={onBack} className="text-slate-500 hover:text-slate-800 font-medium">
            Cancel and go back
          </button>
      </div>
    </div>
  );
};