import React, { useState, useEffect, useMemo, useRef } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  Zap, 
  Search, 
  ArrowRight, 
  History, 
  Plus, 
  Wind,
  PlusCircle,
  FileText,
  ChevronRight,
  Maximize2,
  Share2,
  Users,
  Check,
  Download,
  Activity,
  X
} from 'lucide-react';
import { v4 as uuidv4 } from 'uuid';
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);
  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
  const [manualTitle, setManualTitle] = useState('');
  const [shareStatus, setShareStatus] = useState<'idle' | 'copying' | 'copied'>('idle');
  const [showActivity, setShowActivity] = useState(false);
  const [activities, setActivities] = useState<{ id: string; type: string; message: string; timestamp: string }[]>([]);
  const [collaborators, setCollaborators] = useState<{ id: string; name: string; color: string }[]>([]);
  
  const socketRef = useRef<WebSocket | null>(null);

  // Mock current user for presence
  const currentUser = useMemo(() => ({
    id: 'me-' + Math.random().toString(36).substr(2, 9),
    name: 'Sepehr' // Derived from user email in metadata if possible, or guest
  }), []);

  const getInitials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
  const stringToColor = (str: string) => {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    const colors = ['#f43f5e', '#ef4444', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef', '#f472b6'];
    return colors[Math.abs(hash) % colors.length];
  };

  const addActivity = (message: string, type: string = 'info', broadcast: boolean = true) => {
    const newActivity = {
      id: uuidv4(),
      type,
      message,
      timestamp: new Date().toLocaleTimeString()
    };
    setActivities(prev => [newActivity, ...prev].slice(0, 50));
    if (broadcast && socketRef.current?.readyState === WebSocket.OPEN) {
      socketRef.current.send(JSON.stringify({ type: 'activity', activity: newActivity }));
    }
  };

  // WebSocket Connection
  useEffect(() => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const socket = new WebSocket(`${protocol}//${window.location.host}`);
    socketRef.current = socket;

    socket.onopen = () => {
      console.log('WS Shared Brainstorm connected');
      if (activeSessionId) {
        socket.send(JSON.stringify({ 
          type: 'join', 
          sessionId: activeSessionId,
          user: { ...currentUser, color: stringToColor(currentUser.name) }
        }));
      }
    };

    socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'presence') {
        setCollaborators(data.users);
      }
      if (data.type === 'idea_added') {
        const newIdea = data.idea;
        setIdeas(prev => {
          if (prev.find(i => i.id === newIdea.id)) return prev;
          return [...prev, newIdea];
        });
      }
      if (data.type === 'idea_updated') {
        const updatedIdea = data.idea;
        setIdeas(prev => prev.map(i => i.id === updatedIdea.id ? updatedIdea : i));
      }
      if (data.type === 'activity') {
        setActivities(prev => [data.activity, ...prev].slice(0, 50));
      }
    };

    return () => {
      socket.close();
    };
  }, []);

  // Sync session joining
  useEffect(() => {
    if (socketRef.current?.readyState === WebSocket.OPEN && activeSessionId) {
      socketRef.current.send(JSON.stringify({ 
        type: 'join', 
        sessionId: activeSessionId,
        user: { ...currentUser, color: stringToColor(currentUser.name) }
      }));
    }
  }, [activeSessionId, currentUser]);
  
  useEffect(() => {
    fetch('/api/brainstorm/sessions')
      .then(res => res.json())
      .then(data => {
        setSessions(data);
        // Check for initial session from URL parameter (passed via window by App.tsx)
        const initialId = (window as any).initialSessionId;
        if (initialId && data.find((s: any) => s.id === initialId)) {
          setActiveSessionId(initialId);
          delete (window as any).initialSessionId;
        }
      })
      .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]);

      addActivity(`Generated ${savedIdeas.length} ideas for Wave ${allNewIdeas[0]?.waveNumber || ''}`);

      // Notify others
      savedIdeas.forEach((idea: any) => {
        socketRef.current?.send(JSON.stringify({ type: 'idea_added', idea }));
      });

    } 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));
      
      // Notify others
      socketRef.current?.send(JSON.stringify({ type: 'idea_updated', idea: updated }));
    } 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]);
      addActivity(`Expanded idea: ${idea.title}`);
      
      // Notify others
      savedIdeas.forEach((i: any) => {
        socketRef.current?.send(JSON.stringify({ type: 'idea_added', idea: i }));
      });
    } 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);
  };

  const handleManualAdd = async (title: string, parentId?: string) => {
    if (!title.trim() || !activeSessionId) return;

    setIsGenerating(true);
    try {
      let finalParentId = parentId;
      let waveNumber = 1;

      if (parentId) {
        const p = ideas.find(i => i.id === parentId);
        if (p) waveNumber = Math.min(p.waveNumber + 1, 3);
      } else if (activeIdeas.length > 0) {
        // Semantic auto-placement if no parent is specified
        try {
          const newEmbedding = await getEmbedding(title);
          let bestSim = -1;
          let bestParent: BrainstormIdea | null = null;

          for (const idea of activeIdeas) {
            const ideaEmbedding = await getEmbedding(idea.title + " " + idea.description);
            const sim = cosineSimilarity(newEmbedding, ideaEmbedding);
            if (sim > bestSim) {
              bestSim = sim;
              bestParent = idea;
            }
          }

          if (bestParent && bestSim > 0.7) {
            finalParentId = bestParent.id;
            waveNumber = Math.min(bestParent.waveNumber + 1, 3);
          }
        } catch (e) {
          console.error("Semantic placement failed", e);
        }
      }

      const newIdeaData = [{
        title: title,
        description: "",
        waveNumber: waveNumber,
        connectionToSeed: finalParentId 
          ? `Manual addition (auto-linked)`
          : "Manual addition to root",
        noveltyScore: 5,
        parentIdeaId: finalParentId
      }];

      const res = await fetch(`/api/brainstorm/${activeSessionId}/ideas`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ideas: newIdeaData })
      });
      const saved = await res.json();
      setIdeas(prev => [...prev, ...saved]);
      
      addActivity(`Manually added idea: ${title}`);

      // Notify
      saved.forEach((i: any) => socketRef.current?.send(JSON.stringify({ type: 'idea_added', idea: i })));

      setEditingNodeId(null);
      setManualTitle('');
    } catch (err) {
      console.error("Manual add failed", err);
    } finally {
      setIsGenerating(false);
    }
  };

  const handleInvite = () => {
    if (!activeSessionId) return;
    const shareUrl = `${window.location.origin}${window.location.pathname}?session=${activeSessionId}`;
    navigator.clipboard.writeText(shareUrl);
    setShareStatus('copied');
    addActivity(`Invitation link copied to clipboard`);
    setTimeout(() => setShareStatus('idle'), 2000);
  };

  const handleExport = () => {
    if (!activeSession) return;
    
    let markdown = `# Brainstorm : ${activeSession.seedIdea}\n\n`;
    markdown += `Date : ${new Date(activeSession.createdAt).toLocaleDateString()}\n\n`;
    
    [1, 2, 3].forEach(waveNum => {
      const waveIdeas = activeIdeas.filter(i => i.waveNumber === waveNum);
      if (waveIdeas.length > 0) {
        markdown += `## Vague ${waveNum}\n\n`;
        waveIdeas.forEach(idea => {
          markdown += `### ${idea.title}\n`;
          markdown += `${idea.description}\n`;
          markdown += `*Score de nouveauté : ${idea.noveltyScore}/10*\n`;
          markdown += `*Connexion : ${idea.connectionToSeed}*\n\n`;
        });
      }
    });

    onConvertNote({
      id: uuidv4(),
      title: `Brainstorm Export: ${activeSession.seedIdea}`,
      description: markdown,
      sessionId: activeSession.id,
      waveNumber: 0,
      connectionToSeed: "Export",
      noveltyScore: 10,
      status: 'converted'
    });

    addActivity(`Session exported to notes`);
  };

  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 className="flex-1">
                  <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>
                
                {activeSession && (
                  <div className="flex items-center gap-3">
                    <button 
                      onClick={handleExport}
                      className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-white/5 border border-border rounded-xl text-xs font-bold uppercase tracking-widest text-concrete hover:text-ochre transition-all shadow-sm"
                      title="Export to Note"
                    >
                      <Download size={14} />
                      <span className="hidden sm:inline">Export</span>
                    </button>
                    <button 
                      onClick={() => setShowActivity(!showActivity)}
                      className={`flex items-center gap-2 px-4 py-2 border border-border rounded-xl text-xs font-bold uppercase tracking-widest transition-all shadow-sm ${showActivity ? 'bg-ink text-paper' : 'bg-white dark:bg-white/5 text-concrete hover:text-ink'}`}
                      title="Show Activity"
                    >
                      <Activity size={14} />
                      <span className="hidden sm:inline">Activity</span>
                    </button>
                    <button 
                      onClick={handleInvite}
                      className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-white/5 border border-border rounded-xl text-xs font-bold uppercase tracking-widest text-concrete hover:text-ink transition-all shadow-sm"
                    >
                      {shareStatus === 'copied' ? <Check size={14} className="text-emerald-500" /> : <Share2 size={14} />}
                      {shareStatus === 'copied' ? 'Link Copied' : 'Invite'}
                    </button>
                    <div className="flex items-center -space-x-2 mr-2">
                      {collaborators.map((user) => (
                        <div 
                          key={user.id}
                          className="relative group/avatar"
                        >
                          <div 
                            className="w-8 h-8 rounded-full border-2 border-paper dark:border-dark-paper flex items-center justify-center text-[10px] font-bold text-white shadow-sm cursor-help relative z-10"
                            style={{ backgroundColor: user.color || '#999' }}
                          >
                            {getInitials(user.name)}
                          </div>
                          <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-ink text-paper text-[10px] rounded font-bold whitespace-nowrap opacity-0 group-hover/avatar:opacity-100 pointer-events-none transition-opacity z-20">
                            {user.name}
                            <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-ink" />
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="flex items-center gap-1 px-3 py-2 bg-emerald-500/10 rounded-full mr-2">
                      <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                      <Users size={14} className="text-emerald-500" />
                    </div>
                  </div>
                )}
              </div>

          <div className="relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-ochre/20 to-accent/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 ? (
            <div onClick={() => setSelectedIdeaId(null)} className="w-full h-full">
              <WaveCanvas 
                session={activeSession}
                ideas={activeIdeas}
                onNodeSelect={(id) => {
                  setSelectedIdeaId(id);
                }}
                onPositionUpdate={(id, pos) => updateIdea(id, { position: pos })}
                onAddChild={(id) => {
                  setSelectedIdeaId(id);
                  setEditingNodeId(id);
                }}
                onManualSubmit={handleManualAdd}
                onManualCancel={() => setEditingNodeId(null)}
                editingNodeId={editingNodeId}
                selectedNodeId={selectedIdeaId}
                relatedNotes={notes}
              />
            </div>
          ) : (
            <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>
                
                <button 
                  onClick={() => setEditingNodeId('new')}
                  className="px-6 py-3 bg-paper dark:bg-black/60 backdrop-blur-xl border border-border shadow-xl rounded-full flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-concrete hover:bg-ink hover:text-paper transition-all"
                >
                  <Plus size={14} />
                  Add Manual Idea
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Activity Sidebar */}
        <AnimatePresence>
          {showActivity && (
            <motion.div
              initial={{ x: '100%' }}
              animate={{ x: 0 }}
              exit={{ x: '100%' }}
              transition={{ type: 'spring', damping: 25, stiffness: 200 }}
              className="fixed right-0 top-0 h-full w-80 bg-paper dark:bg-dark-paper border-l border-border shadow-2xl z-[70] flex flex-col"
            >
              <div className="p-6 border-b border-border flex items-center justify-between bg-ink text-paper">
                <div className="flex items-center gap-2">
                  <Activity size={18} />
                  <h3 className="font-bold uppercase tracking-widest text-xs">Flux d'activité</h3>
                </div>
                <button onClick={() => setShowActivity(false)} className="p-1 hover:bg-white/10 rounded-lg">
                  <X size={18} />
                </button>
              </div>
              <div className="flex-1 overflow-y-auto p-6 space-y-4">
                {activities.length === 0 ? (
                  <p className="text-xs text-concrete text-center italic mt-10">Aucune activité pour le moment</p>
                ) : (
                  activities.map((act) => (
                    <motion.div 
                      key={act.id}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      className="p-3 bg-white dark:bg-white/5 rounded-xl border border-border/50 relative overflow-hidden group"
                    >
                      <div className="absolute left-0 top-0 bottom-0 w-1 bg-ochre/40" />
                      <p className="text-[11px] font-medium text-ink dark:text-dark-ink">{act.message}</p>
                      <span className="text-[9px] text-concrete font-bold mt-1 block">{act.timestamp}</span>
                    </motion.div>
                  ))
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* 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 text-center">AI Expand</span>
                    </button>
                    <button 
                      onClick={() => setEditingNodeId(selectedIdea.id)}
                      className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-ink/40 hover:bg-ink/5 transition-all group disabled:opacity-50"
                    >
                      <PlusCircle size={24} className="text-concrete group-hover:text-ink mb-2" />
                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink text-center">Add Child</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-accent/40 hover:bg-accent/5 transition-all group disabled:opacity-50 whitespace-nowrap"
                    >
                      <FileText size={24} className="text-concrete group-hover:text-accent mb-2" />
                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink text-center">Extract Note</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>
  );
};