// ────────────────────────────────────────────────────────────────────
// AW-024 · Chrome — modal shell, stepper header, footer
// ────────────────────────────────────────────────────────────────────

const CCModal = ({ children, width = 880 }) => (
  <div style={{
    position: 'absolute', inset: 0,
    background: 'rgba(17,24,39,0.45)',
    display: 'grid', placeItems: 'center',
    padding: '32px 20px',
  }}>
    <div style={{
      width: '100%', maxWidth: width,
      maxHeight: 'calc(100% - 64px)',
      background: 'var(--n-050)', borderRadius: 10,
      boxShadow: '0 24px 48px -12px rgba(0,0,0,0.25)',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
      border: '1px solid var(--n-200)',
    }}>{children}</div>
  </div>
);

// ── Header w/ stepper ────────────────────────────────────────────
const STEP_LABELS = [
  { id: 1, key: 'contract', label: '계약 정보', subtitle: '기업·담당자·기간' },
  { id: 2, key: 'payment',  label: '결제 정보', subtitle: '방식·계좌·세금계산서' },
  { id: 3, key: 'issue',    label: '발행 설정', subtitle: '상품·수량·정책' },
];

const CCHeader = ({ step, hasErrors }) => (
  <div style={{
    padding: '16px 20px 0',
    background: '#fff', borderBottom: '1px solid var(--n-200)',
  }}>
    {/* Title row */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
      <div style={{
        width: 38, height: 38, borderRadius: 7,
        background: 'var(--primary-hover-bg)', color: 'var(--primary)',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
          <path d="M14 2v6h6M12 18v-6M9 15h6"/>
        </svg>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{
          fontFamily: 'Inter', fontSize: 11, fontWeight: 600, color: 'var(--n-500)',
          letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 2,
        }}>AW-024 · 새 계약 등록</div>
        <div style={{
          fontSize: 18, fontWeight: 700, color: 'var(--n-900)',
          letterSpacing: '-0.01em',
        }}>Channel 계약 등록</div>
      </div>
      <button style={{
        display: 'grid', placeItems: 'center',
        width: 32, height: 32, borderRadius: 6,
        background: '#fff', border: '1px solid var(--n-300)', cursor: 'pointer',
        color: 'var(--n-700)',
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M6 6l12 12M6 18L18 6"/>
        </svg>
      </button>
    </div>

    {/* Stepper */}
    <div style={{
      display: 'flex', alignItems: 'stretch', gap: 0, marginBottom: -1,
    }}>
      {STEP_LABELS.map((s, i) => {
        const isActive = i === step;
        const isDone = i < step;
        const isLast = i === STEP_LABELS.length - 1;
        const hasErr = isActive && hasErrors;
        return (
          <React.Fragment key={s.id}>
            <div style={{
              flex: 1,
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '12px 14px',
              borderBottom: isActive ? `3px solid ${hasErr ? '#DC2626' : 'var(--primary)'}` : '3px solid transparent',
              opacity: isDone || isActive ? 1 : 0.55,
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: '50%',
                display: 'grid', placeItems: 'center',
                background: hasErr ? '#FEE2E2'
                  : isActive ? 'var(--primary)'
                  : isDone ? 'var(--primary-hover-bg)'
                  : 'var(--n-100)',
                color: hasErr ? '#B91C1C'
                  : isActive ? '#fff'
                  : isDone ? 'var(--primary)'
                  : 'var(--n-500)',
                border: hasErr ? '1.5px solid #FCA5A5' : 'none',
                fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
                flexShrink: 0,
              }}>
                {hasErr ? (
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 8v4M12 16h.01"/><circle cx="12" cy="12" r="10"/>
                  </svg>
                ) : isDone ? (
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 6L9 17l-5-5"/>
                  </svg>
                ) : s.id}
              </div>
              <div style={{ minWidth: 0, lineHeight: 1.3 }}>
                <div style={{
                  fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 13,
                  fontWeight: isActive ? 700 : 600,
                  color: hasErr ? '#B91C1C'
                    : isActive ? 'var(--n-900)'
                    : isDone ? 'var(--n-700)'
                    : 'var(--n-500)',
                }}>{s.label}</div>
                <div style={{
                  fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 11,
                  color: 'var(--n-500)', marginTop: 1,
                }}>{s.subtitle}</div>
              </div>
            </div>
            {!isLast && (
              <div style={{
                alignSelf: 'center', width: 14, height: 1,
                background: i < step ? 'var(--primary)' : 'var(--n-200)',
                marginRight: -2, marginLeft: -2, flexShrink: 0,
              }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  </div>
);

// ── Footer ───────────────────────────────────────────────────────
const CCFooter = ({ step, totalSteps, errCount, canSubmit }) => {
  const isFirst = step === 0;
  const isLast = step === totalSteps - 1;
  return (
    <div style={{
      padding: '12px 20px',
      background: '#fff', borderTop: '1px solid var(--n-200)',
      display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
    }}>
      {/* Left — error summary or progress */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {errCount > 0 ? (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 9px',
            background: '#FEF2F2', border: '1px solid #FCA5A5', color: '#B91C1C',
            borderRadius: 4,
            fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 11.5, fontWeight: 700,
          }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
            </svg>
            확인 필요 {errCount}건
          </span>
        ) : (
          <span style={{
            fontFamily: 'Inter', fontSize: 11.5, color: 'var(--n-500)',
            fontWeight: 600,
          }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--n-700)' }}>{step + 1} / {totalSteps}</span>
            <span style={{ margin: '0 8px', color: 'var(--n-300)' }}>·</span>
            모든 항목은 자동 저장됩니다
          </span>
        )}
      </div>

      <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
        <button style={{
          padding: '8px 14px', background: '#fff', border: '1px solid var(--n-300)',
          borderRadius: 6, cursor: 'pointer',
          fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 13, fontWeight: 600, color: 'var(--n-700)',
        }}>취소</button>
        {!isFirst && (
          <button style={{
            padding: '8px 14px', background: '#fff', border: '1px solid var(--n-300)',
            borderRadius: 6, cursor: 'pointer',
            fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 13, fontWeight: 600, color: 'var(--n-700)',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5M11 18l-6-6 6-6"/>
            </svg>
            이전
          </button>
        )}
        {!isLast ? (
          <button disabled={errCount > 0} style={{
            padding: '8px 16px',
            background: errCount > 0 ? 'var(--n-200)' : 'var(--primary)',
            color: errCount > 0 ? 'var(--n-500)' : '#fff',
            border: 'none', borderRadius: 6,
            fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 13, fontWeight: 700,
            cursor: errCount > 0 ? 'not-allowed' : 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            다음
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
          </button>
        ) : (
          <button disabled={!canSubmit} style={{
            padding: '8px 18px',
            background: canSubmit ? 'var(--primary)' : 'var(--n-200)',
            color: canSubmit ? '#fff' : 'var(--n-500)',
            border: 'none', borderRadius: 6,
            fontFamily: 'Pretendard, Inter, sans-serif', fontSize: 13, fontWeight: 700,
            cursor: canSubmit ? 'pointer' : 'not-allowed',
            display: 'inline-flex', alignItems: 'center', gap: 5,
            boxShadow: canSubmit ? '0 0 0 3px rgba(13,122,110,0.12)' : 'none',
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20 6L9 17l-5-5"/>
            </svg>
            등록
          </button>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { CCModal, CCHeader, CCFooter, STEP_LABELS });