import React, { useState, useEffect, useMemo } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  Zap, 
  Search, 
  ArrowRight, 
  History, 
  Plus, 
  Wind,
  PlusCircle,
  FileText,
  ChevronRight,
  Maximize2
} from 'lucide-react';
import { WaveCanvas } from './WaveCanvas';
import { BrainstormSession, BrainstormIdea, Note } from '../../types';
import { generateBrainstormWave, generateExpansion, getEmbedding, cosineSimilarity } from '../../services/geminiService';

interface BrainstormViewProps {
  notes: Note[];
  onConvertNote: (idea: BrainstormIdea) => void;
}

export const BrainstormView: React.FC<BrainstormViewProps> = ({ notes, onConvertNote }) => {
  const [seedInput, setSeedInput] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [sessions, setSessions] = useState<BrainstormSession[]>([]);
  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
  const [ideas, setIdeas] = useState<BrainstormIdea[]>([]);
  const [selectedIdeaId, setSelectedIdeaId] = useState<string | null>(null);
  
  useEffect(() => {
    fetch('/api/brainstorm/sessions')
      .then(res => res.json())
      .then(data => setSessions(data))
      .catch(err => console.error("Failed to load sessions", err));
  }, []);

  useEffect(() => {
    if (activeSessionId) {
      fetch(`/api/brainstorm/${activeSessionId}`)
        .then(res => res.json())
        .then(data => {
          if (data.ideas) {
            setIdeas(prev => {
              const filtered = prev.filter(i => i.sessionId !== activeSessionId);
              return [...filtered, ...data.ideas];
            });
          }
        })
        .catch(err => console.error("Failed to load ideas", err));
    }
  }, [activeSessionId]);

  const activeSession = useMemo(() => 
    sessions.find(s => s.id === activeSessionId),
  [activeSessionId, sessions]);

  const activeIdeas = useMemo(() => 
    ideas.filter(i => i.sessionId === activeSessionId),
  [activeSessionId, ideas]);

  const selectedIdea = useMemo(() => 
    ideas.find(i => i.id === selectedIdeaId),
  [selectedIdeaId, ideas]);

  useEffect(() => {
    const handleRemoteStart = (e: any) => {
      if (e.detail?.seed) {
        handleStartBrainstorm(e.detail.seed, e.detail.sourceNoteId);
      }
    };
    window.addEventListener('start-brainstorm', handleRemoteStart);
    return () => window.removeEventListener('start-brainstorm', handleRemoteStart);
  }, [notes]);

  const handleStartBrainstorm = async (seed: string, sourceNoteId?: string) => {
    if (!seed.trim()) return;
    
    setIsGenerating(true);
    setError(null);
    
    try {
      // 1. Create session on backend
      const sessionRes = await fetch('/api/brainstorm/sessions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          seedIdea: seed, 
          sourceNoteId
        })
      });
      const session = await sessionRes.json();
      if (!sessionRes.ok) throw new Error(session.error || "Failed to create session");

      setSessions(prev => [session, ...prev]);
      setActiveSessionId(session.id);
      setSeedInput('');

      // 2. Generate waves in frontend concurrently
      const contextSummaries = notes.slice(0, 5).map(n => n.title).join(', ');
      
      const wavePromises = [1, 2, 3].map(async (num) => {
        try {
          const generated = await generateBrainstormWave(seed, num, contextSummaries);
          return generated.map(g => ({
            ...g,
            waveNumber: num
          }));
        } catch (e) {
          console.error(`Wave ${num} failed`, e);
          return [];
        }
      });

      const wavesResults = await Promise.all(wavePromises);
      const allNewIdeas = wavesResults.flat();

      if (allNewIdeas.length === 0) {
        throw new Error("No ideas were generated. Gemini might be shy today.");
      }

      // 3. Save ideas to backend
      const ideasRes = await fetch(`/api/brainstorm/${session.id}/ideas`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ideas: allNewIdeas })
      });
      const savedIdeas = await ideasRes.json();
      setIdeas(prev => [...prev, ...savedIdeas]);

    } catch (err: any) {
      console.error("Brainstorm failed:", err);
      setError(err.message || "An unexpected error occurred while brainstorming.");
    } finally {
      setIsGenerating(false);
    }
  };

  const updateIdea = async (ideaId: string, updates: Partial<BrainstormIdea>) => {
    try {
      const res = await fetch(`/api/brainstorm/ideas/${ideaId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates)
      });
      const updated = await res.json();
      setIdeas(prev => prev.map(i => i.id === ideaId ? updated : i));
    } catch (err) {
      console.error("Update failed", err);
    }
  };

  const handleDeepenIdea = async (idea: BrainstormIdea) => {
    setIsGenerating(true);
    try {
      const generated = await generateExpansion(idea.title, idea.description);
      const newIdeasData = generated.map(g => ({
        ...g,
        waveNumber: Math.min(idea.waveNumber + 1, 3),
        parentIdeaId: idea.id
      }));

      const res = await fetch(`/api/brainstorm/${idea.sessionId}/ideas`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ideas: newIdeasData })
      });
      const savedIdeas = await res.json();
      setIdeas(prev => [...prev, ...savedIdeas]);
    } catch (err) {
      console.error("Deepen failed", err);
      setError("Failed to expand this idea.");
    } finally {
      setIsGenerating(false);
    }
  };

  const handleDismissIdea = (ideaId: string) => {
    updateIdea(ideaId, { status: 'dismissed' });
    setSelectedIdeaId(null);
  };

  const handleConvertToNote = (idea: BrainstormIdea) => {
    updateIdea(idea.id, { status: 'converted' });
    onConvertNote(idea);
  };

  return (
    <div className="h-full flex flex-col bg-[#F8F7F2] dark:bg-[#0A0A0A] overflow-hidden">
      {/* Header / Start area */}
      <div className="p-12 border-b border-border/20 backdrop-blur-md bg-white/20 dark:bg-dark-paper/20 z-10 relative overflow-hidden">
        {/* Architectural Grid Background */}
        <div className="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05]" 
             style={{ backgroundImage: 'linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
        
        <div className="max-w-4xl mx-auto relative">
          <div className="flex items-center gap-5 mb-8">
            <motion.div 
              animate={{ rotate: isGenerating ? 360 : 0 }}
              transition={{ repeat: isGenerating ? Infinity : 0, duration: 20, ease: "linear" }}
              className="w-14 h-14 rounded-2xl bg-ochre shadow-[0_0_20px_rgba(212,163,115,0.2)] flex items-center justify-center text-paper"
            >
              <Wind size={28} />
            </motion.div>
            <div>
              <h1 className="text-4xl font-serif font-medium text-ink dark:text-dark-ink tracking-tight">Waves of Thought</h1>
              <div className="flex items-center gap-2 mt-1">
                <span className="w-8 h-px bg-ochre/40" />
                <p className="text-[10px] text-concrete tracking-[0.3em] uppercase font-bold">Unfold dimensions of potentiality</p>
              </div>
            </div>
          </div>

          <div className="relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-ochre/20 to-blueprint/20 rounded-[28px] blur-xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-700" />
            <input 
              type="text"
              value={seedInput}
              onChange={(e) => setSeedInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleStartBrainstorm(seedInput)}
              placeholder="Enter a concept to unfold..."
              className={`w-full relative bg-white dark:bg-[#1A1A1A] border-2 rounded-2xl px-8 py-7 pr-20 outline-none transition-all text-2xl font-serif italic text-ink dark:text-dark-ink shadow-sm group-hover:shadow-md
                ${error ? 'border-rose-400 focus:ring-rose-100 shadow-rose-100' : 'border-border/40 focus:border-ochre/40 focus:ring-4 focus:ring-ochre/5'}`}
            />
            <button 
              onClick={() => handleStartBrainstorm(seedInput)}
              disabled={isGenerating || !seedInput.trim()}
              className="absolute right-4 top-4 bottom-4 px-6 bg-ink dark:bg-ochre text-paper rounded-xl disabled:opacity-50 transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2 min-w-[70px] shadow-lg"
            >
              {isGenerating ? (
                <div className="w-6 h-6 border-3 border-paper/30 border-t-paper rounded-full animate-spin" />
              ) : (
                <Plus size={24} />
              )}
            </button>
          </div>

          <AnimatePresence>
            {error && (
              <motion.div 
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                className="mt-6 p-5 bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 rounded-2xl flex items-start gap-4 text-rose-600 dark:text-rose-400 text-sm overflow-hidden shadow-sm"
              >
                <div className="w-5 h-5 rounded-full bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center shrink-0 mt-0.5">
                   <div className="w-2 h-2 rounded-full bg-rose-500" />
                </div>
                <div className="flex-1">
                  <p className="font-bold uppercase tracking-wider text-[10px] mb-1">Obstruction detected</p>
                  <span>{error}</span>
                </div>
              </motion.div>
            )}
            
            {isGenerating && !error && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="mt-6 flex items-center gap-4 text-ochre/80 italic font-serif"
              >
                <div className="flex gap-1.5">
                  {[0.2, 0.4, 0.6].map((d, i) => (
                    <motion.div 
                      key={i}
                      animate={{ scale: [1, 1.5, 1], opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 1.5, repeat: Infinity, delay: d }}
                      className="w-1.5 h-1.5 rounded-full bg-ochre" 
                    />
                  ))}
                </div>
                <span className="text-base tracking-tight">Gemini is harvesting seeds of thought from the digital ether...</span>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

      <div className="flex-1 flex overflow-hidden relative">
        {/* Main Canvas Area */}
        <div className="flex-1 relative bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] dark:bg-[radial-gradient(#ffffff10_1px,transparent_1px)] [background-size:20px_20px]">
          {activeSession ? (
            <WaveCanvas 
              session={activeSession}
              ideas={activeIdeas}
              onNodeSelect={setSelectedIdeaId}
              onPositionUpdate={(id, pos) => updateIdea(id, { position: pos })}
              selectedNodeId={selectedIdeaId}
              relatedNotes={notes}
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20 flex-col gap-6">
               <Wind size={120} strokeWidth={1} className="text-concrete animate-pulse" />
               <p className="text-xl font-serif italic text-concrete">The canvas is waiting for your spark...</p>
            </div>
          )}

          {/* Floating UI overlays */}
          <AnimatePresence>
            {activeSession && (
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="absolute bottom-6 left-6 flex gap-2"
              >
                <div className="px-4 py-2 bg-paper/80 dark:bg-black/60 backdrop-blur-xl border border-border shadow-xl rounded-full flex items-center gap-6">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-orange-400 shadow-[0_0_8px_rgba(251,146,60,0.6)]" />
                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 1</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.6)]" />
                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 2</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(167,139,250,0.6)]" />
                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 3</span>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Right Sidebar Detail Panel */}
        <AnimatePresence>
          {selectedIdea && (
            <motion.div
              initial={{ x: '100%' }}
              animate={{ x: 0 }}
              exit={{ x: '100%' }}
              className="w-[400px] border-l border-border bg-paper dark:bg-dark-paper flex flex-col z-20 shadow-[-20px_0_40px_rgba(0,0,0,0.05)]"
            >
              <div className="p-8 flex-1 overflow-y-auto custom-scrollbar">
                <div className="flex items-center justify-between mb-8">
                   <div className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border
                     ${selectedIdea.waveNumber === 1 ? 'border-orange-200 bg-orange-50 text-orange-600' : 
                       selectedIdea.waveNumber === 2 ? 'border-blue-200 bg-blue-50 text-blue-600' : 
                       'border-violet-200 bg-violet-50 text-violet-600'}`}>
                     Vague {selectedIdea.waveNumber}
                   </div>
                   <div className="flex items-center gap-2">
                      {selectedIdea.status === 'converted' && (
                        <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest bg-emerald-500/10 px-2 py-1 rounded-full">Note Created</span>
                      )}
                      <button onClick={() => setSelectedIdeaId(null)} className="p-2 hover:bg-ink/5 rounded-full transition-colors">
                        <ChevronRight size={20} />
                      </button>
                   </div>
                </div>

                <h2 className="text-3xl font-serif font-medium text-ink dark:text-dark-ink mb-2">{selectedIdea.title}</h2>
                <div className="flex items-center gap-4 mb-8">
                   <div className="flex items-center gap-1">
                     <Zap size={14} className="text-ochre" />
                     <span className="text-xs font-bold text-concrete">Novelty: {selectedIdea.noveltyScore}/10</span>
                   </div>
                </div>

                <p className="text-ink/80 dark:text-dark-ink/80 leading-relaxed font-light mb-10 text-lg">
                  {selectedIdea.description}
                </p>

                <div className="p-6 bg-slate-50 dark:bg-white/5 rounded-2xl border border-border/40 mb-10">
                   <h4 className="text-[10px] font-bold uppercase tracking-widest text-concrete mb-3">Origin connection</h4>
                   <p className="text-sm italic text-muted-ink leading-relaxed">
                     "{selectedIdea.connectionToSeed}"
                   </p>
                </div>

                {selectedIdea.relatedNoteIds && selectedIdea.relatedNoteIds.length > 0 && (
                  <div className="space-y-4 mb-10">
                    <h4 className="text-[10px] font-bold uppercase tracking-widest text-concrete px-1">Semantic Context</h4>
                    {selectedIdea.relatedNoteIds.map(noteId => {
                      const note = notes.find(n => n.id === noteId);
                      return note ? (
                        <div key={noteId} className="p-4 rounded-xl border border-border bg-white dark:bg-white/5 hover:border-ink/20 transition-all cursor-pointer group">
                           <div className="flex items-center justify-between">
                             <h5 className="text-sm font-medium text-ink dark:text-dark-ink truncate">{note.title}</h5>
                             <ArrowRight size={14} className="text-concrete group-hover:text-ink transition-colors" />
                           </div>
                        </div>
                      ) : null;
                    })}
                  </div>
                )}

                <div className="grid grid-cols-1 gap-4">
                  <div className="grid grid-cols-2 gap-4">
                    <button 
                      onClick={() => handleDeepenIdea(selectedIdea)}
                      disabled={isGenerating}
                      className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-ochre/40 hover:bg-ochre/5 transition-all group disabled:opacity-50"
                    >
                      <Wind size={24} className="text-concrete group-hover:text-ochre mb-2" />
                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink">Deepen</span>
                    </button>
                    <button 
                      onClick={() => handleConvertToNote(selectedIdea)}
                      disabled={selectedIdea.status === 'converted'}
                      className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-blueprint/40 hover:bg-blueprint/5 transition-all group disabled:opacity-50"
                    >
                      <FileText size={24} className="text-concrete group-hover:text-blueprint mb-2" />
                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink">Extract</span>
                    </button>
                  </div>
                  
                  <button 
                    onClick={() => handleDismissIdea(selectedIdea.id)}
                    className="w-full py-4 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete hover:text-rose-500 hover:bg-rose-500/5 rounded-xl transition-all border border-transparent hover:border-rose-500/10"
                  >
                    Not pertinent
                  </button>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* History Rail */}
        <div className="w-16 border-l border-border flex flex-col items-center py-6 gap-6 bg-paper dark:bg-dark-paper z-10">
           <History size={18} className="text-concrete" />
           <div className="w-px flex-1 bg-border/40" />
           <div className="flex flex-col gap-3 overflow-y-auto px-2 custom-scrollbar">
            {sessions.map(session => (
              <button
                key={session.id}
                onClick={() => setActiveSessionId(session.id)}
                className={`w-10 h-10 min-h-[40px] rounded-xl flex items-center justify-center text-xs font-bold transition-all shrink-0
                  ${activeSessionId === session.id ? 'bg-ink text-paper scale-110 shadow-lg' : 'bg-paper dark:bg-white/10 text-concrete hover:bg-black/5 hover:text-ink'}`}
                title={session.seedIdea}
              >
                {session.seedIdea.charAt(0).toUpperCase()}
              </button>
            ))}
           </div>
           <div className="w-px h-12 bg-border/40" />
        </div>
      </div>
    </div>
  );
};