import { useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { ArrowDown } from 'lucide-react';
import { api } from '@/lib/api';
import type { Course } from '@/lib/types';
import { useAuth } from '@/stores/auth';
import { useChat } from '@/stores/chat';
import { useUI } from '@/stores/ui';
import { MessageBubble } from './message-bubble';
import { Composer } from './composer';
import { EmptyState } from './empty-state';

export function ChatView() {
  const { id } = useParams();
  const nav = useNavigate();
  const user = useAuth((s) => s.user);
  const { course, setCourse } = useUI();
  const { messages, streaming, warnings, loadMessages, createConversation, send, stop, regenerate, feedback } = useChat();
  const [deep, setDeep] = useState(!!user?.preferences.deep);
  const [atBottom, setAtBottom] = useState(true);
  const scrollRef = useRef<HTMLDivElement>(null);
  const { data: courses } = useQuery({ queryKey: ['courses'], queryFn: () => api<Course[]>('/courses'), staleTime: 300_000 });
  const conv = useChat((s) => s.conversations.find((c) => c.id === id));
  const list = id ? messages[id] || [] : [];
  const isStreaming = id ? !!streaming[id] : false;
  const activeCourse = conv?.course || course;
  const courseObj = useMemo(() => courses?.find((c) => c.code === activeCourse), [courses, activeCourse]);
  const courseCodes = (courses || []).map((c) => c.code);

  useEffect(() => {
    if (id && !messages[id]) loadMessages(id).catch(() => nav('/'));
  }, [id, messages, loadMessages, nav]);

  useEffect(() => {
    if (atBottom && list.length > 0) scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
  }, [list, atBottom]);

  const onScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 80);
  };

  const handleSend = async (text: string, attachments: string[]) => {
    let convId = id;
    if (!convId) {
      const c = await createConversation(activeCourse);
      convId = c.id;
      nav(`/c/${c.id}`, { replace: true });
    }
    setAtBottom(true);
    await send(convId, text, attachments, deep);
  };

  const initials = (user?.display_name || user?.email || 'É').slice(0, 2).toUpperCase();
  const lastAssistant = [...list].reverse().find((m) => m.role === 'assistant');

  return (
    <div className="flex h-full flex-col">
      {isStreaming && <div className="progress-bar" aria-hidden="true" />}
      {id && warnings[id] && <div className="bg-[#fff8dc] text-[#7a6300] text-sm px-4 py-2 text-center">{warnings[id]}</div>}
      <div ref={scrollRef} onScroll={onScroll} className="flex-1 overflow-y-auto scroll-thin">
        {id && !messages[id] ? (
          <div className="mx-auto max-w-[900px] px-3 sm:px-6 py-6 space-y-5" aria-busy="true">
            <div className="flex justify-end"><div className="skeleton h-12 w-[60%]" /></div>
            <div className="space-y-2"><div className="skeleton h-14 w-full" /><div className="skeleton h-28 w-[92%]" /></div>
            <div className="flex justify-end"><div className="skeleton h-10 w-[45%]" /></div>
            <div className="skeleton h-36 w-[88%]" />
          </div>
        ) : !id || list.length === 0 ? (
          <EmptyState course={courseObj} onPick={(t) => handleSend(t, [])} term={courseObj?.term || ''} />
        ) : (
          <div className="mx-auto max-w-[900px] px-3 sm:px-6 py-4 space-y-5">
            {list.map((m, i) => (
              <MessageBubble
                key={m.id}
                msg={m}
                conversationId={id}
                initials={initials}
                isLast={i === list.length - 1}
                onRegenerate={m.role === 'assistant' && lastAssistant?.id === m.id && !isStreaming && !m.id.startsWith('pending') ? () => regenerate(id, m.id, deep) : undefined}
                onFeedback={m.role === 'assistant' && !m.id.startsWith('pending') ? (fb) => feedback(id, m.id, fb) : undefined}
              />
            ))}
          </div>
        )}
      </div>
      {!atBottom && list.length > 0 && (
        <button onClick={() => { setAtBottom(true); scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' }); }}
          className="absolute right-4 bottom-[172px] sm:bottom-[150px] h-10 w-10 rounded-full bg-white border border-neutral-line shadow-float inline-flex items-center justify-center text-uqo-blue active:scale-95 transition" aria-label="Aller en bas">
          <ArrowDown size={18} />
        </button>
      )}
      <Composer
        conversationId={id || null}
        streaming={isStreaming}
        onSend={handleSend}
        onStop={() => id && stop(id)}
        deep={deep}
        onToggleDeep={() => setDeep((v) => !v)}
        course={activeCourse}
        onCourseChange={setCourse}
        courses={courseCodes.length ? courseCodes : ['IMM1003', 'IMM1033']}
        disabled={!user}
      />
    </div>
  );
}