/* SEAL — 근거(①②③) + 보조(⑨⑩) + 설정(⑪) pages */
const { useState } = React;
const F4 = window.SEAL_FMT;
const D4 = window.SEAL_DATA;

/* ---- ① 사업계획서 (/plan/proposal) ---- */
function PlanProposalPage() {
  const p = D4.project;
  const Field = ({ k, v }) => (
    <div className="row" style={{ gap: 16, padding: "13px 0", borderBottom: "1px solid var(--semantic-line-normal-alternative)", alignItems: "flex-start" }}>
      <span style={{ minWidth: 110, fontSize: 13.5, fontWeight: 700, color: "var(--semantic-label-alternative)", flexShrink: 0 }}>{k}</span>
      <span style={{ fontSize: 14.5, fontWeight: 500, lineHeight: 1.5 }}>{v}</span>
    </div>
  );
  const Block = ({ title, children }) => (
    <div className="card" style={{ marginBottom: 16 }}>
      <h3 className="card-title" style={{ marginBottom: 12 }}>{title}</h3>
      <div style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--semantic-label-neutral)" }}>{children}</div>
    </div>
  );
  return (
    <div className="page fade-in">
      <PageHead eyebrow="근거 · 사업계획서" title="사업계획서" sub="집행 판단의 출발점이 되는 과제 정성 정보예요. (읽기 전용)" />
      <div className="card" style={{ marginBottom: 16 }}>
        <Field k="과제명" v={p.title} />
        <Field k="과제번호" v={p.code} />
        <Field k="연구분야" v={p.field} />
        <Field k="연구기간" v={p.period} />
        <Field k="연구책임자" v={p.pi} />
        <div className="row" style={{ gap: 16, padding: "13px 0", alignItems: "flex-start" }}>
          <span style={{ minWidth: 110, fontSize: 13.5, fontWeight: 700, color: "var(--semantic-label-alternative)", flexShrink: 0 }}>수행기관</span>
          <span style={{ fontSize: 14.5, fontWeight: 500 }}>{p.org}</span>
        </div>
      </div>
      <Block title="연구배경">{p.background}</Block>
      <Block title="연구목표">{p.goal}</Block>
      <Block title="연구내용 · 추진체계">
        <ul style={{ margin: "0 0 12px", paddingLeft: 18 }}>{p.content.map((c, i) => <li key={i} style={{ marginBottom: 6 }}>{c}</li>)}</ul>
        <div style={{ color: "var(--semantic-label-alternative)", fontSize: 13.5 }}>{p.system}</div>
      </Block>
      <div className="card" style={{ marginBottom: 16 }}>
        <h3 className="card-title" style={{ marginBottom: 14 }}>참여연구원</h3>
        <table className="tbl">
          <thead><tr><th>성명</th><th>역할</th><th className="num">참여율</th></tr></thead>
          <tbody>{p.members.map((m, i) => <tr key={i}><td style={{ fontWeight: 600 }}>{m.name}</td><td>{m.role}</td><td className="num tnum">{m.effort}</td></tr>)}</tbody>
        </table>
      </div>
      <Block title="기대효과">{p.effect}</Block>
    </div>
  );
}

/* ---- ② 예산안 (/plan/budget) ---- */
function PlanBudgetPage({ live }) {
  const rows = live.items;
  return (
    <div className="page fade-in">
      <PageHead eyebrow="근거 · 예산안" title="예산안" sub="혁신법 비목별 계획·집행·잔액이에요. 집행 가능 6비목은 파란 점으로 표시했어요." />
      <div className="card flush">
        <table className="tbl">
          <thead>
            <tr>
              <th>비목</th><th>세목 / 용도</th>
              <th className="num">계획금액</th><th className="num">집행</th><th className="num">잔액</th><th>상태</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} className={r.active ? "" : "muted"}>
                <td style={{ fontWeight: 700 }}>
                  <div className="row" style={{ gap: 7 }}>
                    {r.active && <span className="badge-blue" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--semantic-primary-normal)", display: "inline-block" }} />}
                    {r.name}
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--semantic-label-assistive)", fontWeight: 600, marginTop: 2 }}>{r.group}</div>
                </td>
                <td style={{ fontSize: 13, color: "var(--semantic-label-alternative)" }}>{r.use || "추후 집행"}</td>
                <td className="num tnum" style={{ fontWeight: 600 }}>{F4.won(r.budget)}</td>
                <td className="num tnum">{r.spent ? F4.won(r.spent) : "—"}</td>
                <td className="num tnum" style={{ fontWeight: 700 }}>{F4.won(r.remain)}</td>
                <td>{r.active ? <Badge tone="blue">집행가능</Badge> : <Badge tone="gray">곧 지원</Badge>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---- ③ 사업지침 (/plan/rules) ---- */
function PlanRulesPage() {
  return (
    <div className="page fade-in">
      <PageHead eyebrow="근거 · 사업지침" title="사업지침 · 증빙요건" sub="혁신법 4단(법·시행령·기관규정·과제규정) 체계에 따른 비목별 증빙요건과 실수 사례예요." />
      {D4.rules.map((r, i) => (
        <Accordion key={i} title={r.비목} meta={r.layer} defaultOpen={i === 0}>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--semantic-label-alternative)", marginBottom: 8 }}>필요 증빙</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
              {r.증빙.map((e, j) => <span key={j} className="chip"><Icons.check size={14} color="var(--atomic-green-40)" />{e}</span>)}
            </div>
          </div>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--semantic-label-alternative)", marginBottom: 8 }}>불인정 · 실수 사례</div>
            <ul style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
              {r.불인정.map((e, j) => (
                <li key={j} className="row" style={{ gap: 8, alignItems: "flex-start", fontSize: 13.5 }}>
                  <Icons.x size={14} color="var(--atomic-red-40)" style={{ flexShrink: 0, marginTop: 3 }} />{e}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ padding: "12px 14px", background: "var(--semantic-fill-alternative)", borderRadius: 10, fontSize: 13.5, lineHeight: 1.55, display: "flex", gap: 8 }}>
            <Icons.sparkles size={16} color="var(--semantic-primary-normal)" style={{ flexShrink: 0, marginTop: 1 }} />
            <span><b style={{ color: "var(--semantic-primary-normal)" }}>AI 팁 </b>{r.tip}</span>
          </div>
        </Accordion>
      ))}
    </div>
  );
}

