import { useState, useRef, useCallback, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, GripHorizontal } from 'lucide-react'
import { cn } from '@/lib/utils'
import { PageMeta } from '@/components/common/PageMeta'
import { aiSessionsApi } from '@/api/aiSessions'
import { ChatSidebar, ChatSidebarCollapsedBar } from '@/components/assistant/ChatSidebar'
import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
import { IncidentHeader } from '@/components/assistant/IncidentHeader'
import { StepsPanel } from '@/components/assistant/StepsPanel'
import { FlowPilotAsks } from '@/components/assistant/FlowPilotAsks'
import { WhatWeKnow } from '@/components/assistant/WhatWeKnow'
import { ViewToggle } from '@/components/assistant/ViewToggle'
import { useAssistantSession } from '@/hooks/useAssistantSession'
import { useFeatureFlag } from '@/hooks/useFeatureFlag'
import type { TriageMeta, EvidenceItem, TriageUpdate } from '@/types/ai-session'

export default function CockpitPage() {
  const navigate = useNavigate()
  const hasCockpit = useFeatureFlag('flowpilot_cockpit')
  const session = useAssistantSession()

  // ── Cockpit-specific state ──
  const [triageMeta, setTriageMeta] = useState<TriageMeta>({
    client_name: null, asset_name: null, issue_category: null,
    triage_hypothesis: null, evidence_items: [],
  })
  const [psaTicketId, setPsaTicketId] = useState<string | null>(null)
  const [workZonePct, setWorkZonePct] = useState(() => {
    const saved = localStorage.getItem('rf-assistant-work-zone-height')
    return saved ? parseFloat(saved) : 55
  })
  const [activeStepIndex, setActiveStepIndex] = useState(0)
  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
  const [showOnboarding, setShowOnboarding] = useState(() =>
    !localStorage.getItem('rf-cockpit-onboarded')
  )
  const splitContainerRef = useRef<HTMLDivElement>(null)
  const prevMessageCountRef = useRef(session.messages.length)

  const dismissOnboarding = () => {
    setShowOnboarding(false)
    localStorage.setItem('rf-cockpit-onboarded', '1')
  }

  // ── Feature flag redirect ──
  useEffect(() => {
    if (!hasCockpit && session.activeChatId) {
      navigate(`/assistant/${session.activeChatId}`, { replace: true })
    } else if (!hasCockpit) {
      navigate('/assistant', { replace: true })
    }
  }, [hasCockpit, session.activeChatId, navigate])

  // ── Wire triage data from session loads ──
  useEffect(() => {
    session.onSessionLoadedRef.current = (detail) => {
      setTriageMeta({
        client_name: detail.client_name ?? null,
        asset_name: detail.asset_name ?? null,
        issue_category: detail.issue_category ?? null,
        triage_hypothesis: detail.triage_hypothesis ?? null,
        evidence_items: (detail.evidence_items as EvidenceItem[]) ?? [],
      })
      setPsaTicketId(detail.psa_ticket_id ?? null)
    }
    return () => { session.onSessionLoadedRef.current = null }
  }, [session.onSessionLoadedRef])

  // ── Wire triage updates from AI responses ──
  useEffect(() => {
    session.onTriageUpdateRef.current = mergeTriageUpdate
    return () => { session.onTriageUpdateRef.current = null }
  }, [session.onTriageUpdateRef]) // eslint-disable-line react-hooks/exhaustive-deps

  // ── Handle prefill from command palette / dashboard handoff ──
  useEffect(() => {
    session.handlePrefill('/cockpit')
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  // ── Dismiss onboarding when first message is sent ──
  useEffect(() => {
    if (showOnboarding && session.messages.length > prevMessageCountRef.current) {
      dismissOnboarding()
    }
    prevMessageCountRef.current = session.messages.length
  }, [session.messages.length, showOnboarding])

  // Reset all cockpit-local state when switching cases.
  // Triage data gets repopulated via onSessionLoadedRef after the async fetch.
  useEffect(() => {
    setActiveStepIndex(0)
    setCompletedSteps(new Set())
    setTriageMeta({
      client_name: null, asset_name: null, issue_category: null,
      triage_hypothesis: null, evidence_items: [],
    })
    setPsaTicketId(null)
  }, [session.activeChatId])

  // Reset step UI when a new action set arrives from AI.
  useEffect(() => {
    setActiveStepIndex(0)
    setCompletedSteps(new Set())
  }, [session.activeActions])

  // ── Triage handlers ──

  const handleTriageFieldSave = useCallback(async (field: keyof TriageMeta, value: string) => {
    if (!session.activeChatId) return
    try {
      await aiSessionsApi.updateTriage(session.activeChatId, { [field]: value })
      setTriageMeta(prev => ({ ...prev, [field]: value }))
    } catch {
      // best-effort — toast handled by caller if needed
    }
  }, [session.activeChatId])

  const handleEvidenceAdd = useCallback(async (text: string, status: EvidenceItem['status']) => {
    const newItem: EvidenceItem = { text, status }
    let updated: EvidenceItem[] = []
    setTriageMeta(prev => {
      updated = [...prev.evidence_items, newItem]
      return { ...prev, evidence_items: updated }
    })
    if (session.activeChatId) {
      try { await aiSessionsApi.updateTriage(session.activeChatId, { evidence_items: updated }) } catch { /* best-effort */ }
    }
  }, [session.activeChatId])

  const handleEvidenceEdit = useCallback(async (index: number, text: string, status: EvidenceItem['status']) => {
    let updated: EvidenceItem[] = []
    setTriageMeta(prev => {
      updated = prev.evidence_items.map((item, i) => i === index ? { text, status } : item)
      return { ...prev, evidence_items: updated }
    })
    if (session.activeChatId) {
      try { await aiSessionsApi.updateTriage(session.activeChatId, { evidence_items: updated }) } catch { /* best-effort */ }
    }
  }, [session.activeChatId])

  const handleStepComplete = useCallback((index: number) => {
    setCompletedSteps(prev => {
      const next = new Set(prev)
      next.add(index)
      // Auto-advance using the updated set (avoids stale closure)
      const nextIncomplete = session.activeActions.findIndex((_, i) => i > index && !next.has(i))
      if (nextIncomplete !== -1) {
        setActiveStepIndex(nextIncomplete)
      } else if (index + 1 < session.activeActions.length) {
        setActiveStepIndex(index + 1)
      }
      return next
    })
  }, [session.activeActions])

  const handleStepSelect = useCallback((index: number) => {
    setActiveStepIndex(index)
  }, [])

  // Merge triage_update from AI response into local state
  const mergeTriageUpdate = useCallback((update: TriageUpdate) => {
    setTriageMeta(prev => {
      const merged = { ...prev }
      // AI only fills null fields (manual edits win)
      if (update.client_name && !prev.client_name) merged.client_name = update.client_name
      if (update.asset_name && !prev.asset_name) merged.asset_name = update.asset_name
      if (update.issue_category && !prev.issue_category) merged.issue_category = update.issue_category
      if (update.triage_hypothesis && !prev.triage_hypothesis) merged.triage_hypothesis = update.triage_hypothesis
      // Append new evidence items
      if (update.evidence_items && update.evidence_items.length > 0) {
        merged.evidence_items = [...prev.evidence_items, ...update.evidence_items]
      }
      return merged
    })
  }, [])

  // Drag handle for work zone / chat split
  const handleDragStart = useCallback((e: React.MouseEvent) => {
    e.preventDefault()
    const container = splitContainerRef.current
    if (!container) return
    const rect = container.getBoundingClientRect()
    const onMove = (ev: MouseEvent) => {
      const pct = ((ev.clientY - rect.top) / rect.height) * 100
      const clamped = Math.max(25, Math.min(75, pct))
      setWorkZonePct(clamped)
    }
    const onUp = () => {
      document.removeEventListener('mousemove', onMove)
      document.removeEventListener('mouseup', onUp)
      setWorkZonePct(prev => { localStorage.setItem('rf-assistant-work-zone-height', String(prev)); return prev })
    }
    document.addEventListener('mousemove', onMove)
    document.addEventListener('mouseup', onUp)
  }, [])

  return (
    <>
    <PageMeta title="FlowPilot" />
    <div className="flex h-[calc(100vh-3.5rem)]">
      {/* Sidebar — hidden on mobile, collapsed to top bar or full sidebar on desktop */}
      {!session.sidebarCollapsed && (
        <div className="hidden sm:block">
          <ChatSidebar
            chats={session.chats}
            activeChatId={session.activeChatId}
            onSelectChat={session.selectChat}
            onNewChat={session.handleNewChat}
            onDeleteChat={session.handleDeleteChat}
            onTogglePin={session.handleTogglePin}
            onToggleCollapse={session.toggleSidebarCollapse}
          />
        </div>
      )}
      <div className="sm:hidden">
        <ChatSidebar
          chats={session.chats}
          activeChatId={session.activeChatId}
          onSelectChat={session.selectChat}
          onNewChat={session.handleNewChat}
          onDeleteChat={session.handleDeleteChat}
          onTogglePin={session.handleTogglePin}
          mobileOpen={session.mobileSidebarOpen}
          onMobileClose={() => session.setMobileSidebarOpen(false)}
        />
      </div>

      {/* Main chat area + optional branch sidebar */}
      <div className="flex-1 flex flex-col min-w-0">

      {/* Collapsed sidebar top bar — desktop only */}
      {session.sidebarCollapsed && (
        <div className="hidden sm:block">
          <ChatSidebarCollapsedBar
            chats={session.chats}
            activeChatId={session.activeChatId}
            onNewChat={session.handleNewChat}
            onExpand={session.toggleSidebarCollapse}
          />
        </div>
      )}

      {/* Cockpit content area */}
      <div className="flex-1 flex flex-col min-w-0 min-h-0">
        {/* Mobile header with case history toggle */}
        <div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
          <button
            onClick={() => session.setMobileSidebarOpen(true)}
            className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
          >
            <MessageSquare size={16} />
            Cases
          </button>
          <div className="flex-1" />
          <button
            onClick={session.handleNewChat}
            className="rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors"
          >
            + New Case
          </button>
        </div>

        {/* View tab bar — persistent when a session is active */}
        {session.activeChatId && (
          <ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
        )}

        {session.activeChatId ? (
          <>
            {/* Incident Header */}
            <IncidentHeader
              triageMeta={triageMeta}
              psaTicketId={psaTicketId}
              onFieldSave={handleTriageFieldSave}
              onResolve={() => session.setShowConclude(true)}
              onStatusUpdate={session.messages.length >= 2 ? () => session.setShowStatusUpdate(true) : undefined}
              onClose={() => session.setShowConclude(true)}
            />

            {/* Resizable work zone + conversation log split */}
            <div ref={splitContainerRef} className="flex-1 flex flex-col min-h-0 relative">
              {/* First-run onboarding overlay */}
              {showOnboarding && session.messages.length === 0 && (
                <div className="absolute inset-0 z-30 pointer-events-none">
                  {/* Steps zone label */}
                  <div className="absolute top-3 left-3 pointer-events-auto">
                    <div className="bg-elevated border border-accent/30 rounded-lg px-3 py-2 shadow-lg max-w-[200px]">
                      <p className="text-xs font-medium text-accent mb-0.5">Steps Panel</p>
                      <p className="text-[11px] text-muted-foreground leading-snug">Troubleshooting steps appear here as FlowPilot identifies them. Click to mark done.</p>
                    </div>
                  </div>
                  {/* FlowPilot Asks zone label */}
                  <div className="absolute top-3 right-3 pointer-events-auto">
                    <div className="bg-elevated border border-warning/30 rounded-lg px-3 py-2 shadow-lg max-w-[200px]">
                      <p className="text-xs font-medium text-warning mb-0.5">AI Questions & Evidence</p>
                      <p className="text-[11px] text-muted-foreground leading-snug">FlowPilot asks clarifying questions here. Evidence you confirm or rule out is tracked below.</p>
                    </div>
                  </div>
                  {/* Conversation log label */}
                  <div className="absolute bottom-3 left-1/2 -translate-x-1/2 pointer-events-auto">
                    <div className="bg-elevated border border-default rounded-lg px-3 py-2 shadow-lg max-w-[280px] text-center">
                      <p className="text-xs font-medium text-muted-foreground mb-0.5">Conversation Log</p>
                      <p className="text-[11px] text-muted-foreground leading-snug">Full chat history lives here. Drag the handle above to resize.</p>
                      <button
                        onClick={dismissOnboarding}
                        className="mt-2 text-[11px] text-accent hover:text-accent/80 transition-colors pointer-events-auto"
                      >
                        Got it, dismiss
                      </button>
                    </div>
                  </div>
                </div>
              )}
              {/* Work zone */}
              <div className="flex min-h-0 overflow-hidden" style={{ height: `${workZonePct}%` }}>
                {/* Left: Steps panel */}
                <div className="flex-[55] min-w-0 p-3 overflow-y-auto border-r border-default">
                  {session.loading && session.activeActions.length === 0 ? (
                    <div className="flex flex-col items-center justify-center h-full text-center gap-2">
                      <Loader2 size={20} className="animate-spin text-accent" />
                      <p className="text-xs text-muted-foreground">FlowPilot is analyzing the issue...</p>
                    </div>
                  ) : (
                    <StepsPanel
                      actions={session.activeActions}
                      activeIndex={activeStepIndex}
                      completedSteps={completedSteps}
                      onStepComplete={handleStepComplete}
                      onStepSelect={handleStepSelect}
                    />
                  )}
                </div>
                {/* Right: FlowPilot Asks + What We Know */}
                <div className="flex-[45] min-w-0 p-3 overflow-y-auto flex flex-col gap-3">
                  {session.loading && session.activeQuestions.length === 0 && triageMeta.evidence_items.length === 0 ? (
                    <div className="flex flex-col items-center justify-center h-full text-center gap-2">
                      <Sparkles size={18} className="text-muted" />
                      <p className="text-xs text-muted-foreground">Questions and evidence will appear here</p>
                    </div>
                  ) : (
                    <>
                      <FlowPilotAsks
                        questions={session.activeQuestions}
                        onAnswer={(answer) => {
                          void session.sendMessage(answer, { clearComposer: false })
                        }}
                        loading={session.loading}
                      />
                      <WhatWeKnow
                        items={triageMeta.evidence_items}
                        onAdd={handleEvidenceAdd}
                        onEdit={handleEvidenceEdit}
                      />
                    </>
                  )}
                </div>
              </div>

              {/* Drag handle */}
              <div
                onMouseDown={handleDragStart}
                className="h-4 flex items-center justify-center cursor-row-resize hover:bg-elevated transition-colors flex-shrink-0 border-y border-default/50 group"
                title="Drag to resize"
              >
                <GripHorizontal size={16} className="text-muted group-hover:text-muted-foreground transition-colors" />
              </div>

              {/* Conversation log */}
              <div className="flex-1 min-h-[180px] overflow-y-auto bg-sidebar">
                <div className="px-4 pt-2 pb-1">
                  <span className="text-[10px] uppercase tracking-wider text-muted font-semibold">Conversation Log</span>
                </div>
                {session.messages.length === 0 && !session.loading && (
                  <div className="flex flex-col items-center justify-center h-full text-center px-4 py-8">
                    <Sparkles size={24} className="text-muted mb-2" />
                    <p className="text-sm text-muted-foreground">
                      Start a new case to begin troubleshooting
                    </p>
                  </div>
                )}
                <div className="px-4 pb-2 space-y-1.5">
                  {session.messages.map((msg, i) => (
                    <div
                      key={i}
                      className={cn(
                        'flex gap-3 text-sm leading-relaxed rounded-md px-3 py-2 border-l-2',
                        msg.role === 'user'
                          ? 'border-l-muted-foreground/30 bg-white/[0.02]'
                          : 'border-l-accent/40 bg-accent/[0.03]'
                      )}
                    >
                      <span className={cn(
                        'text-xs font-medium flex-shrink-0 mt-0.5 min-w-[58px]',
                        msg.role === 'user' ? 'text-muted-foreground' : 'text-accent/70'
                      )}>
                        {msg.role === 'user' ? 'You' : 'FlowPilot'}
                      </span>
                      <span className={cn(
                        msg.role === 'user' ? 'text-muted-foreground/80' : 'text-primary/80'
                      )}>
                        {msg.content}
                      </span>
                    </div>
                  ))}
                  {session.loading && (
                    <div className="flex gap-3 text-sm px-3 py-2 border-l-2 border-l-accent/40 bg-accent/[0.03] rounded-md">
                      <span className="text-xs font-medium text-accent/70 min-w-[58px]">FlowPilot</span>
                      <Loader2 size={14} className="animate-spin text-muted-foreground" />
                    </div>
                  )}
                  <div ref={session.messagesEndRef} />
                </div>
              </div>
            </div>

            {/* Rich Input */}
            <div className="px-3 sm:px-6 py-3 shrink-0">
              <div
                className="max-w-3xl mx-auto"
                onDragOver={session.handleDragOver}
                onDragEnter={session.handleDragEnter}
                onDragLeave={session.handleDragLeave}
                onDrop={session.handleDrop}
              >
                <div className={cn(
                  'relative rounded-xl border transition-all',
                  session.loading ? 'border-border/50 opacity-50' :
                  session.isDragOver ? 'border-primary/50 bg-primary/5' :
                  'border-border focus-within:border-[rgba(96,165,250,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
                )} style={{ background: 'var(--color-bg-card)' }}>
                  {/* Drag overlay */}
                  {session.isDragOver && (
                    <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
                      <div className="flex items-center gap-2 text-sm text-primary">
                        <ImagePlus size={18} />
                        Drop files to attach
                      </div>
                    </div>
                  )}

                  {/* Textarea */}
                  <textarea
                    ref={session.inputRef}
                    value={session.input}
                    onChange={e => session.setInput(e.target.value)}
                    onKeyDown={session.handleKeyDown}
                    onPaste={session.handlePaste}
                    placeholder={session.loading ? 'FlowPilot is working...' : 'Describe the issue or ask FlowPilot...'}
                    disabled={session.loading}
                    rows={1}
                    className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
                    style={{ minHeight: '40px', maxHeight: '150px' }}
                  />

                  {/* Thumbnail strip */}
                  {session.pendingUploads.length > 0 && (
                    <div className="flex gap-2 flex-wrap px-4 pb-1">
                      {session.pendingUploads.map((upload) => (
                        <div key={upload.id} className="relative w-12 h-12 rounded-lg overflow-hidden border border-border bg-background">
                          {upload.preview ? (
                            <img src={upload.preview} alt="" className="w-full h-full object-cover" />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center text-[0.5rem] text-muted-foreground px-1 text-center">
                              {upload.file.name.split('.').pop()?.toUpperCase()}
                            </div>
                          )}
                          {upload.status === 'uploading' && (
                            <div className="absolute inset-0 bg-background/60 flex items-center justify-center">
                              <Loader2 size={12} className="animate-spin text-primary" />
                            </div>
                          )}
                          {upload.status === 'done' && (
                            <button type="button" onClick={() => session.handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors">
                              <X size={8} className="text-muted-foreground" />
                            </button>
                          )}
                          {upload.status === 'error' && (
                            <div className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer" onClick={() => session.retryUpload(upload.id)}>
                              <RotateCcw size={10} className="text-rose-500" />
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}

                  {/* Logs textarea */}
                  {session.showLogs && (
                    <div className="px-4 pb-1">
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-[0.625rem] uppercase tracking-wide text-muted-foreground font-sans">Paste logs or error output</span>
                        <button type="button" onClick={() => { session.setShowLogs(false); session.setLogContent('') }} className="text-muted-foreground hover:text-foreground"><X size={14} /></button>
                      </div>
                      <textarea
                        value={session.logContent}
                        onChange={(e) => session.setLogContent(e.target.value)}
                        placeholder="Paste event viewer logs, error messages, PowerShell output..."
                        rows={3}
                        className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none"
                      />
                    </div>
                  )}

                  {/* Bottom toolbar */}
                  <div className="flex items-center justify-between px-3 py-1.5 border-t border-border/50">
                    <div className="flex items-center gap-0.5">
                      <input ref={session.fileInputRef} type="file" multiple accept={session.ACCEPTED_FILE_TYPES} onChange={session.handleFileSelect} className="hidden" />
                      <button type="button" onClick={() => session.fileInputRef.current?.click()} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Attach files">
                        <Paperclip size={14} />
                        <span className="hidden sm:inline">Attach</span>
                      </button>
                      {!session.showLogs && (
                        <button type="button" onClick={() => session.setShowLogs(true)} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Paste logs">
                          <Terminal size={14} />
                          <span className="hidden sm:inline">Paste Logs</span>
                        </button>
                      )}
                      {!session.showTaskLane && (session.activeQuestions.length > 0 || session.activeActions.length > 0) && (
                        <button
                          type="button"
                          onClick={() => session.setShowTaskLane(true)}
                          className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-accent-text hover:text-foreground hover:bg-accent-dim transition-colors"
                          title="Show task panel"
                        >
                          <ListChecks size={14} />
                          Tasks ({session.activeQuestions.length + session.activeActions.length})
                        </button>
                      )}
                    </div>
                    <button type="button" onClick={session.handleSend} disabled={!session.input.trim() || session.loading} className={cn(
                      'flex h-8 w-8 items-center justify-center rounded-lg transition-all',
                      session.input.trim() && !session.loading ? 'bg-primary text-white hover:brightness-110 active:scale-95' : 'bg-secondary text-muted-foreground cursor-not-allowed'
                    )} title="Send message">
                      <Send size={15} />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-center">
            <div className="w-20 h-20 rounded-full bg-accent-dim flex items-center justify-center mb-4">
              <Sparkles size={32} className="text-primary" />
            </div>
            <h2 className="text-xl font-heading font-semibold text-foreground mb-2">
              FlowPilot
            </h2>
            <p className="text-sm text-muted-foreground max-w-md mb-6">
              Your MSP troubleshooting copilot. Start a new case to begin
              diagnosing with structured steps, evidence tracking, and AI guidance.
            </p>
            <button
              onClick={session.handleNewChat}
              className="bg-primary text-white font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
            >
              New Case
            </button>
          </div>
        )}
      </div>

      </div>{/* close cockpit content area */}

      {/* Close Case Session Modal */}
      <ConcludeSessionModal
        isOpen={session.showConclude}
        onClose={() => session.setShowConclude(false)}
        onConclude={session.handleConclude}
        onResumeNew={session.handleResumeNew}
        chatTitle={session.chats.find(c => c.id === session.activeChatId)?.title ?? 'Chat'}
        sessionId={session.activeChatId}
      />

      {/* Status Update Modal */}
      {session.activeChatId && (
        <StatusUpdateModal
          open={session.showStatusUpdate}
          onClose={() => session.setShowStatusUpdate(false)}
          onGenerate={(audience, length, context) =>
            aiSessionsApi.generateStatusUpdate(session.activeChatId!, { audience, length, context })
          }
          context="status"
        />
      )}
    </div>
    </>
  )
}