// === 고객 응대 (문의 / 리뷰) ===
// 탭: 문의 / 리뷰. 답변 작성 → 확인 모달 → 즉시 네이버 전송.
// 네이버 endpoint path는 서버에서 후보 여러 개 자동 시도 (X-Naver-Path-Used 헤더로 확인).

function CustomerScreen() {
  const isConfigured = window.API.naverConfigured();
  const [tab, setTab] = useState("qa");                  // "qa" | "reviews"
  const [items, setItems] = useState([]);
  const [meta, setMeta] = useState(null);                // { page, size, totalElements, totalPages, pathUsed }
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(1);
  const [filter, setFilter] = useState("unanswered");    // "all" | "answered" | "unanswered"
  const [days, setDays] = useState(30);                  // 7 / 30 / 90

  // 답변 작성 모달
  const [composing, setComposing] = useState(null);      // { item, text }
  const [sending, setSending] = useState(false);
  const [confirmSend, setConfirmSend] = useState(false);

  const load = (opts = {}) => {
    // 리뷰는 네이버 커머스 API에서 공식 미지원 (2024-08-30 네이버 답변).
    // 호출하면 404만 반복되므로 fetch 자체를 skip하고 안내 표시.
    if (tab === "reviews") {
      setItems([]);
      setMeta(null);
      setError(null);
      setLoading(false);
      return;
    }
    if (!isConfigured) {
      setError("API 자격증명이 설정되지 않았습니다 (API 설정 메뉴에서 입력)");
      return;
    }
    const nextPage = opts.page || page;
    const nextFilter = opts.filter || filter;
    const nextDays = opts.days || days;
    setLoading(true);
    setError(null);

    const ymd = (d) => d.toISOString().slice(0, 10);
    const from = new Date(); from.setDate(from.getDate() - nextDays);
    const params = { page: nextPage, size: 30, from: ymd(from), to: ymd(new Date()) };
    if (nextFilter === "answered") {
      if (tab === "qa") params.answered = "true";
      else params.hasComment = "true";
    } else if (nextFilter === "unanswered") {
      if (tab === "qa") params.answered = "false";
      else params.hasComment = "false";
    }

    const fetcher = tab === "qa" ? window.API.naverFetchQA : window.API.naverFetchReviews;
    fetcher(params)
      .then(result => {
        setItems(result.items || []);
        setMeta(result);
        if (opts.page) setPage(opts.page);
        if (opts.filter) setFilter(opts.filter);
        if (opts.days) setDays(opts.days);
      })
      .catch(err => {
        console.error("[customer load]", err);
        setError(err.message);
        toast((tab === "qa" ? "문의" : "리뷰") + " 조회 실패: " + err.message);
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => { load(); }, [tab]); // 탭 바뀌면 새로 로드

  const openCompose = (item) => {
    // 기존 답변/답글이 있으면 수정용으로 미리 채워넣기
    const existing = item.answer || item.answerContent
                  || item.sellerComment || item.comment || item.commentContent || "";
    setComposing({ item, text: existing });
  };
  const closeCompose = () => { if (!sending) { setComposing(null); setConfirmSend(false); } };

  const doSend = async () => {
    if (!composing || !composing.text.trim()) {
      toast("답변 내용을 입력하세요");
      return;
    }
    setSending(true);
    try {
      const id = tab === "qa"
        ? (composing.item.inquiryNo || composing.item.qnaId || composing.item.id || composing.item.qaId)
        : (composing.item.reviewId || composing.item.id || composing.item.reviewNo);
      if (!id) throw new Error("ID 필드를 찾을 수 없음 — 응답 구조 확인 필요");
      if (tab === "qa") await window.API.naverAnswerQA(id, composing.text);
      else await window.API.naverCommentReview(id, composing.text);
      toast("답변이 네이버에 전송되었습니다");
      setComposing(null);
      setConfirmSend(false);
      load();   // 새로고침
    } catch (err) {
      console.error("[doSend]", err);
      toast("전송 실패: " + err.message);
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page">
      <div className="page-header" style={{ display: "flex", alignItems: "flex-end", gap: 16 }}>
        <div style={{ flex: 1 }}>
          <h1 className="page-title">고객 응대</h1>
          <p className="page-desc">
            네이버 스마트스토어 문의(상품Q&amp;A)와 리뷰를 한 화면에서 조회 · 답변
            {meta?.pathUsed && <span className="text-xs muted" style={{ marginLeft: 8 }}>· endpoint: {meta.pathUsed}</span>}
          </p>
        </div>
        {tab !== "reviews" && (
          <button className="btn" onClick={() => load()} disabled={loading}>
            <window.I.Refresh size={14} /> {loading ? "조회 중..." : "새로고침"}
          </button>
        )}
      </div>

      {/* 탭 */}
      <div className="seg" style={{ marginBottom: 12 }}>
        <button className={"seg-btn " + (tab === "qa" ? "active" : "")} onClick={() => setTab("qa")}>
          <window.I.MessageCircle size={12} /> 문의 (상품 Q&amp;A)
        </button>
        <button className={"seg-btn " + (tab === "reviews" ? "active" : "")} onClick={() => setTab("reviews")}>
          <window.I.Star size={12} /> 리뷰
        </button>
      </div>

      {/* 필터 — 리뷰 탭은 API 미지원이라 필터 숨김 */}
      {tab === "reviews" ? null : (
      <div className="toolbar" style={{ marginBottom: 12, flexWrap: "wrap", gap: 8 }}>
        <div className="seg">
          <button className={"seg-btn " + (filter === "unanswered" ? "active" : "")}
                  onClick={() => load({ page: 1, filter: "unanswered" })}>
            {tab === "qa" ? "미답변" : "답글 없음"}
          </button>
          <button className={"seg-btn " + (filter === "all" ? "active" : "")}
                  onClick={() => load({ page: 1, filter: "all" })}>전체</button>
          <button className={"seg-btn " + (filter === "answered" ? "active" : "")}
                  onClick={() => load({ page: 1, filter: "answered" })}>
            {tab === "qa" ? "답변 완료" : "답글 있음"}
          </button>
        </div>
        <div className="toolbar-divider" />
        <div className="seg">
          <button className={"seg-btn " + (days === 7 ? "active" : "")} onClick={() => load({ page: 1, days: 7 })}>최근 7일</button>
          <button className={"seg-btn " + (days === 30 ? "active" : "")} onClick={() => load({ page: 1, days: 30 })}>30일</button>
          <button className={"seg-btn " + (days === 90 ? "active" : "")} onClick={() => load({ page: 1, days: 90 })}>90일</button>
        </div>
        {meta && (
          <div className="right text-sm muted">
            {meta.totalElements != null ? `${meta.totalElements}건` : `${items.length}건 표시`}
          </div>
        )}
      </div>
      )}

      {error && (
        <div style={{
          padding: "10px 14px", marginBottom: 12, borderRadius: 8,
          background: "rgba(239, 68, 68, 0.08)", border: "1px solid rgba(239, 68, 68, 0.35)",
          fontSize: 12, color: "var(--danger)", display: "flex", gap: 8, alignItems: "flex-start"
        }}>
          <window.I.AlertCircle size={14} stroke="var(--danger)" style={{ flexShrink: 0, marginTop: 1 }} />
          <span>{error}</span>
        </div>
      )}

      {/* 목록 (카드형) */}
      {tab === "reviews" ? (
        <ReviewsNotSupported />
      ) : loading && items.length === 0 ? (
        <div className="empty"><div>불러오는 중...</div></div>
      ) : items.length === 0 ? (
        <div className="empty" style={{ padding: 40, textAlign: "center", border: "1px solid var(--border)", borderRadius: 8 }}>
          <window.I.MessageCircle size={32} className="empty-icon" />
          <div>문의가 없습니다</div>
          {filter === "unanswered" && (
            <div className="text-sm muted" style={{ marginTop: 8 }}>
              "전체" 또는 "답변 완료" 탭으로 바꿔보세요
            </div>
          )}
        </div>
      ) : (
        <QAList items={items} onReply={openCompose} />
      )}

      {/* 페이지네이션 (리뷰 탭은 데이터 없으므로 숨김) */}
      {tab !== "reviews" && meta && meta.totalPages > 1 && (
        <div style={{
          marginTop: 12, padding: "10px 14px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          background: "var(--bg-elev)", borderRadius: 8, border: "1px solid var(--border)"
        }}>
          <div className="text-sm muted">
            페이지 {meta.page} / {meta.totalPages}
          </div>
          <div className="row gap-2">
            <button className="btn btn-sm" disabled={loading || meta.page <= 1}
                    onClick={() => load({ page: meta.page - 1 })}>이전</button>
            <button className="btn btn-sm" disabled={loading || meta.page >= meta.totalPages}
                    onClick={() => load({ page: meta.page + 1 })}>다음</button>
          </div>
        </div>
      )}

      {/* 답변 작성 모달 */}
      <window.Modal
        open={!!composing}
        onClose={closeCompose}
        title={tab === "qa" ? "문의 답변 작성" : "리뷰 답글 작성"}
        size="lg"
        footer={
          !confirmSend ? (
            <>
              <button className="btn" onClick={closeCompose} disabled={sending}>취소</button>
              <button className="btn btn-primary" onClick={() => setConfirmSend(true)}
                      disabled={!composing?.text?.trim() || sending}>
                <window.I.Check size={14} /> 전송 미리보기
              </button>
            </>
          ) : (
            <>
              <button className="btn" onClick={() => setConfirmSend(false)} disabled={sending}>돌아가기</button>
              <button className="btn btn-primary" onClick={doSend} disabled={sending}>
                {sending ? "전송 중..." : (<><window.I.Send size={14} /> 네이버에 전송</>)}
              </button>
            </>
          )
        }>
        {composing && (
          <>
            <div style={{
              padding: "10px 12px", marginBottom: 12, borderRadius: 6,
              background: "var(--bg-elev)", border: "1px solid var(--border)", fontSize: 13
            }}>
              <div className="text-xs muted" style={{ marginBottom: 4 }}>
                {tab === "qa" ? "원본 문의" : "원본 리뷰"}
              </div>
              <div style={{ whiteSpace: "pre-wrap", maxHeight: 200, overflow: "auto" }}>
                {tab === "qa"
                  ? (composing.item.question || composing.item.content || composing.item.inquiryContent || "(내용 없음)")
                  : (composing.item.reviewContent || composing.item.content || composing.item.body || "(내용 없음)")}
              </div>
              {tab === "qa" && (composing.item.answer || composing.item.answerContent) && (
                <div style={{ marginTop: 8, padding: "8px 10px", background: "var(--accent-soft)", borderRadius: 4, fontSize: 12, whiteSpace: "pre-wrap" }}>
                  <strong style={{ color: "var(--accent)" }}>기존 답변:</strong> {composing.item.answer || composing.item.answerContent}
                </div>
              )}
              {tab === "reviews" && (
                <div className="text-xs muted" style={{ marginTop: 6 }}>
                  평점: {composing.item.reviewScore || composing.item.rating || "?"}
                </div>
              )}
            </div>

            {!confirmSend ? (
              <>
                <Field label={tab === "qa" ? "답변 내용" : "답글 내용"}>
                  <textarea
                    className="input"
                    rows={12}
                    value={composing.text}
                    onChange={e => setComposing({ ...composing, text: e.target.value })}
                    placeholder={tab === "qa"
                      ? "고객 문의에 대한 답변을 입력하세요. 작성 후 '전송 미리보기' → '네이버에 전송' 으로 발송됩니다."
                      : "리뷰에 대한 판매자 답글을 입력하세요."}
                    style={{
                      height: "auto",
                      minHeight: 240,
                      padding: "10px 12px",
                      lineHeight: 1.6,
                      fontSize: 13,
                      resize: "vertical",
                      width: "100%",
                      whiteSpace: "pre-wrap",
                      fontFamily: "inherit",
                    }}
                  />
                </Field>
                <div className="text-xs muted" style={{ marginTop: 8 }}>
                  글자 수: {composing.text.length}자
                </div>
              </>
            ) : (
              <>
                <div style={{
                  padding: "12px 14px", borderRadius: 6, marginBottom: 12,
                  background: "rgba(245, 158, 11, 0.08)", border: "1px solid rgba(245, 158, 11, 0.35)",
                  fontSize: 13
                }}>
                  <div style={{ fontWeight: 600, marginBottom: 4 }}>전송 확인</div>
                  <div className="text-sm muted">
                    아래 내용을 즉시 네이버에 전송합니다. 전송 후 수정/삭제는 네이버 판매자 센터에서 가능합니다.
                  </div>
                </div>
                <Field label={tab === "qa" ? "전송할 답변" : "전송할 답글"}>
                  <div style={{
                    padding: "10px 12px", borderRadius: 6,
                    background: "var(--bg-elev)", border: "1px solid var(--border)",
                    whiteSpace: "pre-wrap", fontSize: 13, minHeight: 80
                  }}>{composing.text}</div>
                </Field>
              </>
            )}
          </>
        )}
      </window.Modal>
    </div>
  );
}

// 리뷰는 네이버 커머스 API가 공식 미지원 (2024-08-30 네이버 답변).
// 판매자 센터에서 직접 관리하도록 안내.
function ReviewsNotSupported() {
  return (
    <div style={{
      padding: "32px 28px",
      border: "1px solid var(--border)",
      borderRadius: 10,
      background: "var(--bg-elev)",
      display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start",
    }}>
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
        <window.I.AlertCircle size={20} stroke="var(--warning)" style={{ flexShrink: 0, marginTop: 2 }} />
        <div>
          <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>
            리뷰 조회 API가 네이버에서 공식 미지원
          </div>
          <div className="text-sm muted" style={{ lineHeight: 1.6 }}>
            네이버 커머스 API팀의 공식 답변(2024-08-30):
            <em style={{ display: "block", marginTop: 4, color: "var(--text)" }}>
              "안타깝게도 리뷰와 관련된 API 제공에 대해서 가까운 시일 내 제공 계획이 없습니다."
            </em>
            <span style={{ display: "block", marginTop: 10 }}>
              리뷰 조회와 답글 작성은 <strong>네이버 판매자 센터</strong>에서 직접 진행하셔야 합니다.
              네이버에서 API를 추가하면 이 화면도 자동 활성화됩니다.
            </span>
          </div>
        </div>
      </div>
      <div className="row gap-2" style={{ marginLeft: 32 }}>
        <a className="btn btn-primary"
           href="https://sell.smartstore.naver.com/#/review/search"
           target="_blank"
           rel="noopener noreferrer">
          <window.I.ExternalLink size={14} /> 네이버 판매자 센터 · 리뷰 관리 열기
        </a>
        <a className="btn"
           href="https://github.com/commerce-api-naver/commerce-api/discussions/1909"
           target="_blank"
           rel="noopener noreferrer">
          관련 GitHub 토론 보기
        </a>
      </div>
    </div>
  );
}

// 문의 목록 (Q&A) — 네이버 실제 응답 필드: question, answer, createDate
// 카드형 레이아웃 — 한 row당 문의/답변 정보 많아서 표보다 가독성 좋음
function QAList({ items, onReply }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((q, i) => {
        const id = q.inquiryNo || q.id || q.qnaId || q.qaId || ("row-" + i);
        const question = q.question || q.content || q.inquiryContent || q.title || q.inquiryTitle || "";
        const answer = q.answer || q.answerContent || "";
        const isAnswered = !!(answer && String(answer).trim());
        const author = q.writerName || q.writer || q.writerId || q.memberId || "익명";
        const date = q.createDate || q.inquiryRegistrationDateTime || q.registrationDate || q.regDate || q.createdAt || "";
        const product = q.productName || q.productOrderProductName || q.product?.name || "";
        const orderNo = q.productOrderId || q.orderId || "";
        const dateStr = (date || "").replace("T", " ").slice(0, 16);
        return (
          <div key={id} style={{
            border: "1px solid var(--border)",
            borderRadius: 8,
            overflow: "hidden",
            background: "var(--bg)",
          }}>
            {/* 헤더: 작성자 · 일시 · 상태 · 버튼 */}
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "10px 14px",
              background: "var(--bg-elev)",
              borderBottom: "1px solid var(--border)",
              fontSize: 12,
            }}>
              <window.I.MessageCircle size={14} stroke="var(--accent)" />
              <strong style={{ fontSize: 13 }}>{author}</strong>
              <span className="muted">{dateStr}</span>
              {(product || orderNo) && (
                <span className="muted" style={{ marginLeft: 4 }}>
                  {product && <>· 📦 {product.length > 40 ? product.slice(0, 40) + "..." : product}</>}
                  {orderNo && <span style={{ marginLeft: 6 }}>· 주문 {orderNo}</span>}
                </span>
              )}
              <div style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
                {isAnswered
                  ? <span className="badge badge-success">답변 완료</span>
                  : <span className="badge badge-danger">미답변</span>}
                <button className={isAnswered ? "btn btn-sm" : "btn btn-primary btn-sm"} onClick={() => onReply(q)}>
                  <window.I.Send size={12} /> {isAnswered ? "답변 수정" : "답변 작성"}
                </button>
              </div>
            </div>

            {/* 문의 본문 */}
            <div style={{
              padding: "14px 16px",
              fontSize: 14, lineHeight: 1.6,
              whiteSpace: "pre-wrap", wordBreak: "break-word",
            }}>
              {question
                ? question
                : <span className="muted" style={{ fontStyle: "italic" }}>(문의 내용 없음 — 응답 구조 확인 필요. F12 콘솔 로그 참고)</span>}
            </div>

            {/* 답변 (있을 때만) */}
            {isAnswered && (
              <div style={{
                padding: "12px 16px",
                background: "var(--accent-soft)",
                borderTop: "1px solid var(--accent)",
                fontSize: 13, lineHeight: 1.6,
                whiteSpace: "pre-wrap", wordBreak: "break-word",
                display: "flex", gap: 10, alignItems: "flex-start",
              }}>
                <window.I.Check size={14} stroke="var(--accent)" style={{ flexShrink: 0, marginTop: 3 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, color: "var(--accent)", fontWeight: 600, marginBottom: 4 }}>판매자 답변</div>
                  {answer}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// 리뷰 목록 — 카드형. 실제 응답 필드는 첫 로드 시 콘솔 로그로 확인.
function ReviewList({ items, onReply }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((r, i) => {
        const id = r.reviewId || r.id || r.reviewNo || ("row-" + i);
        const comment = r.sellerComment || r.comment || r.commentContent || "";
        const hasComment = !!(comment && String(comment).trim());
        const content = r.reviewContent || r.content || r.body || r.review || "";
        const author = r.writerName || r.writer || r.writerId || r.memberId || "익명";
        const date = r.reviewRegistrationDateTime || r.createDate || r.registrationDate || r.regDate || r.createdAt || "";
        const product = r.productName || r.productOrderProductName || r.product?.name || "";
        const rating = parseInt(r.reviewScore || r.rating || r.score || 0, 10) || 0;
        const dateStr = (date || "").replace("T", " ").slice(0, 16);
        const stars = "★".repeat(Math.max(0, Math.min(5, rating))) + "☆".repeat(Math.max(0, 5 - rating));
        return (
          <div key={id} style={{
            border: "1px solid var(--border)",
            borderRadius: 8,
            overflow: "hidden",
            background: "var(--bg)",
          }}>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "10px 14px",
              background: "var(--bg-elev)",
              borderBottom: "1px solid var(--border)",
              fontSize: 12,
            }}>
              <span style={{ color: "var(--warning)", fontWeight: 600, fontSize: 14 }} title={`${rating}점`}>{stars}</span>
              <strong style={{ fontSize: 13 }}>{author}</strong>
              <span className="muted">{dateStr}</span>
              {product && (
                <span className="muted">· 📦 {product.length > 40 ? product.slice(0, 40) + "..." : product}</span>
              )}
              <div style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
                {hasComment
                  ? <span className="badge badge-success">답글 완료</span>
                  : <span className="badge">답글 없음</span>}
                <button className={hasComment ? "btn btn-sm" : "btn btn-primary btn-sm"} onClick={() => onReply(r)}>
                  <window.I.Send size={12} /> {hasComment ? "답글 수정" : "답글 작성"}
                </button>
              </div>
            </div>

            <div style={{
              padding: "14px 16px",
              fontSize: 14, lineHeight: 1.6,
              whiteSpace: "pre-wrap", wordBreak: "break-word",
            }}>
              {content
                ? content
                : <span className="muted" style={{ fontStyle: "italic" }}>(리뷰 내용 없음 — 응답 구조 확인 필요)</span>}
            </div>

            {hasComment && (
              <div style={{
                padding: "12px 16px",
                background: "var(--accent-soft)",
                borderTop: "1px solid var(--accent)",
                fontSize: 13, lineHeight: 1.6,
                whiteSpace: "pre-wrap", wordBreak: "break-word",
                display: "flex", gap: 10, alignItems: "flex-start",
              }}>
                <window.I.Check size={14} stroke="var(--accent)" style={{ flexShrink: 0, marginTop: 3 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, color: "var(--accent)", fontWeight: 600, marginBottom: 4 }}>판매자 답글</div>
                  {comment}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

window.CustomerScreen = CustomerScreen;