biblical-guide.com/components/chat/floating-chat.tsx

'use client'
import {
  Fab,
  Drawer,
  Box,
  Typography,
  TextField,
  Button,
  Paper,
  Avatar,
  Chip,
  IconButton,
  Divider,
  List,
  ListItem,
  ListItemText,
  useTheme,
  Slide,
  Grow,
  Zoom,
} from '@mui/material'
import {
  Chat,
  Send,
  Close,
  SmartToy,
  Person,
  ContentCopy,
  ThumbUp,
  ThumbDown,
  Minimize,
  Launch,
} from '@mui/icons-material'
import { useState, useRef, useEffect } from 'react'
import { useTranslations, useLocale } from 'next-intl'

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

export default function FloatingChat() {
  const theme = useTheme()
  const t = useTranslations('chat')
  const locale = useLocale()
  const [isOpen, setIsOpen] = useState(false)
  const [isMinimized, setIsMinimized] = useState(false)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'assistant',
      content: locale === 'ro'
        ? 'Bună ziua! Sunt asistentul tău AI pentru întrebări biblice. Cum te pot ajuta astăzi să înțelegi mai bine Scriptura?'
        : 'Hello! I am your AI assistant for biblical questions. How can I help you understand Scripture better today?',
      timestamp: new Date(),
    }
  ])
  const [inputMessage, setInputMessage] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages])

  // Allow external triggers to open the chat (optionally fullscreen and with initial message)
  useEffect(() => {
    const handler = (e: Event) => {
      const detail = (e as CustomEvent).detail || {}
      setIsOpen(true)
      setIsMinimized(false)
      if (typeof detail.fullscreen === 'boolean') setIsFullscreen(detail.fullscreen)
      if (typeof detail.initialMessage === 'string') {
        // Use setTimeout to ensure the input is set after the component is fully rendered
        setTimeout(() => {
          setInputMessage(detail.initialMessage)
        }, 100)
      }
    }
    window.addEventListener('floating-chat:open', handler as EventListener)
    return () => window.removeEventListener('floating-chat:open', handler as EventListener)
  }, [])

  const handleSendMessage = async () => {
    if (!inputMessage.trim() || isLoading) return

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: inputMessage,
      timestamp: new Date(),
    }

    setMessages(prev => [...prev, userMessage])
    setInputMessage('')
    setIsLoading(true)

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: inputMessage,
          history: messages.slice(-5),
          locale: locale,
        }),
      })

      if (!response.ok) {
        throw new Error('Failed to get response')
      }

      const data = await response.json()

      const assistantMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: data.response || (locale === 'ro'
          ? 'Îmi pare rău, nu am putut procesa întrebarea ta. Te rog încearcă din nou.'
          : 'Sorry, I could not process your question. Please try again.'),
        timestamp: new Date(),
      }

      setMessages(prev => [...prev, assistantMessage])
    } catch (error) {
      console.error('Error sending message:', error)
      const errorMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: locale === 'ro'
          ? 'Îmi pare rău, a apărut o eroare. Te rog verifică conexiunea și încearcă din nou.'
          : 'Sorry, an error occurred. Please check your connection and try again.',
        timestamp: new Date(),
      }
      setMessages(prev => [...prev, errorMessage])
    } finally {
      setIsLoading(false)
    }
  }

  const handleKeyPress = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault()
      handleSendMessage()
    }
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

  // Use t.raw() to get the actual array from translations
  const suggestedQuestions = t.raw('suggestions.questions') as string[]

  const toggleChat = () => {
    setIsOpen(!isOpen)
    if (isMinimized) setIsMinimized(false)
  }

  const minimizeChat = () => {
    setIsMinimized(!isMinimized)
  }

  const toggleFullscreen = () => setIsFullscreen(prev => !prev)

  return (
    <>
      {/* Floating Action Button */}
      <Zoom in={!isOpen} unmountOnExit>
        <Fab
          color="primary"
          onClick={toggleChat}
          sx={{
            position: 'fixed',
            bottom: 24,
            right: 24,
            zIndex: 1000,
            background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
            '&:hover': {
              background: 'linear-gradient(45deg, #00695C 30%, #004D40 90%)',
            }
          }}
        >
          <Chat />
        </Fab>
      </Zoom>

      {/* Chat Overlay */}
      <Slide direction="up" in={isOpen} unmountOnExit>
        <Paper
          elevation={8}
          data-floating-chat="true"
          sx={{
            position: 'fixed',
            bottom: 0,
            right: 0,
            top: isFullscreen ? 0 : 'auto',
            left: isFullscreen ? 0 : 'auto',
            width: isFullscreen ? '100vw' : { xs: '100vw', sm: '50vw', md: '40vw' },
            height: isMinimized ? 'auto' : '100vh',
            zIndex: 1200,
            borderRadius: isFullscreen ? 0 : { xs: 0, sm: '12px 0 0 0' },
            overflow: 'hidden',
            display: 'flex',
            flexDirection: 'column',
            background: 'linear-gradient(to bottom, #f8f9fa, #ffffff)',
          }}
        >
          {/* Header */}
          <Box
            sx={{
              p: 2,
              background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
              color: 'white',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Avatar sx={{ bgcolor: 'rgba(255,255,255,0.2)' }}>
                <SmartToy />
              </Avatar>
              <Box>
                <Typography variant="subtitle1" fontWeight="bold">
                  {t('title')}
                </Typography>
                <Typography variant="caption" sx={{ opacity: 0.9 }}>
                  {t('subtitle')}
                </Typography>
              </Box>
            </Box>
            <Box>
              <IconButton
                size="small"
                onClick={minimizeChat}
                sx={{ color: 'white', mr: 0.5 }}
              >
                <Minimize />
              </IconButton>
              <IconButton
                size="small"
                onClick={toggleFullscreen}
                sx={{ color: 'white', mr: 0.5 }}
              >
                <Launch />
              </IconButton>
              <IconButton
                size="small"
                onClick={toggleChat}
                sx={{ color: 'white' }}
              >
                <Close />
              </IconButton>
            </Box>
          </Box>

          {!isMinimized && (
            <>
              {/* Suggested Questions */}
              <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                  {t('suggestions.title')}
                </Typography>
                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                  {suggestedQuestions.slice(0, 3).map((question, index) => (
                    <Chip
                      key={index}
                      label={question}
                      size="small"
                      variant="outlined"
                      onClick={() => setInputMessage(question)}
                      sx={{
                        fontSize: '0.75rem',
                        cursor: 'pointer',
                        '&:hover': {
                          bgcolor: 'primary.light',
                          color: 'white',
                        },
                      }}
                    />
                  ))}
                </Box>
              </Box>

              {/* Messages */}
              <Box
                sx={{
                  flexGrow: 1,
                  overflow: 'auto',
                  p: 1,
                }}
              >
                {messages.map((message) => (
                  <Box
                    key={message.id}
                    sx={{
                      display: 'flex',
                      justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
                      mb: 2,
                    }}
                  >
                    <Box
                      sx={{
                        display: 'flex',
                        flexDirection: message.role === 'user' ? 'row-reverse' : 'row',
                        alignItems: 'flex-start',
                        maxWidth: '85%',
                        gap: 1,
                      }}
                    >
                      <Avatar
                        sx={{
                          width: 32,
                          height: 32,
                          bgcolor: message.role === 'user' ? 'primary.main' : 'secondary.main',
                        }}
                      >
                        {message.role === 'user' ? <Person fontSize="small" /> : <SmartToy fontSize="small" />}
                      </Avatar>

                      <Paper
                        elevation={1}
                        sx={{
                          p: 1.5,
                          bgcolor: message.role === 'user' ? 'primary.light' : 'background.paper',
                          color: message.role === 'user' ? 'white' : 'text.primary',
                          borderRadius: 2,
                          maxWidth: '100%',
                        }}
                      >
                        <Typography
                          variant="body2"
                          sx={{
                            whiteSpace: 'pre-wrap',
                            lineHeight: 1.4,
                          }}
                        >
                          {message.content}
                        </Typography>

                        {message.role === 'assistant' && (
                          <Box sx={{ display: 'flex', gap: 0.5, mt: 1, justifyContent: 'flex-end' }}>
                            <IconButton
                              size="small"
                              onClick={() => copyToClipboard(message.content)}
                            >
                              <ContentCopy fontSize="small" />
                            </IconButton>
                            <IconButton size="small">
                              <ThumbUp fontSize="small" />
                            </IconButton>
                            <IconButton size="small">
                              <ThumbDown fontSize="small" />
                            </IconButton>
                          </Box>
                        )}

                        <Typography
                          variant="caption"
                          sx={{
                            display: 'block',
                            textAlign: 'right',
                            mt: 0.5,
                            opacity: 0.7,
                          }}
                        >
                          {message.timestamp.toLocaleTimeString(locale === 'en' ? 'en-US' : 'ro-RO', {
                            hour: '2-digit',
                            minute: '2-digit',
                          })}
                        </Typography>
                      </Paper>
                    </Box>
                  </Box>
                ))}

                {isLoading && (
                  <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 2 }}>
                    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                      <Avatar sx={{ width: 32, height: 32, bgcolor: 'secondary.main' }}>
                        <SmartToy fontSize="small" />
                      </Avatar>
                      <Paper elevation={1} sx={{ p: 1.5, borderRadius: 2 }}>
                        <Typography variant="body2">
                          {t('loading')}
                        </Typography>
                      </Paper>
                    </Box>
                  </Box>
                )}

                <div ref={messagesEndRef} />
              </Box>

              <Divider />

              {/* Input */}
              <Box sx={{ p: 2 }}>
                <Box sx={{ display: 'flex', gap: 1 }}>
                  <TextField
                    fullWidth
                    size="small"
                    multiline
                    maxRows={3}
                    placeholder={t('placeholder')}
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                    onKeyPress={handleKeyPress}
                    disabled={isLoading}
                    variant="outlined"
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        borderRadius: 2,
                      }
                    }}
                  />
                  <Button
                    variant="contained"
                    onClick={handleSendMessage}
                    disabled={!inputMessage.trim() || isLoading}
                    sx={{
                      minWidth: 'auto',
                      px: 2,
                      borderRadius: 2,
                      background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
                    }}
                  >
                    <Send fontSize="small" />
                  </Button>
                </Box>
                <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}>
                  {t('enterToSend')}
                </Typography>
              </Box>
            </>
          )}
        </Paper>
      </Slide>
    </>
  )
}