/* 연간 관리 — 구독 서비스 목록 (PDF 6-2)
 * 시설관리의 WorkerRegistry(①~⑩ 슬라이드 패널)와 동형이되,
 * 서비스는 상거래 메타(관리구역·계약기간·월정액)를 갖는 카탈로그다.
 * DetailScreen이 axis.kind==='service' 일 때 이 패널을 등록부로 띄운다. */

const SVC_NUM = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩'];

function ServiceCatalog({ schoolName, workers, activeId, isSafe, onPick, onAdd, onRemove, onClose }) {
  const services = workers; // DetailScreen이 항목 배열을 workers prop으로 전달(공용 시그니처)
  const rows = [];
  for (let i = 0; i < 10; i++) rows.push(services[i] || null);
  const total = services.reduce((n, s) => n + (Number(s.fee) || 0), 0);

  return (
    <React.Fragment>
      <div className="wr-scrim" onClick={onClose}></div>
      <aside className="wr-panel svc-panel" role="dialog" aria-label="구독 서비스 목록">
        <div className="wr-panel__head">
          <div className="wr-panel__title">
            <BDIcon name="calendarcheck" size={19} />
            <h3>구독 서비스 목록</h3>
            <span className="wr-panel__count">{services.length}/10건</span>
          </div>
          <button type="button" className="wr-panel__close" onClick={onClose} aria-label="닫기"><BDIcon name="x" size={17} /></button>
        </div>
        <p className="wr-panel__sub">{schoolName} · 월정액 연간 관리 구독. 서비스를 클릭하면 해당 서비스의 상황판으로 이동합니다.</p>
        <div className="wr-list">
          {rows.map((s, i) => s ? (
            <button key={s.id} type="button"
              className={'wr-row svc-row' + (s.id === activeId ? ' is-active' : '')}
              onClick={() => onPick(s.id)}>
              <span className="wr-row__no">{SVC_NUM[i]}</span>
              <span className="wr-row__radio" aria-hidden="true">{s.id === activeId ? '◉' : '○'}</span>
              <span className="wr-row__main">
                <span className="nm">{s.name}</span>
                <span className="role">{s.zone || '관리 구역 미정'}</span>
              </span>
              <span className="svc-row__fee">
                <span className="amt">{window.ssFeeLabel(s)}</span>
                <span className="per">{s.period || '계약 기간 미정'}{s.tenure ? ' · ' + s.tenure : ''}</span>
              </span>
              {isSafe && s.id !== activeId && (
                <span className="wr-row__rm" onClick={(e) => { e.stopPropagation(); onRemove(s.id); }} title="구독 해지">
                  <BDIcon name="trash" size={14} />
                </span>
              )}
            </button>
          ) : (
            <div key={'empty-' + i} className="wr-row wr-row--empty svc-row">
              <span className="wr-row__no">{SVC_NUM[i]}</span>
              <span className="wr-row__radio" aria-hidden="true">○</span>
              <span className="wr-row__main"><span className="nm placeholder">빈 슬롯</span></span>
              {isSafe && i === services.length && (
                <button type="button" className="wr-row__add" onClick={onAdd}>
                  <BDIcon name="plus" size={13} /> 서비스 추가
                </button>
              )}
            </div>
          ))}
        </div>
        <div className="svc-panel__total">
          <span className="lab"><BDIcon name="layers" size={14} /> 월 구독 합계</span>
          <span className="amt">월 {total.toLocaleString()}원 <span className="vat">(vat 포함)</span></span>
        </div>
        <div className="wr-panel__foot">
          <BDIcon name="info" size={13} /> 원본은 고객사 제안 서식(10슬롯 구독 목록 · Page 6-2)을 차용했습니다. 서비스마다 상황판이 따로 운영됩니다.
        </div>
      </aside>
    </React.Fragment>
  );
}
window.ServiceCatalog = ServiceCatalog;


