// 1:1 Live Chat page

const QUICK_TOPICS = [
  "송장번호 조회가 안돼요",
  "예약을 취소하고 싶어요",
  "픽업 시간을 변경하고 싶어요",
  "물품이 파손됐어요",
  "환불은 언제 받나요?",
  "사업자 등록을 하고 싶어요",
];

const SYSTEM_PROMPT = `너는 솔브잇(Solveit) 택배 조회·예약 플랫폼의 1:1 상담 챗봇이야.
- 한국어로만 답변. 친절하고 차분하고 신뢰감 있는 톤. 존댓말 사용.
- 답변은 2~4 문장으로 짧고 명확하게. 필요한 정보만.
- 솔브잇 서비스: 8개 택배사 통합 조회, 원클릭 예약, 5단계 픽업 예약 플로우, S/M/L 박스 사이즈, 최대 50만원 분실·파손 보상, 1588-0000 고객센터.
- 픽업 시간 변경은 1시간 전까지 가능. 예약 취소는 픽업 전 100% 환불.
- 분실은 7일 경과 시 신청 가능, 파손은 수령 후 24시간 이내 사진과 함께 접수.
- 카카오·네이버·구글·애플 소셜 로그인 지원, 네이버페이·카카오페이·카드 결제.
- 환불: 간편결제는 즉시, 카드는 3-5일 영업일.
- 모르는 것은 "정확한 확인이 어려워 상담사로 연결해드릴게요"라고 답해.
- 절대 거짓 정보를 만들지 마.`;

const Chat = ({ navigate }) => {
  const [messages, setMessages] = React.useState([
    {
      who: "bot", time: now(),
      text: "안녕하세요, 솔브잇 1:1 채팅 상담입니다 👋\n무엇을 도와드릴까요? 아래에서 자주 묻는 주제를 선택하시거나 직접 질문을 입력해주세요."
    },
    {
      who: "bot", time: now(), sameAuthor: true,
      kind: "quick-reply",
      options: ["내 택배 조회하기", "예약 취소·변경", "분실·파손 신청", "결제·환불"]
    }
  ]);
  const [input, setInput] = React.useState("");
  const [sending, setSending] = React.useState(false);
  const bodyRef = React.useRef(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [messages, sending]);

  const sendMessage = async (text) => {
    const t = (text ?? input).trim();
    if (!t || sending) return;
    setInput("");

    // append user message + lock send + show typing
    const userMsg = { who: "user", time: now(), text: t };
    setMessages(m => [...m, userMsg]);
    setSending(true);

    // Build conversation for Claude
    try {
      // Convert state -> messages array for window.claude
      const history = [...messages, userMsg]
        .filter(m => m.text)
        .map(m => ({ role: m.who === "user" ? "user" : "assistant", content: m.text }));

      const prefixed = [
        { role: "user", content: SYSTEM_PROMPT },
        { role: "assistant", content: "네, 솔브잇 상담사 미나입니다. 차근차근 도와드릴게요." },
        ...history,
      ];

      let reply = "";
      if (window.claude && window.claude.complete) {
        reply = await window.claude.complete({ messages: prefixed });
      } else {
        reply = "잠시 후 다시 시도해주세요.";
      }

      // Special-case: if user mentioned tracking, attach tracking card
      const attachTracking = /송장|조회|어디|배송\s*상태|위치/.test(t);

      setMessages(m => [...m, {
        who: "bot",
        time: now(),
        text: reply || "답변을 불러오지 못했어요. 다시 한 번 말씀해주시겠어요?",
        kind: attachTracking ? "tracking-card" : undefined,
      }]);
    } catch (err) {
      setMessages(m => [...m, {
        who: "bot",
        time: now(),
        text: "잠시 연결이 원활하지 않아요. 다시 한 번 보내주시거나 1588-0000으로 전화 주세요.",
      }]);
    } finally {
      setSending(false);
      setTimeout(() => inputRef.current?.focus(), 50);
    }
  };

  const handleKey = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  // Group messages: hide avatar for consecutive bot messages from the same author
  const decorated = React.useMemo(() => {
    return messages.map((m, i) => {
      const prev = messages[i - 1];
      const same = prev && prev.who === m.who;
      return { ...m, sameAuthor: same };
    });
  }, [messages]);

  return (
    <main>
      <div className="chat-shell">
        {/* Sidebar */}
        <aside className="chat-side">
          <div>
            <h3>상담사</h3>
            <div className="chat-agent">
              <div className="chat-agent-avatar">미</div>
              <div className="info">
                <div className="name">미나 상담사</div>
                <div className="status">● 응답 가능 · 평균 1분</div>
              </div>
            </div>
          </div>

          <div>
            <h3>연결된 예약</h3>
            <div className="context-card">
              <div className="context-row">
                <span className="lbl">송장번호</span>
                <span className="val mono">1234-5678-9012</span>
              </div>
              <div className="context-row">
                <span className="lbl">상태</span>
                <span className="val" style={{ color: "var(--primary)" }}>배송 중</span>
              </div>
              <div className="context-row">
                <span className="lbl">받는 분</span>
                <span className="val">김민지</span>
              </div>
              <button className="btn btn-outline btn-sm" onClick={() => navigate('track')}>
                <Icon name="package" size={13}/> 조회 화면 열기
              </button>
            </div>
          </div>

          <div>
            <h3>빠른 도움말</h3>
            <div className="quick-links">
              <a className="quick-link" href="#" onClick={e => { e.preventDefault(); navigate('support'); }}>
                <span className="ic"><Icon name="msg" size={12}/></span>
                자주 묻는 질문
              </a>
              <a className="quick-link" href="#" onClick={e => { e.preventDefault(); navigate('pricing'); }}>
                <span className="ic"><Icon name="card" size={12}/></span>
                요금 안내
              </a>
              <a className="quick-link" href="#">
                <span className="ic"><Icon name="shield" size={12}/></span>
                분실·파손 신청
              </a>
              <a className="quick-link" href="tel:1588-0000">
                <span className="ic"><Icon name="phone" size={12}/></span>
                전화 상담 1588-0000
              </a>
            </div>
          </div>

          <div className="hours-card">
            <strong>상담 운영 시간</strong>
            평일 09:00 ~ 18:00 (점심 12:30 ~ 13:30)<br/>
            주말·공휴일은 챗봇 응대만 가능합니다.
          </div>
        </aside>

        {/* Main chat */}
        <section className="chat-main">
          <header className="chat-head">
            <div>
              <h2>1:1 채팅 상담</h2>
              <div className="sub">상담 내용은 서비스 개선을 위해 안전하게 보관됩니다.</div>
            </div>
            <div className="actions">
              <button className="btn btn-outline btn-sm">
                <Icon name="share" size={13}/> 대화 내용 전송
              </button>
              <button className="btn btn-ghost btn-sm" onClick={() => navigate('support')} style={{ color: "var(--muted)" }}>
                상담 종료
              </button>
            </div>
          </header>

          <div className="chat-body" ref={bodyRef}>
            <div className="msg-day">오늘 · {todayLabel()}</div>

            {decorated.map((m, i) => (
              <MessageView key={i} m={m} onQuickReply={(t) => sendMessage(t)} onOpenTrack={() => navigate('track')} />
            ))}

            {sending && (
              <div className="msg-typing">
                <div className="bubble">
                  <span className="dot"></span>
                  <span className="dot"></span>
                  <span className="dot"></span>
                </div>
              </div>
            )}
          </div>

          {/* Suggestion chips (only when conversation is short) */}
          {messages.filter(m => m.who === "user").length < 1 && !sending && (
            <div className="suggest-bar">
              {QUICK_TOPICS.map(q => (
                <button key={q} className="suggest-chip" onClick={() => sendMessage(q)}>
                  {q}
                </button>
              ))}
            </div>
          )}

          {/* Composer */}
          <footer className="chat-composer">
            <div className="composer-row">
              <textarea
                ref={inputRef}
                className="composer-input"
                placeholder="메시지를 입력하세요. Enter로 전송, Shift+Enter로 줄바꿈."
                value={input}
                onChange={e => setInput(e.target.value)}
                onKeyDown={handleKey}
                rows={1}
                disabled={sending}
              />
              <div className="composer-tools">
                <button className="composer-icon" title="파일 첨부" type="button">
                  <Icon name="package" size={16}/>
                </button>
                <button className="composer-icon" title="이모지" type="button">
                  <Icon name="sparkle" size={16}/>
                </button>
              </div>
              <button
                className="composer-send"
                onClick={() => sendMessage()}
                disabled={!input.trim() || sending}
                title="전송"
              >
                <Icon name="arrow-right" size={16}/>
              </button>
            </div>
            <div className="composer-foot">
              <span>응답 평균 1분 이내 · 상담사 미나</span>
              <span>🔒 안전하게 암호화돼 전송됩니다</span>
            </div>
          </footer>
        </section>
      </div>
    </main>
  );
};

