/* ============================================================================
 * 서명전에 — Web App Shell
 *
 * 모바일: iOS 목업과 동일한 레이아웃을 풀뷰포트로 전개.
 *         하단 탭바 유지, 상단 StatusBar 제거.
 * 데스크톱(≥900px): 좌측 사이드바 + 우측 메인 컬럼(최대 520px 센터 정렬)으로
 *                   모바일 뷰를 그대로 중앙 렌더링. "모바일 웹 우선"이라
 *                   레이아웃은 바꾸지 않고 주변 크롬만 바꾼다.
 * ========================================================================== */

const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* -------------------- Tab Bar (모바일 하단) -------------------- */
function TabBar({ tab, onTab, onFab }) {
  const items = [
    { id: "home",   label: "홈",     icon: "house" },
    { id: "history",label: "기록",   icon: "clock" },
    { id: "_fab",   label: null,     icon: null },
    { id: "help",   label: "도움말", icon: "help" },
    { id: "account",label: "계정",   icon: "person" },
  ];

  return (
    <div className="tabbar">
      {items.map((it) =>
        it.id === "_fab" ? (
          <div key="fab" className="tab tab--fab">
            <button className="tab-fab tap" onClick={onFab} aria-label="새 계약서 분석하기">
              <IOSIcon name="plus" size={26} />
            </button>
          </div>
        ) : (
          <button
            key={it.id}
            className={"tab" + (tab === it.id ? " is-active" : "")}
            onClick={() => onTab(it.id)}
          >
            <IOSIcon name={it.icon} size={25} weight={tab === it.id ? 2.2 : 1.8} />
            <span>{it.label}</span>
          </button>
        ),
      )}
    </div>
  );
}

/* -------------------- Sidebar (데스크톱) -------------------- */
function Sidebar({ tab, onTab, onFab, onOpenBilling, credits, unlimited = false, collapsed, onToggleCollapse }) {
  const items = [
    { id: "home",    label: "홈",       icon: "house" },
    { id: "history", label: "기록",     icon: "clock" },
    { id: "help",    label: "도움말",   icon: "help" },
    { id: "account", label: "계정",     icon: "person" },
  ];
  return (
    <aside className={"sidebar" + (collapsed ? " sidebar--collapsed" : "")}>
      <div className="sidebar__brand">
        <BrandLockup
          size={collapsed ? 26 : 22}
          color="var(--brand)"
          gap={8}
          symbolOnly={collapsed}
        />
      </div>

      <button className="sidebar__cta" onClick={onFab}>
        <IOSIcon name="plus" size={18} weight={2.4} />
        {!collapsed && <span>새 계약서 분석하기</span>}
      </button>

      <nav className="sidebar__nav">
        {items.map((it) => (
          <button
            key={it.id}
            className={"sidebar__link" + (tab === it.id ? " is-active" : "")}
            onClick={() => onTab(it.id)}
            title={collapsed ? it.label : undefined}
          >
            <IOSIcon name={it.icon} size={20} weight={tab === it.id ? 2.2 : 1.8} />
            {!collapsed && <span>{it.label}</span>}
          </button>
        ))}
      </nav>

      <div style={{ flex: 1 }} />

      {!collapsed && (
        <div className="sidebar__wallet">
          <div className="sidebar__wallet-label">남은 크레딧</div>
          <div className="sidebar__wallet-val">
            {unlimited ? (
              <>
                <span className="tnum" style={{ fontSize: 28, letterSpacing: "-0.02em" }}>∞</span>
                <span className="sidebar__wallet-unit">무제한</span>
              </>
            ) : (
              <>
                <span className="tnum">{credits}</span>
                <span className="sidebar__wallet-unit">회</span>
              </>
            )}
          </div>
          {!unlimited && (
            <button className="sidebar__wallet-cta" onClick={onOpenBilling}>
              크레딧 충전하기
            </button>
          )}
        </div>
      )}

      <button className="sidebar__collapse" onClick={onToggleCollapse} aria-label={collapsed ? "펼치기" : "접기"}>
        <IOSIcon name={collapsed ? "chev-right" : "chev-left"} size={16} weight={2.2} />
      </button>
    </aside>
  );
}

/* -------------------- Sheet (레거시 — 신규 코드는 BottomSheet 사용) --------------------
 * @deprecated Task #125 이후 신규 하단 시트는 `BottomSheet` (TDS 공식 컴포넌트)
 *             를 사용해요. 이 함수는 `app.jsx` 같은 레거시 엔트리가 남아 있을 때
 *             깨지지 않도록 호환용으로 유지 중이에요.
 *             - title → `<BottomSheet header={<BottomSheet.Header>…</BottomSheet.Header>}>`
 *             - detent="large|medium|small" → `maxHeight` / `expandedMaxHeight` (px)
 * ------------------------------------------------------------------------------ */
