// 이 파일이 하는 일: 화면 우측 하단에 떠 있는 "AI 학습 도우미" 챗 위젯.
// 학생이 막힐 때 질문하면 로컬 LLM(qwen3:8b)이 힌트·설명으로 답한다.
//
// 학습 포인트: 플로팅 버튼(FAB)은 position: fixed로 스크롤과 무관하게 화면에 고정한다.
//   패널은 버튼 위로 펼쳐지고, 열림 상태(open)만 컴포넌트가 기억하면 된다.
//   대화는 아직 "단발"이다 — 한 질문에 한 답. 맥락을 쌓으려면 이전 메시지를 함께 보내야 한다.
import { useState, useRef, useEffect } from 'react';
import { MessageCircle, X, Send } from 'lucide-react';
import client from '../api/client';

export default function HelperWidget() {
  const [open, setOpen] = useState(false);
  const [msgs, setMsgs] = useState([]); // { role: 'user' | 'ai', text }
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const bodyRef = useRef(null);

  // 새 메시지가 오면 대화창을 맨 아래로 스크롤한다.
  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, loading]);

  async function send(e) {
    e.preventDefault();
    const q = input.trim();
    if (!q || loading) return;
    setMsgs((m) => [...m, { role: 'user', text: q }]);
    setInput('');
    setLoading(true);
    try {
      const res = await client.post('/assistant/ask', { question: q });
      setMsgs((m) => [...m, { role: 'ai', text: res.data.answer }]);
    } catch {
      setMsgs((m) => [...m, { role: 'ai', text: '문제가 생겼어요. 잠시 후 다시 물어봐 주세요.' }]);
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      {open && (
        <div className="helper-panel" role="dialog" aria-label="AI 학습 도우미">
          <div className="helper-head">
            <span>✨ AI 학습 도우미</span>
            <button className="helper-x" onClick={() => setOpen(false)} aria-label="닫기">
              <X size={18} strokeWidth={1.5} />
            </button>
          </div>
          <div className="helper-body" ref={bodyRef}>
            {msgs.length === 0 && (
              <p className="helper-welcome">
                막히는 부분이나 궁금한 개념을 물어보세요.<br />
                정답을 통째로 주진 않지만, 스스로 풀도록 힌트를 드려요.
              </p>
            )}
            {msgs.map((m, i) => (
              <div key={i} className={`helper-msg helper-${m.role}`}>
                {m.text}
              </div>
            ))}
            {loading && <div className="helper-msg helper-ai helper-thinking">생각 중…</div>}
          </div>
          <form className="helper-input" onSubmit={send}>
            {/* textarea라 여러 줄 질문을 쓸 수 있다. Enter는 전송, Shift+Enter는 줄바꿈.
                학습 포인트: input은 한 줄뿐이라 Enter=전송만 가능했다 — 긴 질문엔 textarea가 맞다. */}
            <textarea
              className="helper-ta"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  send(e);
                }
              }}
              placeholder="질문을 입력하세요 (Shift+Enter 줄바꿈)"
              aria-label="질문 입력"
              rows={1}
            />
            <button type="submit" className="helper-send" disabled={loading} aria-label="보내기">
              <Send size={18} strokeWidth={1.5} />
            </button>
          </form>
        </div>
      )}
      <button
        className="helper-fab"
        onClick={() => setOpen((o) => !o)}
        aria-label={open ? 'AI 학습 도우미 닫기' : 'AI 학습 도우미 열기'}
      >
        {open ? <X size={24} strokeWidth={1.5} /> : <MessageCircle size={24} strokeWidth={1.5} />}
      </button>
    </>
  );
}
