// Tracking page — 실 deliveryapi.co.kr 연동 (로그인 필수)

const COURIERS = [
  { code: "01", name: "우체국택배" },
  { code: "04", name: "CJ대한통운" },
  { code: "05", name: "한진택배" },
  { code: "06", name: "로젠택배" },
  { code: "08", name: "롯데택배" },
  { code: "22", name: "대신택배" },
  { code: "23", name: "경동택배" },
  { code: "32", name: "합동택배" },
  { code: "45", name: "우리택배" },
  { code: "coupang", name: "쿠팡" },
];

const STATUS_STEPS = [
  { step: 0, label: "상품준비" },
  { step: 1, label: "배송출발" },
  { step: 2, label: "배송중" },
  { step: 3, label: "배송완료" },
];

const Tracking = ({ trackingId, navigate }) => {
  const [courierCode, setCourierCode] = React.useState("04");
  const [tid, setTid] = React.useState(trackingId || "");
  const [user, setUser] = React.useState(null);
  const [authReady, setAuthReady] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState("");

  // Auth listen
  React.useEffect(() => {
    let unsub = null;
    let 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(); };
  }, []);

  const handleSearch = async (e) => {
    e?.preventDefault();
    const invoice = tid.replace(/[^0-9a-zA-Z]/g, "");
    if (!invoice) {
      setError("송장번호를 입력해주세요.");
      return;
    }
    if (!user) {
      setError("로그인이 필요합니다.");
      return;
    }
    if (!window.firebaseFunctions || !window.firebaseHttpsCallable) {
      setError("초기화 중입니다. 잠시 후 다시 시도해주세요.");
      return;
    }

    setLoading(true);
    setError("");
    setResult(null);
    try {
      const callable = window.firebaseHttpsCallable(
        window.firebaseFunctions,
        "validateTracking"
      );
      const { data } = await callable({ courierCode, invoice });
      if (!data?.ok) {
        setError(data?.message || "조회에 실패했습니다.");
      } else {
        setResult(data);
      }
    } catch (err) {
      console.error("[tracking] validateTracking error", err);
      setError(err?.message || "조회 중 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  const carrierName =
    COURIERS.find((c) => c.code === courierCode)?.name || courierCode;

  return (
    <main>
      <div className="page-head">
        <div className="container-narrow">
          <h1>택배 조회</h1>
          <p>택배사를 선택하고 송장번호를 입력하면 실시간 배송 현황을 보여드립니다.</p>
        </div>
      </div>

      <div className="container-narrow" style={{ paddingBottom: 80 }}>
        <div className="tracking-card">
          <form className="tracking-search" onSubmit={handleSearch}>
            <select
              className="field"
              value={courierCode}
              onChange={(e) => setCourierCode(e.target.value)}
              style={{ flex: "0 0 180px" }}
            >
              {COURIERS.map((c) => (
                <option key={c.code} value={c.code}>{c.name}</option>
              ))}
            </select>
            <div className="field">
              <input
                type="text"
                placeholder="송장번호를 입력하세요"
                value={tid}
                onChange={(e) => setTid(e.target.value)}
                autoComplete="off"
              />
            </div>
            <button
              className="btn btn-primary"
              type="submit"
              disabled={loading || !authReady || !user}
            >
              <Icon name="search" size={16}/>
              {loading ? " 조회 중..." : " 조회"}
            </button>
          </form>

          {authReady && !user && (
            <div style={{
              marginTop: 14, padding: "12px 14px",
              background: "var(--primary-50)", borderRadius: 10,
              fontSize: 14, color: "var(--text)",
              display: "flex", alignItems: "center", justifyContent: "space-between",
              gap: 12,
            }}>
              <span>택배 조회는 로그인 후 이용 가능합니다.</span>
              <button
                type="button"
                className="btn btn-primary btn-sm"
                onClick={() => navigate('login')}
              >
                로그인
              </button>
            </div>
          )}

          {error && (
            <div style={{
              marginTop: 14, padding: "10px 14px",
              background: "#fef2f2", color: "#b91c1c",
              borderRadius: 10, fontSize: 14,
            }}>
              {error}
            </div>
          )}
        </div>

        {result && <TrackingResult result={result} carrierName={carrierName} tid={tid} />}

        {!result && !loading && !error && (
          <div className="tracking-card" style={{ textAlign: "center", padding: 56 }}>
            <div style={{ color: "var(--muted-2)", marginBottom: 14 }}>
              <Icon name="package" size={48} stroke={1.2}/>
            </div>
            <div style={{ fontWeight: 600, marginBottom: 6 }}>송장번호를 입력해주세요</div>
            <div style={{ fontSize: 14, color: "var(--muted)" }}>
              지원 택배사: 우체국 · CJ대한통운 · 한진 · 로젠 · 롯데 · 대신 · 경동 · 합동 · 우리 · 쿠팡
            </div>
          </div>
        )}
      </div>
    </main>
  );
};

const TrackingResult = ({ result, carrierName, tid }) => {
  const currentStep = result.level ?? 0;
  const statusLabel = result.statusLabel || STATUS_STEPS[currentStep]?.label || "조회중";
  const progressPct = (currentStep / (STATUS_STEPS.length - 1)) * 80;

  // 최신 → 과거 순으로 정렬
  const history = [...(result.progresses || [])].reverse();

  return (
    <div className="tracking-card">
      <div className="result-header">
        <div>
          <div className="result-id">{carrierName} · {tid}</div>
          <div className="result-status">
            <span className="status-dot"></span>
            {statusLabel}
          </div>
          {result.itemName && (
            <div style={{ marginTop: 6, color: "var(--muted)", fontSize: 13 }}>
              {result.itemName}
            </div>
          )}
        </div>
        {result.itemImageUrl && (
          <img
            src={result.itemImageUrl}
            alt={result.itemName || "상품 이미지"}
            style={{
              width: 64, height: 64, objectFit: "cover",
              borderRadius: 10, border: "1px solid var(--line)",
            }}
          />
        )}
      </div>

      {/* Timeline (4단계) */}
      <div className="timeline">
        <div className="timeline-line"></div>
        <div className="timeline-line-active" style={{ width: `${progressPct}%` }}></div>
        {STATUS_STEPS.map((s, i) => {
          const cls = i < currentStep ? "done" : i === currentStep ? "current" : "";
          return (
            <div key={s.step} className={`timeline-step ${cls}`}>
              <div className="timeline-bubble">
                {i < currentStep
                  ? <Icon name="check-bold" size={14}/>
                  : i === currentStep
                    ? <Icon name="truck" size={16}/>
                    : <Icon name="circle" size={10} stroke={0}/>}
              </div>
              <div className="timeline-label">{s.label}</div>
            </div>
          );
        })}
      </div>

      {/* 상세 이력 */}
      <div className="history-title">상세 이력</div>
      {history.length === 0 ? (
        <div style={{ padding: 16, color: "var(--muted)", fontSize: 14 }}>
          아직 등록된 이력이 없습니다.
        </div>
      ) : (
        <div className="history">
          {history.map((h, i) => (
            <div key={i} className={`history-item ${i === 0 ? "active" : ""}`}>
              <span className="history-time">{h.dateTime || ""}</span>
              <span className="history-status">
                {h.status || h.description || h.statusCode || "-"}
              </span>
              <span className="history-location">{h.location || ""}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.Tracking = Tracking;