// ────────────────────────────────────────────────────────────────────
// AW-018 · Settlement — banners (batch state + warnings)
// ────────────────────────────────────────────────────────────────────

const BatchBanner = ({ state }) => {
  if (state === 'queued') {
    return (
      <div style={{
        padding: '12px 16px', background: 'var(--n-100)', border: '1px solid var(--n-200)',
        borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: 'var(--n-200)', color: 'var(--n-500)', display: 'grid', placeItems: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 700, color: 'var(--n-700)' }}>배치 대기 중</div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--n-500)', marginTop: 2 }}>
            매월 1일 02:00 KST 자동 실행 · 다음 실행 <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--n-700)' }}>2026-05-01 02:00</span>
          </div>
        </div>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, color: 'var(--n-500)', padding: '2px 7px', background: '#fff', borderRadius: 3, border: '1px solid var(--n-200)' }}>QUEUED</span>
      </div>
    );
  }
  if (state === 'processing') {
    return (
      <div style={{
        padding: '12px 16px', background: '#EFF6FF', border: '1px solid #BFDBFE',
        borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: '#fff', color: '#1D4ED8', display: 'grid', placeItems: 'center', border: '1px solid #BFDBFE' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'spin 1.4s linear infinite' }}>
            <path d="M21 12a9 9 0 11-6.2-8.55"/>
          </svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 700, color: '#1E3A8A' }}>집계 진행 중</div>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, color: '#1D4ED8' }}>45 / 120 파트너</span>
            <span style={{ fontSize: 11, color: '#3B82F6' }}>· 5초 자동 갱신</span>
          </div>
          <div style={{ marginTop: 6, height: 5, background: '#DBEAFE', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ width: '37.5%', height: '100%', background: 'linear-gradient(90deg, #3B82F6, #1D4ED8)', borderRadius: 3 }}/>
          </div>
        </div>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, color: '#1D4ED8', padding: '2px 7px', background: '#fff', borderRadius: 3, border: '1px solid #BFDBFE' }}>PROCESSING</span>
      </div>
    );
  }
  if (state === 'completed') {
    return (
      <div style={{
        padding: '10px 16px', background: '#ECFDF5', border: '1px solid #A7F3D0',
        borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 26, height: 26, borderRadius: 13, background: '#fff', color: '#059669', display: 'grid', placeItems: 'center', border: '1px solid #A7F3D0' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="#059669"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19l11-11-1.4-1.4z"/></svg>
        </div>
        <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 700, color: '#065F46' }}>배치 완료</div>
        <div style={{ fontSize: 12, color: '#047857' }}>2026-05-01 02:14 KST · 120 파트너 / 5 기업 집계</div>
        <span style={{ marginLeft: 'auto', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, color: '#065F46', padding: '2px 7px', background: '#fff', borderRadius: 3, border: '1px solid #A7F3D0' }}>COMPLETED</span>
      </div>
    );
  }
  if (state === 'partial') {
    return (
      <div style={{
        padding: '12px 16px', background: '#FFFBEB', border: '1px solid #FDE68A',
        borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: '#fff', color: '#D97706', display: 'grid', placeItems: 'center', border: '1px solid #FDE68A' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L1 21h22L12 2zm0 15.5a1 1 0 110-2 1 1 0 010 2zm1-4h-2V9h2v4.5z"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 700, color: '#78350F' }}>부분 실패 — 실패 파트너 3건</div>
          <div style={{ fontSize: 12, color: '#92400E', marginTop: 2 }}>
            117/120 성공 · Tokyo Aesthetic Clinic, Kyoto Heritage Spa, Jeju Healing Resort
          </div>
        </div>
        <button style={{ padding: '6px 12px', background: '#D97706', border: 'none', borderRadius: 6, color: '#fff', fontFamily: 'Inter', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>실패 건 재실행</button>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, color: '#78350F', padding: '2px 7px', background: '#fff', borderRadius: 3, border: '1px solid #FDE68A' }}>PARTIAL_FAILURE</span>
      </div>
    );
  }
  if (state === 'failed') {
    return (
      <div style={{
        padding: '12px 16px', background: '#FEF2F2', border: '1px solid #FCA5A5',
        borderRadius: 8, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: '#fff', color: '#DC2626', display: 'grid', placeItems: 'center', border: '1px solid #FCA5A5' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path stroke="#fff" strokeWidth="2" strokeLinecap="round" d="M8 8l8 8M16 8l-8 8"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 700, color: '#991B1B' }}>배치 실패</div>
          <div style={{ fontSize: 12, color: '#991B1B', marginTop: 2 }}>DB connection timeout @ 02:03:42 · stage: aggregate_partner_revenue</div>
        </div>
        <button style={{ padding: '6px 12px', background: '#DC2626', border: 'none', borderRadius: 6, color: '#fff', fontFamily: 'Inter', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>전체 재실행</button>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, color: '#991B1B', padding: '2px 7px', background: '#fff', borderRadius: 3, border: '1px solid #FCA5A5' }}>FAILED</span>
      </div>
    );
  }
  return null;
};

const WarningBanner = ({ tone, icon, title, body, action }) => {
  const tones = {
    warning: { bg: '#FFFBEB', border: '#FDE68A', dark: '#78350F', mid: '#92400E', accent: '#D97706' },
    error:   { bg: '#FEF2F2', border: '#FCA5A5', dark: '#991B1B', mid: '#B91C1C', accent: '#DC2626' },
  };
  const t = tones[tone];
  return (
    <div style={{
      padding: '10px 14px', background: t.bg, border: `1px solid ${t.border}`,
      borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ color: t.accent, display: 'grid', placeItems: 'center' }}>{icon}</div>
      <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 700, color: t.dark }}>{title}</div>
      <div style={{ fontSize: 12, color: t.mid }}>· {body}</div>
      {action && <span style={{ marginLeft: 'auto', fontSize: 12, fontWeight: 600, color: t.accent, cursor: 'pointer' }}>{action} →</span>}
    </div>
  );
};

Object.assign(window, { BatchBanner, WarningBanner });