'use client';

import { useState, useRef, useEffect, KeyboardEvent } from 'react';
import { ArrowUp, X, Sparkles, ChevronRight, RotateCcw, Copy, Check } from 'lucide-react';
import Link from 'next/link';
import { useAnalytics } from '../analytics/useAnalytics';
import { AnalyticsEvents } from '../analytics/analytics-events';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import dynamic from 'next/dynamic';
const AIOrb = dynamic(() => import('./AIOrb'), { ssr: false });

const LOADING_TEXTS = [
  'Durchsuche das Kabelhandbuch... 📖',
  'Frage den Senior-Ingenieur... 👴🔧',
  'Frage ChatGPTs Cousin 2. Grades... 🤖',
];

interface ProductMatch {
  id: string;
  title: string;
  sku: string;
  slug: string;
}

interface Message {
  role: 'user' | 'assistant';
  content: string;
  products?: ProductMatch[];
  timestamp: number;
}
interface ComponentProps {
  isOpen: boolean;
  onClose: () => void;
  initialQuery?: string;
  triggerSearch?: boolean;
}

export function AISearchResults({
  isOpen,
  onClose,
  initialQuery = '',
  triggerSearch = false,
}: ComponentProps) {
  const { trackEvent } = useAnalytics();

  const [query, setQuery] = useState('');
  const [messages, setMessages] = useState<Message[]>([]);
  const [honeypot, setHoneypot] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
  const [copiedAll, setCopiedAll] = useState(false);
  const [loadingText, setLoadingText] = useState(LOADING_TEXTS[0]);

  const inputRef = useRef<HTMLInputElement>(null);
  const modalRef = useRef<HTMLDivElement>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const loadingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const hasTriggeredRef = useRef(false);

  // Dedicated focus effect — polls until the input actually has focus
  useEffect(() => {
    if (!isOpen) return;
    let attempts = 0;
    const focusTimer = setInterval(() => {
      const el = inputRef.current;
      if (el && document.activeElement !== el) {
        el.focus({ preventScroll: true });
      }
      attempts++;
      if (attempts >= 15 || document.activeElement === el) {
        clearInterval(focusTimer);
      }
    }, 100);
    return () => clearInterval(focusTimer);
  }, [isOpen]);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';

      // Trigger initial search only once
      if (triggerSearch && initialQuery && !hasTriggeredRef.current) {
        hasTriggeredRef.current = true;
        handleSearch(initialQuery);
      }
    } else {
      document.body.style.overflow = 'unset';
      setQuery('');
      setMessages([]);
      setError(null);
      setIsLoading(false);
      hasTriggeredRef.current = false;
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, triggerSearch]);

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

  // Global ESC handler
  useEffect(() => {
    if (!isOpen) return;
    const handleEsc = (e: globalThis.KeyboardEvent) => {
      if (e.key === 'Escape') {
        const activeElement = document.activeElement;
        const isInputFocused = activeElement === inputRef.current;

        if (query.trim()) {
          // If there's text, clear it but keep chat open
          setQuery('');
          inputRef.current?.focus();
        } else if (!isInputFocused) {
          // If no text and input is not focused, focus it
          inputRef.current?.focus();
        } else {
          // If no text and input IS focused, close the chat
          onClose();
        }
      }
    };
    document.addEventListener('keydown', handleEsc);
    return () => document.removeEventListener('keydown', handleEsc);
  }, [isOpen, onClose, query]);

  const handleSearch = async (searchQuery: string = query) => {
    if (!searchQuery.trim() || isLoading) return;

    const newUserMessage: Message = { role: 'user', content: searchQuery, timestamp: Date.now() };
    const newMessagesContext = [...messages, newUserMessage];

    setMessages(newMessagesContext);
    setQuery(''); // Always clear input after send
    setError(null);

    // Give the user message animation 400ms to arrive before showing "thinking"
    setTimeout(() => {
      setIsLoading(true);
      // Start rotating loading texts
      let textIdx = Math.floor(Math.random() * LOADING_TEXTS.length);
      setLoadingText(LOADING_TEXTS[textIdx]);
      loadingIntervalRef.current = setInterval(() => {
        textIdx = (textIdx + 1) % LOADING_TEXTS.length;
        setLoadingText(LOADING_TEXTS[textIdx]);
      }, 2500);
    }, 400);

    trackEvent(AnalyticsEvents.FORM_SUBMIT, {
      type: 'ai_chat',
      query: searchQuery,
    });

    try {
      const controller = new AbortController();
      const timeout = setTimeout(() => controller.abort(), 60000);

      const res = await fetch('/api/ai-search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        signal: controller.signal,
        body: JSON.stringify({
          messages: newMessagesContext,
          _honeypot: honeypot,
        }),
      });

      clearTimeout(timeout);

      const data = await res.json().catch(() => null);

      if (!res.ok || !data) {
        throw new Error(data?.error || `Server antwortete mit Status ${res.status}`);
      }

      setMessages((prev) => [
        ...prev,
        {
          role: 'assistant',
          content: data.answerText,
          products: data.products,
          timestamp: Date.now(),
        },
      ]);

      setTimeout(() => inputRef.current?.focus(), 100);
    } catch (err: any) {
      console.error(err);
      const msg =
        err.name === 'AbortError'
          ? 'Anfrage hat zu lange gedauert. Bitte versuche es erneut.'
          : err.message || 'Ein Fehler ist aufgetreten.';

      // Show error as a system message in the chat instead of a separate error banner
      setMessages((prev) => [
        ...prev,
        {
          role: 'assistant',
          content: `⚠️ ${msg}`,
          timestamp: Date.now(),
        },
      ]);

      trackEvent(AnalyticsEvents.ERROR, {
        location: 'ai_chat',
        message: err.message,
        query: searchQuery,
      });
    } finally {
      setIsLoading(false);
      if (loadingIntervalRef.current) {
        clearInterval(loadingIntervalRef.current);
        loadingIntervalRef.current = null;
      }
      // Always re-focus the input
      setTimeout(() => inputRef.current?.focus(), 50);
    }
  };

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleSearch();
    }
    if (e.key === 'ArrowUp' && !query) {
      // Find the last user message and put it into the input
      const lastUserNav = [...messages].reverse().find((m) => m.role === 'user');
      if (lastUserNav) {
        e.preventDefault();
        setQuery(lastUserNav.content);
      }
    }
  };

  const handleCopy = (content: string, index?: number) => {
    navigator.clipboard.writeText(content);
    if (index !== undefined) {
      setCopiedIndex(index);
      setTimeout(() => setCopiedIndex(null), 2000);
    } else {
      setCopiedAll(true);
      setTimeout(() => setCopiedAll(false), 2000);
    }
  };

  const handleCopyChat = () => {
    const fullChat = messages
      .map((m) => `${m.role === 'user' ? 'Du' : 'Ohm'}:\n${m.content}`)
      .join('\n\n');
    handleCopy(fullChat);
  };

  if (!isOpen) return null;

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div
      className="fixed inset-0 z-[100] flex items-start justify-center pt-6 md:pt-12 px-4"
      onClick={handleBackdropClick}
      role="dialog"
      aria-modal="true"
      style={{ animation: 'chatBackdropIn 0.4s ease-out forwards' }}
    >
      {/* Animated backdrop */}
      <div
        className="absolute inset-0 bg-[#000a18]/90 backdrop-blur-2xl"
        style={{ animation: 'chatFadeIn 0.3s ease-out' }}
      />

      <div
        ref={modalRef}
        className="relative w-full max-w-3xl flex flex-col"
        style={{
          height: 'min(90vh, 900px)',
          animation: 'chatSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        }}
      >
        {/* ── Glassmorphism container ── */}
        <div className="flex flex-col h-full rounded-3xl overflow-hidden border border-white/[0.08] bg-gradient-to-b from-white/[0.06] to-white/[0.02] shadow-[0_32px_64px_-12px_rgba(0,0,0,0.6)]">
          {/* ── Header ── */}
          <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 overflow-hidden rounded-full">
                <AIOrb isThinking={isLoading} hasError={!!error} />
              </div>
              <div>
                <h2 className="text-white font-bold text-sm tracking-wide">Ohm</h2>
                <p className="text-[10px] text-white/30 font-medium tracking-wider uppercase">
                  {isLoading ? 'Denkt nach...' : error ? 'Fehler aufgetreten' : 'Online'}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              {messages.length > 0 && (
                <button
                  onClick={handleCopyChat}
                  className="flex items-center gap-1.5 text-[10px] font-bold text-white/40 hover:text-white/80 transition-all duration-200 hover:bg-white/5 rounded-full px-3 py-1.5 cursor-pointer uppercase tracking-wider"
                  title="gesamten Chat kopieren"
                >
                  {copiedAll ? (
                    <Check className="w-3.5 h-3.5 text-accent" />
                  ) : (
                    <Copy className="w-3.5 h-3.5" />
                  )}
                  <span>{copiedAll ? 'Kopiert' : 'Chat kopieren'}</span>
                </button>
              )}
              <button
                onClick={onClose}
                className="text-white/30 hover:text-white/80 transition-all duration-200 hover:bg-white/5 rounded-xl p-2 cursor-pointer"
                aria-label="Close"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* ── Chat Area ── */}
          <div className="flex-1 overflow-y-auto px-5 py-6 space-y-5 scroll-smooth chat-scrollbar">
            {/* Empty state */}
            {messages.length === 0 && !isLoading && !error && (
              <div
                className="flex flex-col items-center justify-center h-full text-center space-y-5"
                style={{ animation: 'chatFadeIn 0.6s ease-out 0.3s both' }}
              >
                <div className="w-24 h-24 mb-2">
                  <AIOrb isThinking={false} hasError={false} />
                </div>
                <div>
                  <p className="text-xl md:text-2xl font-bold text-white/80">
                    Wie kann ich helfen?
                  </p>
                  <p className="text-sm text-white/30 mt-2 max-w-md">
                    Beschreibe dein Projekt, frag nach bestimmten Kabeln, oder nenne mir deine
                    Anforderungen.
                  </p>
                </div>
                {/* Quick prompts */}
                <div className="flex flex-wrap justify-center gap-2 mt-4">
                  {['Windpark 33kV Verkabelung', 'NYCWY 4x185', 'Erdkabel für Solarpark'].map(
                    (prompt) => (
                      <button
                        key={prompt}
                        onClick={() => handleSearch(prompt)}
                        className="text-xs text-white/40 hover:text-white/80 border border-white/10 hover:border-white/20 hover:bg-white/5 rounded-full px-4 py-2 transition-all duration-200 cursor-pointer"
                      >
                        {prompt}
                      </button>
                    ),
                  )}
                </div>
              </div>
            )}

            {/* Messages */}
            {messages.map((msg, index) => (
              <div
                key={index}
                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                style={{
                  animation: `chatMessageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) ${index * 0.05}s both`,
                }}
              >
                <div
                  className={`relative group max-w-[85%] rounded-2xl px-5 py-4 ${
                    msg.role === 'user'
                      ? 'bg-accent text-primary font-semibold rounded-br-lg'
                      : 'bg-white/[0.05] border border-white/[0.06] text-white/90 rounded-bl-lg'
                  }`}
                >
                  {/* Copy Button */}
                  <button
                    onClick={() => handleCopy(msg.content, index)}
                    className={`absolute opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-lg cursor-pointer ${
                      msg.role === 'user'
                        ? 'top-2 right-2 bg-primary/10 hover:bg-primary/20 text-primary/60 hover:text-primary'
                        : 'top-2 right-2 bg-white/5 hover:bg-white/10 text-white/40 hover:text-white'
                    }`}
                    title="Nachricht kopieren"
                  >
                    {copiedIndex === index ? (
                      <Check className="w-3.5 h-3.5" />
                    ) : (
                      <Copy className="w-3.5 h-3.5" />
                    )}
                  </button>

                  {msg.role === 'assistant' && (
                    <div className="flex items-center gap-2 mb-2">
                      <Sparkles className="w-3 h-3 text-accent/60" />
                      <span className="text-[10px] font-bold tracking-widest uppercase text-accent/50">
                        Ohm
                      </span>
                    </div>
                  )}
                  <div
                    className={`text-sm md:text-[15px] leading-relaxed ${
                      msg.role === 'assistant'
                        ? 'prose prose-invert prose-sm prose-p:leading-relaxed prose-a:text-accent prose-strong:text-accent/90 prose-ul:list-disc prose-ol:list-decimal'
                        : ''
                    }`}
                  >
                    {msg.role === 'assistant' ? (
                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
                    ) : (
                      <p className="whitespace-pre-wrap">{msg.content}</p>
                    )}
                  </div>

                  {/* Timestamp */}
                  {!msg.products?.length && (
                    <p
                      className={`text-[9px] mt-2 font-medium tracking-wide ${msg.role === 'user' ? 'text-primary/40' : 'text-white/20'}`}
                    >
                      {new Date(msg.timestamp).toLocaleTimeString('de', {
                        hour: '2-digit',
                        minute: '2-digit',
                      })}
                    </p>
                  )}

                  {/* Product cards */}
                  {msg.role === 'assistant' && msg.products && msg.products.length > 0 && (
                    <div className="mt-4 space-y-2 border-t border-white/[0.06] pt-4">
                      <h4 className="text-[10px] font-bold tracking-widest uppercase text-white/30 mb-2">
                        Empfohlene Produkte
                      </h4>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        {msg.products.map((product, idx) => (
                          <Link
                            key={idx}
                            href={`/produkte/${product.slug}`}
                            onClick={() => {
                              onClose();
                              trackEvent(AnalyticsEvents.BUTTON_CLICK, {
                                target: product.slug,
                                location: 'ai_chat',
                              });
                            }}
                            className="group flex items-center justify-between bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.06] hover:border-accent/30 rounded-xl px-4 py-3 transition-all duration-300"
                            style={{ animation: `chatFadeIn 0.3s ease-out ${idx * 0.1}s both` }}
                          >
                            <div className="min-w-0">
                              <p className="text-[9px] font-bold text-white/25 tracking-wider">
                                {product.sku}
                              </p>
                              <h5 className="text-xs font-bold text-white/70 group-hover:text-accent truncate transition-colors">
                                {product.title}
                              </h5>
                            </div>
                            <ChevronRight className="w-3.5 h-3.5 text-white/20 group-hover:text-accent shrink-0 ml-3 group-hover:translate-x-0.5 transition-all" />
                          </Link>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            ))}

            {/* Loading indicator */}
            {isLoading && (
              <div
                className="flex justify-start"
                style={{ animation: 'chatMessageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards' }}
              >
                <div className="flex items-center gap-4 bg-white/[0.03] border border-white/[0.06] rounded-2xl rounded-bl-lg px-5 py-4">
                  <div className="w-10 h-10 shrink-0">
                    <AIOrb isThinking={true} hasError={false} />
                  </div>
                  <div>
                    <p
                      className="text-sm text-white/50 font-medium"
                      style={{ animation: 'chatTextSwap 0.4s ease-out' }}
                      key={loadingText}
                    >
                      {loadingText}
                    </p>
                    <div className="flex gap-1 mt-2">
                      {[0, 1, 2].map((i) => (
                        <div
                          key={i}
                          className="w-1.5 h-1.5 rounded-full bg-accent/40"
                          style={{
                            animation: 'chatDotBounce 1.2s ease-in-out infinite',
                            animationDelay: `${i * 0.15}s`,
                          }}
                        />
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Error */}
            {error && (
              <div className="flex justify-start" style={{ animation: 'chatShake 0.5s ease-out' }}>
                <div className="flex items-center gap-4 bg-red-500/[0.06] border border-red-500/20 rounded-2xl rounded-bl-lg px-5 py-4">
                  <div className="w-10 h-10 shrink-0">
                    <AIOrb isThinking={false} hasError={true} />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold text-red-300">Da ist was schiefgelaufen 😬</h3>
                    <p className="text-xs text-red-300/60 mt-1">{error}</p>
                    <button
                      onClick={() => {
                        setError(null);
                        inputRef.current?.focus();
                      }}
                      className="flex items-center gap-1.5 text-[10px] font-bold text-red-300/50 hover:text-red-300 mt-2 transition-colors cursor-pointer"
                    >
                      <RotateCcw className="w-3 h-3" />
                      Nochmal versuchen
                    </button>
                  </div>
                </div>
              </div>
            )}

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

          {/* ── Input Area ── */}
          <div className="px-5 pb-5 pt-3 border-t border-white/[0.04]">
            <div
              className={`relative flex items-center rounded-2xl transition-all duration-300 ${
                query.trim()
                  ? 'bg-white/[0.08] border border-accent/30 shadow-[0_0_20px_-4px_rgba(130,237,32,0.1)]'
                  : 'bg-white/[0.04] border border-white/[0.06]'
              }`}
            >
              <input
                ref={inputRef}
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={onKeyDown}
                placeholder="Nachricht eingeben..."
                className="flex-1 bg-transparent border-none text-white text-sm md:text-base px-5 py-4 focus:outline-none placeholder:text-white/20"
                disabled={isLoading}
                tabIndex={1}
                autoFocus
              />
              <input
                type="text"
                className="hidden"
                value={honeypot}
                onChange={(e) => setHoneypot(e.target.value)}
                tabIndex={-1}
                autoComplete="off"
                aria-hidden="true"
              />
              <button
                onClick={() => handleSearch()}
                disabled={!query.trim() || isLoading}
                className={`mr-2 w-9 h-9 rounded-xl flex items-center justify-center shrink-0 transition-all duration-300 cursor-pointer ${
                  query.trim()
                    ? 'bg-accent text-primary shadow-lg shadow-accent/20 hover:shadow-accent/40 hover:scale-105 active:scale-95'
                    : 'bg-white/5 text-white/20'
                }`}
                aria-label="Nachricht senden"
              >
                <ArrowUp className="w-4 h-4" strokeWidth={2.5} />
              </button>
            </div>
            <div className="flex items-center justify-center gap-3 mt-2.5">
              <span className="text-[9px] uppercase tracking-[0.15em] font-medium text-white/15">
                Enter zum Senden · Esc zum Schließen
              </span>
              <span className="text-[9px] uppercase tracking-[0.15em] font-medium text-white/15">
                ·
              </span>
              <span className="text-[9px] uppercase tracking-[0.15em] font-medium text-accent/40 flex items-center gap-1">
                🛡️ DSGVO-konform · EU-Server
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* ── Keyframe animations ── */}
      <style>{`
        @keyframes chatBackdropIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes chatFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes chatSlideUp {
          from { opacity: 0; transform: translateY(40px) scale(0.96); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes chatMessageIn {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes chatDotBounce {
          0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
          40% { transform: scale(1); opacity: 1; }
        }
        @keyframes chatTextSwap {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes chatShake {
          0%, 100% { transform: translateX(0); }
          15% { transform: translateX(-6px); }
          30% { transform: translateX(5px); }
          45% { transform: translateX(-4px); }
          60% { transform: translateX(3px); }
          75% { transform: translateX(-1px); }
        }

        /* Custom scrollbar */
        .chat-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .chat-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        .chat-scrollbar::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.08);
          border-radius: 4px;
        }
        .chat-scrollbar::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.16);
        }
        .chat-scrollbar {
          scrollbar-width: thin;
          scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
        }
      `}</style>
    </div>
  );
}