'use client'

import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { motion, AnimatePresence } from 'motion/react'
import {
  Zap,
  History,
  Plus,
  Wind,
  FileText,
  ChevronRight,
  UserPlus,
  Activity,
  Download,
  Share2,
  Check,
  Users,
  Globe,
  Lock,
  Menu,
  Star,
  Sparkles,
  List,
  LayoutGrid,
  X,
  Edit2,
} from 'lucide-react'
import dynamic from 'next/dynamic'
import { useLanguage } from '@/lib/i18n'
import {
  useBrainstormSession,
  useBrainstormSessions,
  useCreateBrainstorm,
  useExpandIdea,
  useDismissIdea,
  useConvertIdea,
  useExportBrainstorm,
  useFinalizeBrainstorm,
  useDeleteBrainstorm,
  useJoinBrainstorm,
  useAddManualIdea,
  useBrainstormActivity,
  useUpdateBrainstormSettings,
  useStarIdea,
  useSummarizeBrainstorm,
  useRenameBrainstormSession,
} from '@/hooks/use-brainstorm'
import { useBrainstormSocket } from '@/hooks/use-brainstorm-socket'
import { LiveCursors, PresenceAvatars, useCursorTracking } from '@/components/brainstorm/live-cursors'
import { ActivityFeed } from '@/components/brainstorm/activity-feed'
import { BrainstormShareDialog } from '@/components/brainstorm/brainstorm-share-dialog'
import { GhostCursor } from '@/components/brainstorm/ghost-cursor'
import { PlaybackBar } from '@/components/brainstorm/playback-bar'
import type { BrainstormIdea, BrainstormNoteRef, BrainstormActivityItem } from '@/types/brainstorm'

const WaveCanvas = dynamic(
  () =>
    import('@/components/brainstorm/wave-canvas').then((m) => ({
      default: m.WaveCanvas,
    })),
  { ssr: false }
)

function CursorTrackerEffect({ containerRef, moveCursor }: { containerRef: React.RefObject<HTMLDivElement | null>; moveCursor: (c: { x: number; y: number } | null) => void }) {
  useCursorTracking(containerRef, moveCursor)
  return null
}

const WAVE_COLORS: Record<number, { border: string; bg: string; text: string }> = {
  1: { border: 'border-orange-200', bg: 'bg-orange-50', text: 'text-orange-600' },
  2: { border: 'border-brand-accent', bg: 'bg-brand-accent', text: 'text-brand-accent' },
  3: { border: 'border-violet-200', bg: 'bg-violet-50', text: 'text-violet-600' },
}

