/* SEAL — ⑦ 집행 실행 (/execute) · ⑧ 서류·검토 (/docs) */
const F3 = window.SEAL_FMT;
const D3 = window.SEAL_DATA;

/* ========================================================================
   ⑦ 집행 실행 (/execute)
   ===================================================================== */
function ExecutePage({ nav, store, setStore }) {
  const approved = Object.values(store.approved || {});

  const execute = (proposal) => {
    const ref = "MRT-" + Math.random().toString(36).slice(2, 8).toUpperCase();
    const at = "방금";
    setStore((s) => {
      const executed = { ...(s.executed || {}) };
      executed[proposal.category] = {
        ref, at, totalKRW: proposal.subtotal,
        category: proposal.category, categoryName: proposal.categoryName,
        summary: proposal.need, verdict: "완료",
        docCount: (D3.docTemplates[proposal.category] || []).length,
      };
      return { ...s, executed };
    });
    toast(`예약 완료 · 잔액에 반영했어요 (${ref})`, true);
  };

  return (
    <div className="page fade-in">
      <PageHead
        eyebrow="집행 실행"
        title="승인된 건을 실제로 예약해요"
        sub="구매 직전 랜딩 화면으로 연결돼요. 실집행 후 예실대비 잔액에 바로 반영됩니다."
      />
      {approved.length === 0 ? (
        <div className="card">
          <Empty icon="bolt" title="승인된 집행 건이 없어요">
            AI 제안에서 집행안을 먼저 승인해 주세요.
            <div style={{ marginTop: 16 }}><Btn variant="soft" iconRight="arrowRight" onClick={() => nav("propose")}>AI 제안으로</Btn></div>
          </Empty>
        </div>
      ) : (
        <div className="stack" style={{ gap: 18 }}>
          {approved.map((proposal) => {
            const done = !!(store.executed && store.executed[proposal.category]);
            const ex = done ? store.executed[proposal.category] : null;
            return (
              <div className="card" style={{ padding: 0, overflow: "hidden", borderColor: done ? "var(--atomic-green-50)" : undefined }} key={proposal.category}>
                <div className="row" style={{ gap: 12, padding: "18px 24px", borderBottom: "1px solid var(--semantic-line-normal-alternative)" }}>
                  <div className="lrow-icon blue" style={{ width: 42, height: 42 }}><CategoryIcon cat={proposal.category} size={21} /></div>
                  <div style={{ flex: 1 }}>
                    <div className="card-title">{proposal.categoryName}</div>
                    <div className="card-sub">{proposal.need}</div>
                  </div>
                  {done ? <Badge tone="green" dot>집행 완료</Badge> : <Badge tone="orange" dot>예약 대기</Badge>}
                </div>

                <div style={{ padding: "16px 24px" }}>
                  {proposal.offers.map((o, i) => (
                    <div key={i} className="row" style={{ gap: 12, padding: "10px 0", borderBottom: i < proposal.offers.length - 1 ? "1px solid var(--semantic-line-normal-alternative)" : "none" }}>
                      <Badge tone={o.provider === "MyRealTrip" ? "blue" : "gray"}>{o.provider}</Badge>
                      <span style={{ flex: 1, fontSize: 14, fontWeight: 600 }}>{o.name}</span>
                      <span className="mono-won tnum" style={{ fontSize: 14 }}>{F3.won(o.price)}</span>
                      {!done && (
                        <Btn size="sm" variant="soft" iconRight="external" onClick={() => toast(`${o.provider} 예약 화면으로 이동(데모)`)}>
                          {o.provider === "다이소" ? "구매처로" : "예약하기"}
                        </Btn>
                      )}
                    </div>
                  ))}
                </div>

                <div className="row" style={{ justifyContent: "space-between", padding: "16px 24px", borderTop: "1px solid var(--semantic-line-normal-alternative)", background: done ? "var(--atomic-green-95)" : "var(--semantic-fill-alternative)" }}>
                  <div className="tnum" style={{ fontSize: 14 }}>
                    {done
                      ? <>예약번호 <b>{ex.ref}</b> · 잔액 반영 완료</>
                      : <>총 집행 예정 <b className="mono-won" style={{ fontSize: 16 }}>{F3.won(proposal.subtotal)}</b></>}
                  </div>
                  {done
                    ? <Btn variant="primary" icon="file" iconRight="arrowRight" onClick={() => nav("docs")}>서류 확인</Btn>
                    : <Btn variant="primary" icon="bolt" onClick={() => execute(proposal)}>실집행 확정</Btn>}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ========================================================================
   ⑧ 서류·검토 (/docs)
   ===================================================================== */
function DocsPage({ nav, store }) {
  const executed = Object.values(store.executed || {});
  return (
    <div className="page fade-in">
      <PageHead
        eyebrow="서류 · 검토"
        title="증빙 서류를 자동으로 만들었어요"
        sub="집행 건마다 혁신법 규정에 맞는 서류를 생성하고, 근거 조문과 함께 적정 여부를 검토했어요."
      />
      {executed.length === 0 ? (
        <div className="card">
          <Empty icon="file" title="아직 생성된 서류가 없어요">
            집행을 완료하면 서류가 자동으로 만들어져요.
            <div style={{ marginTop: 16 }}><Btn variant="soft" iconRight="arrowRight" onClick={() => nav("execute")}>집행 실행으로</Btn></div>
          </Empty>
        </div>
      ) : (
        <div className="stack" style={{ gap: 18 }}>
          {executed.map((ex) => {
            const docs = D3.docTemplates[ex.category] || [];
            return (
              <div className="card flush" key={ex.category}>
                <div className="row" style={{ gap: 12, padding: "18px 24px", borderBottom: "1px solid var(--semantic-line-normal-alternative)" }}>
                  <div className="lrow-icon blue" style={{ width: 42, height: 42 }}><CategoryIcon cat={ex.category} size={21} /></div>
                  <div style={{ flex: 1 }}>
                    <div className="card-title">{ex.categoryName} · 증빙 서류 {docs.length}건</div>
                    <div className="card-sub">{ex.summary} · 예약번호 {ex.ref}</div>
                  </div>
                </div>
                {docs.map((d, i) => (
                  <div className="lrow" key={i}>
                    <div className="lrow-icon"><Icons.pdf size={20} /></div>
                    <div className="lrow-body">
                      <div className="lrow-title">{d.docType}</div>
                      <div className="lrow-meta">근거 {d.ref} · {d.pages}p</div>
                    </div>
                    <div className="row" style={{ gap: 12 }}>
                      <VerdictBadge verdict={d.verdict} />
                      <Btn size="sm" variant="outline" icon="external" onClick={() => toast(`${d.docType} PDF 열기(데모)`)}>PDF 열기</Btn>
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
          <div className="card" style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <Icons.checkCircle size={26} color="var(--semantic-status-positive)" />
            <div style={{ flex: 1, fontSize: 14.5, fontWeight: 600, lineHeight: 1.5 }}>
              모든 서류 검토가 끝났어요. 집행 이력에서 언제든 다시 확인할 수 있어요.
            </div>
            <Btn variant="primary" iconRight="arrowRight" onClick={() => nav("history")}>집행 이력 보기</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

window.FlowPages = { ExecutePage, DocsPage };