// OLLYMEN Store OS — Store Operations (운영일지)
const { useState: useStateOps, useMemo: useMemoOps } = React;

function StoreOperations() {
  const D = window.DATA;
  const store = D.stores[0];

  // offset relative to today (0 = today, -1 = yesterday, ...). Forward limited to 0.
  const [offset, setOffset] = useStateOps(0);
  const day = useMemoOps(() => window.dayData(offset), [offset]);
  const [submitted, setSubmitted] = useStateOps(false);

  // Reset submitted state when navigating
  React.useEffect(() => { setSubmitted(false); }, [offset]);

  const canForward = offset < 0;

  // Holiday view if Sat/Sun
  if (day.isWeekend) {
    return <HolidayDay store={store} day={day} offset={offset} setOffset={setOffset} canForward={canForward} />;
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>{store.tag} · 운영일지</span>
            <StatusBadge kind="live" />
            <span className="chip" style={{ background: day.isToday ? "var(--ramen-wash)" : "var(--surface-2)", color: day.isToday ? "var(--ramen-ink)" : "var(--ink-2)", borderColor: day.isToday ? "oklch(0.86 0.04 30)" : "var(--line)" }}>{day.relative}</span>
          </div>
          <div className="page-h1">{store.name}</div>
          <div className="page-sub">
            <span className="mono">{day.label}</span> · 근무자 {day.staff.length}명 · 점장 {store.manager}
          </div>
        </div>
        <div className="page-right">
          <button className="tb-btn" onClick={() => setOffset(o => o - 1)}>{I.chev()} 이전 날짜</button>
          <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)", padding: "0 6px" }}>{day.label}</span>
          <button className="tb-btn" disabled={!canForward} onClick={() => setOffset(o => Math.min(0, o + 1))} style={{ opacity: canForward ? 1 : 0.4, cursor: canForward ? "pointer" : "not-allowed" }}>다음 {I.chev()}</button>
          {offset !== 0 && <button className="tb-btn" onClick={() => setOffset(0)}>{I.refresh()} 오늘로</button>}
          <button className="btn">{I.copy()} 어제 기준 복제</button>
          <button className="btn primary" onClick={() => setSubmitted(true)} disabled={submitted || !day.isToday}>
            {submitted ? <>{I.check()} 관리자 확인 요청 전송됨</> : day.isToday ? <>관리자 확인 요청</> : <>{I.check()} 확인 완료</>}
          </button>
        </div>
      </div>

      {/* Operating context strip */}
      <div className="card rise d1" style={{ marginBottom: 16 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", padding: "12px 0" }}>
          <CtxCell k="오픈" v="11:00" />
          <CtxCell k="런치 라스트" v="14:30" />
          <CtxCell k="브레이크" v="15:00–17:00" />
          <CtxCell k="디너 오픈" v="17:00" />
          <CtxCell k="디너 라스트" v="21:00" />
          <CtxCell k="마감" v="21:30" last />
        </div>
      </div>

      {/* Main grid */}
      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        {/* LEFT — activity log */}
        <div className="col" style={{ gap: 16 }}>
          <div className="card rise d2" key={`log-${day.iso}`}>
            <CardHead
              title={`운영 로그 · ${day.relative}`}
              sub={day.isToday ? "실시간 activity log · 점장이 코멘트 추가" : `${day.label} 마감 보고 · 확정`}
              right={
                <div style={{ display: "flex", gap: 8 }}>
                  <button className="tb-btn">{I.filter()} 카테고리</button>
                  {day.isToday && <button className="btn sm primary">{I.plus()} 기록 추가</button>}
                </div>
              }
            />
            <div className="card-b">
              {day.log.map(l => (
                <div className="act" key={l.id}>
                  <div className="when">{l.when}</div>
                  <div className="rail">
                    <div className={`nd ${l.kind === "issue" ? "warn" : l.kind === "peak" ? "ramen" : "olive"}`}></div>
                  </div>
                  <div className="body">
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span className="t">{l.title}</span>
                      <span className="badge neutral">{kindLabel(l.kind)}</span>
                      {l.chips && l.chips.map((c, j) => <span key={j} className="chip">{c}</span>)}
                    </div>
                    <div className="m">{l.body}</div>
                  </div>
                  <button className="iconbtn">{I.dots()}</button>
                </div>
              ))}
            </div>
            <div className="card-f">
              <span className="mono">총 {day.log.length}건</span> · 마지막 기록 {day.log[day.log.length - 1].when}
              <div className="spacer"></div>
              <button className="btn sm ghost">로그 내보내기</button>
            </div>
          </div>

          {/* Peak status block */}
          <div className="grid g-2 rise d3" key={`peak-${day.iso}`}>
            <PeakCard label="점심 피크" time={day.peak.lunch.time} status={day.peak.lunch.status} data={[
              ["객수", `${day.peak.lunch.covers}명`],
              ["회전", `${day.peak.lunch.turn}회`],
              ["평균 대기", `${day.peak.lunch.wait}분`],
              ["만석 시간", `${day.peak.lunch.fullMin}분`],
            ]} top={day.peak.lunch.top} />
            <PeakCard label="저녁 피크" time={day.peak.dinner.time} status={day.peak.dinner.status} data={[
              ["객수", `${day.peak.dinner.covers}명`],
              ["회전", `${day.peak.dinner.turn}회`],
              ["평균 대기", `${day.peak.dinner.wait}분`],
              ["만석 시간", day.peak.dinner.fullMin],
            ]} top={day.peak.dinner.top} />
          </div>

          {/* Issue / clean forms */}
          <div className="card rise d4" key={`form-${day.iso}`}>
            <CardHead title="이슈 · 코멘트 · 내일 준비" sub="필요한 항목만 채워주세요. 빈 항목은 '특이사항 없음' 처리됩니다." />
            <div className="card-b" style={{ display: "grid", gap: 14 }}>
              <FormRow label="고객 클레임" tone={day.reviews.some(r => r.chips && r.chips.includes("중립")) ? "warn" : "ok"}
                value={day.reviews.map(r => r.body).join(" · ") || "특이사항 없음"} />
              <FormRow label="직원 이슈" tone="ok" value="특이사항 없음" />
              <FormRow
                label="장비 문제"
                tone={day.issues.some(i => i.kind === "issue") ? "warn" : "ok"}
                value={day.issues.filter(i => i.kind === "issue").map(i => i.body).join(" / ") || "특이사항 없음"}
              />
              <FormRow label="내일 준비" tone="ramen" value={day.tomorrowPrep} />
            </div>
          </div>
        </div>

        {/* RIGHT — meta & attachments */}
        <div className="col" style={{ gap: 16 }}>
          <div className="card rise d2" key={`staff-${day.iso}`}>
            <CardHead title="근무자" sub={`${day.staff.length}명 · 교대 정상`} />
            <div className="card-b" style={{ paddingTop: 4 }}>
              {day.staff.map((s, i) => (
                <div key={s.n} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: i < day.staff.length - 1 ? "1px dashed var(--line-soft)" : 0 }}>
                  <div className="avatar sm">{s.i}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{s.n} <span className="muted" style={{ fontWeight: 400, fontSize: 12 }}>· {s.r}</span></div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{s.shift}</div>
                  </div>
                  <span className="pill ok">출근</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card rise d3" key={`menu-${day.iso}`}>
            <CardHead title={`인기 메뉴 · ${day.relative}`} sub={`POS 연동 · ${day.label}`} />
            <div className="card-b" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {day.menuRanking.map((name, i) => {
                const count = parseInt(day.lunchTop[i % day.lunchTop.length].split("×")[1]) || (20 - i * 4);
                const w = ((count / 48) * 100) || 30;
                return (
                  <div key={name} style={{ display: "grid", gridTemplateColumns: "20px 1fr 50px", gap: 10, alignItems: "center" }}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>#{i+1}</span>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{name}</div>
                      <div style={{ marginTop: 4 }}><Bar value={Math.min(100, w * (1 + (4 - i) * 0.1))} color={i === 0 ? "ramen" : "olive"} /></div>
                    </div>
                    <span className="mono tnum" style={{ textAlign: "right", fontWeight: 600 }}>{count}</span>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card rise d4" key={`photos-${day.iso}`}>
            <CardHead title="사진 첨부" sub={`${day.relative} · 런치/디너/마감 자동 분류`} right={<button className="tb-btn">{I.upload()} 업로드</button>} />
            <div className="card-b">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                {day.photos.map((l, i) => (
                  <div key={i} style={{
                    aspectRatio: "4/3",
                    borderRadius: 8,
                    background: `repeating-linear-gradient(${30 + i * 20 + (Math.abs(offset) * 9)}deg, oklch(0.86 0.02 60) 0 6px, oklch(0.93 0.012 70) 6px 12px)`,
                    border: "1px solid var(--line)",
                    padding: 6, display: "grid", placeItems: "end start",
                    fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted)",
                  }}>
                    <span style={{ background: "oklch(1 0 0 / 0.85)", padding: "1px 5px", borderRadius: 4 }}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Closing summary for past days */}
          {!day.isToday && (
            <div className="card rise d5" key={`closing-${day.iso}`}>
              <CardHead title="마감 보고" sub={`${day.label} · 확정`} />
              <div className="card-b">
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
                  <div style={{ flex: 1 }}>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>마감 체크</div>
                    <div style={{ marginTop: 4 }}><Bar value={day.closingPct} color={day.closingPct === 100 ? "success" : "olive"} tall /></div>
                  </div>
                  <span className="mono tnum" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, color: day.closingPct === 100 ? "var(--success)" : "var(--olive-ink)" }}>{day.closingPct}<span style={{ fontSize: 11 }}>%</span></span>
                </div>
                <div className="mono" style={{ fontSize: 11.5, color: "var(--muted)" }}>마감자: {day.staff[0]?.n || "—"} · 사진 4/4 · 관리자 승인</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function HolidayDay({ store, day, offset, setOffset, canForward }) {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>{store.tag} · 운영일지</span>
            <StatusBadge kind="live" />
            <span className="chip">{day.relative}</span>
          </div>
          <div className="page-h1">{store.name}</div>
          <div className="page-sub"><span className="mono">{day.label}</span> · {day.weekday}</div>
        </div>
        <div className="page-right">
          <button className="tb-btn" onClick={() => setOffset(o => o - 1)}>{I.chev()} 이전 날짜</button>
          <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)", padding: "0 6px" }}>{day.label}</span>
          <button className="tb-btn" disabled={!canForward} onClick={() => setOffset(o => Math.min(0, o + 1))} style={{ opacity: canForward ? 1 : 0.4 }}>다음 {I.chev()}</button>
          {offset !== 0 && <button className="tb-btn" onClick={() => setOffset(0)}>{I.refresh()} 오늘로</button>}
        </div>
      </div>

      <div className="card rise d1" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{
          padding: "60px 40px",
          background:
            `repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-2) 14px 28px)`,
          textAlign: "center",
        }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".10em" }}>STORE CLOSED</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 650, letterSpacing: "-0.02em", marginTop: 8 }}>정기휴무</div>
          <div className="muted" style={{ fontSize: 14, marginTop: 6 }}>토 · 일은 영업하지 않습니다. 다음 영업일은 월요일 11:00 오픈입니다.</div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 8 }}>
            <button className="btn" onClick={() => setOffset(o => o - 1)}>{I.chev()} 이전 영업일 보기</button>
            <button className="btn" onClick={() => setOffset(0)}>오늘로 돌아가기</button>
          </div>
        </div>
      </div>

      <div className="grid g-3" style={{ marginTop: 16 }}>
        <div className="card"><div className="card-b">
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>이전 영업일</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 4 }}>{day.weekday === "일요일" ? "금요일" : "금요일"}</div>
          <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>마감 체크 100% · 객수 142명</div>
        </div></div>
        <div className="card"><div className="card-b">
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>다음 영업일</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 4 }}>월요일</div>
          <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>예약 6팀(12명) 확인됨</div>
        </div></div>
        <div className="card"><div className="card-b">
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>주말 작업</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, marginTop: 4 }}>육수 라인 청소</div>
          <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>토요일 10:00 · 정수민 점장</div>
        </div></div>
      </div>
    </div>
  );
}

