"use client";

import React, { useState, useEffect, useRef } from "react";
import type { ChatMessage, Citation, SendMessageResponse } from "@duoc-thu/shared-types";
import { ChatBubble, CitationBeamOverlay, useTheme } from "@duoc-thu/ui";
import { Composer } from "./Composer";
import {
  Sparkles,
  Pill,
  ShieldCheck,
  BookOpen,
  Activity,
  Zap,
  Info,
  AlertCircle,
  Stethoscope,
} from "lucide-react";
import { cn } from "@duoc-thu/ui";

interface ChatPanelProps {
  sessionId: string;
  messages: ChatMessage[];
  onMessagesChange: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
  initialQuery?: string;
  initialQueryToken?: number;
  onCitationClick?: (citation: Citation, index: number, allCitations: Citation[]) => void;
  onCitationsLoaded?: (citations: Citation[]) => void;
  activeCitationIndex?: number | null;
  className?: string;
}

const STARTER_QUESTIONS = [
  {
    category: "Chỉ Định",
    query: "Levetiracetam được chỉ định trong những trường hợp nào?",
    icon: Pill,
  },
  {
    category: "Chống Chỉ Định",
    query: "Chống chỉ định của Metformin là gì?",
    icon: Stethoscope,
  },
  {
    category: "ADR Theo Tần Suất",
    query: "Tác dụng không mong muốn của Zolpidem là gì?",
    icon: Activity,
  },
  {
    category: "Thời Kỳ Mang Thai",
    query: "Có thể dùng Fluoxetin trong thời kỳ mang thai không?",
    icon: Zap,
  },
];

