// OLLYMEN Store OS — Weekly Report (Owner brief)
function WeeklyReport() {
  const D = window.DATA;

  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" }}>WEEK 21 · 2026.05.18 — 05.24</span>
            <span className="badge"><span className="dot"></span>대표 브리핑</span>
          </div>
          <div className="page-h1">이번 주 운영 브리핑</div>
          <div className="page-sub">30초 안에 확인 · 운영 중 1개 매장 · 오픈 준비 1개 매장 · 확인 필요 7건</div>
        </div>
        <div className="page-right">
          <button className="tb-btn">{I.chev()} W20</button>
          <span className="mono" style={{ fontSize: 12, padding: "0 6px" }}>W21</span>
          <button className="tb-btn">W22 {I.chev()}</button>
          <button className="btn">PDF 내보내기</button>
          <button className="btn primary">대표 승인</button>
        </div>
      </div>

      {/* Executive headline */}
      <div className="card rise d1" style={{
        padding: 22,
        marginBottom: 16,
        background: "linear-gradient(135deg, var(--surface) 0%, var(--ramen-wash) 200%)",
        border: "1px solid var(--line)",
      }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 20 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: "var(--ramen)", color: "oklch(0.98 0.01 60)",
            display: "grid", placeItems: "center",
            fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18,
          }}>W21</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 650, letterSpacing: "-0.015em" }}>
              강남점 운영은 정상. 서울역 POS 설치 지연 1건만 결재 필요합니다.
            </div>
            <div className="muted" style={{ fontSize: 13, marginTop: 6, lineHeight: 1.6 }}>
              강남점 마감 체크 평균 96%, 올리브오일 풍미 호평 누적 12건. 서울역 오픈 준비율 64%로 일정 내, POS 설치만 D+2 지연되어 본사 조율 필요합니다. 신규 직원 3명 평균 온보딩 47%로 위생/마감 모듈을 우선 진행 중입니다.
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end" }}>
            <span className="badge live"><span className="dot"></span>일정 내 정상</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>정수민 · 한지우 · 본사 작성</span>
          </div>
        </div>
      </div>

      {/* Row 1 — store closing + top menus + repeat stock */}
      <div className="grid rise d2" style={{ gridTemplateColumns: "1fr 1.1fr 1fr", gap: 16, marginBottom: 16 }}>
        <div className="card">
          <CardHead title="지점별 마감 체크 완료율" sub="이번 주 평균" />
          <div className="card-b">
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <StoreBar name="강남 빗썸금융타워점" pct={96} color="olive" sub="5영업일 / 평균 22:54 완료" />
              <StoreBar name="서울역그랜드점" pct={0} color="muted" sub="오픈 전 · D-18" badge="opening" />
              <StoreBar name="판교역점" pct={0} color="muted" sub="확장 후보 · 미운영" badge="scout" />
            </div>
          </div>
          <div className="card-f">
            <span>전사 평균 <strong className="mono">96%</strong> · 목표 <span className="mono">95%</span></span>
            <div className="spacer"></div>
            <span className="pill ok">목표 달성</span>
          </div>
        </div>

        <div className="card">
          <CardHead title="인기 메뉴 TOP 3" sub="강남점 · 5/18 – 5/24" />
          <div className="card-b">
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {D.weekly.topMenus.map((m, i) => (
                <div key={m.name}>
                  <div style={{ display: "flex", alignItems: "baseline", marginBottom: 6 }}>
                    <span className="mono" style={{ width: 24, color: "var(--muted)", fontSize: 11 }}>#{i + 1}</span>
                    <span style={{ fontWeight: 650, fontSize: 14 }}>{m.name}</span>
                    <span className="muted" style={{ marginLeft: 8, fontSize: 12 }}>{m.share}% 점유</span>
                    <span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>{m.sold}판매</span>
                  </div>
                  <Bar value={m.share * 2.5} color={i === 0 ? "ramen" : i === 1 ? "burnt" : "olive"} tall />
                </div>
              ))}
              <div className="divider"></div>
              <div className="row" style={{ fontSize: 12, color: "var(--muted)" }}>
                <span>총 판매</span>
                <span className="mono tnum" style={{ marginLeft: "auto", color: "var(--ink)", fontWeight: 600 }}>654판 · 8,820,500원</span>
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <CardHead title="반복 재고 이슈" sub="최근 14일 누적" />
          <div className="card-b">
            <table className="tbl">
              <tbody>
                {D.weekly.repeatStock.map((r, i) => (
                  <tr key={i}>
                    <td>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{r.name}</div>
                      <div className="muted" style={{ fontSize: 11.5 }}>마지막 발생 어제 · 강남</div>
                    </td>
                    <td style={{ textAlign: "right" }}>
                      <span className={`sev ${r.sev}`}>{r.sev.toUpperCase()}</span>
                    </td>
                    <td style={{ textAlign: "right", width: 56 }}>
                      <span className="mono tnum" style={{ fontWeight: 600 }}>{r.count}회</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="divider"></div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.55 }}>
              <strong>제안</strong>: 올리브오일 임계 6L → 8L 상향, Frantoio 발주 사이클 7일 → 5일로 단축.
            </div>
          </div>
        </div>
      </div>

      {/* Row 2 — onboarding + opening + 7 confirmations */}
      <div className="grid rise d3" style={{ gridTemplateColumns: "1fr 1fr 1.4fr", gap: 16, marginBottom: 16 }}>
        <div className="card">
          <CardHead title="직원 온보딩" sub="평균 진행률" />
          <div className="card-b" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <BigDonut pct={D.weekly.education} color="var(--ramen)" />
            <div style={{ flex: 1 }}>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>완료</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>3 / 7</span></div>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>진행</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>4 / 7</span></div>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>이번 주 신규</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>2명</span></div>
              <div className="divider"></div>
              <div style={{ fontSize: 12, color: "var(--ink-2)" }}>위생 / 마감 모듈 평균 52% — 보강 필요</div>
            </div>
          </div>
        </div>

        <div className="card">
          <CardHead title="서울역 오픈 준비율" sub="D-18" />
          <div className="card-b" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <BigDonut pct={D.weekly.opening} color="var(--burnt)" />
            <div style={{ flex: 1 }}>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>완료 마일스톤</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>11 / 17</span></div>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>지연</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600, color: "var(--danger)" }}>1건 · POS</span></div>
              <div className="row"><span className="muted" style={{ fontSize: 12 }}>이번 주 완료</span><span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600 }}>3건</span></div>
              <div className="divider"></div>
              <div style={{ fontSize: 12, color: "var(--ink-2)" }}>6/12 그랜드 오픈 일정 유지 가능</div>
            </div>
          </div>
        </div>

        <div className="card">
          <CardHead title="이번 주 관리자 확인 필요" sub="대표 결재 7건" right={<span className="mono" style={{ fontSize: 11, color: "var(--ramen-ink)", fontWeight: 600 }}>7</span>} />
          <div className="card-b" style={{ padding: 4 }}>
            <table className="tbl">
              <tbody>
                {[
                  { sev: "p1", t: "서울역 POS 설치 일정 재확정", who: "한지우", d: "5/24" },
                  { sev: "p1", t: "강남점 마감 사진 2건 승인", who: "정수민", d: "5/25" },
                  { sev: "p2", t: "올리브오일 임계 상향 결재", who: "본사", d: "5/26" },
                  { sev: "p2", t: "신규 직원 2명 위생 모듈 독려", who: "한지우", d: "5/26" },
                  { sev: "p2", t: "토마토 베이스 정기 발주 전환", who: "정수민", d: "5/27" },
                  { sev: "p3", t: "마라페스토 농도 +5% 테스트 결과 검토", who: "정수민", d: "5/29" },
                  { sev: "p3", t: "판교점 임대 협상 진행 결재", who: "본사", d: "6/01" },
                ].map((r, i) => (
                  <tr key={i}>
                    <td style={{ width: 36 }}><span className={`sev ${r.sev}`}>{r.sev.toUpperCase()}</span></td>
                    <td style={{ fontWeight: 600 }}>{r.t}</td>
                    <td className="mono" style={{ fontSize: 12, color: "var(--muted)", width: 70 }}>{r.who}</td>
                    <td className="mono" style={{ fontSize: 12, color: "var(--muted)", width: 50 }}>{r.d}</td>
                    <td style={{ width: 40, textAlign: "right" }}><button className="iconbtn">{I.chev()}</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Row 3 — store comments */}
      <div className="card rise d4">
        <CardHead title="지점별 코멘트 요약" sub="점장 보고 · 본사 의견" />
        <div className="card-b">
          <div className="grid g-2">
            {D.weekly.storeNotes.map((n, i) => (
              <div key={i} style={{
                padding: 14, borderRadius: 10,
                background: i === 0 ? "var(--olive-wash)" : "var(--burnt-wash)",
                border: `1px solid ${i === 0 ? "oklch(0.85 0.04 115)" : "oklch(0.85 0.05 60)"}`,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                  <div className={`avatar sm ${i === 0 ? "olive" : ""}`}>{n.who.slice(0, 2)}</div>
                  <div>
                    <div style={{ fontWeight: 650, fontSize: 13 }}>{n.who} · {n.store}점 점장</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>W21 요약 · 5/24 작성</div>
                  </div>
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.6, color: "var(--ink)" }}>"{n.note}"</div>
              </div>
            ))}
          </div>
        </div>
        <div className="card-f">
          <span>다음 브리핑 발송: 일요일 21:00 자동 · 본사 + 점장 메일</span>
          <div className="spacer"></div>
          <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>리포트 ID · W21-OLM-2026</span>
        </div>
      </div>
    </div>
  );
}

