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

const NGINX_SITES = [
  { name: 'zioinfo',         desc: '지오정보기술 홈페이지', port: '80/443' },
  { name: 'guardia-https',   desc: 'GUARDiA ITSM HTTPS',  port: '8443' },
  { name: 'gitea',           desc: 'Gitea Git 서버',       port: '3001' },
  { name: 'jenkins',         desc: 'Jenkins CI/CD',        port: '8088' },
  { name: 'guardia-manager', desc: 'GUARDiA Manager',      port: '8090' },
]

export default function ConfigNginx() {
  const [loading, setLoading] = useState(false)
  const [msg, setMsg]         = useState<{ text: string; ok: boolean } | null>(null)

  const reload = async () => {
    setLoading(true)
    try {
      await managerApi.post('/api/config/nginx/reload')
      setMsg({ text: 'Nginx 설정 테스트 후 리로드 완료', ok: true })
    } catch (e: unknown) {
      setMsg({ text: (e as { response?: { data?: { detail?: string } } }).response?.data?.detail ?? '실패', ok: false })
    } finally { setLoading(false); setTimeout(() => setMsg(null), 5000) }
  }

  return (
    <div style={{ maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 16 }}>
      {msg && (
        <div style={{ padding: '10px 16px', borderRadius: 8, fontSize: 13,
          background: msg.ok ? '#dcfce7' : '#fee2e2',
          color: msg.ok ? '#16a34a' : '#dc2626',
          border: `1px solid ${msg.ok ? '#bbf7d0' : '#fecaca'}` }}>
          {msg.ok ? '✅' : '❌'} {msg.text}
        </div>
      )}

      <div style={{ background: '#fff', border: '1px solid #e2e8f0', borderRadius: 10, padding: '18px 22px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Nginx 사이트 설정</h3>
          <Btn variant="primary" size="sm" loading={loading} onClick={reload}>
            🔄 설정 리로드 (nginx -t && reload)
          </Btn>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {NGINX_SITES.map(s => (
            <div key={s.name} style={{ display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 14px', background: '#f8fafc', borderRadius: 8,
              border: '1px solid #e2e8f0' }}>
              <span style={{ fontSize: 18 }}>🌐</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'monospace', fontSize: 13, fontWeight: 600 }}>{s.name}</div>
                <div style={{ fontSize: 12, color: '#64748b' }}>{s.desc}</div>
              </div>
              <span style={{ fontSize: 11, background: '#e8ecff', color: '#4f6ef7',
                padding: '2px 8px', borderRadius: 10 }}>:{s.port}</span>
              <span style={{ fontSize: 10, background: '#dcfce7', color: '#16a34a',
                padding: '2px 8px', borderRadius: 10 }}>활성</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 14, fontSize: 11, color: '#94a3b8' }}>
          설정 파일 경로: <code>/etc/nginx/sites-available/</code>
        </div>
      </div>
    </div>
  )
}