function Sheet({ open, onClose, children, title, detent = "medium" }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose?.();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const maxHeight = detent === "large" ? "88dvh" : detent === "small" ? "42dvh" : "66dvh";

  return (
    <div className={"sheet-root" + (open ? " is-open" : "")} aria-hidden={!open}>
      <div className="sheet-root__backdrop" onClick={onClose} />
      <div className="sheet" style={{ maxHeight, transform: open ? "translateY(0)" : "translateY(100%)" }}>
        <div className="sheet__grabber" />
        {title && (
          <div className="sheet__header">
            <div className="sheet__title">{title}</div>
            <button className="sheet__close" onClick={onClose} aria-label="닫기">
              <IOSIcon name="x" size={16} weight={2.2} />
            </button>
          </div>
        )}
        <div className="sheet__body">{children}</div>
      </div>
    </div>
  );
}

/* -------------------- Action Sheet (모바일) / Menu (데스크톱) -------------------- */
function ActionSheet({ open, onClose, actions = [], title }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose?.();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <div
      className={"sheet-root" + (open ? " is-open" : "")}
      aria-hidden={!open}
      /* open=false 일 때 명시적 display:none + pointer-events:none 으로 완전
         숨김. 이전엔 transform:translateY(100%) 만으로 시각적으로 옮겨놨는데,
         일부 모바일 브라우저/iOS Safari 에서 translate 가 적용되기 전에
         렌더가 끝나서 sheet 가 viewport 안에 남아있는 회귀가 보고됨 (사용자
         피드백: 카메라/텍스트 선택 후에도 sheet 가 하단에 그대로 떠있음). */
      style={{
        display: open ? undefined : "none",
        pointerEvents: open ? undefined : "none",
      }}
    >
      <div className="sheet-root__backdrop" onClick={onClose} />
      <div
        className="sheet"
        style={{
          background: "transparent",
          maxHeight: "unset",
          transform: open ? "translateY(0)" : "translateY(100%)",
        }}
      >
        <div className="actionsheet">
          <div className="actionsheet__group">
            {title && (
              typeof title === "string" ? (
                <div
                  style={{
                    padding: "14px 16px 12px",
                    fontSize: 13,
                    color: "var(--label-secondary)",
                    opacity: 0.7,
                    textAlign: "center",
                    borderBottom: "0.5px solid var(--separator)",
                    lineHeight: 1.4,
                  }}
                >
                  {title}
                </div>
              ) : (
                /* ReactNode title — 호출부에서 자기 스타일로 렌더 (경고 배너 등
                   큰 요소를 넣을 수 있게). bottom border 만 기본 구분선으로. */
                <div style={{ borderBottom: "0.5px solid var(--separator)" }}>
                  {title}
                </div>
              )
            )}
            {actions.map((a, i) => (
              <button
                key={i}
                className={"actionsheet__action" + (a.destructive ? " actionsheet__action--destructive" : "")}
                onClick={() => { a.onClick?.(); onClose?.(); }}
              >
                <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                  {a.icon && <IOSIcon name={a.icon} size={22} />}
                  {a.label}
                </span>
                {a.meta && <span className="actionsheet__action-meta">{a.meta}</span>}
              </button>
            ))}
          </div>
          <div className="actionsheet__group">
            <button className="actionsheet__action actionsheet__action--cancel" onClick={onClose}>
              닫기
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* -------------------- Web Shell -------------------- */
/* 모바일에서는 풀뷰포트, 데스크톱에서는 사이드바 + 센터 컬럼. */
function WebShell({ children, tab, onTab, onFab, onOpenBilling, credits, unlimited = false, hideNav = false, sidebarCollapsed, onToggleSidebar }) {
  return (
    <div className="web-shell">
      {!hideNav && (
        <Sidebar
          tab={tab}
          onTab={onTab}
          onFab={onFab}
          onOpenBilling={onOpenBilling}
          credits={credits}
          unlimited={unlimited}
          collapsed={sidebarCollapsed}
          onToggleCollapse={onToggleSidebar}
        />
      )}
      <main className={"web-main" + (hideNav ? " web-main--nochrome" : "")}>
        <div className="web-viewport">
          {children}
        </div>
      </main>
      {!hideNav && (
        <div className="web-tabbar-wrap">
          <TabBar tab={tab} onTab={onTab} onFab={onFab} />
        </div>
      )}
    </div>
  );
}

/* Export */
Object.assign(window, { WebShell, Sidebar, TabBar, Sheet, ActionSheet });