'use client'

import { useState, useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, Send, Bot, User, Sparkles, Maximize2, Minimize2 } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'

interface ChatMessage {
  role: 'user' | 'assistant'
  content: string
}

export default function ChatFAB() {
  const { lang } = useApp()
  const i = t(lang)
  const [isOpen, setIsOpen] = useState(false)
  const [isExpanded, setIsExpanded] = useState(false)
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [input, setInput] = useState('')
  const [isStreaming, setIsStreaming] = useState(false)
  const [isWaiting, setIsWaiting] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const abortRef = useRef<AbortController | null>(null)

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

  useEffect(() => {
    if (isOpen && inputRef.current) {
      setTimeout(() => inputRef.current?.focus(), 200)
    }
  }, [isOpen])

  async function sendMessage(text?: string) {
    const message = text || input.trim()
    if (!message || isStreaming) return

    setInput('')
    setMessages(prev => [...prev, { role: 'user', content: message }])
    setIsStreaming(true)
    setIsWaiting(true)

    abortRef.current = new AbortController()

    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message,
          history: messages.slice(-10),
        }),
        signal: abortRef.current.signal,
      })

      if (!res.ok) throw new Error(`HTTP ${res.status}`)

      const reader = res.body!.getReader()
      const decoder = new TextDecoder()
      let content = ''
      let firstChunk = true

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        content += decoder.decode(value, { stream: true })

        if (firstChunk) {
          firstChunk = false
          setIsWaiting(false)
          setMessages(prev => [...prev, { role: 'assistant', content }])
        } else {
          const currentText = content
          setMessages(prev => {
            const updated = [...prev]
            updated[updated.length - 1] = { role: 'assistant', content: currentText }
            return updated
          })
        }
      }
    } catch (err: unknown) {
      if (err instanceof Error && err.name === 'AbortError') return
      setIsWaiting(false)
      setMessages(prev => [
        ...prev,
        { role: 'assistant', content: i.chat.error },
      ])
    } finally {
      setIsStreaming(false)
      setIsWaiting(false)
      abortRef.current = null
    }
  }

  function stopGeneration() {
    if (abortRef.current) {
      abortRef.current.abort()
      setIsStreaming(false)
    }
  }

  return (
    <>
      {/* FAB Button */}
      <AnimatePresence>
        {!isOpen && (
          <motion.button
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            exit={{ scale: 0 }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => setIsOpen(true)}
            className="fixed bottom-6 right-[5.5rem] z-50 w-14 h-14 rounded-full
              bg-accent-electric hover:bg-blue-500 text-white
              flex items-center justify-center shadow-lg shadow-blue-600/30
              transition-colors"
            aria-label="Compliance Agent oeffnen"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
              <circle cx="9" cy="10" r="1" fill="currentColor" />
              <circle cx="12" cy="10" r="1" fill="currentColor" />
              <circle cx="15" cy="10" r="1" fill="currentColor" />
            </svg>
          </motion.button>
        )}
      </AnimatePresence>

      {/* Chat Panel */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            transition={{ duration: 0.2 }}
            className={`fixed bottom-6 right-6 z-50
              ${isExpanded ? 'w-[700px] h-[80vh]' : 'w-[400px] h-[520px]'}
              rounded-2xl overflow-hidden
              bg-black/90 backdrop-blur-xl border border-white/10
              shadow-2xl shadow-black/50 flex flex-col
              transition-all duration-200`}
          >
            {/* Header */}
            <div className="flex items-center justify-between px-4 py-3 border-b border-white/10 shrink-0">
              <div className="flex items-center gap-2">
                <div className="w-7 h-7 rounded-full bg-accent-electric/20 flex items-center justify-center">
                  <Bot className="w-4 h-4 text-accent-electric" />
                </div>
                <div>
                  <span className="text-sm font-semibold text-white">{i.chat.title}</span>
                  <span className="text-xs text-white/30 ml-2">
                    {isStreaming ? i.chat.responding : i.chat.online}
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-1">
                <button
                  onClick={() => setIsExpanded(prev => !prev)}
                  className="w-7 h-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
                >
                  {isExpanded ? <Minimize2 className="w-3.5 h-3.5 text-white/60" /> : <Maximize2 className="w-3.5 h-3.5 text-white/60" />}
                </button>
                <button
                  onClick={() => setIsOpen(false)}
                  className="w-7 h-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
                >
                  <X className="w-4 h-4 text-white/60" />
                </button>
              </div>
            </div>

            {/* Messages */}
            <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
              {messages.length === 0 && (
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-white/40 text-xs mb-3">
                    <Sparkles className="w-3.5 h-3.5" />
                    <span>{i.chat.ask}</span>
                  </div>
                  {i.chat.suggestions.map((q, idx) => (
                    <motion.button
                      key={idx}
                      initial={{ opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.1 + idx * 0.08 }}
                      onClick={() => sendMessage(q)}
                      className="block w-full text-left px-3 py-2.5 rounded-xl
                        bg-white/[0.05] border border-white/10
                        hover:bg-white/[0.1] transition-colors
                        text-xs text-white/70 hover:text-white"
                    >
                      {q}
                    </motion.button>
                  ))}
                </div>
              )}

              {/* Waiting indicator */}
              <AnimatePresence>
                {isWaiting && (
                  <motion.div
                    initial={{ opacity: 0, y: 6 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0 }}
                    className="flex gap-2.5"
                  >
                    <div className="w-7 h-7 rounded-full bg-accent-electric/20 flex items-center justify-center shrink-0 mt-0.5">
                      <Bot className="w-3.5 h-3.5 text-accent-electric" />
                    </div>
                    <div className="bg-white/[0.06] rounded-2xl px-3.5 py-3 flex items-center gap-1">
                      {[0, 1, 2].map(dotIdx => (
                        <motion.span
                          key={dotIdx}
                          className="block w-1.5 h-1.5 rounded-full bg-accent-electric/70"
                          animate={{ opacity: [0.3, 1, 0.3], y: [0, -3, 0] }}
                          transition={{ duration: 0.7, repeat: Infinity, delay: dotIdx * 0.15 }}
                        />
                      ))}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>

              {messages.map((msg, idx) => (
                <div key={idx} className={`flex gap-2.5 ${msg.role === 'user' ? 'justify-end' : ''}`}>
                  {msg.role === 'assistant' && (
                    <div className="w-7 h-7 rounded-full bg-accent-electric/20 flex items-center justify-center shrink-0 mt-0.5">
                      <Bot className="w-3.5 h-3.5 text-accent-electric" />
                    </div>
                  )}
                  <div className={`max-w-[85%] rounded-2xl px-3.5 py-2.5 text-xs leading-relaxed ${
                    msg.role === 'user' ? 'bg-accent-electric/20 text-white' : 'bg-white/[0.06] text-white/80'
                  }`}>
                    <div className="whitespace-pre-wrap">{msg.content}</div>
                    {isStreaming && idx === messages.length - 1 && msg.role === 'assistant' && (
                      <span className="inline-block w-1.5 h-3.5 bg-accent-electric animate-pulse ml-0.5" />
                    )}
                  </div>
                  {msg.role === 'user' && (
                    <div className="w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0 mt-0.5">
                      <User className="w-3.5 h-3.5 text-white/60" />
                    </div>
                  )}
                </div>
              ))}
              <div ref={messagesEndRef} />
            </div>

            {/* Input */}
            <div className="border-t border-white/10 px-4 py-3 shrink-0">
              {isStreaming && (
                <button
                  onClick={stopGeneration}
                  className="w-full mb-2 px-3 py-1.5 rounded-lg bg-white/[0.06] hover:bg-white/[0.1]
                    text-xs text-white/50 transition-colors"
                >
                  {i.chat.stop}
                </button>
              )}
              <div className="flex gap-2">
                <input
                  ref={inputRef}
                  type="text"
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && sendMessage()}
                  placeholder={i.chat.placeholder}
                  disabled={isStreaming}
                  className="flex-1 bg-white/[0.06] border border-white/10 rounded-xl px-3.5 py-2.5
                    text-xs text-white placeholder-white/30 outline-none
                    focus:border-accent-electric/50 focus:ring-1 focus:ring-accent-electric/20
                    disabled:opacity-50 transition-all"
                />
                <button
                  onClick={() => sendMessage()}
                  disabled={isStreaming || !input.trim()}
                  className="px-3.5 py-2.5 bg-accent-electric hover:bg-blue-600 disabled:opacity-30
                    rounded-xl transition-all text-white"
                >
                  <Send className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}
