import React, { useState, useEffect, useRef } from 'react';
import { Layout } from './components/Layout';
import { Phase, AppState, Phase1Data, Phase2Data, Phase3Data, Phase4Data, Phase6Data, Language, Theme } from './types';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { AlertTriangle, ArrowRight, ArrowLeft, Check, Database, Globe, Search, ShieldAlert, Cpu, Building2, UserCircle, Briefcase, Zap, Terminal, Target, Crosshair, Loader2, Plus, X, Download, ShieldCheck, Image as ImageIcon, Copy, Sparkles, Upload, CheckCircle, PenTool, Eraser, Undo, Save, RefreshCw, Pencil, Trash2, History } from 'lucide-react';

const TRANSLATIONS = {
  en: {
    phase1: 'Product & Constraints',
    phase2: 'ICP Discovery',
    phase3: 'Whale Hunting',
    phase4: 'Strategy Matrix',
    phase5: 'Asset Generation',
    phase6: 'Sales Enablement',
    initTitle: 'Initialize New Product Sequence',
    inputLabel: 'Product URL or Technical Specification',
    inputPlaceholder: 'Paste raw technical data, brochure text, or product URL here...', 
    startBtn: 'Start Analysis',
    backBtn: 'Back',
    processing: 'Processing...', 
    features: 'Detected Features',
    constraints: 'Hard Constraints',
    conflictTitle: 'Portfolio Conflict Detected',
    conflictPass: 'Portfolio Conflict Check Passed: Unique Value Proposition Identified.',
    confirmICP: 'Confirm & Proceed to ICP',
    targetId: 'Target Identification',
    dataProxies: 'Data Proxies (Digital Footprints)',
    method: 'Method',
    huntWhales: 'Lock Targets & Hunt Whales',
    region: 'Region: DACH (Germany, Austria, Switzerland)',
    whales: 'Key Accounts (Whales)',
    roles: 'Buying Center Roles',
    confirmStrat: 'Confirm Accounts & Strategize',
    stratAngles: 'Strategic Angles',
    segment: 'Segment',
    pain: 'Pain Point',
    angle: 'Our Angle',
    diff: 'Differentiation',
    writeCopy: 'Generate Assets',
    genAssets: 'Generated Strategy Report & Assets',
    complete: 'Process Complete. Strategy locked.',
    restart: 'Start New Session',
    addPlaceholder: 'Add item...',
    download: 'Download Full Report (.md)',
    downloadAsset: 'Download Asset',
    toPhase6: 'Proceed to Sales Enablement (Phase 6)',
    phase6Title: 'Sales Enablement & Visuals',
    battlecards: 'Kill-Critique Battlecards',
    visuals: 'Visual Briefings (Midjourney Prompts)',
    objection: 'Objection',
    response: 'Response Script',
    copyPrompt: 'Copy Prompt',
    copied: 'Copied!',
    genImage: 'Generate Concept',
    editImage: 'Edit & Iterate',
    regenerateSketch: 'Regenerate with Sketch',
    cancelEdit: 'Cancel Edit',
    generating: 'Generating...', 
    uploadImage: 'Product Reference Images',
    uploadHint: 'Upload multiple photos (Front, Side, Detail) for better 3D understanding.',
    imageUploaded: 'Reference Images',
    canvasClear: 'Clear',
    canvasMode: 'Sketch Mode',
    addName: 'Name...',
    addRationale: 'Rationale...',
    addTarget: 'Target criteria...',
    addMethod: 'Method...',
    addAccount: 'Account name...',
    addRole: 'Job title...',
    save: 'Save Project',
    load: 'Load Project',
    history: 'Project History',
    noProjects: 'No saved projects found.',
    delete: 'Delete',
    loading: [
      "Initializing quantum analysis engines...",
      "Parsing raw technical specifications...",
      "Simulating physical constraints & boundary conditions...",
      "Cross-referencing internal product matrix...",
      "Detecting potential portfolio conflicts...",
      "Synthesizing GTM parameters..."
    ]
  },
  de: {
    phase1: 'Produkt & Constraints',
    phase2: 'ICP Entdeckung',
    phase3: 'Whale Hunting',
    phase4: 'Strategie-Matrix',
    phase5: 'Asset Generierung',
    phase6: 'Sales Enablement',
    initTitle: 'Neue Produktsequenz initialisieren',
    inputLabel: 'Produkt-URL oder Technische Spezifikation',
    inputPlaceholder: 'Füge hier rohe technische Daten, Broschürentexte oder Produkt-URL ein...', 
    startBtn: 'Analyse starten',
    backBtn: 'Zurück',
    processing: 'Verarbeite...', 
    features: 'Erkannte Features',
    constraints: 'Harte Constraints',
    conflictTitle: 'Portfolio-Konflikt erkannt',
    conflictPass: 'Portfolio-Konfliktprüfung bestanden: Alleinstellungsmerkmal identifiziert.',
    confirmICP: 'Bestätigen & weiter zu ICP',
    targetId: 'Zielgruppen-Identifikation',
    dataProxies: 'Data Proxies (Digitale Spuren)',
    method: 'Methode',
    huntWhales: 'Ziele fixieren & Whales jagen',
    region: 'Region: DACH (Deutschland, Österreich, Schweiz)',
    whales: 'Key Accounts (Whales)',
    roles: 'Buying Center Rollen',
    confirmStrat: 'Accounts bestätigen & Strategie',
    stratAngles: 'Strategische Angles',
    segment: 'Segment',
    pain: 'Pain Point',
    angle: 'Unser Angle',
    diff: 'Differenzierung',
    writeCopy: 'Report & Assets generieren',
    genAssets: 'Generierter Strategie-Report & Assets',
    complete: 'Prozess abgeschlossen. Strategie fixiert.',
    restart: 'Neue Session starten',
    addPlaceholder: 'Punkt hinzufügen...',
    download: 'Gesamtbericht herunterladen (.md)',
    downloadAsset: 'Bild speichern',
    toPhase6: 'Weiter zu Sales Enablement (Phase 6)',
    phase6Title: 'Sales Enablement & Visuals',
    battlecards: 'Kill-Critique Battlecards',
    visuals: 'Visual Briefings (Midjourney Prompts)',
    objection: 'Einwand',
    response: 'Antwort-Skript',
    copyPrompt: 'Prompt kopieren',
    copied: 'Kopiert!',
    genImage: 'Konzept erstellen',
    editImage: 'Zeichnen & Iterieren',
    regenerateSketch: 'Mit Skizze neu generieren',
    cancelEdit: 'Abbrechen',
    generating: 'Generiere...', 
    uploadImage: 'Produkt-Referenzbilder',
    uploadHint: 'Lade mehrere Fotos hoch (Front, Seite, Detail), um das 3D-Verständnis zu verbessern.',
    imageUploaded: 'Referenzbilder',
    canvasClear: 'Leeren',
    canvasMode: 'Zeichenmodus',
    addName: 'Name...',
    addRationale: 'Begründung...',
    addTarget: 'Zielkriterium...',
    addMethod: 'Suchmethode...',
    addAccount: 'Firmenname...',
    addRole: 'Jobtitel...',
    save: 'Projekt speichern',
    load: 'Projekt laden',
    history: 'Projekt Historie',
    noProjects: 'Keine gespeicherten Projekte gefunden.',
    delete: 'Löschen',
    loading: [
      "Initialisiere Quanten-Analyse-Engines...",
      "Analysiere technische Spezifikationen...",
      "Simuliere physikalische Constraints...",
      "Prüfe interne Produkt-Matrix...",
      "Erkenne potenzielle Portfolio-Konflikte...",
      "Synthetisiere GTM-Parameter..."
    ]
  }
};

