/* ============================================================================
 * 서명전에 — iOS History & Account tabs
 * ========================================================================== */

function HistoryScreen({ onOpen, onDelete, items: itemsProp, historyLoading = false, hasSession = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [editing, setEditing] = useState(false);
  const [selected, setSelected] = useState(() => new Set());
  const [busy, setBusy] = useState(false);
  const dialog = (typeof window !== "undefined" && typeof window.useDialog === "function")
    ? window.useDialog()
    : null;
  const toast = (typeof window !== "undefined" && typeof window.useToast === "function")
    ? window.useToast()
    : null;

  const MOCK_ITEMS = [
    { id: "r1", type: "jeonse", title: "전세계약서_202604.pdf", sev: "alert", high: 3, when: "오늘 오후 2:32" },
    { id: "r3", type: "wolsae", title: "월세계약서_202603.pdf", sev: "warn",  high: 2, when: "3월 30일" },
    { id: "r4", type: "jeonse", title: "원룸전세_구로동.pdf",    sev: "safe",  high: 0, when: "3월 12일" },
    { id: "r6", type: "wolsae", title: "투룸월세_역삼동.pdf",    sev: "warn",  high: 1, when: "2월 28일" },
  ];

  const hasReal = Array.isArray(itemsProp) && itemsProp.length > 0;
  const items = hasReal ? itemsProp : MOCK_ITEMS;
  const showEmpty = hasSession && !historyLoading && Array.isArray(itemsProp) && itemsProp.length === 0;

  // 목업이 아닌 실제 데이터에서만 편집 모드 활성화 (목업 삭제는 무의미)
  const canEdit = hasReal && typeof onDelete === "function";

  // 항목이 모두 사라지면 자동으로 편집 모드 종료
  useEffect(() => {
    if (editing && (!hasReal || items.length === 0)) {
      setEditing(false);
      setSelected(new Set());
    }
  }, [editing, hasReal, items.length]);

  const groups = {
    "오늘":  items.filter((i) => i.when.includes("오늘")),
    "어제":  items.filter((i) => i.when === "어제"),
    "이전":  items.filter((i) => !i.when.includes("오늘") && i.when !== "어제"),
  };

  const thumbClass = (sev) => "recent__thumb recent__thumb--" + sev;

  function toggleSelect(id) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function exitEdit() {
    setEditing(false);
    setSelected(new Set());
  }

  async function handleDeleteSelected() {
    if (busy) return;
    if (selected.size === 0) return;
    const targets = items.filter((it) => selected.has(it.id));
    if (targets.length === 0) return;

    // 확인 다이얼로그 — useDialog 가 안 떠 있으면 window.confirm 으로 폴백
    let ok = false;
    if (dialog?.openAsyncConfirm) {
      ok = await dialog.openAsyncConfirm({
        title: `선택한 ${targets.length}개 기록을 지울까요?`,
        description: "한번 지우면 되돌릴 수 없어요. 분석 결과와 PDF 도 같이 지워져요.",
        confirmLabel: "지우기",
        cancelLabel: "그대로 두기",
      });
    } else if (typeof window !== "undefined" && typeof window.confirm === "function") {
      ok = window.confirm(`선택한 ${targets.length}개 기록을 지울까요? 되돌릴 수 없어요.`);
    } else {
      ok = true;
    }
    if (!ok) return;

    setBusy(true);
    try {
      const results = await Promise.all(
        targets.map((t) =>
          Promise.resolve(onDelete(t)).catch((err) => ({ ok: false, error: err })),
        ),
      );
      const failed = results.filter((r) => r && r.ok === false).length;
      const succeeded = results.length - failed;
      if (succeeded > 0 && toast?.openToast) {
        toast.openToast({ description: `${succeeded}개 기록을 지웠어요` });
      }
      if (failed > 0 && toast?.openToast) {
        toast.openToast({ description: `${failed}개는 지우지 못했어요. 잠시 뒤 다시 시도해 주세요.` });
      }
      // 성공이든 실패든 선택은 비우고, 모두 성공하면 편집 모드 종료
      setSelected(new Set());
      if (failed === 0) setEditing(false);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="app">
      <div className={"navbar" + (scrolled ? " navbar--scrolled" : "")}>
        {editing ? (
          <button
            className="navbar__btn"
            style={{ marginLeft: 6 }}
            onClick={exitEdit}
            disabled={busy}
          >
            취소
          </button>
        ) : canEdit ? (
          <button
            className="navbar__btn"
            style={{ marginLeft: 6 }}
            onClick={() => setEditing(true)}
          >
            편집
          </button>
        ) : (
          <span style={{ minWidth: 60, display: "inline-block" }} />
        )}

        <div className="navbar__title" style={{ opacity: scrolled ? 1 : 0, transition: "opacity 200ms" }}>
          {editing ? (selected.size > 0 ? `${selected.size}개 선택됨` : "기록 편집") : "기록"}
        </div>

        {editing ? (
          <button
            className="navbar__btn"
            style={{ marginRight: 6, fontWeight: 600 }}
            onClick={exitEdit}
            disabled={busy}
          >
            완료
          </button>
        ) : (
          <button className="navbar__btn" style={{ marginRight: 6 }}>
            <IOSIcon name="filter" size={21} />
          </button>
        )}
      </div>

      <div className="scroll scroll--plain" onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 20)}>
        <div className="largetitle">
          <h1 className="largetitle__text">{editing ? (selected.size > 0 ? `${selected.size}개 선택됨` : "지울 기록 고르기") : "기록"}</h1>
        </div>

        {!editing && (
          <div className="searchfield">
            <IOSIcon name="search" size={15} />
            <input placeholder="계약서 이름으로 찾기" />
          </div>
        )}

        {showEmpty && (
          <div className="recent-empty">
            <div className="recent-empty__title">아직 분석한 계약서가 없어요</div>
            <div className="recent-empty__sub">
              홈 화면에서 계약서를 올려 보세요.
            </div>
          </div>
        )}

        {!showEmpty && Object.entries(groups).map(([key, list]) => list.length > 0 && (
          <div key={key} className="inset-group">
            <div className="inset-group__header">{key}</div>
            <div className="inset-group__list">
              {list.map((r, i) => {
                const isSelected = editing && selected.has(r.id);
                return (
                  <button
                    key={r.id}
                    className={"inset-row" + (isSelected ? " inset-row--selected" : "")}
                    onClick={() => {
                      if (editing) toggleSelect(r.id);
                      else onOpen(r);
                    }}
                    style={{ padding: "10px 16px" }}
                  >
                    {editing && (
                      <span
                        aria-hidden="true"
                        style={{
                          width: 22,
                          height: 22,
                          borderRadius: 22,
                          marginRight: 4,
                          flexShrink: 0,
                          display: "inline-flex",
                          alignItems: "center",
                          justifyContent: "center",
                          background: isSelected ? "var(--alert)" : "transparent",
                          border: isSelected ? "none" : "1.5px solid var(--separator)",
                          color: "#fff",
                          transition: "background 120ms",
                        }}
                      >
                        {isSelected && <IOSIcon name="check" size={13} weight={2.6} />}
                      </span>
                    )}
                    <span className={thumbClass(r.sev)} style={{ width: 36, height: 36, borderRadius: 9 }}>
                      <IOSIcon
                        name={r.type === "labor" ? "briefcase" : r.type === "wolsae" ? "building" : "home-key"}
                        size={18}
                      />
                    </span>
                    <span style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 1 }}>
                      <span style={{
                        fontSize: 15,
                        fontWeight: 500,
                        color: "var(--label)",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                      }}>
                        {r.title}
                      </span>
                      <span style={{
                        fontSize: 13,
                        color: "var(--label-secondary)",
                        opacity: 0.7,
                        display: "flex", gap: 6, alignItems: "center",
                      }}>
                        <span>{r.kindCount > 0 ? `${r.kindLabel} ${r.kindCount}건` : "위험 없어요"}</span>
                        <span className="recent__dot" />
                        <span>{r.when}</span>
                      </span>
                    </span>
                    {!editing && (
                      <span className="inset-row__chev"><IOSIcon name="chev-right" size={17} /></span>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        ))}

        <Border variant="height16" height={editing && selected.size > 0 ? "120px" : "24px"} />
      </div>

      {/* 편집 모드 하단 삭제 CTA — 선택이 있을 때만 노출 */}
      {editing && selected.size > 0 && (
        <div
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            padding: "12px 16px calc(12px + env(safe-area-inset-bottom, 0px))",
            background: "var(--bg)",
            borderTop: "0.5px solid var(--separator)",
            zIndex: 5,
          }}
        >
          <button
            className="tap"
            disabled={busy}
            onClick={handleDeleteSelected}
            style={{
              width: "100%",
              height: 52,
              borderRadius: 14,
              background: "var(--alert)",
              color: "#fff",
              fontSize: 16,
              fontWeight: 600,
              border: "none",
              opacity: busy ? 0.6 : 1,
              cursor: busy ? "default" : "pointer",
            }}
          >
            {busy ? "지우는 중…" : `선택한 ${selected.size}개 지우기`}
          </button>
        </div>
      )}
    </div>
  );
}

function AccountScreen({ credits, unlimited = false, onOpenBilling, onOpenHelp, onToggleTheme, theme, userEmail, onLogout, authMode = "toss-anonymous" }) {
  // toss-anonymous 모드에서는 email 이 없어요. 사용자 이름/아바타/로그아웃 버튼의
  // 디폴트 카피를 "토스 자동 로그인" 정합성에 맞게 바꿔주는 게 핵심.
  // 계정 화면 행(row) 정책 메모 (G-3 후속 정리, 2026-04 김인아 피드백 반영)
  // - 결제 수단 / 결제 내역: 토스 미니앱은 카드/결제수단 등록을 토스 플랫폼이 직접
  //   관리하기 때문에 앱 안에서 등록 화면으로 보낼 수 없다. 잘못된 기대를 만들지
  //   않도록 두 행 모두 제거하고, "크레딧 충전하기" 버튼 하나로 결제 흐름을 모았다.
  // - 알림: 푸시/인앱 알림 시스템이 아직 없어서 "켜져 있어요" 라는 표시가 거짓말.
  //   기능이 들어오기 전까진 행 자체를 노출하지 않는다.
  // - 개인정보와 보안: 별도 화면이 없고, 같은 내용이 도움말·이용 약관에서 다뤄진다.
  //   중복이라 제거.
  // - 도움말과 문의: 하단 탭의 "도움말" 화면으로 이동시킨다 (onOpenHelp).
  // - 이용 약관과 개인정보 처리방침: window.openLegalSheet("terms") 그대로 유지.
  const [scrolled, setScrolled] = useState(false);
  const isTossMode = authMode === "toss-anonymous";
  const localPart = userEmail ? userEmail.split("@")[0] : "";
  // 토스 모드: 이메일이 없는 게 정상. 사용자 입장에선 "이미 로그인됨" 상태이므로
  // "로그인 안 했어요" 같은 카피는 절대 노출하면 안 돼요.
  const displayName = userEmail
    ? localPart
    : (isTossMode ? "토스로 자동 로그인됐어요" : "로그인하고 시작해 보세요");
  const displayEmail = userEmail
    ? userEmail
    : (isTossMode ? "별도 가입 없이 바로 사용 중이에요" : "아직 로그인 안 했어요");
  const avatarChar = userEmail
    ? (localPart[0] || "?").toUpperCase()
    : (isTossMode ? "T" : "?");
  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--grouped" onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 20)}>
        <div className="largetitle" style={{ background: "var(--bg)" }}>
          <h1 className="largetitle__text">계정</h1>
        </div>

        <div className="acct-header">
          <div className="acct-header__avatar">{avatarChar}</div>
          <div>
            <div className="acct-header__name">{displayName}</div>
            <div className="acct-header__email">{displayEmail}</div>
          </div>
        </div>

        {/* 크레딧 지갑 카드 — 상단에 바로 노출 */}
        <div className="acct-wallet">
          <div className="acct-wallet__head">
            <div className="acct-wallet__body">
              <div className="acct-wallet__label">
                {unlimited ? "분석 크레딧" : "남은 분석 크레딧"}
              </div>
              <div className="acct-wallet__val">
                {unlimited ? (
                  <>
                    <span className="acct-wallet__val-num tnum" style={{ letterSpacing: "-0.04em" }}>∞</span>
                    <span className="acct-wallet__val-unit">무제한</span>
                  </>
                ) : (
                  <>
                    <span className="acct-wallet__val-num tnum">{credits}</span>
                    <span className="acct-wallet__val-unit">회</span>
                  </>
                )}
              </div>
            </div>
            {unlimited ? (
              <span className="acct-wallet__expiry">베타 기간 동안 무제한으로 쓸 수 있어요</span>
            ) : (
              <span className="acct-wallet__expiry">만료 기한 없어요</span>
            )}
          </div>
          {!unlimited && (
            <button className="acct-wallet__cta" onClick={onOpenBilling}>
              크레딧 충전하기
            </button>
          )}
        </div>

        {/* 결제 수단 / 결제 내역 / 알림 / 개인정보와 보안 행은 위 정책 메모 참고 — 모두 제거.
            크레딧 충전은 위쪽 "크레딧 충전하기" 버튼으로 일원화. */}

        <div className="inset-group" style={{ marginTop: 0 }}>
          <div className="inset-group__list">
            <button className="inset-row" onClick={() => { if (typeof onOpenHelp === "function") onOpenHelp(); }}>
              <span className="inset-row__icon" style={{ background: "var(--label-secondary)" }}>
                <IOSIcon name="info" size={16} />
              </span>
              <span className="inset-row__label">도움말과 문의</span>
              <span className="inset-row__value" style={{ opacity: 0.55 }}>FAQ · 1:1 문의</span>
              <span className="inset-row__chev"><IOSIcon name="chev-right" size={17} /></span>
            </button>
            <button className="inset-row" onClick={() => window.openLegalSheet && window.openLegalSheet("terms")}>
              <span className="inset-row__icon" style={{ background: "var(--label-secondary)" }}>
                <IOSIcon name="doc" size={16} />
              </span>
              <span className="inset-row__label">이용 약관과 개인정보 처리방침</span>
              <span className="inset-row__value" style={{ opacity: 0.55 }}>v1.3 · 2026.04</span>
              <span className="inset-row__chev"><IOSIcon name="chev-right" size={17} /></span>
            </button>
            {/* 로그아웃 버튼 정책
                - toss-anonymous : 진짜 "로그아웃"은 불가(SDK가 같은 hash를 다시 줌).
                  대신 "내 데이터 초기화"로 라벨을 바꿔서 의미를 명확히 함.
                  signOut() 가 web-fallback hash 캐시를 비우고 새 hash 로 재부트스트랩 →
                  로컬 캐시/스토어가 깨끗해진 상태로 다시 진입.
                - supabase-jwt : 기존 그대로 — userEmail 유무로 로그인/로그아웃 토글. */}
            {isTossMode ? (
              <button className="inset-row" style={{ color: "var(--alert)" }} onClick={onLogout}>
                <span className="inset-row__label" style={{ color: "var(--alert)", textAlign: "center" }}>
                  내 기록과 크레딧 초기화
                </span>
              </button>
            ) : (
              <button className="inset-row" style={{ color: "var(--alert)" }} onClick={onLogout}>
                <span className="inset-row__label" style={{ color: "var(--alert)", textAlign: "center" }}>
                  {userEmail ? "로그아웃하기" : "로그인하거나 가입하기"}
                </span>
              </button>
            )}
          </div>
          <div className="inset-group__footer">
            올려 주신 계약서 원본은 분석이 끝나면 바로 지워요. 서버에는 남기지 않아요.
          </div>
        </div>

        <div style={{
          textAlign: "center",
          fontSize: 12,
          color: "var(--label-secondary)",
          opacity: 0.5,
          padding: "8px 0 24px",
        }}>
          서명전에 v1.3 · Build 2026.04
        </div>
      </div>
    </div>
  );
}

/* iOS style toggle switch */
function IOSToggle({ on, onChange }) {
  return (
    <span
      role="switch"
      aria-checked={on}
      onClick={(e) => { e.stopPropagation(); onChange?.(); }}
      style={{
        width: 51, height: 31, borderRadius: 31,
        background: on ? "var(--safe)" : "var(--fill-1)",
        position: "relative",
        transition: "background 200ms",
        cursor: "pointer",
        flexShrink: 0,
      }}
    >
      <span style={{
        position: "absolute",
        top: 2, left: on ? 22 : 2,
        width: 27, height: 27,
        borderRadius: 27,
        background: "#fff",
        boxShadow: "0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.06)",
        transition: "left 200ms cubic-bezier(0.32,0.72,0,1)",
      }} />
    </span>
  );
}

window.HistoryScreen = HistoryScreen;
window.AccountScreen = AccountScreen;
window.IOSToggle = IOSToggle;

Object.assign(window, { HistoryScreen, AccountScreen });
