/* ============================================================
   바른셈 — 계약 레이어 설정 (per-client 설정 데이터)
   §6.1 핵심: 통상임금 포함여부는 '노무사 판정' 입력
   ============================================================ */
function Contract({ ctx }) {
  const { clients, go, toast, period } = ctx;
  const client = clients.find((c) => c.id === (ctx.params.clientId || clients[0].id)) || clients[0];
  const [empId, setEmpId] = useState(ctx.params.empId || client.employees[0].id);
  const [empQuery, setEmpQuery] = useState("");
  useEffect(() => { setEmpId(client.employees[0].id); setEmpQuery(""); }, [client.id]);
  const baseEmp = client.employees.find((e) => e.id === empId) || client.employees[0];
  const ten = window.BARUNSEM.tenure(baseEmp.joined, period.payDate);
  const eq = empQuery.trim();
  const filteredEmps = eq ? client.employees.filter((e) => e.name.includes(eq) || (e.title && e.title.includes(eq))) : client.employees;

  // 편집 가능한 계약 사본
  const [c, setC] = useState(() => clone(baseEmp));
  useEffect(() => { setC(clone(baseEmp)); }, [empId, client.id, period.ym]);
  const saved = ctx.contractOf(client.id, baseEmp.id);
  const dirty = JSON.stringify(c) !== JSON.stringify(clone(baseEmp));
  function clone(e) { return JSON.parse(JSON.stringify({ scheme: e.scheme, base: e.base, hourly: e.hourly || 0, workedHours: e.workedHours || 0, prevWorked: e.prevWorked || 0, hourlyMode: !!e.hourlyMode, dependents: e.dependents || 1, fiveOrMore: e.fiveOrMore, allowances: e.allowances })); }

  const RS = ctx.rulesetFor(client.id);
  const commonPolicy = ctx.gov.overrides["통상임금"];   // 법인 통상임금 판정 정책 (재정의 시)
  // 통상임금 정책 파싱 — 보수성 + 개별검토 대상 명칭
  const ciItem = window.BARUNSEM.RULESET_GOV.RS_ITEMS.find((i) => i.key === "통상임금");
  const conservative = commonPolicy ? commonPolicy.e === "conservative" : false;  // 구조화된 stance(enum) 직접 소비
  const REVIEW_RE = /명절|상여|복지|성과|인센|포상|봉사료/;       // 정기·일률성 다툼 잦은 명칭
  const needsReview = (name) => REVIEW_RE.test(name || "");
  const commonMonthly = c.base + c.allowances.filter((a) => a.common).reduce((s, a) => s + a.amount, 0);
  const ordHourly = Math.round(commonMonthly / RS.workHours);

  const setAllow = (i, patch) => setC((p) => ({ ...p, allowances: p.allowances.map((a, j) => j === i ? { ...a, ...patch } : a) }));
  const addAllow = () => setC((p) => ({ ...p, allowances: [...p.allowances, { name: "신규 수당", amount: 100000, taxable: true, common: !conservative }] }));
  const delAllow = (i) => setC((p) => ({ ...p, allowances: p.allowances.filter((_, j) => j !== i) }));
  // 시급제 — 시급×근로시간이 기본급을 결정 (둘 중 하나 바뀌면 base 자동 파생)
  const setHourly = (h) => setC((p) => ({ ...p, hourly: h, base: Math.round(h * (p.workedHours || 0)) }));
  const setWorked = (w) => setC((p) => ({ ...p, workedHours: w, base: Math.round((p.hourly || 0) * w) }));

  const schemes = ["월급제", "시급제", "일급제", "연봉제", "네트제", "포괄임금제"];

  return (
    <div className="page page-wide rise">
      <div className="page-head" style={{ marginBottom: 16 }}>
        <div className="page-desc" style={{ margin: 0 }}>근로자별 계약 설정 — 급여체계·기본급·수당 구성·통상임금 포함여부. <span style={{ opacity: .75 }}>가산율·요율 등 법규 값은 룰셋(법규)에서 버전관리됩니다.</span></div>
      </div>

      <div className="l-master" style={{ "--master": "232px" }}>
        {/* 좌측 근로자 레일 (마스터) */}
        <div className="emp-rail">
          <div className="emp-rail-hd"><Ms name="groups" style={{ fontSize: 18, color: "var(--ink-3)" }} />근로자 <span className="cnt">{client.employees.length}</span></div>
          <div className="emp-search"><Ms name="search" /><input value={empQuery} onChange={(e) => setEmpQuery(e.target.value)} placeholder="이름·직책 검색" /></div>
          <div className="emp-list">
            {filteredEmps.length === 0 && <div className="emp-empty">검색 결과 없음</div>}
            {filteredEmps.map((e) => (
              <button key={e.id} className={"emp-item" + (e.id === empId ? " active" : "")} onClick={() => setEmpId(e.id)}>
                <span className="emp-ini">{e.name[0]}</span>
                <div className="emp-main">
                  <div className="emp-name">{e.name}</div>
                  <div className="emp-title">{e.title}{(() => { const tt = window.BARUNSEM.tenure(e.joined, period.payDate); return tt ? " · 근속 " + (tt.years >= 1 ? tt.years + "년" : tt.months + "개월") : ""; })()}</div>
                </div>
                <div className="emp-ov">
                  <span className="emp-ov-scheme" style={{ color: (window.schemeStyle(e.scheme) || {}).color }}>{e.scheme}</span>
                  <span className="emp-ov-base">{Math.round((e.base || 0) / 10000).toLocaleString("ko-KR")}만</span>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* 우측 계약 본문 (디테일) */}
        <div className="contract-detail">

      <div className="l-split contract-split">
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {/* 기본 계약 */}
          <div className="card">
            <CardHead icon="badge" title="기본 계약" sub={`${baseEmp.name} · 입사 ${baseEmp.joined}${ten ? " · 근속 " + ten.label : ""}`} />
            <div className="card-pad contract-form-3 sc-form">
              <div className="field"><label>급여체계</label>
                <div className="sc-select">
                  <select className="select" value={c.scheme} onChange={(e) => setC({ ...c, scheme: e.target.value })}>
                    {schemes.map((s) => <option key={s} value={s}>{s}{["네트제", "포괄임금제"].includes(s) ? " (커버리지 후순위)" : ""}</option>)}
                  </select>
                  <Ms name="expand_more" />
                </div>
              </div>
              {c.scheme === "시급제" ? (<>
                <div className="field"><label>시급</label>
                  <div className="input-affix"><input className="input num" value={(c.hourly || 0).toLocaleString("ko-KR")} onChange={(e) => setHourly(Number(e.target.value.replace(/[^\d]/g, "")) || 0)} /><span className="suffix">원</span></div>
                </div>
                <div className="field"><label>월 소정근로시간</label>
                  <div className="input-affix"><input className="input num" value={c.workedHours || 0} onChange={(e) => setWorked(Number(e.target.value.replace(/[^\d]/g, "")) || 0)} /><span className="suffix">h</span></div>
                </div>
              </>) : (
                <div className="field"><label>기본급 (월)</label>
                  <div className="input-affix"><input className="input num" value={c.base.toLocaleString("ko-KR")} onChange={(e) => setC({ ...c, base: Number(e.target.value.replace(/[^\d]/g, "")) || 0 })} /><span className="suffix">원</span></div>
                </div>
              )}
              <div className="field"><label>부양가족 수 <span className="muted" style={{ fontWeight: 400 }}>(간이세액표)</span></label>
                <input className="input num" type="number" min="1" value={c.dependents} onChange={(e) => setC({ ...c, dependents: Number(e.target.value) || 1 })} />
              </div>
              <div className="field" style={{ gridColumn: "1 / -1" }}>
                <label style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <button className="switch" data-on={c.fiveOrMore ? "1" : "0"} onClick={() => setC({ ...c, fiveOrMore: !c.fiveOrMore })}><i /></button>
                  5인 이상 사업장 <span className="muted" style={{ fontWeight: 400 }}>— 해제 시 가산수당(연장·야간·휴일) 적용 제외</span>
                </label>
              </div>
            </div>
            {c.scheme === "시급제" && (
              <div style={{ padding: "0 22px 18px" }}>
                <div className="muted" style={{ fontSize: 12, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", lineHeight: 1.5 }}>
                  <Ms name="functions" style={{ fontSize: 15, color: "var(--accent)" }} />
                  월 환산 기본급 = 시급 {(c.hourly || 0).toLocaleString("ko-KR")}원 × {c.workedHours || 0}h = <b style={{ color: "var(--ink)" }}>{(c.base || 0).toLocaleString("ko-KR")}원</b>
                  <span style={{ opacity: .7 }}>· 주휴 포함 환산 · 소정근로는 매월 변동 (검수 대상)</span>
                </div>
              </div>
            )}
          </div>

          {/* 수당 구성 */}
          <div className="card">
            <CardHead icon="payments" title="수당 구성" sub="항목 · 금액 · 통상임금 포함여부 · 과세여부"
              right={<button className="btn btn-default btn-sm" onClick={addAllow}><Ms name="add" />수당 추가</button>} />
            <table className="tbl tbl-cards sc-form">
              <thead><tr><th>항목명</th><th className="r" style={{ width: 150 }}>금액(월)</th><th style={{ width: 130, textAlign: "center" }}>통상임금 포함</th><th style={{ width: 100, textAlign: "center" }}>과세</th><th style={{ width: 44 }}></th></tr></thead>
              <tbody>
                {c.allowances.map((a, i) => (
                  <tr key={i}>
                    <td className="tc-name">
                      <input className="input" style={{ height: 32 }} value={a.name} onChange={(e) => setAllow(i, { name: e.target.value })} />
                      {conservative && needsReview(a.name) && (
                        <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, fontSize: 11, color: "color-mix(in oklab, var(--warn) 60%, black)", lineHeight: 1.4 }}>
                          <Ms name="gavel" style={{ fontSize: 13 }} />노무사 개별검토 — 정기·일률성 판단 필요
                        </div>
                      )}
                    </td>
                    <td className="r" data-label="금액(월)"><div className="input-affix"><input className="input num" style={{ height: 32 }} value={a.amount.toLocaleString("ko-KR")} onChange={(e) => setAllow(i, { amount: Number(e.target.value.replace(/[^\d]/g, "")) || 0 })} /><span className="suffix">원</span></div></td>
                    <td data-label="통상임금 포함" style={{ textAlign: "center" }}>
                      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 3 }}>
                        <button className="switch" data-on={a.common ? "1" : "0"} onClick={() => setAllow(i, { common: !a.common })}><i /></button>
                        {a.common && conservative && needsReview(a.name) && (
                          <span className="tag tag-warn" style={{ height: 17, fontSize: 9.5, padding: "0 5px" }} title="법인 보수 정책과 충돌 — 통상임금 포함 재검토 권장">
                            <Ms name="warning" style={{ fontSize: 11 }} />정책 충돌
                          </span>
                        )}
                      </div>
                    </td>
                    <td data-label="과세" style={{ textAlign: "center" }}>
                      <button className="switch" data-on={a.taxable ? "1" : "0"} onClick={() => setAllow(i, { taxable: !a.taxable })} style={{ margin: "0 auto" }}><i /></button>
                    </td>
                    <td className="tc-action" data-label="삭제"><button className="iconbtn" aria-label={`${a.name} 수당 삭제`} title="수당 삭제" style={{ width: 30, height: 30 }} onClick={() => delAllow(i)}><Ms name="close" style={{ fontSize: 16 }} /></button></td>
                  </tr>
                ))}
                {c.allowances.length === 0 && <tr className="tc-plain"><td colSpan="5" className="muted" style={{ textAlign: "center", padding: 24 }}>등록된 수당이 없습니다.</td></tr>}
              </tbody>
            </table>
          </div>

          {/* 수당 구성 끝 */}
        </div>

        {/* 라이브 통상임금 패널 */}
        <div className="sticky-rail" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card card-pad" style={{ background: "linear-gradient(180deg, var(--accent-soft), var(--surface))" }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--accent-ink)", letterSpacing: ".03em" }}>실시간 통상임금</div>
            <div className="num" style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.03em", margin: "6px 0 2px" }}>{ordHourly.toLocaleString("ko-KR")}<span style={{ fontSize: 15, fontWeight: 600 }}> 원/시</span></div>
            <div className="muted" style={{ fontSize: 12 }}>통상임금 월액 {commonMonthly.toLocaleString("ko-KR")}원 ÷ {RS.workHours}h</div>
            <hr className="divider" style={{ margin: "14px 0" }} />
            <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", marginBottom: 8 }}>이 통상시급이 좌우하는 값</div>
            <div className="dl">
              <dt>연장 1h ({c.fiveOrMore ? "×1.5" : "×1.0"})</dt><dd className="num">{Math.round(ordHourly * (c.fiveOrMore ? 1.5 : 1)).toLocaleString("ko-KR")}원</dd>
              <dt>야간 1h ({c.fiveOrMore ? "+0.5" : "—"})</dt><dd className="num">{c.fiveOrMore ? Math.round(ordHourly * 0.5).toLocaleString("ko-KR") + "원" : "제외"}</dd>
              <dt>휴일 1h ({c.fiveOrMore ? "×1.5" : "×1.0"})</dt><dd className="num">{Math.round(ordHourly * (c.fiveOrMore ? 1.5 : 1)).toLocaleString("ko-KR")}원</dd>
            </div>
          </div>
          {/* W1-5 — 저장이 실제로 전역 계약을 바꾸고 변경 이력을 남긴다. 전엔 토스트뿐이라 탭만 옮겨도 사라졌다(B7). */}
          <button className="btn btn-primary btn-lg" disabled={!dirty} onClick={() => {
            // 실제로 바뀐 키만 넘긴다 — 전체를 넘기면 이력이 "무엇이 바뀌었나"를 답하지 못한다.
            const before = clone(baseEmp);
            const patch = Object.fromEntries(Object.keys(c).filter((k) => JSON.stringify(c[k]) !== JSON.stringify(before[k])).map((k) => [k, c[k]]));
            ctx.saveContract(client.id, baseEmp.id, patch, { empName: baseEmp.name });
            toast(`${baseEmp.name} 계약을 저장했습니다 — 급여 재계산 필요`, "ok");
          }}><Ms name="save" />{dirty ? "계약 저장" : "변경 없음"}</button>
          {saved && (
            <div className="card card-pad" style={{ padding: "10px 13px" }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", marginBottom: 6 }}>계약 변경 이력 <span className="tag tag-warn" style={{ height: 18, marginLeft: 6 }}>재계산 필요</span></div>
              {saved.history.slice(0, 4).map((h, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 8, fontSize: 11.5, padding: "3px 0" }}>
                  <span className="muted">{h.at} · {h.by}</span><span style={{ fontWeight: 600 }}>{h.changed.join("·")}</span>
                </div>
              ))}
            </div>
          )}
          <div className="muted" style={{ fontSize: 11.5, textAlign: "center", lineHeight: 1.5 }}>토글을 바꾸면 통상시급과 가산수당 base가<br />즉시 재계산됩니다 (결정성 보장).</div>
        </div>
      </div>

      {/* 설명·정책 카드 — 맨 하단 풀폭 (참조·고지성 콘텐츠) */}
      <div className="contract-notes" style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 18 }}>
        {commonPolicy && (
          <div className="card card-pad" style={{ display: "flex", gap: 13, background: "var(--accent-soft)", border: "1px solid var(--accent-line)", alignItems: "flex-start" }}>
            <Ms name="tune" style={{ color: "var(--accent)", fontSize: 22, flex: "none" }} />
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                <span className="src-badge src-firm"><Ms name="edit" style={{ fontSize: 12 }} />법인 정책 적용</span>
                <span style={{ fontWeight: 650, fontSize: 13, color: "var(--accent-ink)" }}>통상임금 판정 정책</span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--accent-ink)", opacity: .9, marginTop: 5, lineHeight: 1.6 }}>
                <b>{window.BARUNSEM.slotDisplay(ciItem, commonPolicy)}</b> — {commonPolicy.note || "법인 디폴트 정책"}.
                {conservative
                  ? " 보수 정책: 신규 수당의 통상임금 포함이 기본 off로 추가되며(제외 후 개별 포함 판단), 명절·상여·복지·성과류 명칭은 노무사 개별검토 대상으로 표시됩니다."
                  : " 표준 정책: 신규 수당의 통상임금 포함이 기본 on이며(2024 전합 — 정기·일률이면 포함 원칙), 노무사가 개별 제외를 판단합니다."}
                {" "}({commonPolicy.by} · {commonPolicy.since})
              </div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => go("ruleset")}><Ms name="gavel" style={{ fontSize: 15 }} />룰셋에서 보기</button>
          </div>
        )}

        <div className="card card-pad" style={{ display: "flex", gap: 13, background: "var(--warn-soft)", border: "1px solid var(--warn-line)" }}>
          <Ms name="balance" style={{ color: "color-mix(in oklab, var(--warn) 70%, black)", fontSize: 22, flex: "none" }} />
          <div style={{ fontSize: 12.5, color: "color-mix(in oklab, var(--warn) 60%, black)", lineHeight: 1.6 }}>
            <b>통상임금 포함 여부는 법적 판정입니다.</b> 수당을 <i>만드는 것</i>은 계약이지만, 그 수당이 <i>통상임금에 포함되는지</i>는 정기·일률성 기준에 따른 판단(2024.12 대법 전합)이며 계약으로 배제할 수 없습니다. 시스템은 자동 판정하지 않고 <b>노무사의 판정 결과를 입력</b>받습니다 — 책임 소재를 일치시키기 위함입니다.
          </div>
        </div>
      </div>
        </div>
      </div>
    </div>
  );
}
window.Contract = Contract;