'use client'

import { useEffect, useMemo, useRef, useState } from 'react'
import { usePathname, useRouter } from 'next/navigation'
import { useVisitor } from '@/context/VisitorContext'
import { sendAssistantMessage, AssistantUnavailableError } from '@/lib/api/client'
import { buildSuggestions } from '@/lib/assistantSuggestions'
import { stripHtml } from '@/lib/i18n'
import type { AiChatMessageDTO, AiChatResponseDTO, SectionDTO } from '@/lib/api/types'
import './assistant.css'

type Turn =
  | { from: 'visitor'; text: string }
  | { from: 'guide'; response: AiChatResponseDTO }
  | { from: 'guide'; error: 'failed' | 'unavailable' }

interface Props {
  instanceId: string
  apiKey: string
  configId: string
  slug: string
  sections?: SectionDTO[]
  /// Nom du lieu, affiché sous le titre — le visiteur sait à qui il parle.
  venueName?: string
}

const UI: Record<string, Record<string, string>> = {
  title: { FR: 'Votre guide', NL: 'Uw gids', EN: 'Your guide', DE: 'Ihr Guide', ES: 'Su guía', IT: 'La tua guida' },
  open: { FR: "Ouvrir l'assistant", NL: 'Assistent openen', EN: 'Open the assistant', DE: 'Assistent öffnen', ES: 'Abrir el asistente', IT: 'Apri l’assistente' },
  close: { FR: "Fermer l'assistant", NL: 'Assistent sluiten', EN: 'Close the assistant', DE: 'Assistent schließen', ES: 'Cerrar el asistente', IT: 'Chiudi l’assistente' },
  hint: { FR: 'Une question ?', NL: 'Een vraag?', EN: 'A question?', DE: 'Eine Frage?', ES: '¿Una pregunta?', IT: 'Una domanda?' },
  welcome: {
    FR: 'Bonjour ! Je connais ce lieu par cœur. Que puis-je vous montrer ?',
    NL: 'Hallo! Ik ken deze plek van binnen en van buiten. Wat kan ik u tonen?',
    EN: 'Hello! I know this place inside out. What can I show you?',
    DE: 'Hallo! Ich kenne diesen Ort in- und auswendig. Was darf ich Ihnen zeigen?',
    ES: '¡Hola! Conozco este lugar a fondo. ¿Qué puedo enseñarle?',
    IT: 'Salve! Conosco questo luogo a memoria. Cosa posso mostrarle?',
  },
  placeholder: { FR: 'Posez votre question…', NL: 'Stel uw vraag…', EN: 'Ask your question…', DE: 'Stellen Sie Ihre Frage…', ES: 'Haga su pregunta…', IT: 'Fai la tua domanda…' },
  send: { FR: 'Envoyer', NL: 'Verzenden', EN: 'Send', DE: 'Senden', ES: 'Enviar', IT: 'Invia' },
  dictate: { FR: 'Dicter la question', NL: 'Vraag dicteren', EN: 'Dictate your question', DE: 'Frage diktieren', ES: 'Dictar la pregunta', IT: 'Detta la domanda' },
  listening: { FR: 'Je vous écoute…', NL: 'Ik luister…', EN: 'Listening…', DE: 'Ich höre zu…', ES: 'Le escucho…', IT: 'Ti ascolto…' },
  writing: { FR: 'Le guide rédige', NL: 'De gids schrijft', EN: 'The guide is writing', DE: 'Der Guide schreibt', ES: 'La guía está escribiendo', IT: 'La guida sta scrivendo' },
  openSection: { FR: 'Ouvrir cette section', NL: 'Open dit onderdeel', EN: 'Open this section', DE: 'Diesen Bereich öffnen', ES: 'Abrir esta sección', IT: 'Apri questa sezione' },
  failed: { FR: "La réponse n'est pas arrivée.", NL: 'Het antwoord is niet aangekomen.', EN: "The answer didn't come through.", DE: 'Die Antwort kam nicht an.', ES: 'La respuesta no ha llegado.', IT: 'La risposta non è arrivata.' },
  retry: { FR: 'Réessayer', NL: 'Opnieuw', EN: 'Try again', DE: 'Erneut versuchen', ES: 'Reintentar', IT: 'Riprova' },
  unavailable: {
    FR: "Le guide se repose pour aujourd'hui. Revenez demain.",
    NL: 'De gids rust vandaag uit. Kom morgen terug.',
    EN: 'The guide is resting for today. Come back tomorrow.',
    DE: 'Der Guide ruht sich heute aus. Kommen Sie morgen wieder.',
    ES: 'La guía descansa por hoy. Vuelva mañana.',
    IT: 'La guida riposa per oggi. Torna domani.',
  },
  privacy: {
    FR: 'Vos questions au guide',
    NL: 'Uw vragen aan de gids',
    EN: 'Your questions to the guide',
    DE: 'Ihre Fragen an den Guide',
    ES: 'Sus preguntas a la guía',
    IT: 'Le tue domande alla guida',
  },
}