const App: React.FC = () => {
  const [state, setState] = useState<AppState>({
    currentPhase: Phase.Input,
    isLoading: false,
    history: [],
    productInput: '',
    productImages: [],
    language: 'de',
    theme: 'light'
  });
  
  const [language, setLanguage] = useState<Language>('de');
  const [theme, setTheme] = useState<Theme>('light');
  const [error, setError] = useState<string | null>(null);
  const [loadingMessage, setLoadingMessage] = useState("");
  
  // History / DB State
  const [showHistory, setShowHistory] = useState(false);
  const [savedProjects, setSavedProjects] = useState<any[]>([]);

  // Input State
  const [newFeatureInput, setNewFeatureInput] = useState("");
  const [newConstraintInput, setNewConstraintInput] = useState("");
  const [newICPName, setNewICPName] = useState("");
  const [newICPRationale, setNewICPRationale] = useState("");
  const [newProxyTarget, setNewProxyTarget] = useState("");
  const [newProxyMethod, setNewProxyMethod] = useState("");
  const [newAccountInputs, setNewAccountInputs] = useState<Record<number, string>>({});
  const [newRoleInput, setNewRoleInput] = useState("");
  const [copiedPromptIndex, setCopiedPromptIndex] = useState<number | null>(null);
  
  // Image Gen State
  const [generatingImages, setGeneratingImages] = useState<Record<number, boolean>>({});
  const [generatedImages, setGeneratedImages] = useState<Record<number, string>>({});
  const [editingIndex, setEditingIndex] = useState<number | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [brushColor, setBrushColor] = useState('#ef4444');
  const [brushSize, setBrushSize] = useState(4);

  const labels = TRANSLATIONS[language];

  useEffect(() => {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [theme]);

  useEffect(() => {
    if (!state.isLoading) return;
    const messages = labels.loading;
    let i = 0;
    setLoadingMessage(messages[0]);
    const interval = setInterval(() => {
      i = (i + 1) % messages.length;
      setLoadingMessage(messages[i]);
    }, 2500);
    return () => clearInterval(interval);
  }, [state.isLoading, labels.loading]);

  useEffect(() => {
      if (editingIndex !== null && canvasRef.current && generatedImages[editingIndex]) {
          const canvas = canvasRef.current;
          const ctx = canvas.getContext('2d');
          const img = new Image();
          img.crossOrigin = "anonymous";
          img.onload = () => {
              canvas.width = img.width;
              canvas.height = img.height;
              ctx?.drawImage(img, 0, 0);
          };
          img.src = generatedImages[editingIndex];
      }
  }, [editingIndex, generatedImages]);

  const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');
  const goBack = () => {
      if (state.currentPhase > Phase.Input) {
          setState(s => ({ ...s, currentPhase: s.currentPhase - 1 }));
      }
  };

  const getMaxAllowedPhase = (): Phase => {
      if (state.phase6Result) return Phase.SalesEnablement;
      if (state.phase5Result) return Phase.AssetGeneration;
      if (state.phase4Result) return Phase.Strategy;
      if (state.phase3Result) return Phase.WhaleHunting;
      if (state.phase2Result) return Phase.ICPDiscovery;
      if (state.phase1Result) return Phase.ProductAnalysis;
      return Phase.Input;
  };

  const handlePhaseSelect = (phase: Phase) => {
      if (state.isLoading) return;
      setState(s => ({ ...s, currentPhase: phase }));
  };

  const callBackend = async (mode: string, data: any) => {
    const response = await fetch('./api/gtm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mode, data })
    });
    if (!response.ok) {
        const err = await response.json();
        throw new Error(err.details || 'Backend error');
    }
    return await response.json();
  };

  // --- DB Handlers ---
  const fetchProjects = async () => {
      try {
          const projects = await callBackend('list_projects', {});
          setSavedProjects(projects);
      } catch (e) {
          console.error("Failed to list projects", e);
      }
  };

  const handleSaveProject = async () => {
      try {
          // Clone state to avoid mutation issues
          const projectData = { ...state, language, theme }; 
          await callBackend('save_project', projectData);
          // Optional: Show success notification
          const btn = document.getElementById('save-btn');
          if(btn) {
              const originalText = btn.innerHTML;
              btn.innerHTML = `<span class='flex items-center gap-2'><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> Saved!</span>`;
              setTimeout(() => btn.innerHTML = originalText, 2000);
          }
      } catch (e: any) {
          setError("Save failed: " + e.message);
      }
  };

  const handleLoadProject = async (id: string) => {
      try {
          const project = await callBackend('load_project', { id });
          if (project) {
              setState(project);
              if (project.language) setLanguage(project.language);
              if (project.theme) setTheme(project.theme);
              setShowHistory(false);
          }
      } catch (e: any) {
          setError("Load failed: " + e.message);
      }
  };

  const handleDeleteProject = async (id: string, e: React.MouseEvent) => {
      e.stopPropagation();
      if (!confirm("Are you sure you want to delete this project?")) return;
      try {
          await callBackend('delete_project', { id });
          setSavedProjects(prev => prev.filter(p => p.id !== id));
      } catch (e: any) {
          setError("Delete failed: " + e.message);
      }
  };

  const toggleHistory = () => {
      if (!showHistory) {
          fetchProjects();
      }
      setShowHistory(!showHistory);
  };

  // --- Phase Handlers ---

  const handlePhase1Submit = async () => {
    if (!state.productInput.trim()) return;
    setState(s => ({ ...s, isLoading: true }));
    setError(null);
    try {
      const result = await callBackend('analyze_product', { productInput: state.productInput, language });
      setState(s => ({ ...s, currentPhase: Phase.ProductAnalysis, phase1Result: result, isLoading: false }));
    } catch (e: any) {
      setError(e.message || "Analysis failed");
      setState(s => ({ ...s, isLoading: false }));
    }
  };

  const handlePhase2Submit = async () => {
    if (!state.phase1Result) return;
    setState(s => ({ ...s, isLoading: true }));
    try {
      const result = await callBackend('discover_icps', { phase1Result: state.phase1Result, language });
      setState(s => ({ ...s, currentPhase: Phase.ICPDiscovery, phase2Result: result, isLoading: false }));
    } catch (e: any) {
      setError(e.message);
      setState(s => ({ ...s, isLoading: false }));
    }
  };

  const handlePhase3Submit = async () => {
    if (!state.phase2Result) return;
    setState(s => ({ ...s, isLoading: true }));
    try {
      const result = await callBackend('hunt_whales', { phase2Result: state.phase2Result, language });
      setState(s => ({ ...s, currentPhase: Phase.WhaleHunting, phase3Result: result, isLoading: false }));
    } catch (e: any) {
      setError(e.message);
      setState(s => ({ ...s, isLoading: false }));
    }
  };

  const handlePhase4Submit = async () => {
    if (!state.phase3Result || !state.phase1Result) return;
    setState(s => ({ ...s, isLoading: true }));
    try {
      const result = await callBackend('develop_strategy', { phase3Result: state.phase3Result, phase1Result: state.phase1Result, language });
      setState(s => ({ ...s, currentPhase: Phase.Strategy, phase4Result: result, isLoading: false }));
    } catch (e: any) {
      setError(e.message);
      setState(s => ({ ...s, isLoading: false }));
    }
  };

  const handlePhase5Submit = async () => {
    if (!state.phase4Result || !state.phase3Result || !state.phase2Result || !state.phase1Result) return;
    setState(s => ({ ...s, isLoading: true }));
    try {
      const result = await callBackend('generate_assets', { 
          phase4Result: state.phase4Result, 
          phase3Result: state.phase3Result, 
          phase2Result: state.phase2Result, 
          phase1Result: state.phase1Result, 
          language 
      });
      setState(s => ({ ...s, currentPhase: Phase.AssetGeneration, phase5Result: result, isLoading: false }));
    } catch (e: any) {
      setError(e.message);
      setState(s => ({ ...s, isLoading: false }));
    }
  };

  const handlePhase6Submit = async () => {
      if (!state.phase4Result || !state.phase3Result || !state.phase1Result) return;
      setState(s => ({ ...s, isLoading: true }));
      try {
          const result = await callBackend('generate_sales_enablement', {
              phase4Result: state.phase4Result,
              phase3Result: state.phase3Result,
              phase1Result: state.phase1Result,
              language
          });
          setState(s => ({ ...s, currentPhase: Phase.SalesEnablement, phase6Result: result, isLoading: false }));
      } catch (e: any) {
          setError(e.message);
          setState(s => ({ ...s, isLoading: false }));
      }
  };

  const downloadReport = () => {
    if (!state.phase5Result || !state.phase6Result) return;
    let fullReport = state.phase5Result;
    fullReport += `\n\n# SALES ENABLEMENT & VISUALS (PHASE 6)\n\n`;
    fullReport += `## Kill-Critique Battlecards\n\n`;
    state.phase6Result.battlecards.forEach(card => {
        fullReport += `### Persona: ${card.persona}\n`;
        fullReport += `> **Objection:** "${card.objection}"\n\n`;
        fullReport += `**Response:** ${card.responseScript}\n\n---\n\n`;
    });
    fullReport += `## Visual Briefings (Prompts)\n\n`;
    state.phase6Result.visualPrompts.forEach(prompt => {
        fullReport += `### ${prompt.title}\n`;
        fullReport += `*Context: ${prompt.context}*\n\n`;
        fullReport += `\
\
${prompt.prompt}\n\
\
`;
    });
    const element = document.createElement("a");
    const file = new Blob([fullReport], {type: 'text/markdown'});
    element.href = URL.createObjectURL(file);
    element.download = `roboplanet-gtm-strategy-${new Date().toISOString().slice(0,10)}.md`;
    document.body.appendChild(element); 
    element.click();
    document.body.removeChild(element);
  };

  const downloadAsset = (dataUrl: string, index: number) => {
    const element = document.createElement("a");
    element.href = dataUrl;
    element.download = `roboplanet-visual-${index + 1}.png`;
    document.body.appendChild(element); 
    element.click();
    document.body.removeChild(element);
  };

  const copyToClipboard = (text: string, index: number) => {
    navigator.clipboard.writeText(text);
    setCopiedPromptIndex(index);
    setTimeout(() => setCopiedPromptIndex(null), 2000);
  };

  const handleGenerateImage = async (prompt: string, index: number, overrideReference?: string) => {
    setError("Bildgenerierung ist in der lokalen Version aktuell deaktiviert. Bitte nutzen Sie die Prompts direkt in Midjourney/DALL-E.");
  };

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      Array.from(files).forEach(file => {
          const reader = new FileReader();
          reader.onloadend = () => {
            if (reader.result) {
                setState(s => ({ ...s, productImages: [...s.productImages, reader.result as string] }));
            }
          };
          reader.readAsDataURL(file);
      });
    }
  };

  const removeUploadedImage = (index: number) => {
      setState(s => ({ ...s, productImages: s.productImages.filter((_, i) => i !== index) }));
  };

  const startDrawing = (e: any) => {
      setIsDrawing(true);
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;
      const rect = canvas.getBoundingClientRect();
      const scaleX = canvas.width / rect.width;
      const scaleY = canvas.height / rect.height;
      const x = (('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left) * scaleX;
      const y = (('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top) * scaleY;
      ctx.beginPath();
      ctx.moveTo(x, y);
  };

  const draw = (e: any) => {
      if (!isDrawing) return;
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;
      const rect = canvas.getBoundingClientRect();
      const scaleX = canvas.width / rect.width;
      const scaleY = canvas.height / rect.height;
      const x = (('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left) * scaleX;
      const y = (('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top) * scaleY;
      ctx.lineTo(x, y);
      ctx.strokeStyle = brushColor;
      ctx.lineWidth = brushSize;
      ctx.lineCap = 'round';
      ctx.stroke();
  };

  const stopDrawing = () => setIsDrawing(false);

  const clearCanvas = () => {
      const canvas = canvasRef.current;
      if (canvas && editingIndex !== null) {
          const ctx = canvas.getContext('2d');
          if (ctx) {
              const img = new Image();
              img.onload = () => {
                  ctx.clearRect(0,0, canvas.width, canvas.height);
                  ctx.drawImage(img, 0, 0);
              }
              img.src = generatedImages[editingIndex];
          }
      }
  };

  const handleRegenerateWithSketch = (index: number, prompt: string) => {
      const canvas = canvasRef.current;
      if (canvas) {
          const sketchData = canvas.toDataURL('image/png');
          handleGenerateImage(prompt, index, sketchData);
      }
  };

  // --- List Mutation Handlers ---
  const addFeature = () => {
    if (!newFeatureInput.trim() || !state.phase1Result) return;
    setState(s => ({
        ...s,
        phase1Result: s.phase1Result ? { ...s.phase1Result, features: [...s.phase1Result.features, newFeatureInput.trim()] } : undefined
    }));
    setNewFeatureInput("");
  };
  const removeFeature = (index: number) => setState(s => ({
    ...s,
    phase1Result: s.phase1Result ? { ...s.phase1Result, features: s.phase1Result.features.filter((_, i) => i !== index) } : undefined
  }));
  const addConstraint = () => {
    if (!newConstraintInput.trim() || !state.phase1Result) return;
    setState(s => ({
        ...s,
        phase1Result: s.phase1Result ? { ...s.phase1Result, constraints: [...s.phase1Result.constraints, newConstraintInput.trim()] } : undefined
    }));
    setNewConstraintInput("");
  };
  const removeConstraint = (index: number) => setState(s => ({
    ...s,
    phase1Result: s.phase1Result ? { ...s.phase1Result, constraints: s.phase1Result.constraints.filter((_, i) => i !== index) } : undefined
  }));
  const addICP = () => {
    if (!newICPName.trim() || !newICPRationale.trim() || !state.phase2Result) return;
    setState(s => ({
        ...s,
        phase2Result: s.phase2Result ? { ...s.phase2Result, icps: [...s.phase2Result.icps, { name: newICPName.trim(), rationale: newICPRationale.trim() }] } : undefined
    }));
    setNewICPName("");
    setNewICPRationale("");
  };
  const removeICP = (index: number) => setState(s => ({
    ...s,
    phase2Result: s.phase2Result ? { ...s.phase2Result, icps: s.phase2Result.icps.filter((_, i) => i !== index) } : undefined
  }));
  const addProxy = () => {
    if (!newProxyTarget.trim() || !newProxyMethod.trim() || !state.phase2Result) return;
    setState(s => ({
        ...s,
        phase2Result: s.phase2Result ? { ...s.phase2Result, dataProxies: [...s.phase2Result.dataProxies, { target: newProxyTarget.trim(), method: newProxyMethod.trim() }] } : undefined
    }));
    setNewProxyTarget("");
    setNewProxyMethod("");
  };
  const removeProxy = (index: number) => setState(s => ({
    ...s,
    phase2Result: s.phase2Result ? { ...s.phase2Result, dataProxies: s.phase2Result.dataProxies.filter((_, i) => i !== index) } : undefined
  }));
  const addAccount = (groupIndex: number) => {
    const val = newAccountInputs[groupIndex];
    if (!val?.trim() || !state.phase3Result) return;
    const newWhales = [...state.phase3Result.whales];
    newWhales[groupIndex] = { ...newWhales[groupIndex], accounts: [...newWhales[groupIndex].accounts, val.trim()] };
    setState(s => ({ ...s, phase3Result: s.phase3Result ? { ...s.phase3Result, whales: newWhales } : undefined }));
    setNewAccountInputs(prev => ({...prev, [groupIndex]: ""}));
  };
  const removeAccount = (groupIndex: number, accountIndex: number) => {
    if (!state.phase3Result) return;
    const newWhales = [...state.phase3Result.whales];
    newWhales[groupIndex] = { ...newWhales[groupIndex], accounts: newWhales[groupIndex].accounts.filter((_, i) => i !== accountIndex) };
    setState(s => ({ ...s, phase3Result: s.phase3Result ? { ...s.phase3Result, whales: newWhales } : undefined }));
  };
  const addRole = () => {
    if (!newRoleInput.trim() || !state.phase3Result) return;
    setState(s => ({ ...s, phase3Result: s.phase3Result ? { ...s.phase3Result, roles: [...s.phase3Result.roles, newRoleInput.trim()] } : undefined }));
    setNewRoleInput("");
  };
  const removeRole = (index: number) => setState(s => ({ ...s, phase3Result: s.phase3Result ? { ...s.phase3Result, roles: s.phase3Result.roles.filter((_, i) => i !== index) } : undefined }));

  // --- Render Functions ---
  const renderInputPhase = () => (
    <div className="flex flex-col items-center justify-center min-h-[60vh] animate-in fade-in slide-in-from-bottom-4 duration-700">
      <div className="w-full max-w-2xl p-8 rounded-xl shadow-2xl transition-colors duration-300 bg-white border border-slate-200 dark:bg-robo-800 dark:border-robo-700">
        <h2 className="text-2xl font-bold mb-6 flex items-center gap-2 text-slate-800 dark:text-white">
          <Terminal className="text-blue-600 dark:text-robo-accent" /> {labels.initTitle}
        </h2>
        <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-2">{labels.inputLabel}</label>
              <textarea
                  className="w-full h-40 rounded-lg p-4 font-mono text-sm resize-none focus:ring-2 focus:outline-none transition-colors bg-slate-50 border border-slate-300 text-slate-900 focus:ring-blue-500 dark:bg-robo-900 dark:border-robo-700 dark:text-slate-200 dark:focus:ring-robo-500"
                  placeholder={labels.inputPlaceholder}
                  value={state.productInput}
                  onChange={(e) => setState(s => ({ ...s, productInput: e.target.value }))}
                  disabled={state.isLoading}
              />
            </div>
            
            <div className="p-4 rounded-lg border border-dashed transition-colors bg-slate-50 border-slate-300 dark:bg-robo-900/50 dark:border-robo-600">
              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
                  <ImageIcon size={16}/> {labels.uploadImage}
              </label>
              
              <div className="grid grid-cols-4 gap-4 mb-4">
                  {state.productImages.map((img, idx) => (
                      <div key={idx} className="relative group aspect-square rounded-lg overflow-hidden border border-slate-200 dark:border-robo-700 bg-white">
                          <img src={img} alt={`Ref ${idx}`} className="w-full h-full object-cover" />
                          <button 
                            onClick={() => removeUploadedImage(idx)}
                            className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                          >
                              <X size={12}/>
                          </button>
                      </div>
                  ))}
                  
                  <label className="flex flex-col items-center justify-center aspect-square rounded-lg border-2 border-dashed border-slate-300 dark:border-robo-600 hover:border-blue-400 dark:hover:border-robo-400 cursor-pointer transition-colors bg-slate-50 dark:bg-robo-900/30">
                      <input 
                          type="file" 
                          accept="image/*" 
                          multiple
                          onChange={handleImageUpload} 
                          className="hidden"
                      />
                      <Plus className="text-slate-400 mb-1" size={24}/>
                      <span className="text-xs text-slate-500">Add</span>
                  </label>
              </div>
              <p className="text-xs text-slate-500 text-center">{labels.uploadHint}</p>
            </div>

            <button
                onClick={handlePhase1Submit}
                disabled={state.isLoading || !state.productInput}
                className="w-full font-bold py-3 px-4 rounded-lg transition-all flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 dark:bg-robo-500 dark:hover:bg-robo-400"
            >
                {state.isLoading ? <span className="flex items-center gap-2"><Loader2 className="animate-spin" /> {labels.processing}</span> : <>{labels.startBtn} <ArrowRight size={18} /></>}</button>
            {state.isLoading && (
                <div className="mt-4 p-4 rounded-lg border font-mono text-sm animate-in fade-in slide-in-from-top-2 bg-white border-slate-200 dark:bg-robo-900/80 dark:border-robo-700">
                <div className="flex items-center gap-3 text-emerald-600 dark:text-emerald-400">
                    <div className="relative flex h-3 w-3">
                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
                    </div>
                    <span className="animate-pulse">{loadingMessage}</span>
                </div>
                </div>
            )}
        </div>
      </div>
    </div>
  );

  const renderPhase1 = () => (
    <div className="space-y-6 animate-in fade-in">
      <div className="p-6 rounded-xl border transition-colors bg-white border-slate-200 dark:bg-robo-800 dark:border-robo-700">
        <h2 className="text-xl font-bold mb-4 flex items-center gap-2 text-slate-900 dark:text-white"><Cpu className="text-purple-500" /> {labels.features} & Constraints</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 className="text-sm font-bold uppercase tracking-wider text-slate-500 mb-2">{labels.features}</h3>
            <ul className="space-y-2">
              {state.phase1Result?.features.map((f, i) => (
                <li key={i} className="flex justify-between items-center group text-sm p-2 rounded border bg-slate-50 dark:bg-robo-900 border-slate-200 dark:border-robo-700">
                  <span>{f}</span>
                  <button onClick={() => removeFeature(i)} className="opacity-0 group-hover:opacity-100 text-red-500"><X size={14}/></button>
                </li>
              ))}
            </ul>
            <div className="flex gap-2 mt-3">
                <input value={newFeatureInput} onChange={e => setNewFeatureInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && addFeature()} className="flex-1 text-sm border rounded px-3 py-2 dark:bg-robo-900 dark:text-white" placeholder={labels.addPlaceholder}/>
                <button onClick={addFeature} className="p-2 bg-slate-100 dark:bg-robo-700 rounded"><Plus size={16}/></button>
            </div>
          </div>
          <div>
            <h3 className="text-sm font-bold uppercase tracking-wider text-slate-500 mb-2">{labels.constraints}</h3>
            <ul className="space-y-2">
              {state.phase1Result?.constraints.map((c, i) => (
                <li key={i} className="flex justify-between items-center group text-sm p-2 rounded border bg-red-50 dark:bg-robo-900 border-red-200 dark:border-red-900/30">
                  <span>{c}</span>
                  <button onClick={() => removeConstraint(i)} className="opacity-0 group-hover:opacity-100 text-red-600"><X size={14}/></button>
                </li>
              ))}
            </ul>
             <div className="flex gap-2 mt-3">
                <input value={newConstraintInput} onChange={e => setNewConstraintInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && addConstraint()} className="flex-1 text-sm border rounded px-3 py-2 dark:bg-robo-900 dark:text-white" placeholder={labels.addPlaceholder}/>
                <button onClick={addConstraint} className="p-2 bg-slate-100 dark:bg-robo-700 rounded"><Plus size={16}/></button>
            </div>
          </div>
        </div>
      </div>
      <div className="flex justify-between pt-4">
         <button onClick={goBack} disabled={state.isLoading} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
         <button onClick={handlePhase2Submit} disabled={state.isLoading} className="font-bold py-3 px-6 rounded-lg bg-slate-900 text-white dark:bg-white dark:text-robo-900 flex items-center gap-2">
            {state.isLoading ? <Loader2 className="animate-spin"/> : <>{labels.confirmICP} <ArrowRight size={18} /></>}</button>
      </div>
    </div>
  );

  const renderPhase2 = () => (
    <div className="space-y-6 animate-in fade-in">
      <h2 className="text-2xl font-bold flex items-center gap-2 text-slate-900 dark:text-white"><Target className="text-blue-600"/> {labels.targetId}</h2>
      {state.phase2Result?.icps.map((icp, i) => (
        <div key={i} className="relative p-6 rounded-xl border bg-white dark:bg-robo-800 border-slate-200 group">
          <button onClick={() => removeICP(i)} className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 text-slate-500"><X size={16}/></button>
          <h3 className="text-xl font-bold mb-2 dark:text-white">{i + 1}. {icp.name}</h3>
          <p className="text-sm text-slate-600 dark:text-slate-300">{icp.rationale}</p>
        </div>
      ))}
      <div className="flex justify-between pt-4">
         <button onClick={goBack} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
         <button onClick={handlePhase3Submit} className="font-bold py-3 px-6 rounded-lg bg-slate-900 text-white dark:bg-white dark:text-robo-900 flex items-center gap-2">
            {state.isLoading ? <Loader2 className="animate-spin"/> : <>{labels.huntWhales} <Crosshair size={18} /></>}</button>
      </div>
    </div>
  );

  const renderPhase3 = () => (
    <div className="space-y-8 animate-in fade-in">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {state.phase3Result?.whales.map((w, idx) => (
            <div key={idx} className="p-6 rounded-xl border bg-white dark:bg-robo-800 border-slate-200">
                <h4 className="font-bold mb-4 dark:text-white uppercase text-xs tracking-widest text-slate-500">{w.industry}</h4>
                <ul className="space-y-2">
                    {w.accounts.map((acc, aidx) => (
                        <li key={aidx} className="flex justify-between items-center group p-2 bg-slate-50 dark:bg-robo-900 rounded border border-slate-200 dark:border-robo-700">
                            <span className="text-sm font-medium dark:text-slate-200">{acc}</span>
                            <button onClick={() => removeAccount(idx, aidx)} className="opacity-0 group-hover:opacity-100 text-red-500"><X size={14}/></button>
                        </li>
                    ))}
                </ul>
            </div>
        ))}
       </div>
       <div className="flex justify-between pt-4">
         <button onClick={goBack} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
         <button onClick={handlePhase4Submit} className="font-bold py-3 px-6 rounded-lg bg-slate-900 text-white dark:bg-white dark:text-robo-900 flex items-center gap-2">
            {state.isLoading ? <Loader2 className="animate-spin"/> : <>{labels.confirmStrat} <Zap size={18} /></>}</button>
      </div>
    </div>
  );

  const renderPhase4 = () => (
    <div className="space-y-8 animate-in fade-in">
       <h2 className="text-2xl font-bold flex items-center gap-2 dark:text-white"><Zap className="text-yellow-500"/> {labels.stratAngles}</h2>
       <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-robo-700 bg-white dark:bg-robo-800">
        <table className="w-full text-left">
          <thead className="bg-slate-100 dark:bg-robo-900 text-xs uppercase text-slate-500">
            <tr><th className="p-4">{labels.segment}</th><th className="p-4">{labels.pain}</th><th className="p-4">{labels.angle}</th></tr>
          </thead>
          <tbody className="divide-y divide-slate-200 dark:divide-robo-700">
            {state.phase4Result?.strategyMatrix.map((row, i) => (
              <tr key={i} className="text-sm">
                <td className="p-4 font-bold dark:text-white">{row.segment}</td>
                <td className="p-4 text-red-600 dark:text-red-400">{row.painPoint}</td>
                <td className="p-4 font-medium text-emerald-600 dark:text-emerald-400">{row.angle}</td>
              </tr>
            ))}
          </tbody>
        </table>
       </div>
       <div className="flex justify-between pt-4">
         <button onClick={goBack} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
         <button onClick={handlePhase5Submit} className="font-bold py-3 px-6 rounded-lg bg-slate-900 text-white dark:bg-white dark:text-robo-900 flex items-center gap-2">
            {state.isLoading ? <Loader2 className="animate-spin"/> : <>{labels.writeCopy} <Terminal size={18} /></>}</button>
      </div>
    </div>
  );

  const renderPhase5 = () => (
    <div className="space-y-6 animate-in fade-in">
      <div className="p-8 rounded-xl border font-mono text-sm bg-slate-50 dark:bg-robo-900 border-slate-200 dark:border-robo-700 dark:text-slate-300 overflow-x-auto leading-relaxed">
        <ReactMarkdown remarkPlugins={[remarkGfm]}>{state.phase5Result || ''}</ReactMarkdown>
      </div>
      <div className="flex justify-between pt-4">
          <button onClick={goBack} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
          <button onClick={handlePhase6Submit} className="font-bold py-3 px-6 rounded-lg bg-slate-900 text-white dark:bg-white dark:text-robo-900 flex items-center gap-2">
              {state.isLoading ? <Loader2 className="animate-spin"/> : <>{labels.toPhase6} <ShieldCheck size={18} /></>}</button>
      </div>
    </div>
  );

  const renderPhase6 = () => (
      <div className="space-y-8 animate-in fade-in">
          <h2 className="text-2xl font-bold flex items-center gap-2 dark:text-white"><ShieldCheck className="text-emerald-600"/> {labels.phase6Title}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {state.phase6Result?.battlecards.map((card, i) => (
                  <div key={i} className="p-6 rounded-xl border bg-white dark:bg-robo-800 border-slate-200 shadow-sm">
                      <div className="font-bold mb-4 flex items-center gap-2 dark:text-white"><UserCircle size={16}/> {card.persona}</div>
                      <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-100 rounded-lg text-sm italic mb-3 text-red-800 dark:text-red-300">"{card.objection}"</div>
                      <div className="p-3 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-100 rounded-lg text-sm text-emerald-800 dark:text-emerald-300">{card.responseScript}</div>
                  </div>
              ))}
          </div>
          <div className="flex justify-between pt-4">
              <button onClick={goBack} className="text-sm font-bold text-slate-500 flex items-center gap-2"><ArrowLeft size={16}/> {labels.backBtn}</button>
              <button onClick={() => window.location.reload()} className="text-sm font-medium hover:underline text-slate-500">{labels.restart}</button>
          </div>
      </div>
  );

  return (
    <Layout 
        currentPhase={state.currentPhase} 
        maxAllowedPhase={getMaxAllowedPhase()} 
        onPhaseSelect={handlePhaseSelect} 
        theme={theme} 
        toggleTheme={toggleTheme} 
        language={language} 
        setLanguage={setLanguage} 
        labels={labels}
    >
      {/* Top Bar Actions */}
      <div className="absolute top-6 right-8 flex gap-2 z-50">
          <button 
            id="save-btn"
            onClick={handleSaveProject} 
            className="p-2 rounded-lg bg-white dark:bg-robo-800 border border-slate-200 dark:border-robo-700 hover:bg-slate-50 dark:hover:bg-robo-700 text-slate-600 dark:text-slate-300 shadow-sm transition-all"
            title={labels.save}
          >
              <Save size={20}/>
          </button>
          <button 
            onClick={toggleHistory} 
            className="p-2 rounded-lg bg-white dark:bg-robo-800 border border-slate-200 dark:border-robo-700 hover:bg-slate-50 dark:hover:bg-robo-700 text-slate-600 dark:text-slate-300 shadow-sm transition-all"
            title={labels.history}
          >
              <History size={20}/>
          </button>
      </div>

      {/* History Modal */}
      {showHistory && (
          <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in">
              <div className="w-full max-w-lg bg-white dark:bg-robo-900 rounded-xl shadow-2xl overflow-hidden border border-slate-200 dark:border-robo-700 flex flex-col max-h-[80vh]">
                  <div className="p-4 border-b border-slate-100 dark:border-robo-700 flex justify-between items-center bg-slate-50 dark:bg-robo-800">
                      <h3 className="font-bold flex items-center gap-2 dark:text-white"><History size={18}/> {labels.history}</h3>
                      <button onClick={() => setShowHistory(false)} className="p-1 hover:bg-slate-200 dark:hover:bg-robo-600 rounded-full"><X size={18}/></button>
                  </div>
                  <div className="overflow-y-auto p-4 flex-1">
                      {savedProjects.length === 0 ? (
                          <div className="text-center text-slate-500 py-8 italic">{labels.noProjects}</div>
                      ) : (
                          <div className="space-y-3">
                              {savedProjects.map((p) => (
                                  <div key={p.id} onClick={() => handleLoadProject(p.id)} className="group cursor-pointer p-4 rounded-lg border border-slate-200 dark:border-robo-700 hover:border-blue-400 dark:hover:border-robo-500 bg-slate-50 dark:bg-robo-800/50 transition-all hover:shadow-md relative">
                                      <div className="font-bold text-slate-800 dark:text-white mb-1 pr-8 truncate">{p.name}</div>
                                      <div className="text-xs text-slate-500 flex justify-between">
                                          <span>{new Date(p.updated_at).toLocaleString()}</span>
                                          <button 
                                            onClick={(e) => handleDeleteProject(p.id, e)}
                                            className="text-red-400 hover:text-red-600 p-1 -m-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
                                            title={labels.delete}
                                          >
                                              <Trash2 size={14}/>
                                          </button>
                                      </div>
                                  </div>
                              ))}
                          </div>
                      )}
                  </div>
              </div>
          </div>
      )}

      {error && <div className="mb-6 p-4 rounded-lg flex items-center gap-3 bg-red-50 border border-red-200 text-red-700"><ShieldAlert size={20} />{error}</div>}
      
      {state.currentPhase === Phase.Input && renderInputPhase()}
      {state.currentPhase === Phase.ProductAnalysis && renderPhase1()}
      {state.currentPhase === Phase.ICPDiscovery && renderPhase2()}
      {state.currentPhase === Phase.WhaleHunting && renderPhase3()}
      {state.currentPhase === Phase.Strategy && renderPhase4()}
      {state.currentPhase === Phase.AssetGeneration && renderPhase5()}
      {state.currentPhase === Phase.SalesEnablement && renderPhase6()}
    </Layout>
  );
};

export default App;