// OLLYMEN Store OS — Staff Onboarding
const { useState: useStateOn } = React;

function StaffOnboarding() {
  const D = window.DATA;
  const [pickId, setPick] = useStateOn("s2");
  const pick = D.staff.find(s => s.id === pickId);
  const completed = D.onboardingModules.filter(m => m.done).length;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-h1">직원 온보딩</div>
          <div className="page-sub">{D.staff.length}명 등록 · 진행 4명 · 완료 3명 · 평균 진행률 <strong>68%</strong></div>
        </div>
        <div className="page-right">
          <button className="tb-btn">{I.copy()} 강남 커리큘럼 복제</button>
          <button className="btn primary">{I.plus()} 신규 직원 등록</button>
        </div>
      </div>

      <div className="grid onboard-grid" style={{ gridTemplateColumns: "320px 1fr", gap: 16 }}>
        {/* LEFT — staff list */}
        <div className="card rise d1">
          <div style={{ padding: "12px 14px 8px" }}>
            <Tabs items={[
              { id: "all", label: "전체", count: D.staff.length },
              { id: "doing", label: "진행 중", count: 4 },
              { id: "done", label: "완료", count: 3 },
            ]} active="doing" onChange={() => {}} />
          </div>
          <div style={{ padding: 6, display: "flex", flexDirection: "column", gap: 4 }}>
            {D.staff.map(s => {
              const active = s.id === pickId;
              return (
                <button key={s.id} onClick={() => setPick(s.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 10,
                    padding: "10px 10px",
                    borderRadius: 8,
                    background: active ? "var(--surface-2)" : "transparent",
                    border: active ? "1px solid var(--line)" : "1px solid transparent",
                    textAlign: "left",
                  }}>
                  <div className={`avatar sm ${s.role === "점장" ? "olive" : ""}`}>{s.name.slice(0, 2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{s.name}</span>
                      {s.role === "점장" && <span className="chip olive" style={{ fontSize: 10 }}>점장</span>}
                    </div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{s.store} · {s.role} · 입사 {s.joined}</div>
                    <div style={{ marginTop: 5 }}><Bar value={s.progress} color={s.progress === 100 ? "success" : "ramen"} /></div>
                  </div>
                  <span className="mono tnum" style={{ fontSize: 12, fontWeight: 600, color: s.progress === 100 ? "var(--success)" : "var(--ramen-ink)" }}>{s.progress}%</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* RIGHT — staff detail */}
        <div className="col rise d2" style={{ gap: 16 }}>
          {/* header card */}
          <div className="card" style={{ padding: 18, display: "flex", gap: 18, alignItems: "center" }}>
            <div className="avatar lg" style={{ width: 56, height: 56, fontSize: 18 }}>{pick.name.slice(0, 2)}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ fontSize: 18, fontWeight: 650, letterSpacing: "-0.01em" }}>{pick.name}</span>
                <span className="badge opening" style={{ fontSize: 11 }}>온보딩 진행 중</span>
                <span className="mono" style={{ marginLeft: 8, fontSize: 11, color: "var(--muted)" }}>STAFF-{pick.id.toUpperCase()}</span>
              </div>
              <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>
                {pick.store} · {pick.role} · 입사 {pick.joined} · 멘토 한지우 점장
              </div>
              <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 16 }}>
                <div style={{ minWidth: 200 }}>
                  <Bar value={pick.progress} color="ramen" tall />
                </div>
                <span className="mono tnum" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>{pick.progress}<span style={{ fontSize: 12, color: "var(--muted)" }}>%</span></span>
                <span className="muted mono" style={{ fontSize: 12 }}>{completed} / 12 모듈 · 예상 완료 D+4</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn">멘토 메모</button>
              <button className="btn primary">점장 평가</button>
            </div>
          </div>

          {/* Curriculum grid */}
          <div className="card">
            <CardHead
              title="OLLYMEN 운영 매뉴얼 · 12 모듈"
              sub="강남점 기준 · 신규 매장에 그대로 복제됩니다"
              right={<span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>총 {sumMin(D.onboardingModules)}분</span>}
            />
            <div className="card-b">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
                {D.onboardingModules.map((m, i) => (
                  <div key={m.id} style={{
                    padding: 12,
                    border: "1px solid var(--line)",
                    borderRadius: 10,
                    background: m.done ? "var(--olive-wash)" : "var(--surface)",
                    borderColor: m.done ? "oklch(0.85 0.04 115)" : "var(--line)",
                    display: "flex", gap: 12, alignItems: "flex-start",
                  }}>
                    <div style={{
                      width: 32, height: 32, borderRadius: 8,
                      background: m.done ? "var(--olive)" : "var(--surface-3)",
                      color: m.done ? "oklch(0.98 0.01 100)" : "var(--ink-2)",
                      display: "grid", placeItems: "center",
                      fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 12,
                      flex: "none",
                    }}>{String(i + 1).padStart(2, "0")}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{ fontWeight: 650, fontSize: 13 }}>{m.title}</span>
                        {m.done && <span className="pill ok" style={{ fontSize: 10 }}>{I.check()} 완료</span>}
                      </div>
                      <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{m.sub}</div>
                      <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "var(--muted)" }}>
                        <span className="mono">{m.est}</span>
                        <span>·</span>
                        <span>{moduleKind(i)}</span>
                        {!m.done && <span className="mono" style={{ marginLeft: "auto", color: "var(--ramen-ink)" }}>이어서 시작 →</span>}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="card-f">
              <span>{completed} / 12 완료 · 다음 모듈: <strong>브레이크타임 운영</strong></span>
              <div className="spacer"></div>
              <button className="btn sm primary">점장 확인 요청</button>
            </div>
          </div>

          {/* Knowledge card */}
          <div className="grid g-2">
            <div className="card">
              <CardHead title="브랜드 이해 · 핵심 메시지" />
              <div className="card-b" style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13, lineHeight: 1.55 }}>
                <KnowledgeRow n="01" t="콘셉트" v="조개육수의 시원함 + 닭육수의 깊이 + 올리브오일의 깔끔함" />
                <KnowledgeRow n="02" t="포지셔닝" v="도심 직장인을 위한 현대식 라멘 · 파스타처럼 가볍게" />
                <KnowledgeRow n="03" t="시그니처" v="올리멘 — 두 육수 블렌딩 + Frantoio 올리브오일" />
                <KnowledgeRow n="04" t="응대 멘트" v="“올리멘은 올리브오일 풍미가 살아 있어, 천천히 드시면서 향을 느껴 보세요.”" />
              </div>
            </div>
            <div className="card">
              <CardHead title="필드 평가 · 점장 확인" sub="모듈별 1회 평가 후 완료 처리" />
              <div className="card-b">
                <table className="tbl">
                  <tbody>
                    {[
                      { k: "브랜드 이해", who: "한지우", d: "5/13", s: "ok" },
                      { k: "대표 메뉴 5종", who: "한지우", d: "5/15", s: "ok" },
                      { k: "기본 응대", who: "한지우", d: "5/18", s: "ok" },
                      { k: "출근 준비", who: "한지우", d: "5/20", s: "ok" },
                      { k: "브레이크 운영", who: "—", d: "—", s: "todo" },
                      { k: "주문 흐름", who: "—", d: "—", s: "todo" },
                    ].map((r, i) => (
                      <tr key={i}>
                        <td style={{ fontWeight: 600, fontSize: 12.5 }}>{r.k}</td>
                        <td className="mono" style={{ fontSize: 12 }}>{r.who}</td>
                        <td className="mono" style={{ fontSize: 12, color: "var(--muted)" }}>{r.d}</td>
                        <td style={{ textAlign: "right" }}>
                          {r.s === "ok" ? <span className="pill ok">{I.check()} 통과</span> : <span className="pill warn">대기</span>}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function KnowledgeRow({ n, t, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "30px 90px 1fr", gap: 10, alignItems: "flex-start" }}>
      <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{n}</span>
      <span className="muted" style={{ fontSize: 12 }}>{t}</span>
      <span style={{ fontSize: 13 }}>{v}</span>
    </div>
  );
}

function moduleKind(i) {
  return ["브랜드", "메뉴", "응대", "준비", "운영", "POS", "주방", "사이드", "운영", "위생", "마감", "평가"][i] || "—";
}
function sumMin(mods) {
  return mods.reduce((acc, m) => acc + (parseInt(m.est) || 0), 0);
}

window.StaffOnboarding = StaffOnboarding;