/* ============================================================================
 * 서명전에 — iOS Help / FAQ / 사용 설명서 Tab
 * ========================================================================== */

function HelpScreen() {
  const [scrolled, setScrolled] = useState(false);
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(null); // faq id

  const howto = [
    {
      n: 1,
      icon: "camera",
      title: "계약서를 찍거나 올려요",
      body: "종이 계약서는 [사진 찍기], 저장된 파일은 [파일 · 사진 올리기] 버튼을 눌러 주세요. PDF와 이미지(HEIC, JPG, PNG) 모두 올릴 수 있어요.",
    },
    {
      n: 2,
      icon: "bolt",
      title: "AI가 계약서 전체를 살펴봐요",
      body: "전세·월세 같은 계약 종류를 자동으로 알아보고, 불리한 조항·법에 어긋날 수 있는 부분·숫자가 안 맞는 곳을 찾아 드려요. 페이지 수에 따라 1~2분 정도 걸려요.",
    },
    {
      n: 3,
      icon: "warn-tri",
      title: "위험 조항을 확인하고 대응해요",
      body: "조항별 카드에서 원문 위치와 고치면 좋은 문구를 확인할 수 있어요. 필요하면 공유 버튼으로 공인중개사나 변호사에게 바로 보내 볼 수 있어요.",
    },
  ];

  const faq = [
    {
      id: "q1",
      cat: "요금",
      q: "분석 1건에 얼마예요?",
      a: "오픈 기념으로 50% 할인해서 1회권 ₩990(원래 가격 ₩1,980), 3회 팩 ₩2,490(1건당 ₩830), 6회 팩 ₩4,990(1건당 ₩832)에 드려요. 가입하고 나서 첫 분석 1회는 무료로 써 보실 수 있어요.",
    },
    {
      id: "q2",
      cat: "요금",
      q: "크레딧은 언제까지 쓸 수 있어요?",
      a: "한 번 충전한 크레딧은 만료 기한 없이 계속 쓰실 수 있어요. 계정을 지우지 않는 한 그대로 남아 있어요.",
    },
    {
      id: "q3",
      cat: "분석 범위",
      q: "어떤 계약서를 분석할 수 있어요?",
      a: "지금은 주택 전세·월세 임대차 계약서를 중심으로 지원해요. 근로계약서는 곧 업데이트로 지원할 예정이에요. 프리랜서 계약이나 매매 계약은 실험 버전으로 일부만 분석해 드려요.",
    },
    {
      id: "q4",
      cat: "분석 범위",
      q: "어떤 위험을 찾아 줘요?",
      a: "전세사기 체크리스트 16개 항목(근저당·선순위·계약금 비율·특약 등), 문서 안에서 숫자가 안 맞는 곳, 법에 어긋날 수 있는 특약을 한 번에 살펴드려요.",
    },
    {
      id: "q5",
      cat: "개인정보",
      q: "계약서 원본이 서버에 저장돼요?",
      a: "아니요. 올려 주신 계약서 원본은 분석이 끝나면 바로 서버에서 지워져요. 분석 결과 요약(위험 등급·조항 인용)만 본인 계정에 암호를 걸어 저장해요.",
    },
    {
      id: "q6",
      cat: "개인정보",
      q: "분석 기록을 지울 수 있어요?",
      a: "기록 탭에서 왼쪽으로 밀거나 편집 모드에서 하나씩 또는 한꺼번에 지울 수 있어요. 계정을 지우면 모든 분석 기록이 30일 안에 완전히 사라져요.",
    },
    {
      id: "q7",
      cat: "정확도",
      q: "분석 결과를 법률 자문 대신 써도 돼요?",
      a: "법률 자문을 대신할 수는 없어요. 서명전에는 계약서에서 주의할 신호를 빠르게 걸러내는 보조 도구예요. 중요한 계약은 공인중개사나 변호사 같은 전문가 검토를 꼭 받아 보시길 권해요.",
    },
    {
      id: "q8",
      cat: "정확도",
      q: "OCR 인식률이 낮게 나오면요?",
      a: "분석 결과 위쪽에 OCR 품질 배지가 노란색이나 빨간색이면, 밝은 곳에서 계약서 전체가 프레임에 들어가도록 다시 찍어 주세요. 3번까지는 다시 찍어도 크레딧이 빠지지 않아요.",
    },
    {
      id: "q9",
      cat: "결제",
      q: "어떤 결제 수단을 쓸 수 있어요?",
      a: "토스페이먼츠로 카드, 간편결제(토스페이·카카오페이·네이버페이), 계좌이체까지 쓸 수 있어요. 영수증은 등록한 이메일로 자동으로 보내드려요.",
    },
    {
      id: "q10",
      cat: "결제",
      q: "환불받을 수 있어요?",
      a: "쓰지 않은 크레딧은 구매하고 7일 안에 전액 돌려받을 수 있어요. [계정 · 결제 내역]에서 신청하거나 고객센터로 연락해 주세요. 영업일 기준 3일 안에 처리해 드려요.",
    },
  ];

  const filtered = query
    ? faq.filter((f) =>
        (f.q + f.a + f.cat).toLowerCase().includes(query.toLowerCase())
      )
    : faq;

  const grouped = filtered.reduce((acc, f) => {
    (acc[f.cat] = acc[f.cat] || []).push(f);
    return acc;
  }, {});

  return (
    <div className="app">
      <div className={"navbar" + (scrolled ? " navbar--scrolled" : "")}>
        <div style={{ minWidth: 60 }} />
        <div className="navbar__title" style={{ opacity: scrolled ? 1 : 0, transition: "opacity 200ms" }}>
          도움말
        </div>
        <div style={{ minWidth: 60 }} />
      </div>

      <div className="scroll scroll--plain" onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 20)}>
        <div className="largetitle">
          <h1 className="largetitle__text">도움말</h1>
          <div className="largetitle__sub">
            처음이시면 3단계로 익혀 보고, 자주 묻는 질문에서 답을 찾아보세요.
          </div>
        </div>

        <div className="searchfield" style={{ margin: "6px 16px 16px" }}>
          <IOSIcon name="search" size={15} />
          <input
            placeholder="궁금한 내용 찾기"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </div>

        {!query && (
          <>
            {/* 사용 방법 3단계 */}
            <div className="help-howto">
              <div className="help-howto__title">사용 방법</div>
              <div className="help-howto__list">
                {howto.map((h) => (
                  <div key={h.n} className="help-howto__item">
                    <div className="help-howto__step">
                      <span className="help-howto__n">{h.n}</span>
                    </div>
                    <div className="help-howto__body">
                      <div className="help-howto__h">{h.title}</div>
                      <div className="help-howto__p">{h.body}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 빠른 링크 */}
            <div className="section-h">
              <h3 className="section-h__title">바로가기</h3>
            </div>
            <div className="help-quickrow">
              <button className="help-quick" onClick={() => window.openLegalSheet && window.openLegalSheet("terms")}>
                <span className="help-quick__ic" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
                  <IOSIcon name="doc" size={18} />
                </span>
                <span className="help-quick__label">이용 약관</span>
                <span className="help-quick__chev"><IOSIcon name="chev-right" size={15} /></span>
              </button>
              <button className="help-quick" onClick={() => window.openLegalSheet && window.openLegalSheet("privacy")}>
                <span className="help-quick__ic" style={{ background: "color-mix(in srgb, var(--safe) 15%, transparent)", color: "var(--safe)" }}>
                  <IOSIcon name="shield-check" size={18} />
                </span>
                <span className="help-quick__label">개인정보 처리방침</span>
                <span className="help-quick__chev"><IOSIcon name="chev-right" size={15} /></span>
              </button>
              <button className="help-quick" onClick={() => window.openLegalSheet && window.openLegalSheet("updates")}>
                <span className="help-quick__ic" style={{ background: "color-mix(in srgb, var(--ios-orange) 18%, transparent)", color: "var(--ios-orange, #fe9800)" }}>
                  <IOSIcon name="bell" size={18} />
                </span>
                <span className="help-quick__label">업데이트 소식</span>
                <span className="help-quick__chev"><IOSIcon name="chev-right" size={15} /></span>
              </button>
            </div>
          </>
        )}

        {/* FAQ */}
        <div className="section-h" style={{ marginTop: query ? 0 : 10 }}>
          <h3 className="section-h__title">
            {query ? `검색 결과 ${filtered.length}개` : "자주 묻는 질문"}
          </h3>
        </div>

        {Object.entries(grouped).map(([cat, list]) => (
          <div key={cat} className="faq-group">
            {!query && <div className="faq-group__cat">{cat}</div>}
            <div className="faq-group__list">
              {list.map((f) => {
                const isOpen = open === f.id;
                return (
                  <BoardRow
                    key={f.id}
                    title={f.q}
                    isOpened={isOpen}
                    onOpen={() => setOpen(f.id)}
                    onClose={() => setOpen(null)}
                    prefix={<BoardRow.Prefix>Q</BoardRow.Prefix>}
                    icon={<BoardRow.ArrowIcon />}
                  >
                    <BoardRow.Text>{f.a}</BoardRow.Text>
                  </BoardRow>
                );
              })}
            </div>
          </div>
        ))}

        {filtered.length === 0 && (
          <div style={{
            textAlign: "center",
            padding: "32px 24px",
            color: "var(--label-secondary)",
            opacity: 0.7,
            fontSize: 15,
          }}>
"{query}"에 대한 결과가 없어요.<br/>
            아래 버튼으로 바로 물어봐 주세요.
          </div>
        )}

        {/* 문의 CTA */}
        <div className="help-contact">
          <div className="help-contact__h">찾는 답이 없나요?</div>
          <div className="help-contact__p">평일 오전 10시부터 오후 6시까지, 영업일 기준 하루 안에 답변드려요.</div>
          <div className="help-contact__row">
            <button className="help-contact__btn">
              <IOSIcon name="mail" size={16} />
              <span>이메일로 묻기</span>
            </button>
            <button className="help-contact__btn">
              <IOSIcon name="chat" size={16} />
              <span>채팅으로 묻기</span>
            </button>
          </div>
        </div>

        <div style={{ textAlign: "center", fontSize: 12, color: "var(--label-secondary)", opacity: 0.5, padding: "8px 0 24px" }}>
          서명전에 v1.3 · 도움말 2026.04.15에 업데이트했어요
        </div>
      </div>
    </div>
  );
}

window.HelpScreen = HelpScreen;

Object.assign(window, { HelpScreen });