// ────────────────────────────────────────────────────────────────────
// AW-024 · Step 2 — 결제 정보 (with ERR-020)
// ────────────────────────────────────────────────────────────────────

const CCStep2 = ({ data }) => {
  const p = data.payment || {};
  const errs = data.errors || {};
  const requiresAccount = p.method === 'transfer' || p.method === 'postpay';

  return (
    <>
      {/* Section 1 — Method picker */}
      <CCSection title="결제 방법" subtitle="계약 운영 중 변경 시 정산 사이클이 재설정됩니다">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          {PAYMENT_METHODS.map(m => (
            <CCRadioCard
              key={m.id}
              active={p.method === m.id}
              label={m.label}
              hint={m.hint}
              leading={<MethodGlyph kind={m.id}/>}
            />
          ))}
        </div>
      </CCSection>

      {/* Section 2 — Account info */}
      <CCSection
        title="계좌 정보"
        subtitle={requiresAccount
          ? '월 정산 / 후정산 시 송금 계좌'
          : '계좌 이체 / 후정산 선택 시 입력 가능'}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '14px 18px' }}>
          <div>
            <CCFieldLabel required={requiresAccount}>은행</CCFieldLabel>
            <CCSelect
              value={p.bank ? BANKS.find(b => b.id === p.bank)?.label : null}
              placeholder="은행 선택"
            />
          </div>
          <div>
            <CCFieldLabel required={requiresAccount}>계좌번호</CCFieldLabel>
            <CCText
              value={p.account}
              placeholder="000-000-000000"
              mono
              error={errs.account === 'ERR-020'}
            />
            {errs.account === 'ERR-020' && (
              <CCErrorHint code="ERR-020">계좌번호 형식이 올바르지 않습니다. 은행에 등록된 전체 계좌번호를 입력하세요.</CCErrorHint>
            )}
          </div>
          <div style={{ gridColumn: '1 / -1' }}>
            <CCFieldLabel required={requiresAccount} hint="법인명 또는 대표자명">예금주</CCFieldLabel>
            <CCText
              value={p.holder}
              placeholder="예: 주식회사 카레헬스케어"
              error={errs.holder === 'required'}
            />
            {errs.holder === 'required' && (
              <CCErrorHint code="ERR-020">예금주는 필수 항목입니다. 사업자등록증과 동일하게 입력하세요.</CCErrorHint>
            )}
          </div>
        </div>
      </CCSection>

      {/* Section 3 — 세금계산서 */}
      <CCSection title="세금계산서 수신" subtitle="매월 정산 시 자동 발행 / 발송">
        <CCFieldLabel required hint="복수 수신 시 쉼표 구분">세금계산서 이메일</CCFieldLabel>
        <CCText
          value={p.taxEmail}
          placeholder="finance@company.com"
          mono
        />
        <CCHelpHint>월 마감 후 영업일 기준 3일 이내 발행됩니다.</CCHelpHint>
      </CCSection>
    </>
  );
};

const MethodGlyph = ({ kind }) => {
  const glyphs = {
    transfer: <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    card:     <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></>,
    prepay:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></>,
    postpay:  <><path d="M3 4l3 16h12l3-16"/><path d="M7 8h10"/></>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {glyphs[kind]}
    </svg>
  );
};

Object.assign(window, { CCStep2 });