// OLLYMEN Store OS — Mobile Closing Checklist
const { useState: useStateMob } = React;

function MobileClosing() {
  const D = window.DATA;
  const [done, setDone] = useStateMob(new Set(["c1", "c2", "c3", "c4", "c5", "c7", "c8", "c10"]));
  const [submitted, setSubmitted] = useStateMob(false);

  const toggle = id => {
    const n = new Set(done);
    if (n.has(id)) n.delete(id); else n.add(id);
    setDone(n);
  };
  const pct = Math.round((done.size / D.closing.length) * 100);
  const allDone = done.size === D.closing.length;

  const groups = ["마감 영업", "재고 / 보관", "위생", "안전", "정산", "증빙"];

  return (
    <div className="page" style={{ background: "var(--bg-2)" }}>
      <div className="page-head">
        <div>
          <div className="page-h1">마감 체크리스트</div>
          <div className="page-sub">현장 직원이 사용하는 모바일 화면 · 두 가지 폼팩터 미리보기</div>
        </div>
        <div className="page-right">
          <button className="tb-btn">{I.phone()} QR로 직원 전송</button>
          <button className="tb-btn">{I.copy()} 강남 기준 복제</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "auto 1fr", gap: 30, alignItems: "flex-start" }}>
        {/* Phone live */}
        <div className="rise d1" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <div className="phone">
            <div className="screen">
              <div className="notch"></div>
              <div className="status">
                <span>22:48</span>
                <span style={{ display: "flex", alignItems: "center", gap: 6 }}>{I.signal()} {I.wifi()} {I.battery()}</span>
              </div>
              {!submitted ? (
                <>
                  <div style={{ padding: "6px 18px 0" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <div className="avatar olive sm">정수</div>
                      <div style={{ flex: 1 }}>
                        <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>강남 · GN-01 · 점장</div>
                        <div style={{ fontWeight: 650, fontSize: 14 }}>정수민 · 마감 근무</div>
                      </div>
                      <button className="iconbtn">{I.dots()}</button>
                    </div>
                    <div style={{ fontSize: 18, fontWeight: 650, marginTop: 10, letterSpacing: "-0.01em" }}>오늘의 마감 체크</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>5/25 (월) · 라스트오더 21:00 / 마감 21:30</div>

                    <div style={{
                      marginTop: 12, padding: "12px 14px", borderRadius: 12,
                      background: pct === 100 ? "var(--olive-wash)" : "var(--surface)",
                      border: `1px solid ${pct === 100 ? "oklch(0.85 0.04 115)" : "var(--line)"}`,
                      display: "flex", alignItems: "center", gap: 12,
                    }}>
                      <div style={{ flex: 1 }}>
                        <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>진행률</div>
                        <div style={{ marginTop: 6 }}><Bar value={pct} color={pct === 100 ? "olive" : "ramen"} tall /></div>
                        <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 6 }}>{done.size} / {D.closing.length} 완료 · 평균 28분 소요</div>
                      </div>
                      <div className="tnum" style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 700, color: pct === 100 ? "var(--olive-ink)" : "var(--ramen-ink)" }}>
                        {pct}<span style={{ fontSize: 12 }}>%</span>
                      </div>
                    </div>
                  </div>

                  <div style={{ padding: "10px 14px 0", flex: 1, overflow: "auto" }}>
                    {groups.map(g => {
                      const items = D.closing.filter(c => c.group === g);
                      return (
                        <div key={g} style={{ marginBottom: 8 }}>
                          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".09em", textTransform: "uppercase", padding: "8px 4px 4px" }}>{g}</div>
                          {items.map(c => {
                            const isDone = done.has(c.id);
                            return (
                              <button
                                key={c.id}
                                onClick={() => toggle(c.id)}
                                style={{
                                  width: "100%", textAlign: "left",
                                  display: "flex", alignItems: "center", gap: 12,
                                  padding: "12px 12px",
                                  border: "1px solid var(--line-soft)",
                                  borderRadius: 10,
                                  background: isDone ? "var(--olive-wash)" : "var(--surface)",
                                  marginBottom: 6,
                                  transition: "background .15s",
                                }}
                              >
                                <Check checked={isDone} size={22} onClick={(e) => { e.stopPropagation && e.stopPropagation(); toggle(c.id); }} />
                                <div style={{ flex: 1 }}>
                                  <div style={{ fontSize: 13.5, fontWeight: 600, color: isDone ? "var(--olive-ink)" : "var(--ink)", textDecoration: isDone ? "line-through" : "none", textDecorationColor: "oklch(0.65 0.07 115)" }}>{c.title}</div>
                                  <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 1 }}>{c.hint}</div>
                                </div>
                                {c.id === "c12" && (
                                  <span className="mono" style={{ fontSize: 10, color: "var(--ramen)", background: "var(--ramen-wash)", padding: "2px 5px", borderRadius: 4 }}>사진</span>
                                )}
                              </button>
                            );
                          })}
                        </div>
                      );
                    })}

                    {/* Photo upload tiles */}
                    <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".09em", textTransform: "uppercase", padding: "8px 4px 4px" }}>마감 사진 4컷</div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginBottom: 12 }}>
                      {["주방", "홀", "냉장고", "POS"].map((l, i) => (
                        <div key={l} style={{
                          aspectRatio: "4/3", borderRadius: 8,
                          background: `repeating-linear-gradient(${30 + i * 20}deg, oklch(0.86 0.02 60) 0 6px, oklch(0.93 0.012 70) 6px 12px)`,
                          border: "1px solid var(--line)",
                          display: "grid", placeItems: "center",
                          fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-2)",
                          position: "relative",
                        }}>
                          <span style={{ background: "oklch(1 0 0 / 0.85)", padding: "2px 7px", borderRadius: 4 }}>{l}</span>
                          <span style={{ position: "absolute", bottom: 6, right: 6 }}>{I.cam()}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div style={{ padding: 14, borderTop: "1px solid var(--line)", background: "var(--surface)" }}>
                    <button
                      className="btn lg block"
                      style={{
                        background: allDone ? "var(--ramen)" : "var(--surface)",
                        color: allDone ? "oklch(0.98 0.01 60)" : "var(--muted)",
                        border: allDone ? "1px solid oklch(0.36 0.13 27)" : "1px solid var(--line)",
                        fontWeight: 700, fontSize: 15, height: 50, borderRadius: 12,
                      }}
                      disabled={!allDone}
                      onClick={() => setSubmitted(true)}
                    >
                      {allDone ? <>관리자에게 전송 {I.arrow()}</> : `남은 ${D.closing.length - done.size}개 완료 시 전송 가능`}
                    </button>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", textAlign: "center", marginTop: 8 }}>
                      전송 시 사진 4컷과 함께 점장에게 알림이 전달됩니다.
                    </div>
                  </div>
                </>
              ) : (
                <SubmittedScreen onReset={() => { setSubmitted(false); setDone(new Set()); }} />
              )}
            </div>
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>iPhone 14 · 393×852</div>
        </div>

        {/* Right — admin perspective (desk view; hidden on mobile) */}
        <div className="col rise d2 hide-on-mobile" style={{ gap: 16 }}>
          <div className="card">
            <CardHead title="마감 체크 표준" sub="강남 기준 · 신규 매장에 복제 시 자동 적용" right={<button className="btn sm">{I.copy()} 신규 매장 복제</button>} />
            <div className="card-b">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                {groups.map(g => {
                  const items = D.closing.filter(c => c.group === g);
                  return (
                    <div key={g} style={{ padding: 12, border: "1px solid var(--line)", borderRadius: 10, background: "var(--surface-2)" }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                        <span style={{ fontWeight: 650, fontSize: 13 }}>{g}</span>
                        <span className="mono" style={{ marginLeft: "auto", fontSize: 11, color: "var(--muted)" }}>{items.length}</span>
                      </div>
                      {items.map(it => (
                        <div key={it.id} style={{ fontSize: 12, color: "var(--ink-2)", padding: "3px 0" }}>· {it.title}</div>
                      ))}
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="card-f">
              <span>매장별 차이 없음 · 표준 12항목 + 사진 4컷</span>
              <div className="spacer"></div>
              <button className="btn sm ghost">항목 편집</button>
            </div>
          </div>

          <div className="card">
            <CardHead title="이번 주 마감 이력" sub="강남점 · 7일치" />
            <div className="card-b">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>날짜</th><th>마감자</th><th>완료</th><th>완료시각</th><th>사진</th><th>관리자</th><th></th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { d: "5/25 (월)", who: "정수민", pct: 92, t: "23:04", ph: "4/4", ok: false },
                    { d: "5/24 (일)", who: "—", pct: 0, t: "—", ph: "—", ok: false, holiday: true },
                    { d: "5/23 (토)", who: "—", pct: 0, t: "—", ph: "—", ok: false, holiday: true },
                    { d: "5/22 (금)", who: "최유나", pct: 100, t: "22:51", ph: "4/4", ok: true },
                    { d: "5/21 (목)", who: "정수민", pct: 100, t: "22:46", ph: "4/4", ok: true },
                    { d: "5/20 (수)", who: "정수민", pct: 92, t: "23:12", ph: "3/4", ok: true },
                    { d: "5/19 (화)", who: "최유나", pct: 100, t: "22:38", ph: "4/4", ok: true },
                  ].map((r, i) => (
                    <tr key={i}>
                      <td className="mono" style={{ fontWeight: 600 }}>{r.d}</td>
                      <td>{r.holiday ? <span className="muted">정기휴무</span> : r.who}</td>
                      <td>{r.holiday ? <span className="muted">—</span> : <span className="mono tnum" style={{ color: r.pct === 100 ? "var(--olive-ink)" : "var(--ramen-ink)", fontWeight: 600 }}>{r.pct}%</span>}</td>
                      <td className="mono">{r.t}</td>
                      <td className="mono">{r.ph}</td>
                      <td>{r.holiday ? <span className="muted">—</span> : r.ok ? <span className="pill ok">{I.check()} 승인</span> : <span className="pill warn">검토 중</span>}</td>
                      <td><button className="iconbtn">{I.dots()}</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SubmittedScreen({ onReset }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center" }}>
      <div style={{
        width: 72, height: 72, borderRadius: 36,
        background: "var(--olive-wash)",
        display: "grid", placeItems: "center",
        color: "var(--olive-ink)",
        boxShadow: "0 0 0 8px oklch(0.92 0.04 115)",
        marginBottom: 22,
      }}>
        <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></svg>
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em" }}>관리자에게 전송됨</div>
      <div className="muted" style={{ fontSize: 13, marginTop: 6, maxWidth: 220 }}>정수민 점장에게 알림이 전달되었습니다. 사진 4컷이 함께 첨부되었습니다.</div>
      <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 18 }}>5/25 (월) 23:04 · 12 / 12 완료</div>
      <button className="btn lg" style={{ marginTop: 28 }} onClick={onReset}>다시 시작</button>
    </div>
  );
}

window.MobileClosing = MobileClosing;