import { useEffect, useRef, useState } from 'react'
import { Bot, X, Send, RefreshCw, Trash2, Settings2 } from 'lucide-react'
import clsx from 'clsx'
import {
  useChatContextBlocks, useChatHistory, useSendChatMessage, useClearChatSession, type ChatMessage,
} from '../hooks/useApi'

const BLOCK_LABELS: Record<string, string> = {
  portfolio: 'Portefeuille',
  geo_news: 'Risque géopolitique',
  macro: 'Régime macro',
  patterns: 'Patterns',
  options_iv: 'Options / IV',
  tech_indicators: 'Indicateurs techniques',
  wavelet_signals: 'Signaux ondelettes',
  watchlist_quotes: 'Watchlist',
  economic_calendar: 'Calendrier économique',
  institutional: 'Rapports institutionnels',
  super_context: 'Super Contexte',
  var_risk: 'VaR / Risque',
}

function getSessionId(): string {
  let id = localStorage.getItem('ai_chat_session_id')
  if (!id) {
    id = (crypto as any).randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`
    localStorage.setItem('ai_chat_session_id', id)
  }
  return id
}

function getEnabledBlocks(allBlocks: string[]): Set<string> {
  try {
    const raw = localStorage.getItem('ai_chat_enabled_blocks')
    if (raw) return new Set(JSON.parse(raw))
  } catch { /* ignore */ }
  return new Set(allBlocks)
}

export default function ChatWidget() {
  const [open, setOpen] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [input, setInput] = useState('')
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [pendingRefresh, setPendingRefresh] = useState(false)
  const sessionId = useRef(getSessionId()).current
  const scrollRef = useRef<HTMLDivElement>(null)

  const { data: allBlocks } = useChatContextBlocks()
  const [enabledBlocks, setEnabledBlocks] = useState<Set<string>>(new Set())
  useEffect(() => {
    if (allBlocks) setEnabledBlocks(getEnabledBlocks(allBlocks))
  }, [allBlocks])

  const { data: history } = useChatHistory(sessionId)
  useEffect(() => {
    if (history) setMessages(history)
  }, [history])

  const { mutateAsync: sendMessage, isPending } = useSendChatMessage()
  const { mutateAsync: clearSession } = useClearChatSession()

  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
  }, [messages, isPending])

  const toggleBlock = (key: string) => {
    const next = new Set(enabledBlocks)
    if (next.has(key)) next.delete(key); else next.add(key)
    setEnabledBlocks(next)
    localStorage.setItem('ai_chat_enabled_blocks', JSON.stringify([...next]))
  }

  const send = async () => {
    const text = input.trim()
    if (!text || isPending) return
    setInput('')
    setMessages(prev => [...prev, { role: 'user', content: text }])
    try {
      const res = await sendMessage({
        session_id: sessionId,
        message: text,
        enabled_blocks: [...enabledBlocks],
        refresh_context: pendingRefresh,
      })
      setPendingRefresh(false)
      setMessages(prev => [...prev, { role: 'assistant', content: res.reply, trade_proposal: res.trade_proposal }])
    } catch (e: any) {
      const msg = e?.response?.data?.detail ?? 'Erreur — vérifie la clé API OpenAI dans Configuration.'
      setMessages(prev => [...prev, { role: 'assistant', content: `⚠️ ${msg}` }])
    }
  }

  const handleClear = async () => {
    await clearSession(sessionId)
    setMessages([])
  }

  return (
    <>
      {/* Fixed toggle button — mounted once at the app root, survives all route changes */}
      <button
        onClick={() => setOpen(o => !o)}
        title="Assistant IA"
        className="fixed top-4 right-5 z-50 w-11 h-11 rounded-full bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/40 flex items-center justify-center transition-all hover:scale-105"
      >
        <Bot className="w-5 h-5" />
      </button>

      <div
        className={clsx(
          'fixed inset-0 bg-black/40 z-40 transition-opacity duration-200',
          open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none',
        )}
        onClick={() => setOpen(false)}
      />
      <div
        className={clsx(
          'fixed right-0 top-0 h-full w-[420px] max-w-[92vw] bg-dark-800 border-l border-slate-700/40 z-50 flex flex-col shadow-2xl transition-transform duration-200 ease-out',
          open ? 'translate-x-0' : 'translate-x-full',
        )}
      >
        {/* Header */}
        <div className="flex items-center gap-2 px-4 py-3 border-b border-slate-700/40 shrink-0">
          <div className="w-7 h-7 rounded-full bg-blue-900/40 flex items-center justify-center">
            <Bot className="w-4 h-4 text-blue-400" />
          </div>
          <div>
            <div className="text-sm font-semibold text-white">Assistant IA</div>
            <div className="text-[10px] text-slate-500">Discussion seule — aucune action déclenchée</div>
          </div>
          <div className="ml-auto flex items-center gap-1">
            <button onClick={() => setShowSettings(s => !s)} title="Contexte transmis"
              className={clsx('p-1.5 rounded hover:bg-dark-700 transition-colors', showSettings ? 'text-blue-400' : 'text-slate-500')}>
              <Settings2 className="w-4 h-4" />
            </button>
            <button onClick={() => setOpen(false)} className="p-1.5 rounded hover:bg-dark-700 text-slate-500 transition-colors">
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

        {/* Context settings */}
        {showSettings && (
          <div className="px-4 py-3 border-b border-slate-700/40 shrink-0 max-h-52 overflow-y-auto">
            <div className="text-[10px] text-slate-500 mb-2">Blocs de contexte transmis à l'IA (tout par défaut) :</div>
            <div className="grid grid-cols-2 gap-1.5">
              {(allBlocks ?? []).map(b => (
                <label key={b} className="flex items-center gap-1.5 text-[10px] text-slate-300 cursor-pointer">
                  <input type="checkbox" checked={enabledBlocks.has(b)} onChange={() => toggleBlock(b)} />
                  {BLOCK_LABELS[b] ?? b}
                </label>
              ))}
            </div>
          </div>
        )}

        {/* Messages */}
        <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
          {messages.length === 0 && (
            <div className="text-xs text-slate-600 text-center mt-8">
              Pose une question sur ta situation actuelle — portefeuille, risque géopolitique, régime macro,
              Options Lab, signaux ondelettes... L'IA a accès à un instantané complet, en lecture seule.
            </div>
          )}
          {messages.map((m, i) => (
            <div key={i} className={clsx('flex flex-col', m.role === 'user' ? 'items-end' : 'items-start')}>
              <div className={clsx(
                'max-w-[85%] rounded-lg px-3 py-2 text-xs whitespace-pre-wrap leading-relaxed',
                m.role === 'user' ? 'bg-blue-600 text-white' : 'bg-dark-700/80 border border-slate-700/40 text-slate-200',
              )}>
                {m.content}
              </div>
              {m.trade_proposal && (
                <div className="mt-1 text-[10px] px-2 py-1 rounded bg-emerald-900/30 border border-emerald-700/40 text-emerald-400">
                  ✅ Idée ajoutée → Trade Ideas ({m.trade_proposal.title})
                </div>
              )}
            </div>
          ))}
          {isPending && (
            <div className="flex justify-start">
              <div className="bg-dark-700/80 border border-slate-700/40 rounded-lg px-3 py-2 text-xs text-slate-500 italic">
                🧠 Réflexion…
              </div>
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="flex items-center gap-2 px-4 py-1.5 border-t border-slate-700/30 shrink-0 text-[10px]">
          <button onClick={() => setPendingRefresh(true)}
            className={clsx('flex items-center gap-1 transition-colors', pendingRefresh ? 'text-blue-400' : 'text-slate-500 hover:text-slate-300')}>
            <RefreshCw className="w-3 h-3" /> {pendingRefresh ? 'Contexte sera rafraîchi' : 'Rafraîchir le contexte'}
          </button>
          <button onClick={handleClear} className="ml-auto flex items-center gap-1 text-slate-500 hover:text-red-400 transition-colors">
            <Trash2 className="w-3 h-3" /> Effacer
          </button>
        </div>

        {/* Input */}
        <div className="flex items-center gap-2 p-3 border-t border-slate-700/40 shrink-0">
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() } }}
            placeholder="Écris ta question…"
            className="flex-1 bg-dark-900 border border-slate-700/40 rounded-lg px-3 py-2 text-xs text-white placeholder:text-slate-600 focus:outline-none focus:border-blue-500/50"
          />
          <button onClick={send} disabled={isPending || !input.trim()}
            className="w-8 h-8 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white flex items-center justify-center shrink-0 transition-colors">
            <Send className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>
    </>
  )
}
