import { Btn } from '../components/common/Btn'
import { useState } from 'react'
import { managerApi } from '../api/clients'

export default function Notifications() {
  const [downloading, setDownloading] = useState(false)
  const [msg, setMsg] = useState('')

  const downloadReport = async () => {
    setDownloading(true)
    try {
      const r = await managerApi.get('/api/deploy/history')
      const lines = (r.data?.lines ?? []).join('\n')
      const blob = new Blob([lines], { type: 'text/plain' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url; a.download = `guardia-report-${new Date().toISOString().slice(0,10)}.txt`
      a.click(); URL.revokeObjectURL(url)
      setMsg('리포트 다운로드 완료')
    } catch { setMsg('리포트 생성 실패') }
    finally { setDownloading(false); setTimeout(() => setMsg(''), 3000) }
  }

  const ALERT_ITEMS = [
    { icon: '🚨', title: 'SLA 위반 알림',     desc: 'SR이 SLA 기한을 초과하면 알림 발송', enabled: true },
    { icon: '💔', title: '인시던트 발생 알림',  desc: 'CRITICAL 인시던트 생성 시 즉시 알림', enabled: true },
    { icon: '🚀', title: '배포 실패 알림',      desc: '배포 파이프라인 실패 시 알림',         enabled: false },
    { icon: '💻', title: '서버 오류 알림',      desc: '서비스 상태가 error로 변경 시 알림',   enabled: false },
  ]

  return (
    <div style={{ maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 20 }}>
      {msg && <div style={{ padding: '10px 16px', background: '#dcfce7', color: '#16a34a',
        borderRadius: 8, fontSize: 13 }}>✅ {msg}</div>}

      {/* 알림 설정 */}
      <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10, padding: '18px 22px' }}>
        <h3 style={{ margin: '0 0 16px', fontSize: 14, fontWeight: 600 }}>🔔 알림 설정</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {ALERT_ITEMS.map(item => (
            <div key={item.title} style={{ display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 14px', background: '#f8fafc', borderRadius: 8, border: '1px solid #e2e8f0' }}>
              <span style={{ fontSize: 18 }}>{item.icon}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{item.title}</div>
                <div style={{ fontSize: 11, color: '#64748b', marginTop: 2 }}>{item.desc}</div>
              </div>
              <label style={{ position: 'relative', display: 'inline-block', width: 40, height: 22 }}>
                <input type="checkbox" defaultChecked={item.enabled} style={{ opacity: 0, width: 0, height: 0 }} />
                <span style={{
                  position: 'absolute', cursor: 'pointer', inset: 0, borderRadius: 11,
                  background: item.enabled ? '#4f6ef7' : '#e2e8f0',
                  transition: '.2s',
                }}>
                  <span style={{
                    position: 'absolute', height: 16, width: 16, left: item.enabled ? 20 : 3,
                    bottom: 3, background: '#fff', borderRadius: '50%', transition: '.2s',
                  }} />
                </span>
              </label>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, fontSize: 11, color: '#94a3b8' }}>
          알림 채널 설정: GUARDiA ITSM → 설정 → 알림에서 이메일/메신저를 구성하세요.
        </div>
      </div>

      {/* 리포트 다운로드 */}
      <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10, padding: '18px 22px' }}>
        <h3 style={{ margin: '0 0 16px', fontSize: 14, fontWeight: 600 }}>📊 리포트</h3>
        <div style={{ display: 'flex', gap: 10 }}>
          <Btn variant="primary" size="sm" loading={downloading} onClick={downloadReport}>
            ⬇ 배포 이력 리포트 다운로드
          </Btn>
          <a href="http://zioinfo.co.kr:8001/api/report" target="_blank" rel="noreferrer">
            <Btn size="sm">📋 ITSM 월간 리포트</Btn>
          </a>
        </div>
      </div>
    </div>
  )
}