export function ChatPanel({
  sessionId,
  messages,
  onMessagesChange: setMessages,
  initialQuery,
  initialQueryToken,
  onCitationClick,
  onCitationsLoaded,
  activeCitationIndex = null,
  className,
}: ChatPanelProps) {
  const { resolvedTheme } = useTheme();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const abortControllerRef = useRef<AbortController | null>(null);
  const initialQuerySentRef = useRef<number | undefined>(undefined);
  const stopRequestedRef = useRef(false);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages, isLoading]);

  const handleSendMessage = async (userText: string) => {
    if (!userText.trim() || isLoading) return;

    setError(null);

    const userMsg: ChatMessage = {
      id: `user-${Date.now()}`,
      role: "user",
      content: userText,
      createdAt: new Date().toISOString(),
    };

    setMessages((prev) => [...prev, userMsg]);
    setIsLoading(true);
    stopRequestedRef.current = false;

    abortControllerRef.current = new AbortController();
    const timeoutId = window.setTimeout(() => {
      abortControllerRef.current?.abort();
    }, 25_000);

    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          content: userText,
          conversationId: sessionId,
        }),
        signal: abortControllerRef.current.signal,
      });

      if (!res.ok) {
        throw new Error(`Upstream returned status ${res.status}`);
      }

      const data: SendMessageResponse = await res.json();
      const assistantMsg = data.message;

      setMessages((prev) => [...prev, assistantMsg]);

      if (assistantMsg.citations && assistantMsg.citations.length > 0) {
        onCitationsLoaded?.(assistantMsg.citations);
      }
    } catch (err: any) {
      if (err.name === "AbortError") {
        setError(
          stopRequestedRef.current
            ? "Đã dừng chờ trên giao diện. Tác vụ đang chạy có thể cần vài giây để kết thúc an toàn."
            : "Yêu cầu vượt quá 25 giây và đã được dừng. Vui lòng thử lại với câu hỏi cụ thể hơn."
        );
        return;
      }
      setError("Không thể kết nối đến máy chủ AI Service. Vui lòng kiểm tra lại dịch vụ backend.");
    } finally {
      window.clearTimeout(timeoutId);
      setIsLoading(false);
      abortControllerRef.current = null;
    }
  };

  const handleStop = () => {
    if (abortControllerRef.current) {
      stopRequestedRef.current = true;
      abortControllerRef.current.abort();
    }
  };

  useEffect(() => {
    return () => abortControllerRef.current?.abort();
  }, []);

  useEffect(() => {
    // Guard against firing twice for the same query: React 18 Strict Mode
    // (dev only) runs this effect setup twice on mount, and with no guard
    // that sent every quick-prompt click as two identical live requests
    // (found live 2026-08-07: duplicate "Chỉ định & Tác dụng không mong
    // muốn của Aspirin" turns in the trace). The ref persists across the
    // Strict Mode replay, so the second invocation for the same
    // `initialQuery` is a no-op; a genuinely new query still sends once.
    if (
      initialQuery &&
      initialQueryToken !== undefined &&
      initialQuerySentRef.current !== initialQueryToken
    ) {
      initialQuerySentRef.current = initialQueryToken;
      handleSendMessage(initialQuery);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [initialQuery, initialQueryToken]);

  // Empty state renderer per theme
  const renderEmptyState = () => {
    if (resolvedTheme === "light") {
      return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
          <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-accent-soft text-accent-primary shadow-sm border border-border-accent/30">
            <Pill className="h-8 w-8" />
          </div>

          <div>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border-accent/30 bg-accent-soft px-3 py-1 text-xs font-bold text-accent-primary mb-2">
              <ShieldCheck className="w-3.5 h-3.5" />
              Daylight Clinical Intelligence (DTQGVN 2018)
            </span>
            <h2 className="text-xl sm:text-2xl font-extrabold text-txt-primary tracking-tight">
              Tra Cứu Dược Thư Quốc Gia Việt Nam
            </h2>
            <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
              Tra cứu 684 chuyên luận Dược thư Quốc gia Việt Nam 2018 với căn cứ theo trang in. Khi cần, bác sĩ có thể tiếp tục trao đổi để làm rõ dữ kiện và đối chiếu với bối cảnh lâm sàng.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
            {STARTER_QUESTIONS.map((q, idx) => {
              const Icon = q.icon;
              return (
                <button
                  key={idx}
                  onClick={() => handleSendMessage(q.query)}
                  className="p-3.5 rounded-2xl border border-border-subtle bg-surface hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-sm group"
                >
                  <div className="flex items-center justify-between">
                    <span className="font-bold text-accent-primary flex items-center gap-1.5">
                      <Icon className="w-3.5 h-3.5" />
                      {q.category}
                    </span>
                    <Sparkles className="w-3.5 h-3.5 text-txt-muted opacity-0 group-hover:opacity-100 transition-opacity" />
                  </div>
                  <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
                    {q.query}
                  </p>
                </button>
              );
            })}
          </div>
        </div>
      );
    }

    if (resolvedTheme === "glass") {
      return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
          <div className="relative flex h-20 w-20 items-center justify-center rounded-3xl bg-accent-soft text-accent-primary shadow-elevated border border-border-accent glass-panel glass-beam-glow animate-pulse-glow">
            <Sparkles className="h-10 w-10" />
          </div>

          <div>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border-accent bg-accent-soft px-3 py-1 text-xs font-extrabold text-accent-primary mb-2 shadow-sm">
              <Activity className="w-3.5 h-3.5 text-accent-primary" />
              Heavy Glass Liquid Intelligence OS
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-txt-primary tracking-tight">
              Hệ Thống Trí Tuệ Y Tế Spatial
            </h2>
            <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
              Không gian tra cứu đa tầng kính với hiệu ứng Citation Beam liên kết trực tiếp khẳng định lâm sàng đến trang sách gốc Dược thư 2018.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
            {STARTER_QUESTIONS.map((q, idx) => {
              const Icon = q.icon;
              return (
                <button
                  key={idx}
                  onClick={() => handleSendMessage(q.query)}
                  className="p-4 rounded-2xl border border-border-subtle bg-surface/70 hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-elevated glass-content-card group"
                >
                  <div className="flex items-center justify-between">
                    <span className="font-bold text-accent-primary flex items-center gap-1.5">
                      <Icon className="w-3.5 h-3.5 text-accent-primary" />
                      {q.category}
                    </span>
                    <Sparkles className="w-3.5 h-3.5 text-accent-primary" />
                  </div>
                  <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
                    {q.query}
                  </p>
                </button>
              );
            })}
          </div>
        </div>
      );
    }

    // Default Dark mode
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
        <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-surface-elevated border border-border-subtle text-accent-primary shadow-elevated">
          <BookOpen className="h-8 w-8" />
        </div>

        <div>
          <span className="inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface-elevated px-3 py-1 text-xs font-bold text-accent-primary mb-2">
            <ShieldCheck className="w-3.5 h-3.5" />
            Night Laboratory Intelligence Workspace
          </span>
          <h2 className="text-xl sm:text-2xl font-extrabold text-txt-primary tracking-tight">
            Trợ Lý Tra Cứu Dược Thư QGVN
          </h2>
          <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
            Hệ thống phân tích & tra cứu Dược thư Quốc gia Việt Nam 2018. Đặt câu hỏi lâm sàng để nhận phân tích có căn cứ trích dẫn chính xác.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
          {STARTER_QUESTIONS.map((q, idx) => {
            const Icon = q.icon;
            return (
              <button
                key={idx}
                onClick={() => handleSendMessage(q.query)}
                className="p-3.5 rounded-2xl border border-border-subtle bg-surface hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-sm group"
              >
                <div className="flex items-center justify-between">
                  <span className="font-bold text-accent-primary flex items-center gap-1.5">
                    <Icon className="w-3.5 h-3.5" />
                    {q.category}
                  </span>
                  <Zap className="w-3.5 h-3.5 text-txt-muted opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
                <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
                  {q.query}
                </p>
              </button>
            );
          })}
        </div>
      </div>
    );
  };

  return (
    <section className={cn("flex flex-col h-full overflow-hidden relative", className)}>
      {/* Citation Beam Overlay for Signature Interaction */}
      <CitationBeamOverlay activeCitationIndex={activeCitationIndex} />

      {/* Messages Workspace List */}
      <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
        {messages.length === 0 ? (
          renderEmptyState()
        ) : (
          messages.map((msg, msgIdx) => {
            // Retry must resend the ORIGINAL user question, not this
            // bubble's own text — for an assistant bubble, `msg.content` is
            // the answer/error text itself, so resending it fed the error
            // message back in as if it were the next question (found live
            // 2026-08-07: a trace row where the query text WAS literally
            // "Dịch vụ đang gặp sự cố tạm thời..."). Walk back to the
            // nearest preceding user turn instead.
            const retryQuery =
              msg.role === "assistant"
                ? [...messages.slice(0, msgIdx)].reverse().find((m) => m.role === "user")?.content
                : undefined;
            return (
              <ChatBubble
                key={msg.id}
                message={msg}
                onCitationClick={(citation, idx, allCitations) =>
                  onCitationClick?.(citation, idx, allCitations)
                }
                activeCitationIndex={activeCitationIndex}
                onRetry={retryQuery ? () => handleSendMessage(retryQuery) : undefined}
                onQuickReply={
                  msgIdx === messages.length - 1 &&
                  msg.decision === "clarify" &&
                  !isLoading
                    ? (text) => handleSendMessage(text)
                    : undefined
                }
              />
            );
          })
        )}

        {/* Loading Indicator */}
        {isLoading && (
          <div className="flex items-center gap-3 p-4 rounded-2xl border border-border-subtle bg-surface max-w-md animate-pulse">
            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-accent-soft text-accent-primary">
              <Pill className="h-4 w-4 animate-spin" />
            </div>
            <div>
              <p className="text-xs font-bold text-txt-primary">Đang truy xuất Dược thư QGVN 2018...</p>
              <p className="text-[0.68rem] text-txt-muted">Đang phân tích chuyên luận & xác thực Entailment</p>
            </div>
          </div>
        )}

        {/* Error Notification */}
        {error && (
          <div className="flex items-center justify-between gap-2 p-3.5 rounded-2xl border border-status-danger/40 bg-status-danger-bg text-status-danger text-xs">
            <div className="flex items-center gap-2">
              <AlertCircle className="w-4 h-4 shrink-0" />
              <span>{error}</span>
            </div>
            <button
              onClick={() => setError(null)}
              className="font-bold underline text-[0.7rem]"
            >
              Đóng
            </button>
          </div>
        )}

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

      {/* Fixed Composer Bottom Bar */}
      <div className="p-3 sm:p-4 border-t border-border-subtle bg-surface-elevated/60 backdrop-blur-md">
        <Composer onSubmit={handleSendMessage} isLoading={isLoading} onStop={handleStop} />
      </div>
    </section>
  );
}