import { useEffect, useState } from 'react'
import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, CheckCircle2, FileText, MoreHorizontal, Pause } 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 { ChatMessage } from '@/components/assistant/ChatMessage'
import { TaskLane } from '@/components/assistant/TaskLane'
import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
import { ViewToggle } from '@/components/assistant/ViewToggle'
import { useAssistantSession } from '@/hooks/useAssistantSession'

export default function FlowPilotPage() {
  const session = useAssistantSession()
  const [showOverflow, setShowOverflow] = useState(false)

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

  const handleTaskSubmit = async (responses: Array<{ type: string; state: string; value: string; text?: string; label?: string }>) => {
    if (!session.activeChatId || session.loading || session.loadingRef.current) return

    const parts: string[] = []
    for (const r of responses) {
      const name = r.type === 'question' ? `Q: ${r.text}` : r.label || 'Check'
      if (r.state === 'done' && r.value.trim()) {
        parts.push(`**${name}:**\n\`\`\`\n${r.value.trim()}\n\`\`\``)
      } else if (r.state === 'skipped') {
        parts.push(`**${name}:** _(skipped)_`)
      }
    }
    const userMessage = parts.join('\n\n')
    const sendChatId = session.activeChatId

    session.setInput('')
    session.setShowTaskLane(false)
    session.setActiveQuestions([])
    session.setActiveActions([])

    try {
      const response = await aiSessionsApi.sendChatMessage(sendChatId, { message: userMessage })
      if (session.currentChatRef.current !== sendChatId) return
      session.processResponse(response, sendChatId)

      const hasQuestions = response.questions && response.questions.length > 0
      const hasActions = response.actions && response.actions.length > 0
      if (!hasQuestions && !hasActions) {
        session.setShowTaskLane(false)
        session.setActiveQuestions([])
        session.setActiveActions([])
      }
    } catch {
      // Error handled by processResponse guard
    }
  }

  return (
    <>
      <PageMeta title="FlowPilot" />
      <div className="flex h-[calc(100vh-3.5rem)]">
        {/* Chat Sidebar — 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>
        )}
        {/* Chat Sidebar — mobile */}
        <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 area */}
        <div className="flex-1 flex flex-col min-w-0">
          {/* Collapsed sidebar bar */}
          {session.sidebarCollapsed && (
            <div className="hidden sm:block">
              <ChatSidebarCollapsedBar
                chats={session.chats}
                activeChatId={session.activeChatId}
                onNewChat={session.handleNewChat}
                onExpand={session.toggleSidebarCollapse}
              />
            </div>
          )}

          {/* Chat content row */}
          <div className="flex-1 flex min-w-0 min-h-0">
            <div className="flex-1 flex flex-col min-w-0">
              {/* Mobile header */}
              <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
                </button>
              </div>

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

              {session.activeChatId ? (
                <>
                  {/* Action bar — Resolve, Update, overflow (Pause/Close) */}
                  {session.messages.length >= 2 && (
                    <div className="hidden sm:flex items-center gap-1.5 px-4 py-1.5 border-b border-border/50">
                      <button
                        type="button"
                        onClick={() => session.setShowConclude(true)}
                        disabled={session.loading}
                        className="flex items-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
                      >
                        <CheckCircle2 size={13} />
                        Resolve
                      </button>
                      <button
                        type="button"
                        onClick={() => session.setShowStatusUpdate(true)}
                        disabled={session.loading}
                        className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
                      >
                        <FileText size={13} />
                        Update
                      </button>
                      <div className="relative">
                        <button
                          onClick={() => setShowOverflow(!showOverflow)}
                          className="flex items-center justify-center rounded-lg px-2 py-1.5 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
                        >
                          <MoreHorizontal size={16} />
                        </button>
                        {showOverflow && (
                          <>
                            <div className="fixed inset-0 z-40" onClick={() => setShowOverflow(false)} />
                            <div className="absolute right-0 top-full mt-1 z-50 w-40 rounded-lg border border-border bg-card py-1 shadow-lg">
                              <button
                                onClick={() => { setShowOverflow(false); /* pause not wired on chat sessions yet */ }}
                                className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
                              >
                                <Pause size={13} />
                                Pause
                              </button>
                              <button
                                onClick={() => { setShowOverflow(false); session.setShowConclude(true) }}
                                className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
                              >
                                <X size={13} />
                                Close
                              </button>
                            </div>
                          </>
                        )}
                      </div>
                    </div>
                  )}

                  {/* Messages */}
                  <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-4">
                    {session.messages.length === 0 && !session.loading && (
                      <div className="flex flex-col items-center justify-center h-full text-center">
                        <div className="w-16 h-16 rounded-full bg-accent-dim flex items-center justify-center mb-4">
                          <Sparkles size={28} className="text-primary" />
                        </div>
                        <h2 className="text-lg font-heading font-semibold text-foreground mb-2">
                          FlowPilot
                        </h2>
                        <p className="text-sm text-muted-foreground max-w-md">
                          Ask me anything about IT infrastructure, networking, Active Directory,
                          cloud platforms, or troubleshooting. I&apos;ll also suggest relevant flows from your team&apos;s library.
                        </p>
                      </div>
                    )}
                    {session.messages.length === 0 && session.loading && (
                      <div className="flex flex-col items-center justify-center h-full text-center gap-3">
                        <Loader2 size={24} className="animate-spin text-primary" />
                        <p className="text-sm text-muted-foreground">Starting session...</p>
                      </div>
                    )}
                    {session.messages.map((msg, i) => (
                      <ChatMessage
                        key={i}
                        role={msg.role}
                        content={msg.content}
                        suggestedFlows={msg.suggestedFlows}
                      />
                    ))}
                    {session.loading && (
                      <div className="flex gap-3">
                        <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
                          <Sparkles size={14} className="text-primary" />
                        </div>
                        <div className="bg-input border border-border rounded-2xl px-4 py-3">
                          <Loader2 size={16} className="animate-spin text-primary" />
                        </div>
                      </div>
                    )}
                    <div ref={session.messagesEndRef} />
                  </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)' }}>
                        {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
                          ref={session.inputRef}
                          value={session.input}
                          onChange={e => session.setInput(e.target.value)}
                          onKeyDown={session.handleKeyDown}
                          onPaste={session.handlePaste}
                          placeholder={session.loading ? 'AI is thinking...' : 'Type a message, paste a screenshot, or drag a file...'}
                          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' }}
                        />

                        {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>
                        )}

                        {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>
                        )}

                        <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 Senior Systems &amp; Network Engineer. Ask anything about IT infrastructure,
                    or start a new chat to get personalized help with your team&apos;s flows.
                  </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"
                  >
                    Start a Conversation
                  </button>
                </div>
              )}
            </div>

            {/* Task lane */}
            {session.showTaskLane && (session.activeQuestions.length > 0 || session.activeActions.length > 0) && (
              <TaskLane
                questions={session.activeQuestions}
                actions={session.activeActions}
                sessionId={session.activeChatId}
                onSubmit={handleTaskSubmit}
                onClose={() => session.setShowTaskLane(false)}
                loading={session.loading}
              />
            )}
          </div>
        </div>

        {/* Close Case 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>
    </>
  )
}