/* ---- ⑨ 집행 이력 (/history) ---- */
function HistoryPage({ live }) {
  const rows = live.executions || [];
  return (
    <div className="page fade-in">
      <PageHead eyebrow="보조 · 집행 이력" title="집행 이력" sub="과거 집행 건의 상태·금액·서류를 모아 봐요." />
      {rows.length === 0 ? (
        <div className="card"><Empty icon="history" title="집행 이력이 없어요">집행을 완료하면 여기에 쌓여요.</Empty></div>
      ) : (
        <div className="card flush">
          <table className="tbl">
            <thead><tr><th>일자</th><th>비목</th><th>내용</th><th className="num">금액</th><th className="num">서류</th><th>상태</th></tr></thead>
            <tbody>
              {rows.map((e, i) => (
                <tr key={i}>
                  <td className="tnum" style={{ whiteSpace: "nowrap" }}>{e.date || e.at}</td>
                  <td><span className="row" style={{ gap: 6 }}><CategoryIcon cat={e.category} size={16} />{e.categoryName}</span></td>
                  <td style={{ fontWeight: 500 }}>{e.summary}</td>
                  <td className="num tnum" style={{ fontWeight: 700 }}>{F4.won(e.totalKRW)}</td>
                  <td className="num tnum">{e.docCount}건</td>
                  <td><VerdictBadge verdict={e.verdict} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ---- ⑩ 증빙 현황 (/evidence) ---- */
function EvidencePage() {
  return (
    <div className="page fade-in">
      <PageHead eyebrow="보조 · 증빙 현황" title="증빙 현황" sub="비목별로 제출/미제출 증빙을 체크해요." />
      <div className="stack" style={{ gap: 16 }}>
        {D4.evidence.map((ev, i) => (
          <div className="card" key={i}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: ev.empty ? 0 : 16 }}>
              <div className="card-title">{ev.비목}</div>
              {ev.empty ? <Badge tone="gray">집행 전</Badge>
                : <Badge tone={ev.제출 === ev.필요 ? "green" : "orange"} dot>{ev.제출}/{ev.필요} 제출</Badge>}
            </div>
            {!ev.empty && (
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {ev.items.map((it, j) => (
                  <span key={j} className="chip" style={{ background: it.done ? "var(--atomic-green-95)" : "var(--semantic-fill-normal)", color: it.done ? "var(--atomic-green-40)" : "var(--semantic-label-alternative)" }}>
                    {it.done ? <Icons.check size={14} /> : <Icons.clock size={14} />}{it.name}
                  </span>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- ⑪ 연동 설정 (/settings) ---- */
function SettingsPage() {
  const s = D4.settings;
  const [id, setId] = useState(s.korail.id);
  const [pw, setPw] = useState(s.korail.pw);
  return (
    <div className="page fade-in">
      <PageHead eyebrow="설정" title="연동 설정" sub="집행 채널과 챗봇 임베드 상태를 관리해요." />

      <div className="card" style={{ marginBottom: 16 }}>
        <h3 className="card-title" style={{ marginBottom: 4 }}>코레일 (KTX) 계정</h3>
        <p className="card-sub" style={{ marginBottom: 18 }}>국내 KTX 실연동(k-skill)에 사용돼요. 계정은 세션·서버에 안전하게 저장됩니다.</p>
        <div className="field"><label>코레일 ID</label><input value={id} onChange={(e) => setId(e.target.value)} placeholder="example@korail.com" /></div>
        <div className="field"><label>비밀번호</label><input type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="••••••••" /></div>
        <Btn variant="primary" icon="link" onClick={() => toast("코레일 계정을 저장했어요")}>계정 연동</Btn>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <h3 className="card-title" style={{ marginBottom: 16 }}>집행 채널</h3>
        <div className="stack" style={{ gap: 0 }}>
          {s.channels.map((c, i) => (
            <div className="lrow" key={i} style={{ padding: "14px 0" }}>
              <div className="lrow-body">
                <div className="lrow-title row" style={{ gap: 7 }}>{c.name}{c.sponsor && <Badge tone="gray">스폰서</Badge>}</div>
                <div className="lrow-meta">{c.role}</div>
              </div>
              <Badge tone={c.on ? "green" : "gray"} dot>{c.on ? "연결됨" : "미연결"}</Badge>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{ display: "flex", gap: 14, alignItems: "center" }}>
        <div className="chat-ava"><Icons.chat size={18} /></div>
        <div style={{ flex: 1 }}>
          <div className="lrow-title">미소 챗봇 임베드</div>
          <div className="lrow-meta">"이거 사도 돼?"를 규정 근거로 답하는 전역 위젯</div>
        </div>
        <Badge tone={s.misoEmbedded ? "green" : "gray"} dot>{s.misoEmbedded ? "임베드됨" : "미설정"}</Badge>
      </div>
    </div>
  );
}

window.RefPages = { PlanProposalPage, PlanBudgetPage, PlanRulesPage, HistoryPage, EvidencePage, SettingsPage };