function kindLabel(k) {
  return { peak: "피크", review: "고객", stock: "재고", break: "운영", open: "운영", issue: "이슈" }[k] || k;
}

function CtxCell({ k, v, last }) {
  return (
    <div style={{ padding: "0 16px", borderRight: last ? 0 : "1px solid var(--line-soft)" }}>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".07em", textTransform: "uppercase" }}>{k}</div>
      <div className="mono tnum" style={{ fontSize: 16, fontWeight: 600, marginTop: 3 }}>{v}</div>
    </div>
  );
}

function PeakCard({ label, time, status, data, top }) {
  return (
    <div className="card">
      <div className="card-h">
        <div>
          <div className="t" style={{ display: "flex", alignItems: "center", gap: 8 }}>
            {label}
            <span className={`pill ${status}`}>{status === "ok" ? "정상" : "진행 중"}</span>
          </div>
          <div className="sub mono" style={{ marginTop: 2 }}>{time}</div>
        </div>
      </div>
      <div className="card-b">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
          {data.map((d, i) => (
            <div key={i}>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>{d[0]}</div>
              <div className="tnum" style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, marginTop: 1 }}>{d[1]}</div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 10 }}>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 6 }}>인기 메뉴</div>
          <div className="chips">{top.map((t, i) => <span key={i} className={i === 0 ? "chip ramen" : "chip"}>{t}</span>)}</div>
        </div>
      </div>
    </div>
  );
}

function FormRow({ label, tone, value }) {
  const c = { ok: "ok", warn: "warn", ramen: "order" }[tone] || "";
  const tag = { ok: "정상", warn: "주의", ramen: "내일 작업" }[tone] || "—";
  return (
    <div style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 12, alignItems: "flex-start" }}>
      <div style={{ paddingTop: 8 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600 }}>{label}</div>
        <span className={`pill ${c}`} style={{ marginTop: 4 }}>{tag}</span>
      </div>
      <div style={{
        background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 8,
        padding: "8px 12px", fontSize: 13, lineHeight: 1.5,
      }}>{value}</div>
    </div>
  );
}

window.StoreOperations = StoreOperations;