const { useState, useRef, useEffect, useCallback } = React;

function Chat({ dossierId, onPaymentComplete }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [checkoutUrl, setCheckoutUrl] = useState(null);
  const messagesEndRef = useRef(null);
  const textareaRef = useRef(null);

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

  // Premier message automatique
  useEffect(() => {
    if (dossierId && messages.length === 0) {
      sendMessage("Bonjour");
    }
  }, [dossierId]);

  // Auto-resize textarea
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px';
    }
  }, [input]);

  // Statuts indiquant que le paiement est confirme
  const PAID_STATUTS = ['paid', 'analysing', 'reviewing', 'challenging', 'drafting', 'delivered', 'error'];

  const pollForPayment = useCallback((id) => {
    const pollInterval = setInterval(async () => {
      try {
        const res = await fetch(`/api/session/${id}`);
        if (!res.ok) return;
        const data = await res.json();
        if (data.statut && PAID_STATUTS.includes(data.statut)) {
          clearInterval(pollInterval);
          if (onPaymentComplete) onPaymentComplete();
        }
      } catch (e) { /* silence */ }
    }, 5000);
  }, [onPaymentComplete]);

  const sendMessage = useCallback(async (text) => {
    const userText = text || input.trim();
    if (!userText || isLoading) return;

    if (text !== "Bonjour") {
      setMessages(prev => [...prev, { role: 'user', content: userText }]);
    }
    setInput('');
    setIsLoading(true);

    try {
      const response = await fetch(`/api/session/${dossierId}/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userText })
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let assistantText = '';

      setMessages(prev => [...prev, { role: 'assistant', content: '' }]);

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

        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (!line.startsWith('data: ')) continue;

          try {
            const data = JSON.parse(line.slice(6));

            if (data.type === 'text') {
              assistantText += data.content;
              setMessages(prev => {
                const updated = [...prev];
                updated[updated.length - 1] = { role: 'assistant', content: assistantText };
                return updated;
              });
            }

            if (data.type === 'tool' && data.name === 'create_checkout' && data.result?.checkoutUrl) {
              setCheckoutUrl(data.result.checkoutUrl);
              pollForPayment(dossierId);
            }

            if (data.type === 'error') {
              assistantText += '\n\n[Erreur technique, veuillez reessayer]';
              setMessages(prev => {
                const updated = [...prev];
                updated[updated.length - 1] = { role: 'assistant', content: assistantText };
                return updated;
              });
            }
          } catch (e) { /* ignore non-JSON */ }
        }
      }
    } catch (err) {
      setMessages(prev => [...prev, {
        role: 'assistant',
        content: 'Erreur de connexion. Veuillez rafraichir la page et reessayer.'
      }]);
    } finally {
      setIsLoading(false);
    }
  }, [dossierId, input, isLoading]);

  const handleKeyDown = useCallback((e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }, [sendMessage]);

  // Format simple du texte (gras, retour lignes)
  function formatText(text) {
    if (!text) return '';
    return text
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\n/g, '<br/>');
  }

  return (
    <div className="flex-1 flex flex-col overflow-hidden">
      {/* Messages */}
      <div className="flex-1 overflow-y-auto px-4 py-6 chat-scroll">
        <div className="max-w-2xl mx-auto space-y-4">

          {messages.map((msg, i) => (
            <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in`}>
              {msg.role === 'assistant' && (
                <div className="w-7 h-7 rounded-lg flex-shrink-0 flex items-center justify-center mr-2 mt-1" style={{ background: '#fef3c7' }}>
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2.5">
                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                  </svg>
                </div>
              )}

              <div
                className={`max-w-[75%] rounded-2xl px-4 py-3 msg-content ${
                  msg.role === 'user'
                    ? 'text-white'
                    : 'border'
                }`}
                style={
                  msg.role === 'user'
                    ? { background: 'var(--text)' }
                    : { background: 'var(--surface)', borderColor: 'var(--border)', color: 'var(--text)' }
                }
              >
                <p
                  className="text-sm leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: formatText(msg.content) }}
                />
              </div>
            </div>
          ))}

          {/* Typing indicator */}
          {isLoading && messages[messages.length - 1]?.role !== 'assistant' && (
            <div className="flex justify-start animate-fade-in">
              <div className="w-7 h-7 rounded-lg flex-shrink-0 flex items-center justify-center mr-2 mt-1" style={{ background: '#fef3c7' }}>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2.5">
                  <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                </svg>
              </div>
              <div className="border rounded-2xl px-4 py-3 flex gap-1.5 items-center" style={{ background: 'var(--surface)', borderColor: 'var(--border)' }}>
                <span className="typing-dot w-2 h-2 rounded-full" style={{ background: 'var(--text-muted)' }}></span>
                <span className="typing-dot w-2 h-2 rounded-full" style={{ background: 'var(--text-muted)' }}></span>
                <span className="typing-dot w-2 h-2 rounded-full" style={{ background: 'var(--text-muted)' }}></span>
              </div>
            </div>
          )}

          {/* Bouton paiement */}
          {checkoutUrl && (
            <div className="flex flex-col items-center gap-3 py-4 animate-fade-in">
              <div className="w-full max-w-sm p-5 rounded-2xl border-2 text-center" style={{ borderColor: 'var(--brand)', background: '#fffbeb' }}>
                <div className="w-12 h-12 rounded-full mx-auto mb-3 flex items-center justify-center" style={{ background: 'var(--brand)' }}>
                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
                    <rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>
                  </svg>
                </div>
                <p className="font-semibold mb-1" style={{ color: 'var(--text)' }}>Votre dossier est pret</p>
                <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
                  Lancez l'analyse pour recevoir votre rapport par email
                </p>
                <a
                  href={checkoutUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="pulse-ring inline-flex items-center justify-center gap-2 w-full font-semibold px-6 py-3.5 rounded-xl text-white transition-all duration-200 hover:scale-105"
                  style={{ background: 'var(--accent-green)' }}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>
                  </svg>
                  Payer et lancer l'analyse
                </a>
                <p className="text-xs mt-3" style={{ color: 'var(--text-muted)' }}>
                  Paiement securise via Stripe — Droit de retractation L221-28
                </p>
              </div>
            </div>
          )}

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

      {/* Input bar */}
      <div className="border-t px-4 py-3" style={{ background: 'var(--surface)', borderColor: 'var(--border)' }}>
        <div className="flex gap-2 max-w-2xl mx-auto items-end">
          <textarea
            ref={textareaRef}
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Ecrivez votre message..."
            rows={1}
            className="flex-1 resize-none rounded-xl border-2 px-4 py-2.5 text-sm transition-colors"
            style={{
              borderColor: 'var(--border)',
              color: 'var(--text)',
              background: 'var(--bg)',
              outline: 'none'
            }}
            onFocus={e => e.target.style.borderColor = 'var(--brand)'}
            onBlur={e => e.target.style.borderColor = 'var(--border)'}
            disabled={isLoading}
          />
          <button
            onClick={() => sendMessage()}
            disabled={isLoading || !input.trim()}
            className="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center text-white transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed"
            style={{ background: input.trim() && !isLoading ? 'var(--brand)' : 'var(--text-muted)' }}
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}