function MessageView({ m, onQuickReply, onOpenTrack }) {
  const klass = `msg ${m.who}${m.sameAuthor ? " same-author" : ""}`;
  return (
    <div className={klass}>
      <div className="avatar">{m.who === "user" ? "나" : "미"}</div>
      <div className="bubble-col">
        {m.text && <div className="bubble">{m.text}</div>}

        {m.kind === "quick-reply" && (
          <div className="quick-reply">
            {m.options.map(opt => (
              <button key={opt} className="quick-reply-btn" onClick={() => onQuickReply(opt)}>
                {opt}
              </button>
            ))}
          </div>
        )}

        {m.kind === "tracking-card" && (
          <div className="chat-tracking">
            <div className="ct-head">
              <span className="ct-id">CJ대한통운 · 1234-5678-9012</span>
              <span className="ct-status">배송 출발</span>
            </div>
            <div className="ct-bar">
              <div className="ct-bar-fill" style={{ width: "75%" }}></div>
            </div>
            <div className="ct-meta">
              <span><strong>오늘 14:00</strong> 도착 예정</span>
              <a href="#" onClick={e => { e.preventDefault(); onOpenTrack(); }}
                 style={{ color: "var(--primary)", fontWeight: 600 }}>
                자세히 →
              </a>
            </div>
          </div>
        )}

        <span className="time">{m.time}</span>
      </div>
    </div>
  );
}

function now() {
  const d = new Date();
  const h = d.getHours();
  const ampm = h < 12 ? "오전" : "오후";
  const hh = (h % 12) || 12;
  const mm = String(d.getMinutes()).padStart(2, "0");
  return `${ampm} ${hh}:${mm}`;
}

function todayLabel() {
  const d = new Date();
  const days = ["일", "월", "화", "수", "목", "금", "토"];
  return `${d.getFullYear()}.${d.getMonth() + 1}.${d.getDate()} (${days[d.getDay()]})`;
}

window.Chat = Chat;