/* MISO 온보딩 — 공통 컴포넌트 */
const { useState, useEffect, useRef, useMemo } = React;
const { CREWS, STEPS, METRICS } = window.MISO_DATA;

/* ---------------- Crew Badge with hover tooltip ---------------- */
function CrewBadge({ id, size = "sm" }) {
  const c = CREWS[id];
  if (!c) return null;
  const cls = "crew-badge" + (size === "lg" ? " lg" : size === "xl" ? " xl" : "");
  return (
    <span className={cls} style={{ background: c.color }}>
      {c.initial}
    </span>
  );
}

function CrewWithTooltip({ id }) {
  const c = CREWS[id];
  if (!c) return null;
  return (
    <span className="crew-wrap">
      <CrewBadge id={id} />
      <span className="crew-name">{c.name}</span>
      <span className="crew-tooltip">
        <CrewBadge id={id} />
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
          <span className="name">{c.name} <span style={{ color: "var(--ink-400)", fontWeight: 400 }}>{c.ko}</span></span>
          <span className="role">{c.role}</span>
        </span>
      </span>
    </span>
  );
}

function CrewBlock({ owners }) {
  return (
    <div className="crew-block crew-block-simple">
      {owners.map((id) => {
        const c = CREWS[id];
        if (!c) return null;
        return (
          <span key={id} className="crew-person">
            <CrewBadge id={id} size="lg" />
            <span className="crew-info">
              <span className="n">{c.name} <span style={{ color: "var(--ink-400)", fontWeight: 400, fontSize: 13 }}>{c.ko}</span></span>
              <span className="r">{c.role}</span>
            </span>
          </span>
        );
      })}
    </div>
  );
}

/* ---------------- Sidebar (used in 온보딩 단계 page) ---------------- */
function Sidebar({ activeId, onPick }) {
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <a href="./" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color: "inherit" }}>
          <div className="sb-mark">M</div>
          <div className="sb-brand-text">
            <div className="sb-brand-name">MISO 온보딩</div>
            <div className="sb-brand-sub">홈으로 ← · v1.0</div>
          </div>
        </a>
      </div>

      <div className="sb-section-title">온보딩 단계</div>
      <nav className="sb-steps">
        {STEPS.map((s, i) => (
          <button
            key={s.id}
            className={"sb-step" + (s.id === activeId ? " active" : "")}
            onClick={() => onPick(s.id)}
          >
            <div className="sb-step-rail">
              <div className="sb-step-num">{String(s.id).padStart(2, "0")}</div>
              {i < STEPS.length - 1 && <div className="sb-step-line" />}
            </div>
            <div className="sb-step-body">
              <div className="sb-step-label">{s.short}</div>
              <div className="sb-step-name">{s.name}</div>
              <div className="sb-step-meta">
                {s.owners.map(o => <CrewBadge key={o} id={o} />)}
                <span style={{ color: "var(--ink-300)" }}>·</span>
                <span>{s.groups.reduce((sum, g) => sum + g.items.length, 0)} 항목</span>
              </div>
            </div>
          </button>
        ))}
      </nav>

      <div className="sb-foot">
        <div className="sb-foot-dot" />
        <div className="sb-foot-text">전담 크루 <strong>5명</strong>이 함께합니다</div>
      </div>
    </aside>
  );
}

/* ---------------- "온보딩이란?" 모달 ---------------- */
function WhatIsModal({ open, onClose }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape" && open) onClose(); }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <>
      <div className={"sheet-overlay" + (open ? " open" : "")} onClick={onClose} />
      <div className={"whatis-modal" + (open ? " open" : "")} role="dialog" aria-label="온보딩이란?">
        <button className="sheet-close" onClick={onClose} aria-label="닫기" style={{ position: "absolute", top: 18, right: 18 }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 3 L11 11 M11 3 L3 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          </svg>
        </button>

        <div style={{ padding: "44px 44px 36px", maxHeight: "85vh", overflowY: "auto" }}>
          <div className="hero-eyebrow"><span className="pulse" />MISO 온보딩이란?</div>
          <h2 style={{ fontSize: 30, lineHeight: 1.2, marginTop: 16, letterSpacing: "-0.02em", textWrap: "balance" }}>
            <em style={{ color: "var(--miso)" }}>퍼스트 펭귄</em>이 얼음을 깨고 뛰어들기까지,<br />
            우리가 함께 항해하는 약 한 달의 시간.
          </h2>
          <p style={{ fontSize: 15, color: "var(--ink-600)", marginTop: 16, lineHeight: 1.6, textWrap: "pretty" }}>
            <strong>MISO 온보딩</strong>은 단순한 계정 셋업이 아닙니다. 도입을 책임지는 PO가 <em style={{ color: "var(--miso)" }}>혼자 헤매지 않도록</em>, 계약부터 직원이 자연스럽게 쓰기 시작하는 그날까지 7단계로 함께 설계된 여정입니다.
          </p>

          <div className="whatis-grid">
            <div className="whatis-item">
              <div className="whatis-num">01</div>
              <div className="whatis-title">3주 안에 첫 로그인</div>
              <div className="whatis-desc">계약일부터 우리 회사 직원이 처음 MISO에 접속하기까지의 목표 시간.</div>
            </div>
            <div className="whatis-item">
              <div className="whatis-num">02</div>
              <div className="whatis-title">5명의 전담 크루</div>
              <div className="whatis-desc">Sales · Onboarding · Tech · Solution · Education — 단계마다 담당이 명확합니다.</div>
            </div>
            <div className="whatis-item">
              <div className="whatis-num">03</div>
              <div className="whatis-title">퍼스트 펭귄과의 런칭</div>
              <div className="whatis-desc">퍼스트 펭귄들이 동료에게 자랑할 만한 첫 경험을 만드는 자리.</div>
            </div>
            <div className="whatis-item">
              <div className="whatis-num">04</div>
              <div className="whatis-title">Week 8 회고</div>
              <div className="whatis-desc">사용량 데이터로 정착 여부를 함께 확인하고 다음을 설계합니다.</div>
            </div>
          </div>

          <div style={{ marginTop: 28, padding: "18px 22px", background: "linear-gradient(180deg, #FCFAFF, #F8F3FF)", border: "1px solid var(--miso-100)", borderRadius: "var(--r-lg)", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ fontSize: 22 }}>🐧</div>
            <div style={{ fontSize: 13.5, color: "var(--ink-700)", lineHeight: 1.5 }}>
              <strong>퍼스트 펭귄</strong> — 펭귄 무리를 움직이기 위해서는 처음 얼음 위에서 뛰어내리는 펭귄 한 마리(=퍼스트 펭귄)가 필요합니다. MISO 정착도 똑같아요.
            </div>
          </div>

          <div style={{ marginTop: 28, display: "flex", gap: 10, justifyContent: "flex-end" }}>
            <button className="btn-secondary" onClick={onClose}>닫기</button>
            <a className="btn-primary" href="journey.html">온보딩 단계 보기 →</a>
          </div>
        </div>
      </div>
    </>
  );
}

window.MISOComponents = { CrewBadge, CrewWithTooltip, CrewBlock, Sidebar, WhatIsModal };