/* ============================================================
   chat.jsx — AI 연애 상담 (페르소나 + 실제 AI 응답)
   ============================================================ */
const { useState: cS, useEffect: cE, useRef: cR } = React;

function buildContext(profile, partner) {
  let ctx = "";
  if (profile) {
    const s = window.computeSaju(profile);
    ctx += `\n[상담자 사주] ${profile.name}(${profile.gender}성), ${s.animal.an}띠, 일간 ${s.dayMaster.h}${s.dayMaster.k}(${s.element}·${s.yinYang}), 연애성향 "${s.meta.love}".`;
  }
  if (partner) {
    const t = window.computeSaju(partner);
    ctx += `\n[상대(그 사람) 사주] ${partner.name}(${partner.gender}성), ${t.animal.an}띠, 일간 ${t.dayMaster.h}${t.dayMaster.k}(${t.element}·${t.yinYang}).`;
  }
  if (ctx) ctx = "\n\n참고할 사주 정보(자연스럽게 녹여서 활용, 매번 나열하지 말 것):" + ctx;
  return ctx;
}

function ChatScreen({ nav, profile, partner, addDiary, sessionPersona, setSessionPersona }) {
  const [persona, setPersona] = cS(sessionPersona || null);
  const [messages, setMessages] = cS([]);
  const [input, setInput] = cS("");
  const [sending, setSending] = cS(false);
  const [diaryId] = cS(() => "chat-" + Date.now());
  const taRef = cR(null);

  cE(() => {
    if (persona && messages.length === 0) setMessages([{ role: "assistant", content: persona.opener }]);
  }, [persona]);

  cE(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }, [messages, sending]);

  const PREAMBLE = persona ? (persona.system + buildContext(profile, partner)) : "";

  async function send(text) {
    const content = (text ?? input).trim();
    if (!content || sending) return;
    const next = [...messages, { role: "user", content }];
    setMessages(next);
    setInput("");
    if (taRef.current) taRef.current.style.height = "auto";
    setSending(true);

    addDiary({
      id: diaryId, kind: "chat",
      title: `${persona.role} ${persona.name}과의 상담`,
      preview: content.length > 38 ? content.slice(0, 38) + "…" : content,
      glyph: persona.title.slice(0,1), color: persona.grad,
      when: "방금", persona: persona.id,
    });

    try {
      const apiMessages = [
        { role: "user", content: PREAMBLE + "\n\n위 지침과 말투를 반드시 지키며 상담해줘. 이제부터 대화를 시작할게." },
        { role: "assistant", content: persona.opener },
        ...next,
      ];
      const out = await window.claude.complete({ messages: apiMessages });
      setMessages((m) => [...m, { role: "assistant", content: (out || "").trim() || "잠시 생각이 멈췄어요. 다시 한 번 말씀해 주실래요?" }]);
    } catch (e) {
      setMessages((m) => [...m, { role: "assistant", content: "연결이 잠시 흐트러졌어요. 잠시 후 다시 보내주시면 이어서 들을게요." }]);
    } finally {
      setSending(false);
    }
  }

  function onKey(e) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }
  function grow(e) {
    const t = e.target; t.style.height = "auto"; t.style.height = Math.min(t.scrollHeight, 130) + "px";
    setInput(t.value);
  }

  /* ---------- 페르소나 선택 ---------- */
  if (!persona) {
    return (
      <div className="page">
        <div className="page-head rise">
          <span className="eyebrow">相談 · AI 연애 상담</span>
          <h1>누구에게 물어볼까요?</h1>
          <p>같은 고민도 보는 눈에 따라 답이 달라져요. 마음이 가는 전문가를 골라 대화를 시작하세요.</p>
        </div>
        <div className="persona-grid">
          {window.PERSONAS.map((p, i) => (
            <div key={p.id} className="persona-card rise" style={{ animationDelay: `${i*.05}s` }}
              onClick={() => { setPersona(p); setSessionPersona && setSessionPersona(p); }}>
              <div className="pc-orb" style={{ background: p.grad }}>{p.glyph}</div>
              <div className="pc-body">
                <div className="pc-role">{p.title} · {p.role}</div>
                <h3>{p.name}</h3>
                <div className="pc-intro">{p.intro}</div>
                <div className="pc-tag" style={{ color: p.accent }}>{p.tag} <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg></div>
              </div>
            </div>
          ))}
        </div>
        <div className="disclaimer">AI 상담은 위로와 통찰을 위한 참고용이며,<br/>전문 심리 치료를 대체하지 않습니다.</div>
      </div>
    );
  }

  /* ---------- 대화 ---------- */
  return (
    <div className="page">
      <div className="chat-head">
        <button className="icon-btn" onClick={() => { setPersona(null); setMessages([]); setSessionPersona && setSessionPersona(null); }} title="전문가 다시 선택">
          <window.Icon name="back" />
        </button>
        <div className="ch-orb" style={{ background: persona.grad }}>{persona.glyph}</div>
        <div className="ch-txt">
          <b>{persona.name}</b>
          <span>{persona.title} · {persona.role}</span>
        </div>
      </div>

      <div className="msgs">
        {messages.map((m, i) => (
          <div key={i} className={"msg " + (m.role === "user" ? "me" : "ai")}>
            <div className="m-orb" style={ m.role === "user" ? {} : { background: persona.grad } }>
              {m.role === "user" ? (profile?.name?.[0] || "나") : persona.glyph}
            </div>
            <div className="bubble">{m.content}</div>
          </div>
        ))}
        {sending && (
          <div className="msg ai">
            <div className="m-orb" style={{ background: persona.grad }}>{persona.glyph}</div>
            <div className="bubble"><window.Typing /></div>
          </div>
        )}
      </div>

      {messages.length <= 1 && !sending && (
        <div className="quick-row">
          {window.QUICK_TOPICS.slice(0, 6).map((q, i) => (
            <div key={i} className="chip" onClick={() => send(q)}>{q}</div>
          ))}
        </div>
      )}

      <div className="composer">
        <textarea ref={taRef} rows="1" value={input} onChange={grow} onKeyDown={onKey}
          placeholder={`${persona.name}에게 털어놓아 보세요…`} />
        <button className="send-btn" disabled={!input.trim() || sending} onClick={() => send()}>
          <window.Icon name="send" />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ChatScreen });