/* ============================================================================
 * 서명전에 — iOS Home Tab
 * ========================================================================== */

function HomeScreen({
  onNewAnalysis,
  onOpenChooser,
  onOpenRecent,
  onOpenBilling,
  onSeeAllRecents,
  credits = 0,
  unlimited = false,
  recents: recentsProp,
  historyLoading = false,
  hasSession = false,
  userName = null,
}) {
  const scrollRef = useRef(null);
  const [scrolled, setScrolled] = useState(false);

  const onScroll = (e) => setScrolled(e.currentTarget.scrollTop > 8);

  const MOCK_RECENTS = [
    { id: "r1", type: "jeonse", title: "전세계약서_202604.pdf",  sev: "alert", high: 3, when: "4월 20일" },
    { 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일" },
  ];

  /* 서버 히스토리가 있으면 우선 노출, 없으면 목업으로 폴백 (로딩 중에는 비운다) */
  const hasReal = Array.isArray(recentsProp) && recentsProp.length > 0;
  const recents = hasReal ? recentsProp : MOCK_RECENTS;
  const showEmpty = hasSession && !historyLoading && Array.isArray(recentsProp) && recentsProp.length === 0;

  const thumbClass = (sev) => "recent__thumb recent__thumb--" + sev;
  /* userName 이 있을 때만 "X님" 인사. 없으면 그냥 "안녕하세요" 로 generic.
     이전엔 "지현" 으로 하드코딩 폴백 → 토스 hash 사용자(email 없음) 에게 가짜
     이름 보여 오해 유발. 토스 SDK 가 nickname 제공하기 시작하면 그쪽에서
     userName prop 으로 흘려주면 됨. */

  return (
    <div className="app">
      <div className={"navbar navbar--left" + (scrolled ? " navbar--scrolled" : "")}>
        <div className="navbar__brand">
          <BrandLockup size={22} color="var(--brand)" gap={7} />
        </div>
        <button className="navbar__btn" aria-label="알림" style={{ marginRight: 6 }}>
          <IOSIcon name="bell" size={22} />
        </button>
      </div>

      <div className="scroll scroll--plain" ref={scrollRef} onScroll={onScroll}>
        <div className="largetitle">
          <div className="largetitle__eyebrow">{userName ? `안녕하세요, ${userName}님` : "안녕하세요"}</div>
          <h1 className="largetitle__text">서명 전에<br/>한 번 더 살펴봐요</h1>
        </div>

        <div className="home-hero">
          <div className="home-hero__eyebrow">AI 계약서 분석</div>
          <h2 className="home-hero__title">
            사진 한 장으로<br/>불리한 조항을 찾아드려요
          </h2>
          <div className="home-hero__meta">
            <span>전세 · 월세 임대차</span>
            <span className="home-hero__meta-dot" />
            <span>법령 기준으로 자동 검토</span>
          </div>
          {/* Hero CTA — 카메라로 직결했다가 사용자가 "카메라 / 파일 / 텍스트
              중에서 고를 수 있는 창으로 보내달라" 요청. FAB 과 동일한 공용
              업로드 시트(uploadSheet) 로 연결. onOpenChooser 가 없으면 폴백으로
              기존처럼 카메라 kind 로 감. */}
          <button
            className="home-hero__cta"
            onClick={() => (onOpenChooser ? onOpenChooser() : onNewAnalysis("camera"))}
          >
            지금 시작하기
            <IOSIcon name="arrow-right" size={15} />
          </button>
        </div>

        {/* 원본 파일 권장 배너 — 사용자 피드백 "방법론을 말해줬으면 좋겠어".
            "원본 받으세요" 만으론 추상적이라 **공인중개사에게 PDF 로 보내달라
            요청하라** 는 구체적 액션 가이드까지 명시. hero 와 업로드 버튼
            사이라 시선이 CTA 로 향하는 길목에서 반드시 보게 됨. */}
        <div
          style={{
            margin: "18px 16px 14px",
            background: "var(--warn-soft, #FFF7E6)",
            border: "1px solid var(--warn, #FF9500)",
            borderLeft: "5px solid var(--warn, #FF9500)",
            borderRadius: 14,
            padding: "16px 18px",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "flex-start",
              gap: 12,
            }}
          >
            <div
              aria-hidden="true"
              style={{
                fontSize: 24,
                lineHeight: 1,
                flexShrink: 0,
                marginTop: 2,
              }}
            >
              💡
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div
                style={{
                  fontSize: 17,
                  fontWeight: 700,
                  color: "var(--warn-ink, #B26600)",
                  letterSpacing: "-0.02em",
                  marginBottom: 8,
                  lineHeight: 1.35,
                }}
              >
                공인중개사에게 PDF 파일을 받아 올려주세요
              </div>
              <div
                style={{
                  fontSize: 14,
                  color: "var(--ink, #191F28)",
                  lineHeight: 1.55,
                  marginBottom: 10,
                }}
              >
                사진으로 찍은 계약서는 글자 인식이 떨어져요.
                중개사에게 <strong style={{ fontWeight: 600 }}>"계약서 PDF 파일로 보내주세요"</strong> 라고 요청하시면
                정확하게 분석해 드릴 수 있어요.
              </div>
              <div
                style={{
                  fontSize: 13,
                  color: "var(--label-secondary, #4e5968)",
                  lineHeight: 1.5,
                  paddingTop: 10,
                  borderTop: "1px dashed rgba(255, 149, 0, 0.35)",
                }}
              >
                📩 카톡·문자·이메일 어느 쪽이든 PDF 로 받으면 OK
                <br />
                📝 전자계약이면 한방·KB부동산 등에서 PDF 다운로드 가능
              </div>
            </div>
          </div>
        </div>

        {/* 빠른 진입 — 2-col 그리드에 paste 카드를 span 으로 깔아 한 컨테이너로 통합.
            이전엔 별도 row + 음수 margin (-14px) 으로 붙였지만, grid gap 이 자동으로
            줄간격을 맞춰주므로 더 견고하고 시각적 정렬감이 좋다. */}
        <div className="home-quickrow home-quickrow--stack">
          <button className="home-quick home-quick--lg" onClick={() => onNewAnalysis("camera")}>
            <span className="home-quick__icon"><IOSIcon name="camera" size={22} /></span>
            <span className="home-quick__body">
              <span className="home-quick__label">사진 찍기</span>
              <span className="home-quick__sub">카메라로 바로 찍어요</span>
            </span>
          </button>
          <button className="home-quick home-quick--lg" onClick={() => onNewAnalysis("upload")}>
            <span className="home-quick__icon"><IOSIcon name="photos" size={22} /></span>
            <span className="home-quick__body">
              <span className="home-quick__label">파일 · 사진 올리기</span>
              <span className="home-quick__sub">갤러리나 PDF에서 고르기</span>
            </span>
          </button>
          <button className="home-quick home-quick--lg home-quick--span" onClick={() => onNewAnalysis("paste")}>
            <span className="home-quick__icon"><IOSIcon name="doc" size={22} /></span>
            <span className="home-quick__body">
              <span className="home-quick__label">텍스트 붙여넣기</span>
              {/* 이전 카피 "카톡·문자로 받은 계약서 본문을 바로" 는 문장이 끊겨 있고
                  형제 카드 ("카메라로 바로 찍어요" / "갤러리나 PDF에서 고르기") 와
                  결도 안 맞아 한 줄을 넘쳐 카드 밖으로 튀어나갔다. 동일 어투로 단축. */}
              <span className="home-quick__sub">카톡·문자 본문 붙여넣기</span>
            </span>
          </button>
        </div>

        <div className="credit-card">
          <div className="credit-card__left">
            <div className="credit-card__label">
              {unlimited ? "분석 크레딧" : "남은 분석 크레딧"}
            </div>
            <div>
              {unlimited ? (
                <>
                  <span className="credit-card__value tnum" style={{ letterSpacing: "-0.04em" }}>∞</span>
                  <span className="credit-card__unit">무제한</span>
                </>
              ) : (
                <>
                  <span className="credit-card__value tnum">{credits}</span>
                  <span className="credit-card__unit">회</span>
                </>
              )}
            </div>
          </div>
          {!unlimited && (
            <button className="btn btn--tinted" onClick={onOpenBilling}>
              충전하기
            </button>
          )}
        </div>

        <div className="section-h">
          <h3 className="section-h__title">최근 분석</h3>
          <button className="section-h__link" onClick={onSeeAllRecents} type="button">전체보기</button>
        </div>
        {showEmpty ? (
          <div className="recent-empty">
            <div className="recent-empty__title">아직 분석한 계약서가 없어요</div>
            <div className="recent-empty__sub">
              계약서를 올리면 여기에 차곡차곡 쌓여요.
            </div>
          </div>
        ) : (
          <div className="recent-list">
            {recents.map((r) => (
              <button key={r.id} className="recent" onClick={() => onOpenRecent(r)}>
                <span className={thumbClass(r.sev)}>
                  <IOSIcon
                    name={r.type === "labor" ? "briefcase" : r.type === "wolsae" ? "building" : "home-key"}
                    size={20}
                  />
                </span>
                <span className="recent__body">
                  <span className="recent__title">{r.title}</span>
                  <span className="recent__meta">
                    <span>{r.kindCount > 0 ? `${r.kindLabel} ${r.kindCount}건` : "이슈 없음"}</span>
                    <span className="recent__dot" />
                    <span>{r.when}</span>
                  </span>
                </span>
                <span className="recent__chev"><IOSIcon name="chev-right" size={18} /></span>
              </button>
            ))}
          </div>
        )}

        <div style={{ height: 20 }} />
      </div>
    </div>
  );
}

window.HomeScreen = HomeScreen;

Object.assign(window, { HomeScreen });