// My Info / 내 정보 page — 계정 정보 확인 + 회원 탈퇴.
// 탈퇴는 Cloud Function deleteUserAccount(onCall) 가 Admin SDK 로 처리한다.
// 커스텀 토큰 로그인이라 클라이언트 user.delete() 는 쓰지 않는다 (재인증 불가).

const MI_REASONS = [
  { key: "rare",      label: "잘 사용하지 않아요" },
  { key: "expensive", label: "요금이 비싸요" },
  { key: "service",   label: "서비스가 불편해요" },
  { key: "app",       label: "오류가 많아요" },
  { key: "other",     label: "다른 서비스를 사용해요" },
  { key: "etc",       label: "기타" },
];

const MI_PROVIDER_LABEL = {
  "google.com": "구글",
  "apple.com": "애플",
  "password": "이메일",
  "custom": "소셜 계정",
};

function miFmtDate(value) {
  if (!value) return "";
  const d = new Date(value);
  if (isNaN(d.getTime())) return "";
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
}

const MyInfo = ({ navigate }) => {
  const [user, setUser] = React.useState(null);
  const [authReady, setAuthReady] = React.useState(false);
  const [withdrawOpen, setWithdrawOpen] = React.useState(false);
  const [reason, setReason] = React.useState(null);
  const [comment, setComment] = React.useState("");
  const [agreed, setAgreed] = React.useState(false);
  const [processing, setProcessing] = React.useState(false);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    let unsub = null, cancelled = false;
    const start = () => {
      if (cancelled) return;
      if (!window.firebaseAuth || !window.firebaseOnAuthStateChanged) {
        setTimeout(start, 50); return;
      }
      unsub = window.firebaseOnAuthStateChanged(window.firebaseAuth, (u) => {
        setUser(u);
        setAuthReady(true);
      });
    };
    start();
    return () => { cancelled = true; if (unsub) unsub(); };
  }, []);

  React.useEffect(() => {
    if (authReady && !user) {
      try { sessionStorage.setItem('postLoginRedirect', window.location.pathname); } catch (_) {}
      navigate('login');
    }
  }, [authReady, user]);

  const handleWithdraw = async () => {
    if (!reason || !agreed || processing) return;
    const ok = window.confirm(
      "정말 탈퇴하시겠어요?\n\n계정과 예약·조회 내역이 모두 삭제되며 복구할 수 없습니다."
    );
    if (!ok) return;

    setProcessing(true);
    setError("");

    // 탈퇴 사유는 익명 통계용 — 실패해도 탈퇴 자체는 계속 진행한다
    try {
      const fs = window.firebaseFs;
      if (fs && fs.addDoc) {
        await fs.addDoc(fs.collection(window.firebaseDb, "withdraw_reasons"), {
          reason,
          comment: comment.trim(),
          createdAt: fs.serverTimestamp(),
        });
      }
    } catch (e) {
      console.error("[my-info] withdraw_reasons write failed", e);
    }

    try {
      const callable = window.firebaseHttpsCallable(
        window.firebaseFunctions, "deleteUserAccount"
      );
      const { data } = await callable({});
      if (data?.success) {
        alert("탈퇴가 완료되었습니다. 그동안 이용해주셔서 감사합니다.");
        try { await window.firebaseSignOut(window.firebaseAuth); } catch (_) {}
        window.location.href = "/";
        return;
      }
      setError("탈퇴 처리에 실패했어요. 잠시 후 다시 시도해주세요.");
    } catch (e) {
      console.error("[my-info] deleteUserAccount error", e);
      setError(e?.message || "탈퇴 처리 중 오류가 발생했어요.");
    } finally {
      setProcessing(false);
    }
  };

  if (!authReady || !user) {
    return (
      <main style={{ minHeight: "60vh", display: "grid", placeItems: "center" }}>
        <div style={{ color: "var(--muted)", fontSize: 14 }}>로그인 확인 중…</div>
      </main>
    );
  }

  const providerId = (user.providerData && user.providerData[0]?.providerId) || "custom";

  return (
    <main>
      <div className="my-shell">
        <aside className="my-sidebar">
          <div className="my-profile" style={{ marginBottom: 24 }}>
            <div className="avatar">{(user.displayName || user.email || "사")[0]}</div>
            <div>
              <div className="name">{user.displayName || user.email || "사용자"} 님</div>
              <div className="meta">일반회원</div>
            </div>
          </div>

          <ul className="my-nav">
            <li className="active">
              <span className="ic"><Icon name="user" size={16}/></span>
              내 정보
            </li>
            <li onClick={() => navigate('my')}>
              <span className="ic"><Icon name="package" size={16}/></span>
              예약 내역
            </li>
            <li onClick={() => navigate('tracking-history')}>
              <span className="ic"><Icon name="search" size={16}/></span>
              조회 내역
            </li>
            <li onClick={() => navigate('addresses')}>
              <span className="ic"><Icon name="pin" size={16}/></span>
              주소록
            </li>
          </ul>
        </aside>

        <section className="my-main">
          <div className="my-head">
            <div>
              <h1>내 정보</h1>
              <p className="summary">계정 정보를 확인하고 관리할 수 있어요.</p>
            </div>
          </div>

          {/* .res-body(3열 그리드) 를 쓰면 info-row 가 가로로 밀리므로 카드에 바로 넣는다 */}
          <div className="res-card is-static" style={{ marginBottom: 20 }}>
            <div className="info-row">
              <span className="k">이메일</span>
              <span className="v">{user.email || "—"}</span>
            </div>
            <div className="info-row">
              <span className="k">로그인 방식</span>
              <span className="v">{MI_PROVIDER_LABEL[providerId] || providerId}</span>
            </div>
            <div className="info-row">
              <span className="k">가입일</span>
              <span className="v">{miFmtDate(user.metadata?.creationTime) || "—"}</span>
            </div>
          </div>

          <div className="danger-zone">
            <div className="danger-head">
              <h3>회원 탈퇴</h3>
              <p>
                탈퇴하면 계정 정보와 예약·조회 내역이 <strong>모두 영구 삭제</strong>되며
                복구할 수 없습니다. 진행 중인 배송이 있다면 완료 후 탈퇴해주세요.
              </p>
            </div>

            {!withdrawOpen ? (
              <button className="btn btn-outline btn-sm danger-btn"
                      onClick={() => setWithdrawOpen(true)}>
                회원 탈퇴하기
              </button>
            ) : (
              <div className="withdraw-form">
                <div className="lbl">탈퇴 사유를 알려주세요</div>
                <div className="reason-list">
                  {MI_REASONS.map(r => (
                    <label key={r.key} className={`reason ${reason === r.key ? "on" : ""}`}>
                      <input type="radio" name="withdrawReason" value={r.key}
                             checked={reason === r.key}
                             onChange={() => setReason(r.key)} />
                      {r.label}
                    </label>
                  ))}
                </div>

                <textarea className="withdraw-comment" rows="3"
                          placeholder="개선할 점을 남겨주시면 큰 도움이 됩니다. (선택)"
                          value={comment}
                          onChange={e => setComment(e.target.value)} />

                <label className="withdraw-agree">
                  <input type="checkbox" checked={agreed}
                         onChange={e => setAgreed(e.target.checked)} />
                  위 내용을 확인했으며, 모든 데이터가 삭제되는 것에 동의합니다.
                </label>

                {error && <div className="withdraw-error">{error}</div>}

                <div className="withdraw-actions">
                  <button className="btn btn-outline btn-sm"
                          disabled={processing}
                          onClick={() => { setWithdrawOpen(false); setError(""); }}>
                    취소
                  </button>
                  <button className="btn btn-sm danger-btn-solid"
                          disabled={!reason || !agreed || processing}
                          onClick={handleWithdraw}>
                    {processing ? "처리 중…" : "탈퇴하기"}
                  </button>
                </div>
              </div>
            )}
          </div>
        </section>
      </div>
    </main>
  );
};

window.MyInfo = MyInfo;