/* ============================================================
   Progress panel — stacked status cards + demo persona switch
   ============================================================ */

function ProgressCard({ phase, isActive, isFirst, perspective, onAction }) {
  const user = window.USERS[phase.user];
  const me = perspective === phase.user;
  const drafter = perspective === "ljh";
  const st = phase.status;

  let cls = "pcard";
  if (isActive && st !== "approved" && st !== "done") cls += " active";
  if (st === "locked") cls += " locked";
  if (st === "rejected") cls += " rejected";

  // headline badge
  const badgeStatus = phase.kind === "draft" && st === "approved" ? "approved" : st;

  return (
    <div className={cls}>
      {!isFirst && <span className="pcard__conn"><window.Icon name="chevDown" size={18} /></span>}
      <div className="pcard__top">
        <span className="pcard__label">{phase.label}</span>
        <window.Badge status={badgeStatus} />
      </div>
      <div className="pcard__who">
        <window.Avatar user={user} size={38} />
        <div>
          <div className="pcard__name">{user.name}</div>
          <div className="pcard__team">{user.team} · {user.role}</div>
        </div>
      </div>

      {phase.time && <div className="pcard__time">{phase.time}</div>}

      {/* compliance review number */}
      {phase.reviewNo && (st === "approved" || st === "done") && (
        <div className="pcard__rev"><window.Icon name="shield" size={15} color="var(--success)" /> 심의번호 <b>{phase.reviewNo}</b></div>
      )}

      {/* reject feedback note */}
      {st === "rejected" && phase.rejectNote && (
        <div className="pcard__note reject"><b>반려 사유</b> · {phase.rejectNote}</div>
      )}

      {/* final file */}
      {phase.kind === "final" && st === "done" && phase.finalFile && (
        <div style={{ marginTop: 11 }}><window.FileChip name={phase.finalFile} /></div>
      )}

      {/* note hint for pending compliance */}
      {phase.note && (st === "locked" || st === "requested" || st === "reviewing") && (
        <div className="pcard__note">{phase.note}</div>
      )}

      {/* history log */}
      {phase.log && phase.log.length > 0 && (
        <div className="phist">
          {phase.log.map((e, i) => (
            <div className="phist__row" key={i}>
              <span className="ic"><window.Icon name={e.icon} size={14} color={e.color || "var(--text-3)"} /></span>
              <span dangerouslySetInnerHTML={{ __html: e.text }} />
              <span className="tm">{e.time}</span>
            </div>
          ))}
        </div>
      )}

      {/* ACTIONS */}
      {/* approver action */}
      {phase.kind !== "draft" && phase.kind !== "final" && me && (st === "requested" || st === "reviewing") && (
        <div className="pcard__act">
          <button className="btn btn--primary btn--sm" onClick={() => onAction("approve-open", phase)}>
            <window.Icon name="check" size={16} /> 결재하기
          </button>
        </div>
      )}
      {/* drafter re-request after reject */}
      {st === "rejected" && drafter && (
        <div className="pcard__act">
          <button className="btn btn--dark btn--sm" onClick={() => onAction("redo-open", phase)}>
            <window.Icon name="refresh" size={15} /> 수정본 올리고 재요청
          </button>
        </div>
      )}
      {/* final upload */}
      {phase.kind === "final" && st === "upload" && drafter && (
        <div className="pcard__act">
          <button className="btn btn--dark btn--sm" onClick={() => onAction("final-open", phase)}>
            <window.Icon name="upload" size={15} /> 심의번호 반영 최종본 업로드
          </button>
        </div>
      )}

      {/* waiting-for-someone-else hint */}
      {!me && (st === "requested" || st === "reviewing") && phase.kind !== "draft" && (
        <div className="pcard__time" style={{ color: "var(--primary)", fontWeight: 600 }}>
          {user.name} {user.role}의 결재를 기다리는 중
        </div>
      )}
    </div>
  );
}

// ---------- persona switcher (demo control) ----------
function Persona({ value, onChange, onReset }) {
  const opts = ["ljh", "pjh", "kms"];
  return (
    <div className="persona">
      <span className="persona__label">보는 사람</span>
      {opts.map((id) => {
        const u = window.USERS[id];
        return (
          <button key={id} className={`persona__opt ${value === id ? "active" : ""}`} onClick={() => onChange(id)}>
            <window.Avatar user={u} size={22} />
            {u.name} · {u.role}
          </button>
        );
      })}
      <button className="persona__reset" title="처음부터 다시" onClick={onReset}>
        <window.Icon name="refresh" size={16} />
      </button>
    </div>
  );
}

Object.assign(window, { ProgressCard, Persona });