/* ============================================================================
 * 서명전에 — iOS Capture & Picker screens
 * 사진 찍기 / 파일 · 사진 업로드 탭 후 실제 분석 직전에 들어가는 중간 화면.
 * ========================================================================== */

/* -------------------- 카메라 촬영 -------------------- */

function CaptureScreen({ onBack, onShoot }) {
  const [flash, setFlash] = useState(false);
  const [grid, setGrid]   = useState(true);
  const [aligned, setAligned] = useState(false);
  const [busy, setBusy]   = useState(false);

  // 살짝 움직이는 가이드 효과
  useEffect(() => {
    const t = setTimeout(() => setAligned(true), 800);
    return () => clearTimeout(t);
  }, []);

  /* 셔터. TossAdapter.camera.open 이 있으면 실촬영 → {id, dataUri} 를 onShoot 에
   * 넘기고, 없거나 지원하지 않으면 기존 목업 플로우로 빠진다. 어댑터의 웹 폴백은
   * input[type=file][capture=environment] 로 시스템 카메라를 연다. */
  const shoot = async () => {
    if (busy) return;
    setFlash(true);
    setBusy(true);
    try {
      const adapter = (typeof window !== "undefined" && window.TossAdapter) || null;
      if (adapter?.camera?.open) {
        try {
          const image = await adapter.camera.open({
            type: "photo",
            base64: true,
            maxWidth: 1600,
          });
          // image = { id, dataUri, mimeType? }
          setTimeout(() => onShoot(image), 180);
          return;
        } catch (err) {
          // 권한 거부 / 사용자 취소 / 미지원 → 목업으로 폴백
          if (adapter.TossPermissionError && err instanceof adapter.TossPermissionError) {
            alert("카메라 권한이 필요해요");
            setBusy(false);
            setFlash(false);
            return;
          }
          console.warn("[capture] adapter.camera.open failed, falling back to demo:", err);
        }
      }
      // 최후 폴백: 기존 시나리오 목업
      setTimeout(() => onShoot(null), 180);
    } finally {
      // 다음 촬영을 위해 busy 해제 (onShoot 이 stack 을 바꾸므로 대개 unmount 됨)
      setTimeout(() => { setBusy(false); setFlash(false); }, 200);
    }
  };

  return (
    <div className="capture">
      {/* 상단 바 */}
      <div className="capture__top">
        <button className="capture__chip" onClick={onBack} aria-label="닫기">
          <IOSIcon name="chev-left" size={20} />
        </button>
        <div className="capture__title">계약서 촬영</div>
        <button
          className={"capture__chip" + (grid ? " capture__chip--on" : "")}
          onClick={() => setGrid(!grid)}
          aria-label="격자"
        >
          <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "-0.01em" }}>격자</span>
        </button>
      </div>

      {/* 뷰파인더 */}
      <div className="capture__viewfinder">
        {/* 가짜 종이 문서 프리뷰 */}
        <div className={"capture__paper" + (aligned ? " capture__paper--aligned" : "")}>
          <div className="capture__paper-head">주택 전세 계약서</div>
          <div className="capture__paper-line" style={{ width: "88%" }} />
          <div className="capture__paper-line" style={{ width: "62%" }} />
          <div className="capture__paper-line" style={{ width: "92%" }} />
          <div className="capture__paper-line" style={{ width: "44%" }} />
          <div className="capture__paper-line" style={{ width: "78%" }} />
          <div className="capture__paper-line" style={{ width: "55%" }} />
          <div className="capture__paper-line" style={{ width: "84%" }} />
          <div className="capture__paper-line" style={{ width: "38%" }} />
        </div>

        {/* 격자 */}
        {grid && (
          <div className="capture__grid" aria-hidden>
            <span /><span /><span /><span />
          </div>
        )}

        {/* 문서 자동 감지 프레임 */}
        <div className={"capture__frame" + (aligned ? " capture__frame--ok" : "")}>
          <span className="capture__corner capture__corner--tl" />
          <span className="capture__corner capture__corner--tr" />
          <span className="capture__corner capture__corner--bl" />
          <span className="capture__corner capture__corner--br" />
        </div>

        {/* 가이드 토스트 */}
        <div className={"capture__toast" + (aligned ? " capture__toast--ok" : "")}>
          {aligned ? "문서가 잘 보여요. 찍어도 돼요" : "계약서를 프레임 안에 맞춰 주세요"}
        </div>

        {/* 플래시 오버레이 */}
        {flash && <div className="capture__flash" />}
      </div>

      {/* 하단 컨트롤 */}
      <div className="capture__bottom">
        <button
          className={"capture__side" + (flash ? " capture__side--on" : "")}
          aria-label="플래시"
          onClick={() => {}}
        >
          <IOSIcon name="bolt" size={20} />
        </button>

        <button
          className="capture__shutter"
          onClick={shoot}
          aria-label="촬영"
          disabled={busy}
          style={busy ? { opacity: 0.6 } : undefined}
        >
          <span className="capture__shutter-inner" />
        </button>

        <button className="capture__side" aria-label="카메라 전환">
          <IOSIcon name="refresh" size={20} />
        </button>
      </div>

      <div className="capture__hint">
        테두리를 자동으로 찾고 기울기도 맞춰 드려요
      </div>
    </div>
  );
}