export function BrainstormPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { t, language } = useLanguage()
  const { data: authSession } = useSession()
  const urlSessionId = searchParams.get('session')
  const urlSeed = searchParams.get('seed')
  const urlSourceNoteId = searchParams.get('sourceNoteId')
  const urlInviteToken = searchParams.get('invite')

  const [seedInput, setSeedInput] = useState('')
  const [selectedIdeaId, setSelectedIdeaId] = useState<string | null>(null)
  const [activeSessionId, setActiveSessionId] = useState<string | null>(urlSessionId)
  const [autoStarted, setAutoStarted] = useState(false)

  useEffect(() => {
    if (urlSessionId && urlSessionId !== activeSessionId) {
      setActiveSessionId(urlSessionId)
    }
  }, [urlSessionId])
  const [showActivityFeed, setShowActivityFeed] = useState(false)
  const [showShareDialog, setShowShareDialog] = useState(false)
  const [manualEditCount, setManualEditCount] = useState(0)
  const [shareStatus, setShareStatus] = useState<'idle' | 'copying' | 'copied'>('idle')

  const { data: sessions, isLoading: sessionsLoading } = useBrainstormSessions()
  const { data: sessionResult, isLoading: sessionLoading } = useBrainstormSession(activeSessionId)
  const session = sessionResult?.session || null
  const sessionMeta = sessionResult?.meta
  const isGuest = sessionMeta?.role === 'guest'
  const canEdit = sessionMeta?.canEdit ?? true
  const updateSettings = useUpdateBrainstormSettings(activeSessionId || '')
  const createBrainstorm = useCreateBrainstorm()
  const expandIdea = useExpandIdea(activeSessionId || '')
  const dismissIdea = useDismissIdea(activeSessionId || '')
  const convertIdea = useConvertIdea(activeSessionId || '')
  const exportBrainstorm = useExportBrainstorm(activeSessionId || '')
  const finalizeBrainstorm = useFinalizeBrainstorm(activeSessionId || '')
  const deleteBrainstorm = useDeleteBrainstorm()
  const joinMutation = useJoinBrainstorm()
  const addManualIdea = useAddManualIdea(activeSessionId || '')
  const { data: activities } = useBrainstormActivity(activeSessionId)
  const starIdea = useStarIdea(activeSessionId || '')
  const summarize = useSummarizeBrainstorm(activeSessionId || '')
  const renameSession = useRenameBrainstormSession(activeSessionId || '')
  const [impactToast, setImpactToast] = useState<{ notesEnriched: number; notesMarkedDry: number } | null>(null)
  const [exportError, setExportError] = useState<string | null>(null)
  const [exportToast, setExportToast] = useState<{ noteTitle: string; notebookName: string } | null>(null)
  const [convertToast, setConvertToast] = useState<{ noteTitle: string; noteId: string } | null>(null)
  const [remoteMove, setRemoteMove] = useState<{ ideaId: string; x: number; y: number; _seq: number } | null>(null)
  const [playbackIdeas, setPlaybackIdeas] = useState<any[] | null>(null)
  const [viewMode, setViewMode] = useState<'canvas' | 'list'>('canvas')
  const [summaryOpen, setSummaryOpen] = useState(false)
  const [summaryText, setSummaryText] = useState<string | null>(null)
  const [renamingSession, setRenamingSession] = useState<string | null>(null)
  const [renameInput, setRenameInput] = useState('')
  const canvasContainerRef = useRef<HTMLDivElement>(null)

  const moveSeq = useRef(0)
  const { others: socketOthers, moveCursor, activities: socketActivities, socketRef, aiProcessingNodeId } = useBrainstormSocket(
    activeSessionId,
    authSession?.user?.id || null,
    authSession?.user?.name || null,
    useCallback((data: { ideaId: string; positionX: number; positionY: number }) => {
      moveSeq.current++
      setRemoteMove({ ideaId: data.ideaId, x: data.positionX, y: data.positionY, _seq: moveSeq.current })
    }, [])
  )

  const mergedActivities: BrainstormActivityItem[] = useMemo(() => {
    const restActivities: BrainstormActivityItem[] = (activities || []) as BrainstormActivityItem[]
    const socketActs = (socketActivities || []).map((a: any) => ({
      id: `${a.userId}-${a.action}-${Date.now()}-${Math.random()}`,
      action: a.action,
      details: a.details,
      createdAt: new Date().toISOString(),
      user: { name: a.userName || null, image: null },
    }))
    const seen = new Set<string>()
    const merged = [...socketActs, ...restActivities]
    return merged.filter((a) => {
      const key = `${a.action}-${a.user?.name}-${a.details?.ideaTitle || ''}`
      if (seen.has(key)) return false
      seen.add(key)
      return true
    }).slice(0, 50)
  }, [activities, socketActivities])

  const selectedIdea = useMemo(() => {
    if (!selectedIdeaId || !session) return null
    return session.ideas.find((i) => i.id === selectedIdeaId) || null
  }, [selectedIdeaId, session])

  useEffect(() => {
    if (urlSeed && !autoStarted && !activeSessionId && !createBrainstorm.isPending) {
      setAutoStarted(true)
      createBrainstorm.mutateAsync({
        seedIdea: urlSeed,
        sourceNoteId: urlSourceNoteId || undefined,
        locale: language,
      }).then((result) => {
        setActiveSessionId(result.session.id)
        router.replace('/brainstorm?session=' + result.session.id)
      }).catch(() => {})
    }
  }, [urlSeed, autoStarted, activeSessionId])

  useEffect(() => {
    if (urlInviteToken && !autoStarted) {
      setAutoStarted(true)
      joinMutation.mutateAsync(urlInviteToken).then((result) => {
        setActiveSessionId(result.sessionId)
        router.replace('/brainstorm?session=' + result.sessionId)
      }).catch(() => {})
    }
  }, [urlInviteToken])

  const handleStartBrainstorm = async (seed?: string) => {
    const input = seed || seedInput
    if (!input.trim()) return
    try {
      const result = await createBrainstorm.mutateAsync({ seedIdea: input.trim(), locale: language })
      setActiveSessionId(result.session.id)
      setSeedInput('')
    } catch {}
  }

  const handleDelete = async (sessionId: string) => {
    try {
      await deleteBrainstorm.mutateAsync(sessionId)
      if (activeSessionId === sessionId) {
        setActiveSessionId(null)
        setSelectedIdeaId(null)
      }
    } catch {}
  }

  const handleDeepen = async (idea: BrainstormIdea) => {
    try {
      await expandIdea.mutateAsync({ ideaId: idea.id, locale: language })
    } catch {}
  }

  const handleDismiss = async (ideaId: string) => {
    try {
      await dismissIdea.mutateAsync(ideaId)
      setSelectedIdeaId(null)
    } catch {}
  }

  const handleConvert = async (idea: BrainstormIdea) => {
    try {
      const result = await convertIdea.mutateAsync(idea.id)
      if (result?.id) {
        setConvertToast({ noteTitle: result.title || idea.title, noteId: result.id })
        setTimeout(() => {
          setConvertToast(null)
          router.push(`/home?openNote=${result.id}`)
        }, 2000)
      }
    } catch {}
  }

  const handleExport = async () => {
    setExportError(null)
    try {
      const result = await exportBrainstorm.mutateAsync()
      if (result?.id) {
        const notebookName = result._notebookName || t('brainstorm.exportDefaultNotebookName')
        setExportToast({ noteTitle: result.title || t('brainstorm.exportDefaultNoteTitle'), notebookName })
        setTimeout(() => {
          setExportToast(null)
          router.push(`/home?openNote=${result.id}`)
        }, 2000)
        return
      }
      const impact = await finalizeBrainstorm.mutateAsync()
      if (impact) {
        setImpactToast(impact)
        setTimeout(() => setImpactToast(null), 5000)
      }
    } catch (err: any) {
      setExportError(err?.message || t('brainstorm.exportFailedMessage'))
      setTimeout(() => setExportError(null), 4000)
    }
  }

  const handlePositionUpdate = async (id: string, pos: { x: number; y: number }) => {
    if (!activeSessionId) return
    socketRef.current?.emit('idea:moved', { ideaId: id, positionX: pos.x, positionY: pos.y, userId: authSession?.user?.id || '' })
    try {
      await fetch(`/api/brainstorm/${activeSessionId}/update-position`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ ideaId: id, positionX: pos.x, positionY: pos.y }),
      })
    } catch {}
  }

  const handleCreateIdea = useCallback(({ title, parentIdeaId }: { title: string; parentIdeaId?: string; x: number; y: number }) => {
    addManualIdea.mutate({ title, parentIdeaId, locale: language })
  }, [addManualIdea, language])

  const handleStarIdea = async (ideaId: string) => {
    try { await starIdea.mutateAsync(ideaId) } catch {}
  }

  const handleSummarize = async () => {
    setSummaryOpen(true)
    if (summaryText) return
    try {
      const text = await summarize.mutateAsync(language)
      setSummaryText(text)
    } catch { setSummaryText(null) }
  }

  const handleRenameSession = async (sessionId: string) => {
    if (!renameInput.trim() || renameInput.trim() === session?.seedIdea) {
      setRenamingSession(null)
      return
    }
    try {
      await renameSession.mutateAsync(renameInput.trim())
    } catch {}
    setRenamingSession(null)
  }

  const isGenerating = createBrainstorm.isPending || expandIdea.isPending

  return (
    <div className="h-full flex flex-col bg-[#F8F7F2] dark:bg-[#0A0A0A] overflow-hidden">
      <div className="p-4 sm:p-8 md:p-12 border-b border-border/20 backdrop-blur-md bg-white/20 dark:bg-black/20 z-10 relative overflow-hidden">
        <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">
          {/* Hamburger mobile */}
          <button
            className="md:hidden absolute -top-1 -start-1 p-2 text-foreground/70 hover:bg-foreground/5 rounded-lg transition-colors"
            onClick={() => window.dispatchEvent(new CustomEvent('open-mobile-sidebar'))}
            aria-label="Ouvrir la navigation"
          >
            <Menu size={20} />
          </button>
          <div className="flex items-center gap-3 sm:gap-5 mb-4 sm:mb-8 ps-9 md:ps-0">
            <motion.div
              animate={{ rotate: isGenerating ? 360 : 0 }}
              transition={{
                repeat: isGenerating ? Infinity : 0,
                duration: 20,
                ease: 'linear',
              }}
              className="w-10 h-10 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-brand-accent shadow-[0_0_20px_rgba(164,113,72,0.2)] flex items-center justify-center text-white shrink-0"
            >
              <Wind size={28} />
            </motion.div>
            <div className="flex-1">
              <h1 className="text-2xl sm:text-4xl font-serif font-medium text-foreground tracking-tight">
                {t('brainstorm.title')}
              </h1>
              <div className="flex items-center gap-2 mt-1">
                <span className="w-8 h-px bg-brand-accent/40" />
                <p className="text-[10px] text-muted-foreground tracking-[0.3em] uppercase font-bold">
                  {t('brainstorm.subtitle') || 'Unfold dimensions of potentiality'}
                </p>
              </div>
            </div>

            {session && !isGuest && (
              <div className="flex items-center gap-3">
                <button
                  onClick={handleSummarize}
                  disabled={summarize.isPending}
                  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-muted-foreground hover:text-brand-accent transition-all shadow-sm disabled:opacity-50"
                  title={t('brainstorm.export') || 'Export'}
                >
                  <Download size={14} />
                  <span className="hidden sm:inline">{t('brainstorm.export') || 'Export'}</span>
                </button>
                <button
                  onClick={() => setShowActivityFeed(!showActivityFeed)}
                  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 ${showActivityFeed ? 'bg-foreground text-background' : 'bg-white dark:bg-white/5 text-muted-foreground hover:text-foreground'}`}
                >
                  <Activity size={14} />
                  <span className="hidden sm:inline">{t('brainstorm.activityTitle') || 'Activity'}</span>
                </button>
                <button
                  onClick={() => setShowShareDialog(true)}
                  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-muted-foreground hover:text-foreground transition-all shadow-sm"
                >
                  <Share2 size={14} />
                  <span className="hidden sm:inline">{t('brainstorm.invite') || 'Invite'}</span>
                </button>
                <div className="flex items-center px-3 py-1.5 bg-white dark:bg-white/5 border border-border rounded-xl shadow-sm transition-all hover:border-emerald-500/30">
                  <div className="flex items-center gap-2 mr-3" title={t('brainstorm.liveCollaborationTitle')}>
                    <div className="relative flex h-2 w-2">
                      <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-2 w-2 bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.6)]"></span>
                    </div>
                    <span className="text-[10px] font-bold uppercase tracking-widest text-emerald-600 dark:text-emerald-400 hidden sm:inline-block">{t('brainstorm.liveStatus')}</span>
                  </div>
                  
                  <div className="flex items-center group/avatars">
                    {authSession?.user?.name && (
                      <div
                        className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white ring-2 ring-white dark:ring-[#1A1A1A] shadow-sm bg-brand-accent z-10 transition-transform hover:scale-110 hover:z-20"
                        title={`${authSession.user.name} (You)`}
                      >
                        {authSession.user.name.charAt(0).toUpperCase()}
                      </div>
                    )}
                    {socketOthers.slice(0, 3).map((user, idx) => (
                      <div
                        key={user.userId}
                        className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white ring-2 ring-white dark:ring-[#1A1A1A] shadow-sm transition-transform hover:scale-110 hover:z-20"
                        style={{ backgroundColor: user.color, marginLeft: '-8px', zIndex: 9 - idx }}
                        title={user.name}
                      >
                        {user.name.charAt(0).toUpperCase()}
                      </div>
                    ))}
                    {socketOthers.length > 3 && (
                      <div 
                        className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-muted-foreground bg-black/5 dark:bg-white/10 ring-2 ring-white dark:ring-[#1A1A1A] shadow-sm" 
                        style={{ marginLeft: '-8px', zIndex: 5 }}
                        title={`${socketOthers.length - 3} other participants`}
                      >
                        +{socketOthers.length - 3}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>

          <div className="relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-brand-accent/20 to-brand-accent/10 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()}
              placeholder={t('brainstorm.placeholder') || 'Enter a concept to unfold...'}
              className="w-full relative bg-white dark:bg-[#1A1A1A] border-2 rounded-2xl px-4 sm:px-8 py-4 sm:py-7 pr-16 sm:pr-20 outline-none transition-all text-lg sm:text-2xl font-serif italic text-foreground shadow-sm group-hover:shadow-md border-border/40 focus:border-brand-accent/40 focus:ring-4 focus:ring-brand-accent/5"
            />
            <button
              onClick={() => handleStartBrainstorm()}
              disabled={isGenerating || !seedInput.trim()}
              className="absolute right-4 top-4 bottom-4 px-6 bg-foreground dark:bg-brand-accent text-background 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-white/30 border-t-white rounded-full animate-spin" />
              ) : (
                <Plus size={24} />
              )}
            </button>
          </div>

          <AnimatePresence>
            {createBrainstorm.isPending && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="mt-6 flex items-center gap-4 text-brand-accent/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-brand-accent"
                    />
                  ))}
                </div>
                <span className="text-base tracking-tight">
                  {t('brainstorm.generating') || 'AI is harvesting seeds of thought...'}
                </span>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Seed prompts — shown only when no session and not generating */}
          {!session && !createBrainstorm.isPending && !activeSessionId && (
            <motion.div
              initial={{ opacity: 0, y: 6 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="mt-5 flex flex-wrap gap-2"
            >
              {[
                t('brainstorm.exampleSeed1') || 'Simplify my morning routine',
                t('brainstorm.exampleSeed2') || 'Ideas for a creative project this weekend',
                t('brainstorm.exampleSeed3') || 'Systems to manage my energy better',
                t('brainstorm.exampleSeed4') || 'What I learned this week',
              ].map((example) => (
                <button
                  key={example}
                  onClick={() => handleStartBrainstorm(example)}
                  className="px-4 py-2 rounded-full border border-border bg-white dark:bg-white/5 text-sm text-muted-foreground hover:text-foreground hover:border-brand-accent/40 hover:bg-brand-accent/5 transition-all"
                >
                  {example}
                </button>
              ))}
            </motion.div>
          )}

          {/* View mode toggle — shown on mobile only when a session is active */}
          {session && (
            <div className="mt-4 md:hidden flex items-center gap-2">
              <button
                onClick={() => setViewMode('canvas')}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-widest transition-all ${viewMode === 'canvas' ? 'bg-foreground text-background' : 'text-muted-foreground hover:bg-foreground/5'}`}
              >
                <LayoutGrid size={12} /> {t('brainstorm.viewCanvas') || 'Canvas'}
              </button>
              <button
                onClick={() => setViewMode('list')}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-widest transition-all ${viewMode === 'list' ? 'bg-foreground text-background' : 'text-muted-foreground hover:bg-foreground/5'}`}
              >
                <List size={12} /> {t('brainstorm.viewList') || 'List'}
              </button>
              <span className="text-[10px] text-muted-foreground ms-auto">
                {session.ideas.filter(i => i.status !== 'dismissed').length} {t('brainstorm.ideasCount') || 'ideas'}
              </span>
            </div>
          )}
        </div>
      </div>

      <div className="flex-1 flex overflow-hidden relative">
        <div className="flex-1 relative" ref={canvasContainerRef}>
          {session && <LiveCursors others={socketOthers} />}
          <GhostCursor 
            isActive={isGenerating || !!aiProcessingNodeId} 
            targetId={aiProcessingNodeId || (expandIdea.isPending ? selectedIdeaId : null)}
            containerRef={canvasContainerRef} 
          />
          <CursorTrackerEffect containerRef={canvasContainerRef} moveCursor={moveCursor} />
          {sessionLoading ? (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-8 h-8 border-2 border-foreground/20 border-t-foreground rounded-full animate-spin" />
            </div>
          ) : session && viewMode === 'list' ? (
            /* Mobile list view */
            <div className="h-full overflow-y-auto p-4 space-y-6">
              {[1, 2, 3].map(wave => {
                const waveIdeas = session.ideas.filter(i => i.waveNumber === wave && i.status !== 'dismissed')
                if (waveIdeas.length === 0) return null
                return (
                  <div key={wave}>
                    <div className="flex items-center gap-2 mb-3">
                      <div
                        className="w-2 h-2 rounded-full"
                        style={{ backgroundColor: wave === 1 ? '#fb923c' : wave === 2 ? '#60a5fa' : '#a78bfa' }}
                      />
                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                        {t('brainstorm.waveBadge', { wave })} — {waveIdeas.length}
                      </span>
                    </div>
                    <div className="space-y-2">
                      {waveIdeas.map(idea => (
                        <button
                          key={idea.id}
                          onClick={() => { setSelectedIdeaId(idea.id) }}
                          className={`w-full text-start p-4 rounded-xl border transition-all ${selectedIdeaId === idea.id ? 'border-brand-accent/40 bg-brand-accent/5' : 'border-border bg-white dark:bg-white/5 hover:border-foreground/20'}`}
                        >
                          <div className="flex items-start gap-2">
                            <div className="flex-1 min-w-0">
                              <p className="font-medium text-foreground text-sm leading-snug">{idea.title}</p>
                              <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{idea.description}</p>
                            </div>
                            <div className="shrink-0 flex items-center gap-1.5">
                              {idea.isStarred && <Star size={12} className="text-amber-400 fill-amber-400" />}
                              {idea.status === 'converted' && <Check size={12} className="text-emerald-500" />}
                              <ChevronRight size={14} className="text-muted-foreground/40" />
                            </div>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )
              })}
            </div>
          ) : session ? (
            <WaveCanvas
              session={session}
              onNodeSelect={setSelectedIdeaId}
              onPositionUpdate={handlePositionUpdate}
              selectedNodeId={selectedIdeaId}
              onCreateIdea={handleCreateIdea}
              remoteMove={remoteMove}
              manualEditTrigger={manualEditCount}
              playbackIdeas={playbackIdeas}
            />
          ) : (
            <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-muted-foreground animate-pulse" />
              <p className="text-xl font-serif italic text-muted-foreground">
                 {t('brainstorm.canvasWaitingHint')}
              </p>
            </div>
          )}

          <AnimatePresence>
            {session && (
              <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-[#F4F1EA] dark:bg-black/60 backdrop-blur-xl border border-border shadow-xl rounded-full flex items-center gap-6">
                  {[1, 2, 3].map((w) => (
                    <div key={w} className="flex items-center gap-2">
                      <div
                        className="w-2 h-2 rounded-full"
                        style={{
                          backgroundColor: WAVE_COLORS[w]?.border?.replace('border-', '') === 'orange-200' ? '#fb923c' : w === 2 ? '#60a5fa' : '#a78bfa',
                          boxShadow: `0 0 8px ${w === 1 ? 'rgba(251,146,60,0.6)' : w === 2 ? 'rgba(96,165,250,0.6)' : 'rgba(167,139,250,0.6)'}`,
                        }}
                      />
                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                        {t('brainstorm.waveBadge', { wave: w })}
                      </span>
                    </div>
                  ))}
                </div>

                {canEdit && (
                  <button
                    onClick={() => setManualEditCount((c) => c + 1)}
                    className="px-6 py-3 bg-[#F4F1EA] 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-muted-foreground hover:bg-foreground hover:text-background transition-all"
                  >
                    <Plus size={14} />
                    {t('brainstorm.addIdea')}
                  </button>
                )}
              </motion.div>
            )}
          </AnimatePresence>

          {session && (
            <ActivityFeed
              activities={mergedActivities}
              isOpen={showActivityFeed}
              onToggle={() => setShowActivityFeed(!showActivityFeed)}
              t={t}
            />
          )}

          {session && activeSessionId && (
            <PlaybackBar
              sessionId={activeSessionId}
              onSnapshotSelect={setPlaybackIdeas}
              onExitPlayback={() => setPlaybackIdeas(null)}
            />
          )}
        </div>

        <AnimatePresence>
          {selectedIdea && (
            <motion.div
              initial={{ y: '100%', x: 0 }}
              animate={{ y: 0, x: 0 }}
              exit={{ y: '100%', x: 0 }}
              transition={{ type: 'spring', damping: 30, stiffness: 300 }}
              className="fixed bottom-0 start-0 end-0 max-h-[80vh] z-30 md:relative md:bottom-auto md:start-auto md:end-auto md:max-h-none md:static md:w-[400px] border-t md:border-t-0 md:border-l border-border bg-white dark:bg-[#1A1A1A] flex flex-col rounded-t-2xl md:rounded-none shadow-[0_-20px_40px_rgba(0,0,0,0.08)] md:shadow-[-20px_0_40px_rgba(0,0,0,0.05)]"
            >
              {/* Drag handle for mobile */}
              <div className="md:hidden flex justify-center pt-3 pb-1 shrink-0">
                <div className="w-10 h-1 rounded-full bg-border" />
              </div>
              <div className="p-8 flex-1 overflow-y-auto">
                <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-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-500/15 text-orange-600 dark:text-orange-400'
                        : selectedIdea.waveNumber === 2
                          ? 'border-brand-accent dark:border-blue-700 bg-brand-accent dark:bg-brand-accent/15 text-brand-accent dark:text-brand-accent'
                          : 'border-violet-300 dark:border-violet-700 bg-violet-50 dark:bg-violet-500/15 text-violet-600 dark:text-violet-400'
                    }`}
                  >
                    {t('brainstorm.wave') || 'Wave'} {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">
                        {t('brainstorm.noteCreated') || 'Note Created'}
                      </span>
                    )}
                    {canEdit && (
                      <button
                        onClick={() => handleStarIdea(selectedIdea.id)}
                        disabled={starIdea.isPending}
                        className={`p-2 rounded-full transition-colors ${selectedIdea.isStarred ? 'text-amber-400 hover:text-amber-500' : 'text-muted-foreground hover:text-amber-400'}`}
                        title={selectedIdea.isStarred ? (t('brainstorm.unstar') || 'Unstar') : (t('brainstorm.star') || 'Star')}
                      >
                        <Star size={18} className={selectedIdea.isStarred ? 'fill-amber-400' : ''} />
                      </button>
                    )}
                    <button
                      onClick={() => setSelectedIdeaId(null)}
                      className="p-2 hover:bg-foreground/5 rounded-full transition-colors text-muted-foreground"
                    >
                      <ChevronRight size={20} />
                    </button>
                  </div>
                </div>

                <h2 className="text-3xl font-serif font-medium text-foreground 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-brand-accent" />
                    <span className="text-xs font-bold text-muted-foreground">
                      {t('brainstorm.novelty')}: {selectedIdea.noveltyScore ?? t('common.notAvailable')}/10
                    </span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    {selectedIdea.createdByType === 'human' ? (
                      <>
                        <div className="w-4 h-4 rounded-full bg-brand-accent flex items-center justify-center text-[8px] font-bold text-white">
                          {(selectedIdea as any).creator?.name?.charAt(0)?.toUpperCase() || 'U'}
                        </div>
                        <span className="text-[10px] font-bold uppercase tracking-widest text-brand-accent">
                          {t('brainstorm.humanIdea') || 'Human'}
                        </span>
                      </>
                    ) : (
                      <>
                        <span className="text-violet-500 text-xs">✦</span>
                        <span className="text-[10px] font-bold uppercase tracking-widest text-violet-500">
                          {t('brainstorm.aiIdea') || 'AI'}
                        </span>
                      </>
                    )}
                  </div>
                </div>

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

                {selectedIdea.connectionToSeed && (
                  <div className="p-6 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-border/40 mb-10">
                    <h4 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-3">
                      {t('brainstorm.originConnection') || 'Origin connection'}
                    </h4>
                    <p className="text-sm italic text-muted-foreground leading-relaxed">
                      &ldquo;{selectedIdea.connectionToSeed}&rdquo;
                    </p>
                  </div>
                )}

                    {selectedIdea.noteRefs && selectedIdea.noteRefs.length > 0 && (
                  <div className="space-y-3 mb-10">
                    <h4 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1">
                      {t('brainstorm.ideaOrigin') || 'Origin of the idea'}
                    </h4>
                    {selectedIdea.noteRefs.map((ref: BrainstormNoteRef) => {
                      const isPositive = ref.relation === 'derived_from' || ref.relation === 'extends'
                      const isNegative = ref.relation === 'opposes'
                      const badgeColor = isPositive
                        ? 'bg-emerald-500/10 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-700'
                        : isNegative
                          ? 'bg-rose-500/10 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 border-rose-200 dark:border-rose-700'
                          : 'bg-amber-500/10 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-700'
                      const relLabel = t(`brainstorm.${ref.relation}`) || ref.relation
                      const vis = (ref as any).visibility || 'participants'
                      const isRestricted = vis === 'owner_only'

                      return (
                        <div
                          key={ref.id}
                          className="p-4 rounded-xl border border-border bg-white dark:bg-white/5"
                        >
                          <div className="flex items-start gap-3">
                            <span className={`shrink-0 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider border ${badgeColor}`}>
                              {relLabel}
                            </span>
                            {isRestricted && !isGuest && (
                              <span className="shrink-0 px-1.5 py-0.5 rounded-full text-[8px] font-bold uppercase tracking-wider border border-amber-200 dark:border-amber-700 bg-amber-500/10 text-amber-600 dark:text-amber-400 flex items-center gap-0.5">
                                <Lock size={8} /> {t('brainstorm.ownerBadge')}
                              </span>
                            )}
                            <div className="flex-1 min-w-0">
                              {ref.note ? (
                                <p className="text-sm font-medium text-foreground truncate">
                                  {ref.note.title || t('notes.untitled')}
                                </p>
                              ) : (
                                <p className="text-sm italic text-muted-foreground">
                                  {t('brainstorm.noNoteLink') || 'Purely generative idea'}
                                </p>
                              )}
                              <p className="text-xs italic text-muted-foreground mt-1 leading-relaxed">
                                {ref.explanation}
                              </p>
                            </div>
                            {ref.noteId && (
                              <button
                                onClick={() => router.push(`/home?openNote=${ref.noteId}`)}
                                className="shrink-0 px-2 py-1 text-[9px] font-bold uppercase tracking-wider rounded-lg bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:text-foreground transition-all"
                              >
                                {t('brainstorm.viewNote') || 'View'}
                              </button>
                            )}
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )}

                {canEdit && (
                  <div className="grid grid-cols-1 gap-4">
                    <div className="grid grid-cols-2 gap-4">
                      <button
                        onClick={() => handleDeepen(selectedIdea)}
                        disabled={expandIdea.isPending}
                        className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-brand-accent/40 hover:bg-brand-accent/5 transition-all group disabled:opacity-50"
                      >
                        <Wind size={24} className="text-muted-foreground group-hover:text-brand-accent mb-2" />
                        <span className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground group-hover:text-foreground">
                          {expandIdea.isPending ? (t('brainstorm.deepening') || 'Generating...') : (t('brainstorm.deepen') || 'Deepen')}
                        </span>
                      </button>
                      <button
                        onClick={() => handleConvert(selectedIdea)}
                        disabled={selectedIdea.status === 'converted' || convertIdea.isPending}
                        className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-emerald-400/40 hover:bg-emerald-500/5 transition-all group disabled:opacity-50"
                      >
                        <FileText size={24} className="text-muted-foreground group-hover:text-emerald-500 mb-2" />
                        <span className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground group-hover:text-foreground">
                          {convertIdea.isPending ? (t('brainstorm.converting') || 'Converting...') : (t('brainstorm.extract') || 'Create Note')}
                        </span>
                      </button>
                    </div>

                    <button
                      onClick={() => handleDismiss(selectedIdea.id)}
                      className="w-full py-4 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground hover:text-rose-500 hover:bg-rose-500/5 rounded-xl transition-all border border-transparent hover:border-rose-500/10"
                    >
                      {t('brainstorm.dismiss') || 'Not pertinent'}
                    </button>
                  </div>
                )}

                {isGuest && (
                  <div className="mt-6 px-4 py-3 bg-brand-accent/5 border border-brand-accent/10 rounded-xl flex items-center gap-2">
                    <Globe size={14} className="text-brand-accent shrink-0" />
                    <span className="text-[11px] text-brand-accent">
                      {t('brainstorm.guestReadOnlyNotice')}
                    </span>
                  </div>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <div className="w-16 border-l border-border flex flex-col items-center py-6 gap-6 bg-white dark:bg-[#1A1A1A] z-10">
          <History size={18} className="text-muted-foreground" />
          <div className="w-px flex-1 bg-border/40" />
          <div className="flex flex-col gap-3 overflow-y-auto px-2">
            {sessions?.map((s) => (
              <div key={s.id} className="relative group/session">
                <button
                  onClick={() => setActiveSessionId(s.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 === s.id
                      ? 'bg-foreground text-background scale-110 shadow-lg'
                      : (s as any)._owned === false
                        ? 'bg-brand-accent dark:bg-brand-accent/10 text-brand-accent hover:bg-blue-100 hover:text-brand-accent'
                        : 'bg-white dark:bg-white/10 text-muted-foreground hover:bg-foreground/5 hover:text-foreground'
                  }`}
                  title={s.seedIdea}
                >
                  {s.seedIdea.charAt(0).toUpperCase()}
                </button>
                {activeSessionId === s.id && (
                  <button
                    onClick={() => { setRenamingSession(s.id); setRenameInput(s.seedIdea) }}
                    className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-foreground/10 hover:bg-foreground/20 flex items-center justify-center opacity-0 group-hover/session:opacity-100 transition-opacity"
                    title={t('brainstorm.renameSession') || 'Rename'}
                  >
                    <Edit2 size={8} className="text-foreground" />
                  </button>
                )}
              </div>
            ))}
          </div>
          <div className="w-px h-12 bg-border/40" />
        </div>
      </div>

      {activeSessionId && session && (
        <BrainstormShareDialog
          open={showShareDialog}
          onOpenChange={setShowShareDialog}
          sessionId={activeSessionId}
          seedIdea={session.seedIdea}
          isPublic={(session as any).isPublic || false}
          guestCanEdit={(session as any).guestCanEdit || false}
        />
      )}

      {/* AI Summary modal */}
      <AnimatePresence>
        {summaryOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
            onClick={() => setSummaryOpen(false)}
          >
            <motion.div
              initial={{ y: 40, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: 40, opacity: 0 }}
              transition={{ type: 'spring', damping: 30, stiffness: 300 }}
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-lg bg-white dark:bg-[#1A1A1A] rounded-2xl shadow-2xl p-8 relative"
            >
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <Sparkles size={20} className="text-brand-accent" />
                  <h3 className="font-serif text-xl font-medium">{t('brainstorm.exportModalTitle') || 'Session summary'}</h3>
                </div>
                <button onClick={() => setSummaryOpen(false)} className="p-1.5 hover:bg-foreground/5 rounded-full text-muted-foreground">
                  <X size={16} />
                </button>
              </div>
              {summarize.isPending ? (
                <div className="flex items-center gap-3 text-muted-foreground italic py-8 justify-center">
                  <div className="flex gap-1.5">
                    {[0, 1, 2].map(i => (
                      <motion.div key={i} animate={{ scale: [1, 1.5, 1], opacity: [0.3, 1, 0.3] }} transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2 }} className="w-1.5 h-1.5 rounded-full bg-brand-accent" />
                    ))}
                  </div>
                  <span>{t('brainstorm.generating') || 'Generating synthesis...'}</span>
                </div>
              ) : summaryText ? (
                <p className="text-foreground/80 leading-relaxed font-light text-base">{summaryText}</p>
              ) : (
                <p className="text-muted-foreground italic text-sm text-center py-6">{t('brainstorm.summaryError') || 'Could not generate summary'}</p>
              )}
              <div className="mt-6 flex items-center gap-3 justify-between">
                {summaryText && (
                  <button
                    onClick={() => { setSummaryText(null); handleSummarize() }}
                    className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {t('brainstorm.regenerateSummary') || 'Regenerate'}
                  </button>
                )}
                <button
                  onClick={() => { setSummaryOpen(false); handleExport() }}
                  disabled={exportBrainstorm.isPending || summarize.isPending}
                  className="ms-auto flex items-center gap-2 px-5 py-2.5 bg-foreground text-background rounded-xl text-xs font-bold uppercase tracking-widest disabled:opacity-50 hover:opacity-80 transition-opacity"
                >
                  <Download size={13} />
                  {t('brainstorm.exportAsNote') || 'Export as note'}
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Rename session modal */}
      <AnimatePresence>
        {renamingSession && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
            onClick={() => setRenamingSession(null)}
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
              className="w-full max-w-sm bg-white dark:bg-[#1A1A1A] rounded-2xl shadow-2xl p-6"
            >
              <h3 className="font-serif text-lg font-medium mb-4">{t('brainstorm.renameSession') || 'Rename session'}</h3>
              <input
                autoFocus
                type="text"
                value={renameInput}
                onChange={e => setRenameInput(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') handleRenameSession(renamingSession!); if (e.key === 'Escape') setRenamingSession(null) }}
                className="w-full border border-border rounded-xl px-4 py-3 text-sm bg-transparent outline-none focus:border-brand-accent/40 focus:ring-2 focus:ring-brand-accent/10"
              />
              <div className="flex gap-2 mt-4 justify-end">
                <button onClick={() => setRenamingSession(null)} className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors">{t('common.cancel') || 'Cancel'}</button>
                <button onClick={() => handleRenameSession(renamingSession!)} disabled={renameSession.isPending} className="px-4 py-2 text-sm bg-foreground text-background rounded-xl disabled:opacity-50">{t('common.save') || 'Save'}</button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {impactToast && (
          <motion.div
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 px-6 py-4 bg-foreground text-background rounded-2xl shadow-2xl flex items-center gap-4 text-sm font-medium"
          >
            <span>
              {impactToast.notesEnriched === 0 && impactToast.notesMarkedDry === 0
                ? t('brainstorm.linkCopied')
                : <>
                    {impactToast.notesEnriched > 0 && t('brainstorm.impactNotesEnriched', { count: impactToast.notesEnriched })}
                    {impactToast.notesEnriched > 0 && impactToast.notesMarkedDry > 0 && t('brainstorm.impactSeparator')}
                    {impactToast.notesMarkedDry > 0 && t('brainstorm.impactNotesMarkedDry', { count: impactToast.notesMarkedDry })}
                  </>
              }
            </span>
            <button onClick={() => setImpactToast(null)} className="text-background/60 hover:text-background">
              ✕
            </button>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {exportError && (
          <motion.div
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 px-6 py-4 bg-rose-500 text-white rounded-2xl shadow-2xl flex items-center gap-4 text-sm font-medium"
          >
            <span>{exportError}</span>
            <button onClick={() => setExportError(null)} className="text-white/60 hover:text-white">
              ✕
            </button>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {exportToast && (
          <motion.div
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 px-6 py-4 bg-emerald-600 text-white rounded-2xl shadow-2xl flex items-center gap-3 text-sm font-medium"
          >
            <Wind size={18} />
            <div className="flex flex-col">
              <span className="font-bold">{exportToast.noteTitle}</span>
              <span className="text-[11px] text-emerald-100">
                {t('brainstorm.exportNotebookPrefix')} {exportToast.notebookName}
              </span>
            </div>
            <div className="ml-3 flex items-center gap-1.5 text-emerald-200 text-[10px]">
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse" />
              {t('brainstorm.exportOpening')}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {convertToast && (
          <motion.div
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 px-6 py-4 bg-emerald-600 text-white rounded-2xl shadow-2xl flex items-center gap-3 text-sm font-medium"
          >
            <FileText size={18} />
            <div className="flex flex-col">
              <span className="font-bold">{convertToast.noteTitle}</span>
              <span className="text-[11px] text-emerald-100">{t('brainstorm.noteCreated') || 'Note Created'}</span>
            </div>
            <div className="ml-3 flex items-center gap-1.5 text-emerald-200 text-[10px]">
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse" />
              {t('brainstorm.exportOpening')}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}