"use client"

import { useState, useEffect, useRef, useCallback, useMemo } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { MessageCircle } from "lucide-react"
import Image from "next/image"
import { useLocale } from "next-intl"
import SarLoader from "./sar-loader"

interface QuestionAnswer {
  question: string
  answer: string
}

interface Message {
  id: string
  type: 'user' | 'bot'
  content: string
  question?: string
  suggestions?: string[]
}

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'

export default function VisiteGuideeChat() {
  const locale = useLocale()
  const [questions, setQuestions] = useState<QuestionAnswer[]>([])
  const [loading, setLoading] = useState(true)
  const [messages, setMessages] = useState<Message[]>([])
  const [answeredQuestions, setAnsweredQuestions] = useState<Set<number>>(new Set())
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const timeoutRefs = useRef<NodeJS.Timeout[]>([])

  // Fonction pour obtenir 3 questions suggérées pertinentes
  // Garantit qu'une question répondue ne sera jamais re-suggérée tant que toutes les autres ne sont pas posées
  const getSuggestedQuestions = useCallback((allQuestions: QuestionAnswer[], answered: Set<number>, currentIndex: number, lastAnswer?: string): string[] => {
    // Filtrer uniquement les questions non répondues (sauf la question actuelle)
    const available = allQuestions
      .map((q, idx) => ({ ...q, index: idx }))
      .filter((q, idx) => !answered.has(idx) && idx !== currentIndex)
    
    // Si toutes les questions ont été répondues, on peut recommencer
    if (available.length === 0) {
      // Réinitialiser et prendre les 3 premières questions
      const firstThree = allQuestions.slice(0, 3).map(q => q.question)
      return firstThree
    }
    
    // Si on a moins de 3 questions disponibles, retourner toutes les disponibles
    if (available.length <= 3) {
      return available.map(q => q.question)
    }
    
    // Si on a une réponse précédente, trouver des questions pertinentes parmi les non répondues
    if (lastAnswer && available.length > 0) {
      // Extraire les mots-clés de la réponse
      const answerKeywords = lastAnswer
        .toLowerCase()
        .split(/\s+/)
        .filter(w => w.length > 4)
        .slice(0, 5) // Prendre les 5 premiers mots significatifs
      
      // Calculer un score de pertinence pour chaque question non répondue
      const scored = available.map(q => {
        const questionLower = q.question.toLowerCase()
        const answerLower = q.answer.toLowerCase()
        
        let score = 0
        answerKeywords.forEach(keyword => {
          if (questionLower.includes(keyword)) score += 3
          if (answerLower.includes(keyword)) score += 2
        })
        
        // Bonus pour les questions qui partagent des mots communs
        const questionWords = questionLower.split(/\s+/).filter(w => w.length > 3)
        const commonWords = answerKeywords.filter(kw => questionWords.includes(kw))
        score += commonWords.length
        
        return { ...q, score }
      })
      
      // Trier par score et prendre les 3 meilleures parmi les non répondues
      const topQuestions = scored
        .sort((a, b) => b.score - a.score)
        .slice(0, 3)
        .map(q => q.question)
      
      // Si on a moins de 3 questions pertinentes, compléter avec des questions non répondues aléatoires
      if (topQuestions.length < 3) {
        const remaining = available
          .filter(q => !topQuestions.includes(q.question))
          .sort(() => Math.random() - 0.5)
          .slice(0, 3 - topQuestions.length)
          .map(q => q.question)
        return [...topQuestions, ...remaining].slice(0, 3)
      }
      
      return topQuestions
    }
    
    // Sinon, prendre 3 questions non répondues de manière aléatoire
    const shuffled = [...available].sort(() => Math.random() - 0.5)
    return shuffled.slice(0, 3).map(q => q.question)
  }, [])

  // Fonction pour trouver la réponse à une question
  const findAnswer = useCallback((questionText: string, allQuestions: QuestionAnswer[]): QuestionAnswer | null => {
    // Recherche exacte d'abord
    let found = allQuestions.find(q => q.question.toLowerCase() === questionText.toLowerCase())
    if (found) return found

    // Recherche par mots-clés
    const keywords = questionText.toLowerCase().split(/\s+/).filter(w => w.length > 3)
    const matches = allQuestions
      .map((q, idx) => ({
        qa: q,
        index: idx,
        score: keywords.reduce((score, keyword) => {
          const questionLower = q.question.toLowerCase()
          const answerLower = q.answer.toLowerCase()
          if (questionLower.includes(keyword)) score += 2
          if (answerLower.includes(keyword)) score += 1
          return score
        }, 0)
      }))
      .filter(m => m.score > 0)
      .sort((a, b) => b.score - a.score)

    return matches.length > 0 ? matches[0].qa : null
  }, [])

  // Charger les questions depuis l'API avec la locale
  useEffect(() => {
    const fetchQuestions = async () => {
      try {
        setLoading(true)
        const response = await fetch(`${API_URL}/api/sar/questions?locale=${locale}`)
        if (!response.ok) {
          throw new Error('Erreur lors du chargement des questions')
        }
        const data = await response.json()
        setQuestions(data)
        
        // Message de bienvenue initial avec 3 premières questions suggérées
        if (data.length > 0) {
          const welcomeMessage = locale === 'en'
            ? "Hello! 👋 I'm Mai, your virtual assistant from the SAR Information Center. I'm here to present the African Refining Company.\n\nPlease select a question and I'll answer it. 😊"
            : "Bonjour ! 👋 Je suis Maï, votre assistante virtuelle du Centre d'Information SAR. Je suis là pour vous présenter la Société Africaine de Raffinage.\n\nVeuillez sélectionner une question pour que je puisse y répondre. 😊"
          // Proposer 3 questions variées au démarrage
          const initialSuggestions = getSuggestedQuestions(data, new Set(), -1)
          setMessages([{ 
            id: `welcome-${Date.now()}`,
            type: 'bot', 
            content: welcomeMessage, 
            suggestions: initialSuggestions 
          }])
        }
      } catch (error) {
        console.error('Erreur:', error)
        setMessages([{ 
          id: `error-${Date.now()}`,
          type: 'bot', 
          content: "Désolé, une erreur est survenue lors du chargement des questions." 
        }])
      } finally {
        setLoading(false)
      }
    }

    fetchQuestions()
  }, [locale, getSuggestedQuestions])

  // Fonction pour traiter une question
  const handleQuestion = useCallback((questionText: string) => {
    if (!questionText.trim() || questions.length === 0) return

    const messageId = `user-${Date.now()}-${Math.random()}`
    // Ajouter la question de l'utilisateur
    const userMessage: Message = { 
      id: messageId,
      type: 'user', 
      content: questionText 
    }
    setMessages(prev => [...prev, userMessage])

    // Trouver la réponse
    const qa = findAnswer(questionText, questions)
    
    if (qa) {
      // Trouver l'index de la question
      const questionIndex = questions.findIndex(q => q.question === qa.question)
      
      // Ajouter la réponse du bot avec suggestions
      const timeoutId = setTimeout(() => {
        setAnsweredQuestions(prev => {
          const newAnswered = new Set(prev)
          newAnswered.add(questionIndex)
          
          // Proposer 3 nouvelles questions pertinentes basées sur la réponse (parmi les non répondues)
          const newSuggestions = getSuggestedQuestions(questions, newAnswered, questionIndex, qa.answer)
          
          setMessages(prevMessages => [...prevMessages, { 
            id: `bot-${Date.now()}-${Math.random()}`,
            type: 'bot', 
            content: qa.answer, 
            question: qa.question,
            suggestions: newSuggestions
          }])
          
          return newAnswered
        })
      }, 500)
      
      timeoutRefs.current.push(timeoutId)
    } else {
      // Réponse par défaut si aucune correspondance
      const timeoutId = setTimeout(() => {
        setAnsweredQuestions(prevAnswered => {
          // Proposer des questions non répondues même si aucune correspondance
          const defaultSuggestions = getSuggestedQuestions(questions, prevAnswered, -1)
          setMessages(prevMessages => [...prevMessages, { 
            id: `bot-error-${Date.now()}-${Math.random()}`,
            type: 'bot', 
            content: "Je n'ai pas trouvé de réponse précise à votre question. Pouvez-vous reformuler ou choisir une des questions suggérées ?",
            suggestions: defaultSuggestions
          }])
          
          return prevAnswered
        })
      }, 500)
      
      timeoutRefs.current.push(timeoutId)
    }
  }, [questions, findAnswer, getSuggestedQuestions])

  // Nettoyer les timeouts au démontage
  useEffect(() => {
    return () => {
      timeoutRefs.current.forEach(timeout => clearTimeout(timeout))
      timeoutRefs.current = []
    }
  }, [])

  // Scroll vers le bas quand de nouveaux messages arrivent
  useEffect(() => {
    if (messages.length > 0) {
      const timeoutId = setTimeout(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
      }, 100)
      
      return () => clearTimeout(timeoutId)
    }
  }, [messages.length])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh] bg-white">
        <SarLoader />
      </div>
    )
  }

  return (
    <div className="flex flex-col bg-white">
      {/* Zone de messages */}
      <div className="px-4 sm:px-6 pt-2 pb-1 space-y-3">
        <AnimatePresence>
          {messages.map((message) => (
            <motion.div
              key={message.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
              className={`flex gap-4 ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
            >
              {message.type === 'bot' && (
                <div className="flex-shrink-0 w-12 h-12 rounded-full bg-white shadow-lg border-2 border-primary/20 flex items-center justify-center overflow-hidden">
                  <Image
                    src="/saria-avatar.png"
                    alt="Saria - Assistant virtuel SAR"
                    width={48}
                    height={48}
                    className="object-cover"
                  />
                </div>
              )}
              <div className={`max-w-[80%] sm:max-w-[70%] ${message.type === 'user' ? 'order-2' : ''}`}>
                <div className={`rounded-2xl px-4 py-3 shadow-md ${
                  message.type === 'user' 
                    ? 'bg-gradient-to-br from-primary to-primary/90 text-white rounded-br-md' 
                    : 'bg-white text-gray-800 rounded-bl-md border border-gray-100'
                }`}>
                  <p className="text-sm leading-relaxed whitespace-pre-wrap font-medium">{message.content}</p>
                </div>
                {/* Afficher les suggestions sous chaque réponse du bot */}
                {message.type === 'bot' && message.suggestions && message.suggestions.length > 0 && (
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.2 }}
                    className="mt-3 space-y-2"
                  >
                    <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5 px-1">
                      Questions suggérées :
                    </p>
                    <div className="flex flex-col gap-2">
                      {message.suggestions.map((suggestedQ, sIdx) => (
                        <motion.button
                          key={sIdx}
                          initial={{ opacity: 0, x: -20 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ delay: 0.3 + sIdx * 0.1 }}
                          whileHover={{ scale: 1.02, x: 5 }}
                          whileTap={{ scale: 0.98 }}
                          onClick={() => handleQuestion(suggestedQ)}
                          className="group relative text-left px-4 py-2.5 bg-gradient-to-r from-primary/10 via-primary/5 to-orange-50 hover:from-primary/20 hover:via-primary/10 hover:to-orange-100 border-2 border-primary/30 hover:border-primary/50 rounded-xl text-xs sm:text-sm font-medium text-gray-800 transition-all duration-300 shadow-sm hover:shadow-lg"
                        >
                          <div className="flex items-start gap-2">
                            <div className="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 group-hover:bg-primary/30 flex items-center justify-center mt-0.5 transition-colors">
                              <MessageCircle className="w-3 h-3 text-primary" />
                            </div>
                            <span className="flex-1 leading-relaxed">{suggestedQ}</span>
                            <div className="flex-shrink-0 text-primary opacity-0 group-hover:opacity-100 transition-opacity text-sm">
                              →
                            </div>
                          </div>
                        </motion.button>
                      ))}
                    </div>
                  </motion.div>
                )}
              </div>
            </motion.div>
          ))}
        </AnimatePresence>

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