function StoreBar({ name, pct, color, sub, badge }) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{name}</span>
        {badge && <StatusBadge kind={badge} />}
        <span className="mono tnum" style={{ marginLeft: "auto", fontWeight: 600, color: color === "olive" ? "var(--olive-ink)" : "var(--muted)" }}>
          {pct > 0 ? `${pct}%` : "—"}
        </span>
      </div>
      <Bar value={pct} color={color} tall />
      <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>{sub}</div>
    </div>
  );
}

function BigDonut({ pct, color }) {
  const r = 38, c = 2 * Math.PI * r;
  const target = (pct / 100) * c;
  const [dash, setDash] = React.useState(0);
  React.useEffect(() => {
    const id = setTimeout(() => setDash(target), 200);
    return () => clearTimeout(id);
  }, [target]);
  const animatedPct = window.useCountUp ? window.useCountUp(pct, 900, [pct]) : pct;
  return (
    <div style={{ position: "relative", width: 100, height: 100 }}>
      <svg viewBox="0 0 100 100" width="100" height="100">
        <circle cx="50" cy="50" r={r} fill="none" stroke="var(--surface-3)" strokeWidth="10" />
        <circle
          className="donut-track"
          cx="50" cy="50" r={r} fill="none" stroke={color} strokeWidth="10" strokeLinecap="round"
          strokeDasharray={`${dash} ${c}`} transform="rotate(-90 50 50)"
        />
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "grid", placeItems: "center",
        fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em",
      }}>{Math.round(animatedPct)}<span style={{ fontSize: 11, color: "var(--muted)", fontWeight: 500, marginLeft: 1 }}>%</span></div>
    </div>
  );
}

window.WeeklyReport = WeeklyReport;