const label = (key: keyof typeof UI, lang: string) => UI[key][lang] ?? UI[key].FR

/// Mention d'information aux visiteurs (§8.3 des CGU) — miroir de
/// `mymuseum-visitapp/lib/Components/VisitorPrivacyNotice.dart`, lui-même repris mot pour
/// mot de `DOCS/mention-information-visiteurs.md`. **Les trois doivent rester alignés.**
///
/// ⚠️ **Trois langues, repli sur l'anglais — c'est un choix, pas un oubli.** Le reste de
/// cette interface parle six langues, mais traduire une mention de protection des données
/// sans relecture humaine serait pire que la servir en anglais : une nuance perdue sur
/// « nous n'enregistrons pas votre adresse IP » n'est pas une coquille d'interface. Les
/// autres langues attendent une traduction relue, à demander avec la relecture juridique.
const PRIVACY_NOTICE: Record<string, string> = {
  FR:
    "Lorsque vous posez une question à notre guide, votre question et la réponse qui vous est " +
    "donnée sont enregistrées. Cela nous sert à repérer ce que nos visiteurs cherchent sans le " +
    "trouver, et à compléter nos contenus en conséquence.\n\n" +
    "Nous n'enregistrons ni votre nom, ni votre compte, ni votre adresse IP. Un identifiant de " +
    "session tiré au hasard permet seulement de relier entre elles les questions d'une même " +
    "conversation ; il disparaît avec elle.\n\n" +
    "Votre question est transmise à notre fournisseur d'intelligence artificielle (Google) pour " +
    "produire la réponse. Le texte de vos questions est supprimé au bout de 90 jours ; seuls des " +
    "regroupements par sujet, sans le texte de vos questions, sont conservés au-delà.\n\n" +
    "Le champ de question est libre : nous vous invitons à ne pas y saisir d'informations " +
    "personnelles.",
  NL:
    "Wanneer u onze gids een vraag stelt, worden uw vraag en het gegeven antwoord opgeslagen. Zo " +
    "zien we wat onze bezoekers zoeken zonder het te vinden, en vullen we onze inhoud aan.\n\n" +
    "Wij registreren noch uw naam, noch een account, noch uw IP-adres. Een willekeurig " +
    "gegenereerde sessie-identificatie dient enkel om de vragen van eenzelfde gesprek aan elkaar " +
    "te koppelen; ze verdwijnt samen met dat gesprek.\n\n" +
    "Uw vraag wordt doorgestuurd naar onze aanbieder van kunstmatige intelligentie (Google) om " +
    "het antwoord op te stellen. De tekst van uw vragen wordt na 90 dagen verwijderd; daarna " +
    "blijven enkel groeperingen per onderwerp bewaard, zonder de tekst van uw vragen.\n\n" +
    "Het vraagveld is vrij in te vullen: wij raden u aan er geen persoonsgegevens in te typen.",
  EN:
    "When you ask our guide a question, your question and the answer you are given are recorded. " +
    "This helps us see what our visitors look for without finding it, and improve our content " +
    "accordingly.\n\n" +
    "We record neither your name, nor an account, nor your IP address. A randomly generated " +
    "session identifier only links together the questions of a single conversation; it " +
    "disappears with it.\n\n" +
    "Your question is sent to our artificial intelligence provider (Google) to produce the " +
    "answer. The text of your questions is deleted after 90 days; beyond that, only groupings by " +
    "topic are kept, without the text of your questions.\n\n" +
    "The question field is free text: we invite you not to enter personal information in it.",
}