/* ===================== 연간 관리 — 학교별 구독 현황 + 신규 요청 (단기대체와 동일 패턴) ===================== */
const SUBSCR_REQ_KEY = (s) => "ss_subscr_req_" + s;
function subscrReqGet(school) { try { const v = JSON.parse(localStorage.getItem(SUBSCR_REQ_KEY(school))); if (Array.isArray(v)) return v; } catch (e) {} return []; }
function subscrReqSet(school, list) { try { localStorage.setItem(SUBSCR_REQ_KEY(school), JSON.stringify(list)); } catch (e) {} }
const SUBSCR_TYPES = ["옥외시설물 관리", "청소 용역", "방역·소독", "전지·예초", "시설 점검", "기타"];
const SUBSCR_SL = { draft: "작성 중", submitted: "제출됨", received: "접수", accepted: "서비스 개시" };
function subscrBlank() {
  return { id: "sr_" + Date.now().toString(36), status: "draft", svcName: "", svcEtc: "", zone: "",
    periodStart: "", periodEnd: "", manager: "", contact: "", detail: "", note: "", createdAt: Date.now() };
}

/* 신규 요청서 — 우측 서랍 (학교 작성 / 세이프스쿨 읽기 + 서비스 개시) */
function SubsRequestForm({ initial, readOnly, onSave, onSubmit, onClose, onAccept }) {
  const [r, setR] = React.useState(() => ({ ...subscrBlank(), ...initial }));
  const set = (k, v) => setR((s) => ({ ...s, [k]: v }));
  const ro = !!readOnly;
  useLucideSS();
  const txt = (label, key, ph) => (
    <label className="hire-cell">
      <span className="lab">{label}</span>
      <input value={r[key] || ""} placeholder={ph || ""} disabled={ro} onChange={(e) => set(key, e.target.value)} />
    </label>
  );
  const canSubmit = (r.svcName && r.svcName.trim()) || (r.svcEtc && r.svcEtc.trim());
  return (
    <React.Fragment>
      <div className="wr-scrim" onClick={onClose}></div>
      <aside className="hire-panel" role="dialog" aria-label="구독 서비스 신규 요청서">
        <div className="hire-panel__head">
          <div className="hire-panel__title">
            <BDIcon name="filetext" size={19} />
            <h3>구독 서비스 신규 요청</h3>
            {ro && <span className="wr-panel__count">읽기 전용</span>}
          </div>
          <button type="button" className="wr-panel__close" onClick={onClose} aria-label="닫기"><BDIcon name="x" size={17} /></button>
        </div>
        <p className="hire-panel__sub">월정액 연간관리 구독 서비스를 신청합니다. 분야를 고르고 관리 대상·희망 기간을 알려 주시면 세이프스쿨이 확인 후 서비스를 개시합니다.</p>
        <div className="hire-form">
          <div className="hire-field">
            <span className="hire-field__lab">분야</span>
            <div className="hire-chips">
              {SUBSCR_TYPES.map((o) => (
                <button key={o} type="button" disabled={ro}
                  className={"hire-chip radio" + (r.svcName === o ? " on" : "")}
                  onClick={() => set("svcName", o)}>
                  <span className="box">{r.svcName === o ? "◉" : "○"}</span>{o}
                </button>
              ))}
              <input className="hire-chip-etc" placeholder="기타(직접입력)" value={r.svcEtc || ""} disabled={ro} onChange={(e) => set("svcEtc", e.target.value)} />
            </div>
          </div>
          <div className="hire-grid">
            {txt("관리 대상", "zone", "예) 운동장 / 화단 / 수목")}
            {txt("담당자", "manager", "예) 김선주 행정실장")}
            {txt("연락처", "contact", "010-0000-0000")}
          </div>
          <div className="hire-grid">
            <label className="hire-cell">
              <span className="lab">희망 기간</span>
              <div className="hire-pair">
                <input value={r.periodStart || ""} placeholder="시작" disabled={ro} onChange={(e) => set("periodStart", e.target.value)} />
                <span className="sep">~</span>
                <input value={r.periodEnd || ""} placeholder="종료" disabled={ro} onChange={(e) => set("periodEnd", e.target.value)} />
              </div>
            </label>
          </div>
          <label className="hire-cell full">
            <span className="lab">요청 내용</span>
            <textarea rows={3} value={r.detail || ""} placeholder="필요한 관리 내용을 자유롭게 적어 주세요" disabled={ro} onChange={(e) => set("detail", e.target.value)} />
          </label>
          <label className="hire-cell full">
            <span className="lab">비고</span>
            <textarea rows={2} value={r.note || ""} placeholder="예산·일정 등 참고 사항" disabled={ro} onChange={(e) => set("note", e.target.value)} />
          </label>
        </div>
        {!ro && (
          <div className="hire-panel__foot">
            <button className="btn btn-ghost btn-sm" onClick={() => onSave(r)}><BDIcon name="check" size={15} /> 임시 저장</button>
            <button className="btn btn-primary btn-sm" disabled={!canSubmit} onClick={() => onSubmit(r)}>
              <BDIcon name="arrowright" size={15} /> 제출 (세이프스쿨로 보내기)
            </button>
          </div>
        )}
        {ro && onAccept && (r.status === "submitted" || r.status === "received") && (
          <div className="hire-panel__foot">
            <button className="btn btn-primary btn-sm" onClick={() => onAccept(r)}><BDIcon name="checkcircle" size={15} /> 서비스 개시 (상황판 생성)</button>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

/* 학교별 구독 현황 — 구독중 서비스 + 신규 요청 (세이프스쿨·학교 공용) */
function SubscriptionStatusScreen({ school, role, onBack, onOpenBoard, toast }) {
  const [flt, setFlt] = React.useState("all");
  const [, setTick] = React.useState(0);
  const [drawer, setDrawer] = React.useState(null); // { req, mode }
  useLucideSS();
  const name = (school && school.name) || window.SS_DATA.MY_SCHOOL.name;
  const isSafe = role === "safe";
  const reqs = subscrReqGet(name).filter((r) => isSafe ? r.status !== "draft" : true);
  const services = window.SS_SERVICES.get(name);
  const svcRows = services.map((s) => ({ type: "active", sid: s.id, title: s.name, sub: window.ssFeeLabel(s), period: s.period || "", extra: s.zone || "" }));
  const reqRows = reqs.filter((r) => r.status !== "accepted").map((r) => ({
    type: "req", status: r.status, id: r.id,
    title: (r.svcName || r.svcEtc || "분야 미정") + " 요청",
    sub: r.manager || "", period: [r.periodStart, r.periodEnd].filter(Boolean).join(" ~ "), extra: r.zone || "",
  }));
  const order = { submitted: 0, received: 1, draft: 2 };
  reqRows.sort((a, b) => (order[a.status] || 9) - (order[b.status] || 9));
  const all = reqRows.concat(svcRows);
  const cnt = { req: reqRows.length, active: svcRows.length };
  const list = flt === "all" ? all : all.filter((r) => (flt === "req" ? r.type === "req" : r.type === "active"));
  const openReq = (id) => {
    const req = subscrReqGet(name).find((x) => x.id === id);
    if (!req) return;
    setDrawer({ req, mode: (!isSafe && req.status === "draft") ? "edit" : "view" });
  };
  const saveDraft = (r) => {
    const list0 = subscrReqGet(name);
    subscrReqSet(name, list0.some((x) => x.id === r.id) ? list0.map((x) => x.id === r.id ? r : x) : [...list0, r]);
    setTick((t) => t + 1); setDrawer(null);
    if (toast) toast("신규 요청서를 임시 저장했습니다 — 목록에서 이어 작성할 수 있어요");
  };
  const submitReq = (r) => {
    const patch = { ...r, status: "submitted", submittedAt: Date.now() };
    const list0 = subscrReqGet(name);
    subscrReqSet(name, list0.some((x) => x.id === r.id) ? list0.map((x) => x.id === r.id ? patch : x) : [...list0, patch]);
    setTick((t) => t + 1); setDrawer(null);
    if (toast) toast("신규 요청을 제출했습니다 — 세이프스쿨이 확인 후 연락드립니다");
  };
  const accept = (r) => {
    const svc = { id: window.SS_SERVICES.newId(), name: r.svcName || r.svcEtc || "새 서비스", zone: r.zone || "",
      period: [r.periodStart, r.periodEnd].filter(Boolean).join(" ~ ") || "2026.3.1 ~ 2027.2.28",
      fee: 0, feeNote: "vat 포함", team: "", teamTel: "1533-2075", safetyMgr: "", schoolMgr: r.manager || "", tenure: "1년 차",
      categories: ["기타"] };
    window.SS_SERVICES.add(name, svc);
    window.SS_SERVICES.setLast(name, svc.id);
    subscrReqSet(name, subscrReqGet(name).map((x) => x.id === r.id ? { ...x, status: "accepted", serviceId: svc.id } : x));
    setTick((t) => t + 1); setDrawer(null);
    if (toast) toast("서비스를 개시했습니다 — 상황판에서 계약 정보를 채워 주세요");
    onOpenBoard(svc.id);
  };
  const badge = (r) => r.type === "active" ? ["st-active", "구독중"] : r.status === "submitted" ? ["st-new", "요청 · 제출됨"] : r.status === "received" ? ["st-scheduled", "요청 · 접수"] : ["st-done", "요청 · " + (SUBSCR_SL[r.status] || r.status)];
  return (
    <div className="page wrap screen-enter">
      <div className="page-head">
        <div className="page-head__l">
          <button className="admin-back" onClick={onBack}><i data-lucide="arrow-left"></i> 학교 목록</button>
          <span className="ss-overline">연간 관리 · 연간 관리 리스트</span>
          <h1><i data-lucide="calendar-check" style={{ width: 30, height: 30, color: "var(--blue-600)" }}></i> {name} 연간 관리 리스트</h1>
          <p>이 학교의 구독 중인 서비스와 신규 요청을 한눈에 봅니다. 구독 서비스를 누르면 해당 서비스의 관련 업무 페이지로 이동하고, 요청서를 누르면 오른쪽 서랍에서 내용을 볼 수 있습니다.</p>
        </div>
        <div className="page-head__r">
          {!isSafe && (
            <button className="btn btn-primary btn-sm" onClick={() => setDrawer({ req: subscrBlank(), mode: "edit" })}>
              <i data-lucide="file-plus-2"></i> 신규 요청 작성
            </button>
          )}
          <span className="status-chip done"><i data-lucide="calendar-check"></i> 전체 {all.length}건</span>
        </div>
      </div>

      <div className="card disp-card">
        <div className="card__head">
          <div className="hic"><i data-lucide="clipboard-list"></i></div>
          <h3>구독 서비스 전체 현황</h3>
          <span className="head-meta">신규 요청 {cnt.req}건 · 구독중 {cnt.active}건</span>
        </div>
        <div className="disp-filters">
          <button type="button" className={"schl-chip" + (flt === "all" ? " on" : "")} onClick={() => setFlt("all")}>전체<span className="schl-chip__n">{all.length}</span></button>
          <button type="button" className={"schl-chip" + (flt === "req" ? " on" : "")} onClick={() => setFlt("req")}>신규 요청<span className="schl-chip__n">{cnt.req}</span></button>
          <button type="button" className={"schl-chip" + (flt === "active" ? " on" : "")} onClick={() => setFlt("active")}>구독중<span className="schl-chip__n">{cnt.active}</span></button>
        </div>
        <div className="disp-list">
          {list.map((r, i) => {
            const [cls, label] = badge(r);
            return (
              <button type="button" key={(r.sid || r.id || "r") + i} className="disp-row"
                onClick={() => r.type === "req" ? openReq(r.id) : onOpenBoard(r.sid)}
                title={r.type === "req" ? "요청서 열기 (오른쪽 서랍)" : r.title + " 관련 업무 열기"}>
                <span className={"disp-badge " + cls}>{label}</span>
                <span className="disp-row__worker">{r.title}</span>
                <span className="disp-row__role">{r.sub}{r.extra ? " · " + r.extra : ""}</span>
                <span className="disp-row__period">{r.period}</span>
                {r.type === "req"
                  ? <span className="disp-row__open">{!isSafe && r.status === "draft" ? "이어 작성" : "요청서 보기"} <i data-lucide="chevron-right"></i></span>
                  : <span className="disp-row__open">관련 업무 열기 <i data-lucide="chevron-right"></i></span>}
              </button>
            );
          })}
          {list.length === 0 && <div className="adm-empty">해당 상태의 건이 없습니다.{!isSafe ? " 「신규 요청 작성」으로 시작해 보세요." : ""}</div>}
        </div>
      </div>

      {drawer && (
        <SubsRequestForm initial={drawer.req} readOnly={drawer.mode === "view"}
          onClose={() => setDrawer(null)} onSave={saveDraft} onSubmit={submitReq}
          onAccept={isSafe ? accept : undefined} />
      )}
    </div>
  );
}
Object.assign(window, { SubscriptionStatusScreen, SubsRequestForm });