// Tracking History / 조회 내역 page — orders 컬렉션 실데이터.
// orders.status 는 서버가 한글 라벨을 그대로 저장한다 ("배송완료", "상품준비" 등)
// 이라 예약 내역처럼 코드→라벨 매핑이 필요 없고, isCompleted 로만 그룹을 나눈다.

// 필터는 tracking.jsx 의 STATUS_STEPS 4단계와 동일하게 맞춘다.
const TH_FILTERS = [
  { key: "all", label: "전체" },
  { key: "0", label: "상품준비" },
  { key: "1", label: "배송출발" },
  { key: "2", label: "배송중" },
  { key: "3", label: "배송완료" },
];

function thFmtDate(ts) {
  if (!ts) return "";
  const d = ts.toDate ? ts.toDate() : ts;
  if (!(d instanceof Date) || isNaN(d.getTime())) return "";
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
}

// 단계 판정은 orders.lastStatusStep(0~3) 기준.
// 값이 없는 과거 문서만 isCompleted 로 보정한다.
const thStep = (o) => {
  const n = Number(o.lastStatusStep);
  if (o.lastStatusStep == null || !Number.isFinite(n)) return o.isCompleted ? 3 : 0;
  return Math.min(Math.max(Math.trunc(n), 0), 3);
};

const TrackingHistory = ({ navigate, onTrack }) => {
  const [user, setUser] = React.useState(null);
  const [authReady, setAuthReady] = React.useState(false);
  const [orders, setOrders] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState("");
  const [filter, setFilter] = React.useState("all");

  // Auth listen
  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(); };
  }, []);

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

  // Firestore subscribe — userId == uid, orderBy createdAt desc
  // 복합 인덱스 orders(userId ASC, createdAt DESC) 는 firestore.indexes.json 에 이미 있음
  React.useEffect(() => {
    if (!user || !window.firebaseDb || !window.firebaseFs) return;
    setLoading(true);
    setError("");
    const fs = window.firebaseFs;
    const q = fs.query(
      fs.collection(window.firebaseDb, "orders"),
      fs.where("userId", "==", user.uid),
      fs.orderBy("createdAt", "desc")
    );
    const unsub = fs.onSnapshot(q,
      (snap) => {
        setOrders(snap.docs.map(d => ({ id: d.id, ...d.data() })));
        setLoading(false);
      },
      (err) => {
        console.error("[tracking-history] orders onSnapshot error", err);
        setError(err?.message || "조회 내역을 불러오지 못했어요.");
        setLoading(false);
      }
    );
    return () => unsub();
  }, [user]);

  const filtered = orders.filter(o => filter === "all" || String(thStep(o)) === filter);

  const counts = { all: orders.length, "0": 0, "1": 0, "2": 0, "3": 0 };
  orders.forEach(o => { counts[String(thStep(o))] += 1; });

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

  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 onClick={() => navigate('my-info')}>
              <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 className="active">
              <span className="ic"><Icon name="search" size={16}/></span>
              조회 내역
              <span className="badge">{orders.length}</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">
                {loading ? "조회 내역을 불러오는 중…" : `총 ${orders.length}건`}
              </p>
            </div>
            <div className="actions">
              <button className="btn btn-primary btn-sm" onClick={() => navigate('track')}>
                <Icon name="search" size={13}/> 택배 조회
              </button>
            </div>
          </div>

          <div className="status-pills">
            {TH_FILTERS.map(s => (
              <div key={s.key}
                className={`status-pill ${filter === s.key ? "active" : ""}`}
                onClick={() => setFilter(s.key)}>
                {s.label}
                <span className="count">{counts[s.key] || 0}</span>
              </div>
            ))}
          </div>

          {error && (
            <div style={{
              marginBottom: 16, padding: "12px 14px", borderRadius: 8,
              background: "rgba(220, 38, 38, 0.08)", color: "var(--danger)", fontSize: 13
            }}>
              {error}
            </div>
          )}

          {loading ? (
            <div style={{ padding: "60px 0", textAlign: "center", color: "var(--muted)", fontSize: 13 }}>
              불러오는 중…
            </div>
          ) : filtered.length === 0 ? (
            <div className="empty-state">
              <div className="ic"><Icon name="search" size={28} stroke={1.4}/></div>
              <h3>조회 내역이 없어요</h3>
              <p>송장번호로 택배를 조회하면 여기에 쌓여요.</p>
              <button className="btn btn-primary" onClick={() => navigate('track')}>
                <Icon name="search" size={14}/> 택배 조회하기
              </button>
            </div>
          ) : (
            <div className="res-list">
              {filtered.map(o => (
                <TrackingHistoryCard key={o.id} o={o} onTrack={onTrack} />
              ))}
            </div>
          )}
        </section>
      </div>
    </main>
  );
};

const TrackingHistoryCard = ({ o, onTrack }) => {
  const group = thStep(o) >= 3 ? "delivered" : "transit";
  // title/merchant 는 비어 있는 경우가 많아 택배사·송장번호를 기본 제목으로 쓴다
  const heading = (o.title || "").trim() || o.courierName || "택배";

  return (
    <div className="res-card">
      <div className="res-row-top">
        <div className="left">
          <span className="method">
            <Icon name="truck" size={11}/>
            {o.courierName || "택배"}
          </span>
          <span className="id">{o.trackingNumber || "—"}</span>
        </div>
        <span className={`status-badge ${group}`}>
          {group !== "delivered" && <span className="dot"></span>}
          {o.status || o.lastStatus || "조회 중"}
        </span>
      </div>

      {/* 우측 요약(택배사·송장)을 뺐으므로 본문은 한 칸을 모두 쓴다 */}
      <div className="res-body" style={{ gridTemplateColumns: "1fr" }}>
        <div className="res-address">
          <div className="ic"><Icon name="package" size={14}/></div>
          <div className="text">
            <div className="who">{heading}</div>
            <div className="addr">{(o.merchant || "").trim() || "판매처 정보 없음"}</div>
          </div>
        </div>
      </div>

      <div className="res-foot">
        <div className="res-progress-inline">
          <Icon name="clock" size={14}/>
          <span className="step">
            {o.updatedAt ? `${thFmtDate(o.updatedAt)} 업데이트` : "업데이트 정보 없음"}
          </span>
        </div>

        <div className="res-actions">
          {o.trackingNumber && (
            <button className="btn btn-primary btn-sm"
              onClick={() => onTrack && onTrack(o.trackingNumber, o.courierCode)}>
              <Icon name="search" size={13}/> 조회
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

window.TrackingHistory = TrackingHistory;