const privacyNotice = (lang: string) => PRIVACY_NOTICE[lang] ?? PRIVACY_NOTICE.EN

/// L'API de reconnaissance vocale n'est pas standardisée partout : on ne montre le
/// micro que si le navigateur la propose réellement.
function getSpeechRecognition(): any {
  if (typeof window === 'undefined') return null
  return (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition || null
}

export default function AssistantBubble({
  instanceId, apiKey, configId, slug, sections, venueName,
}: Props) {
  const { language } = useVisitor()
  const router = useRouter()
  const pathname = usePathname()

  const [open, setOpen] = useState(false)
  const [turns, setTurns] = useState<Turn[]>([])
  const [draft, setDraft] = useState('')
  const [pending, setPending] = useState(false)
  const [listening, setListening] = useState(false)
  const [speechReady, setSpeechReady] = useState(false)
  const [noticeOpen, setNoticeOpen] = useState(false)

  const threadRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const launcherRef = useRef<HTMLButtonElement>(null)
  const recognitionRef = useRef<any>(null)
  const lastQuestionRef = useRef<string>('')

  // La section ouverte se lit dans l'URL — inutile de la faire descendre depuis
  // le layout, qui ne la connaît pas.
  const currentSection = useMemo(() => {
    const match = pathname?.match(/\/sections\/([^/]+)/)
    if (!match) return null
    return sections?.find((s) => s.id === match[1]) ?? null
  }, [pathname, sections])

  const suggestions = useMemo(
    () => buildSuggestions(sections, language, currentSection),
    [sections, language, currentSection]
  )

  useEffect(() => { setSpeechReady(!!getSpeechRecognition()) }, [])

  useEffect(() => {
    const el = threadRef.current
    if (el) el.scrollTop = el.scrollHeight
  }, [turns, pending])

  useEffect(() => {
    if (open) inputRef.current?.focus()
  }, [open])

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape' && open) {
        setOpen(false)
        launcherRef.current?.focus()
      }
    }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [open])

  // Historique envoyé au modèle : seulement les tours aboutis.
  function historyFrom(list: Turn[]): AiChatMessageDTO[] {
    return list.flatMap<AiChatMessageDTO>((turn) => {
      if (turn.from === 'visitor') return [{ role: 'user', content: turn.text }]
      if ('response' in turn) return [{ role: 'assistant', content: stripHtml(turn.response.reply) }]
      return []
    })
  }

  async function ask(question: string) {
    const text = question.trim()
    if (!text || pending) return

    lastQuestionRef.current = text
    setDraft('')
    const withQuestion: Turn[] = [...turns, { from: 'visitor', text }]
    setTurns(withQuestion)
    setPending(true)

    try {
      const response = await sendAssistantMessage(
        {
          message: text,
          instanceId,
          configurationId: configId,
          language,
          history: historyFrom(turns),
        },
        apiKey
      )
      setTurns([...withQuestion, { from: 'guide', response }])

      // `expectsReply: false` = le modèle clôt l'échange (politesse, info pure).
      // On ne réarme alors pas la dictée — c'est sa raison d'être côté mains-libres.
      if (listening && response.expectsReply === false) stopListening()
    } catch (err) {
      const kind = err instanceof AssistantUnavailableError ? 'unavailable' : 'failed'
      setTurns([...withQuestion, { from: 'guide', error: kind }])
    } finally {
      setPending(false)
      inputRef.current?.focus()
    }
  }

  function stopListening() {
    recognitionRef.current?.stop()
    recognitionRef.current = null
    setListening(false)
  }

  function toggleListening() {
    if (listening) return stopListening()

    const Recognition = getSpeechRecognition()
    if (!Recognition) return

    const recognition = new Recognition()
    recognition.lang = { FR: 'fr-FR', NL: 'nl-NL', EN: 'en-US', DE: 'de-DE', ES: 'es-ES', IT: 'it-IT' }[language] ?? 'fr-FR'
    recognition.interimResults = true
    recognition.continuous = false

    recognition.onresult = (event: any) => {
      const transcript = Array.from(event.results).map((r: any) => r[0].transcript).join('')
      setDraft(transcript)
      if (event.results[event.results.length - 1].isFinal) {
        stopListening()
        ask(transcript)
      }
    }
    recognition.onerror = () => stopListening()
    recognition.onend = () => setListening(false)

    recognitionRef.current = recognition
    setListening(true)
    recognition.start()
  }

  function openSection(sectionId: string) {
    setOpen(false)
    router.push(`/${slug}/${configId}/sections/${sectionId}`)
  }

  return (
    <>
      {!open && (
        <span className="mim-assistant-hint" aria-hidden="true">{label('hint', language)}</span>
      )}

      <button
        ref={launcherRef}
        type="button"
        className="mim-assistant-launcher"
        aria-expanded={open}
        aria-controls="mim-assistant-panel"
        aria-label={label(open ? 'close' : 'open', language)}
        onClick={() => setOpen(!open)}
      >
        {open ? <IconClose /> : <IconChat />}
      </button>

      <div
        id="mim-assistant-panel"
        className="mim-assistant-panel"
        data-open={open}
        role="dialog"
        aria-label={label('title', language)}
        aria-hidden={!open}
      >
        <header className="mim-assistant-head">
          <span className="mim-assistant-avatar" aria-hidden="true"><IconChat /></span>
          <span className="mim-assistant-identity">
            <strong>{label('title', language)}</strong>
            {venueName && <span>{venueName}</span>}
          </span>
          {/* §8.3 des CGU : la mention doit être accessible depuis l'assistant lui-même,
              c'est-à-dire là où la collecte a lieu. */}
          <button
            type="button"
            className="mim-assistant-icon-btn"
            onClick={() => setNoticeOpen((v) => !v)}
            aria-label={label('privacy', language)}
            aria-expanded={noticeOpen}
            title={label('privacy', language)}
          >
            <IconPrivacy />
          </button>
          <button
            type="button"
            className="mim-assistant-icon-btn"
            onClick={() => setOpen(false)}
            aria-label={label('close', language)}
          >
            <IconClose />
          </button>
        </header>

        {noticeOpen && (
          <section className="mim-assistant-notice">
            <strong>{label('privacy', language)}</strong>
            {privacyNotice(language).split('\n\n').map((paragraph, i) => (
              <p key={i}>{paragraph}</p>
            ))}
          </section>
        )}

        <div className="mim-assistant-thread" ref={threadRef} aria-live="polite">
          {turns.length === 0 && (
            <div className="mim-assistant-opener">
              <span className="mim-assistant-mark" aria-hidden="true"><IconChat /></span>
              <p>{label('welcome', language)}</p>
              {suggestions.length > 0 && (
                <div className="mim-assistant-chips">
                  {suggestions.map((s) => (
                    <button key={s} type="button" className="mim-assistant-chip" onClick={() => ask(s)}>
                      {s}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}

          {turns.map((turn, i) =>
            turn.from === 'visitor' ? (
              <div key={i} className="mim-msg mim-msg-visitor">
                <div className="mim-bubble">{turn.text}</div>
              </div>
            ) : 'error' in turn ? (
              <div key={i} className={`mim-banner mim-banner-${turn.error === 'unavailable' ? 'notice' : 'error'}`}>
                <span>
                  {label(turn.error === 'unavailable' ? 'unavailable' : 'failed', language)}
                  {turn.error === 'failed' && (
                    <button
                      type="button"
                      className="mim-assistant-chip mim-retry"
                      onClick={() => ask(lastQuestionRef.current)}
                    >
                      {label('retry', language)}
                    </button>
                  )}
                </span>
              </div>
            ) : (
              <div key={i} className="mim-msg mim-msg-guide">
                {turn.response.reply && (
                  <div
                    className="mim-bubble"
                    // Les réponses viennent de l'éditeur riche, comme le reste des contenus.
                    dangerouslySetInnerHTML={{ __html: turn.response.reply }}
                  />
                )}

                {!!turn.response.cards?.length && (
                  <div className="mim-cards">
                    {turn.response.cards.map((card, j) => (
                      <div key={j} className="mim-card">
                        {card.icon && <span className="mim-card-icon" aria-hidden="true">{card.icon}</span>}
                        <span className="mim-card-text">
                          <strong>{card.title}</strong>
                          {card.subtitle && <span>{card.subtitle}</span>}
                        </span>
                      </div>
                    ))}
                  </div>
                )}

                {turn.response.navigation && (
                  <button
                    type="button"
                    className="mim-nav-action"
                    onClick={() => openSection(turn.response.navigation!.sectionId)}
                  >
                    <span className="mim-nav-thumb" aria-hidden="true">
                      {turn.response.navigation.imageUrl
                        ? <img src={turn.response.navigation.imageUrl} alt="" />
                        : <IconPin />}
                    </span>
                    <span className="mim-nav-text">
                      <strong>{stripHtml(turn.response.navigation.sectionTitle)}</strong>
                      <span>{label('openSection', language)}</span>
                    </span>
                    <span className="mim-nav-chevron" aria-hidden="true"><IconChevron /></span>
                  </button>
                )}
              </div>
            )
          )}

          {pending && (
            <div className="mim-typing" aria-label={label('writing', language)}>
              <i /><i /><i />
            </div>
          )}

          {listening && (
            <div className="mim-listening">
              <IconMic />
              <span>{label('listening', language)}</span>
              <span className="mim-wave" aria-hidden="true">
                <i /><i /><i /><i /><i />
              </span>
            </div>
          )}
        </div>

        <form
          className="mim-assistant-composer"
          onSubmit={(e) => { e.preventDefault(); ask(draft) }}
        >
          <input
            ref={inputRef}
            className="mim-assistant-field"
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            placeholder={listening ? label('listening', language) : label('placeholder', language)}
            aria-label={label('placeholder', language)}
            disabled={pending}
          />
          {speechReady && (
            <button
              type="button"
              className="mim-round-btn mim-mic"
              data-listening={listening}
              onClick={toggleListening}
              aria-label={label('dictate', language)}
              aria-pressed={listening}
            >
              <IconMic />
            </button>
          )}
          <button
            type="submit"
            className="mim-round-btn mim-send"
            aria-label={label('send', language)}
            disabled={pending || !draft.trim()}
          >
            <IconSend />
          </button>
        </form>
      </div>
    </>
  )
}

/* ── Icônes ─────────────────────────────────────────────────────────────── */

const stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.9, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const }

const IconChat = () => (
  <svg viewBox="0 0 24 24" {...stroke} aria-hidden="true">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>
)
const IconClose = () => (
  <svg viewBox="0 0 24 24" {...stroke} strokeWidth={2.1} aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
)
const IconPrivacy = () => (
  <svg viewBox="0 0 24 24" {...stroke} aria-hidden="true">
    <path d="M12 3 4 6v6c0 5 3.4 8.4 8 9 4.6-.6 8-4 8-9V6l-8-3z" />
    <path d="M12 11v4M12 8.2v.1" />
  </svg>
)
const IconPin = () => (
  <svg viewBox="0 0 24 24" {...stroke} aria-hidden="true">
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />
  </svg>
)
const IconChevron = () => (
  <svg viewBox="0 0 24 24" {...stroke} strokeWidth={2.2} aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
)
const IconMic = () => (
  <svg viewBox="0 0 24 24" {...stroke} strokeWidth={2} aria-hidden="true">
    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
  </svg>
)
const IconSend = () => (
  <svg viewBox="0 0 24 24" {...stroke} strokeWidth={2} aria-hidden="true"><path d="m22 2-7 20-4-9-9-4z" /></svg>
)