/* -------------------- 파일 · 사진 업로드 -------------------- */

function PickerScreen({ onBack, onPick }) {
  const [tab, setTab] = useState("photos"); // photos | files
  const [selected, setSelected] = useState(null);
  // 실제 앨범(TossAdapter.photos.fetchAlbum 결과) — 로딩 성공하면 목업을 덮는다.
  const [albumPhotos, setAlbumPhotos] = useState(null); // ImageResponse[] | null
  const [albumError, setAlbumError] = useState(null);
  const [albumLoading, setAlbumLoading] = useState(false);

  // 앨범 탭으로 들어왔을 때 1회만 로딩 시도.
  useEffect(() => {
    if (tab !== "photos") return;
    if (albumPhotos !== null) return; // 이미 로딩됨
    const adapter = (typeof window !== "undefined" && window.TossAdapter) || null;
    if (!adapter?.photos?.fetchAlbum) return; // 어댑터 없음 → 목업 유지
    // 웹 폴백의 fetchAlbum 은 input[type=file] 을 열기 때문에 즉시 자동 호출하면
    // 사용자 제스처가 없어서 막힐 수 있다. 앱인토스 환경에서만 자동 로딩한다.
    if (!adapter.isInAppsInToss?.()) return;
    let cancelled = false;
    setAlbumLoading(true);
    adapter.photos
      .fetchAlbum({ base64: true, maxCount: 24, maxWidth: 360 })
      .then((images) => {
        if (cancelled) return;
        setAlbumPhotos(Array.isArray(images) ? images : []);
        setAlbumLoading(false);
      })
      .catch((err) => {
        if (cancelled) return;
        if (adapter.TossPermissionError && err instanceof adapter.TossPermissionError) {
          setAlbumError("앨범 접근 권한이 필요해요");
        } else {
          setAlbumError(err?.message || "앨범을 불러오지 못했어요");
        }
        setAlbumLoading(false);
      });
    return () => { cancelled = true; };
  }, [tab, albumPhotos]);

  const photos = [
    { id: "p1", kind: "contract", label: "전세계약서", tint: "#6366f1" },
    { id: "p2", kind: "receipt",  label: "영수증",     tint: "#14b8a6" },
    { id: "p3", kind: "contract", label: "월세계약_202603", tint: "#f59e0b" },
    { id: "p4", kind: "photo",    label: "풍경",        tint: "#60a5fa" },
    { id: "p5", kind: "contract", label: "월세계약서", tint: "#8b5cf6" },
    { id: "p6", kind: "photo",    label: "음식",        tint: "#ef4444" },
    { id: "p7", kind: "contract", label: "임대차 수정본", tint: "#0ea5e9" },
    { id: "p8", kind: "photo",    label: "스크린샷",    tint: "#64748b" },
    { id: "p9", kind: "contract", label: "전세_v2",    tint: "#10b981" },
  ];

  /* 앨범 로드 성공 시 실제 이미지로 렌더. fetchAlbum 반환 shape:
   *   { id, dataUri, mimeType? } — base64: true 이면 dataUri 는 순수 base64 이므로
   *   "data:<mime>;base64," 접두사를 붙여야 <img src> 에서 쓸 수 있다. */
  const useRealAlbum = Array.isArray(albumPhotos);
  const realImageSrc = (img) => {
    if (!img?.dataUri) return "";
    if (/^data:|^file:|^content:|^https?:/.test(img.dataUri)) return img.dataUri;
    const mime = img.mimeType || "image/jpeg";
    return `data:${mime};base64,${img.dataUri}`;
  };

  const files = [
    { id: "f1", name: "전세계약서_구로동_202604.pdf", size: "1.2MB",  when: "오늘",    type: "pdf" },
    { id: "f2", name: "월세계약서_최종본.pdf",        size: "842KB",  when: "어제",    type: "pdf" },
    { id: "f3", name: "월세계약서_원본.pdf",            size: "1.8MB",  when: "3월 30일", type: "pdf" },
    { id: "f4", name: "IMG_5521.HEIC",                size: "3.4MB",  when: "3월 28일", type: "img" },
    { id: "f5", name: "스캔본_20260312.pdf",            size: "2.1MB",  when: "3월 12일", type: "pdf" },
  ];

  const canContinue = selected !== null;

  /* 선택 확정 시 호출. 실제 앨범 항목이 있으면 ImageResponse 객체를, 아니면 id 를
   * 반환한다. 호출부(web-app.jsx) 는 객체이면 dataUriToFile 로 File 변환해 실제
   * /analyze 를 호출하고, 문자열 id 이면 기존 목업 경로를 탄다. */
  const pickPayload = () => {
    if (useRealAlbum && albumPhotos) {
      const hit = albumPhotos.find((x) => x.id === selected);
      if (hit) return hit;
    }
    return selected;
  };

  return (
    <div className="picker">
      <div className="navbar">
        <button className="navbar__btn" style={{ marginLeft: 6 }} onClick={onBack}>닫기</button>
        <div className="navbar__title">파일 올리기</div>
        <button
          className="navbar__btn navbar__btn--primary"
          style={{ marginRight: 6, opacity: canContinue ? 1 : 0.35, pointerEvents: canContinue ? "auto" : "none" }}
          onClick={() => onPick(pickPayload())}
        >
          선택
        </button>
      </div>

      {/* 세그먼티드 */}
      <div className="picker__segment">
        <button
          className={"picker__seg" + (tab === "photos" ? " picker__seg--on" : "")}
          onClick={() => { setTab("photos"); setSelected(null); }}
        >
          사진 앱
        </button>
        <button
          className={"picker__seg" + (tab === "files" ? " picker__seg--on" : "")}
          onClick={() => { setTab("files"); setSelected(null); }}
        >
          파일 앱
        </button>
      </div>

      {tab === "photos" ? (
        <div className="picker__scroll">
          <div className="picker__section-h">
            {useRealAlbum ? "앨범에서 고르기" : "최근에 찍은 사진"}
          </div>

          {albumLoading && (
            <div style={{ textAlign: "center", padding: "32px 0", color: "var(--label-secondary)" }}>
              앨범 불러오는 중…
            </div>
          )}

          {albumError && !albumLoading && (
            <div style={{ textAlign: "center", padding: "24px 16px", color: "var(--alert, #d33)" }}>
              {albumError}
            </div>
          )}

          {useRealAlbum && !albumLoading && !albumError ? (
            // 실제 앨범 렌더
            <div className="picker__grid">
              {albumPhotos.length === 0 ? (
                <div style={{ gridColumn: "1 / -1", textAlign: "center", padding: 24, color: "var(--label-secondary)" }}>
                  앨범에 사진이 없어요
                </div>
              ) : (
                albumPhotos.map((img) => (
                  <button
                    key={img.id}
                    className={"picker__thumb" + (selected === img.id ? " picker__thumb--on" : "")}
                    onClick={() => setSelected(img.id)}
                    aria-pressed={selected === img.id}
                  >
                    <span
                      className="picker__thumb-bg"
                      style={{
                        backgroundImage: `url("${realImageSrc(img)}")`,
                        backgroundSize: "cover",
                        backgroundPosition: "center",
                      }}
                    />
                    {selected === img.id && (
                      <span className="picker__check">
                        <IOSIcon name="check" size={12} />
                      </span>
                    )}
                  </button>
                ))
              )}
            </div>
          ) : (
            // 목업 렌더 (웹 환경 / 어댑터 없음 / 에러 시 폴백)
            <div className="picker__grid">
              {photos.map((p) => (
                <button
                  key={p.id}
                  className={"picker__thumb" + (selected === p.id ? " picker__thumb--on" : "")}
                  onClick={() => setSelected(p.id)}
                  aria-pressed={selected === p.id}
                >
                  <span
                    className="picker__thumb-bg"
                    style={{
                      background: `linear-gradient(135deg, ${p.tint}22, ${p.tint}44)`,
                    }}
                  >
                    {p.kind === "contract" && (
                      <span className="picker__doc-preview">
                        <span />
                        <span style={{ width: "82%" }} />
                        <span style={{ width: "68%" }} />
                        <span style={{ width: "90%" }} />
                        <span style={{ width: "55%" }} />
                      </span>
                    )}
                    {p.kind === "receipt" && (
                      <span style={{ fontSize: 24, color: p.tint, fontWeight: 600 }}>₩</span>
                    )}
                    {p.kind === "photo" && (
                      <span style={{
                        width: 28, height: 28, borderRadius: 14,
                        background: p.tint, opacity: 0.7,
                      }} />
                    )}
                  </span>
                  {selected === p.id && (
                    <span className="picker__check">
                      <IOSIcon name="check" size={12} />
                    </span>
                  )}
                  <span className="picker__thumb-label">{p.label}</span>
                </button>
              ))}
            </div>
          )}
          <div style={{ height: 120 }} />
        </div>
      ) : (
        <div className="picker__scroll">
          <div className="searchfield" style={{ margin: "8px 16px 12px" }}>
            <IOSIcon name="search" size={15} />
            <input placeholder="파일 이름으로 찾기" />
          </div>

          <div className="inset-group" style={{ marginTop: 0 }}>
            <div className="inset-group__header">iCloud Drive</div>
            <div className="inset-group__list">
              {files.map((f) => (
                <button
                  key={f.id}
                  className="inset-row"
                  style={{ padding: "10px 16px" }}
                  onClick={() => setSelected(f.id)}
                >
                  <span
                    className="inset-row__icon"
                    style={{
                      background: f.type === "pdf" ? "var(--alert)" : "var(--brand, #3182f6)",
                      width: 36, height: 36, borderRadius: 8,
                    }}
                  >
                    <IOSIcon name={f.type === "pdf" ? "doc" : "photos"} size={17} />
                  </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",
                    }}>
                      {f.name}
                    </span>
                    <span style={{
                      fontSize: 13, color: "var(--label-secondary)",
                      opacity: 0.7, display: "flex", gap: 6,
                    }}>
                      <span>{f.size}</span>
                      <span className="recent__dot" />
                      <span>{f.when}</span>
                    </span>
                  </span>
                  {selected === f.id ? (
                    <span style={{
                      width: 22, height: 22, borderRadius: 11,
                      background: "var(--brand)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: "#fff",
                    }}>
                      <IOSIcon name="check" size={12} />
                    </span>
                  ) : (
                    <span style={{
                      width: 22, height: 22, borderRadius: 11,
                      border: "1.5px solid var(--label-secondary)",
                      opacity: 0.3,
                    }} />
                  )}
                </button>
              ))}
            </div>
          </div>
          <div style={{ height: 120 }} />
        </div>
      )}

      {/* 하단 액션 */}
      <div className="picker__bottom">
        <button
          className="btn btn--filled"
          disabled={!canContinue}
          onClick={() => onPick(pickPayload())}
          style={{ width: "100%" }}
        >
          {canContinue ? "고른 파일 분석하기" : "먼저 파일을 골라 주세요"}
        </button>
      </div>
    </div>
  );
}

window.CaptureScreen = CaptureScreen;
window.PickerScreen  = PickerScreen;

Object.assign(window, { CaptureScreen, PickerScreen });